/* ==========================================================================
   AKA CONNECT — solutions page
   Figma node 176:6416 (1470x2415): hero over a soft wash, an industry list
   beside one industry panel, then the shared pricing teaser (home.css).
   ========================================================================== */

/* ---------- hero ---------- */

.s-hero {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 60px var(--gutter) 0;
  text-align: center;
}

/* the wash behind the hero — Figma 176:6417, a flipped gradient */
.s-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 476px;
  z-index: -1;
  border-radius: 40px 40px 0 0;
  background: linear-gradient(to bottom, var(--light-gray), rgba(255, 255, 255, 0));
}

.s-hero__heading { display: flex; flex-direction: column; gap: 10px; max-width: 851px; margin: 0 auto; }
.s-hero__title {
  font: var(--h1);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.s-hero__title em { font-style: normal; color: var(--gray-purple); }
.s-hero__lead {
  max-width: 428px;
  margin: 40px auto 0;
  font: var(--t1);
  letter-spacing: 0;
  color: var(--ink-text);
}

/* ---------- industry chooser ---------- */

.industries {
  display: grid;
  grid-template-columns: 340px minmax(0, 946px);
  gap: 20px;
  justify-content: center;
  max-width: var(--shell);
  margin: 60px auto 0;
  padding: 0 var(--gutter);
  /* both columns share the row height — with `start` the shorter tab list
     stopped 34px above the panel beside it */
  align-items: stretch;
}

/* the list — Figma 183:7276 */
.industries__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 30px;
  border-radius: var(--r-plan);
  background: rgba(242, 243, 246, .7);
}
.industry-tab {
  padding: 3px 0;
  text-align: left;
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink-text);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}
.industry-tab[aria-selected="true"] {
  color: var(--purple);
  border-bottom-color: var(--purple);
}
.industry-tab:hover { color: var(--purple); }
.industry-tab:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 2px;
}

/* the panel — Figma 176:6961, pill-rounded on the right */
.industry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 464px;
  gap: 20px;
  min-height: 373px;
  padding: 5px;
  overflow: hidden;
  background: var(--light-gray);
  border-radius: 20px 128px 128px 20px;
}
.industry__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 25px;
}
.industry__name { font: var(--h3); letter-spacing: 0; text-transform: uppercase; color: #000; }
.industry__desc {
  max-width: 333px;
  margin-top: 10px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--gray-purple);
}
.industry__list { display: flex; flex-direction: column; gap: 10px; }
.industry .btn-pill { align-self: flex-start; }

.industry__media { padding: 5px; border-radius: var(--r-btn); overflow: hidden; }
.industry__media img {
  width: 100%;
  height: 100%;
  border-radius: 119px;
  object-fit: cover;
}

/* the small floating still that overlaps the photo — Figma 251:9004 */
/* Each panel sits its illustration at its own offset and width (Figma
   251:9161); height follows the artwork so nothing is cropped. */
.industry__inset {
  position: absolute;
  height: auto;
}
#panel-ec .industry__inset { left: 321px; top: 127px; width: 221px; }
#panel-log .industry__inset { left: 347px; top: 169px; width: 219px; }
#panel-fin .industry__inset { left: 378px; top: 174px; width: 189px; }
#panel-trv .industry__inset { left: 365px; top: 185px; width: 234px; }
#panel-tel .industry__inset { left: 407px; top: 164px; width: 169px; }
#panel-saas .industry__inset { left: 376px; top: 164px; width: 211px; }

/* ---------- motion ----------
   Switching a tab swaps one panel for another with no transition, which reads
   as a flicker, so the panel fades up and its photo settles from a slight
   overscale.

   Deliberately no fill-mode and no delay: with `both` the panel would hold its
   `from` state (opacity 0) whenever animations do not actually run — print, or
   a tab the browser has stopped painting — and the content would be invisible
   rather than merely unanimated. Without fill, the element's own state is the
   resting state and the animation only adds motion on top. That rules out a
   staggered entrance, which needs per-item delays to work.

   base.css already collapses these under prefers-reduced-motion. */

@keyframes industry-in {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes industry-media-in {
  from { opacity: 0; transform: scale(1.04); }
}
@keyframes industry-float {
  50% { transform: translateY(-9px); }
}

.industry:not([hidden]) {
  animation: industry-in .34s cubic-bezier(.2, .7, .3, 1);
}
.industry:not([hidden]) .industry__media {
  animation: industry-media-in .55s cubic-bezier(.2, .7, .3, 1);
}
/* the drift is a loop, so it never holds a hidden state */
.industry:not([hidden]) .industry__inset {
  animation: industry-float 7s ease-in-out infinite;
}

.industry-tab { transition: color .18s ease, border-color .18s ease; }

/* ---------- responsive ---------- */

@media (max-width: 1380px) {
  .industries { grid-template-columns: 280px minmax(0, 1fr); }
  .industry__inset { display: none; }
}

@media (max-width: 1000px) {
  .industries { grid-template-columns: 1fr; }
  .industries__list { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
  .industry { grid-template-columns: 1fr; border-radius: var(--r-plan); }
  .industry__media { min-height: 220px; }
  .industry__media img { border-radius: var(--r-plan); }
}

@media (max-width: 720px) {
  .s-hero { padding: 32px var(--gutter) 0; }
  .s-hero__title { font-size: 34px; }

  /* ---- industries, phone — Figma 278:18648 ----
     No chooser: every industry is on the page in turn, photo first, running
     to both screen edges. solutions.js drops the tab roles to match. */
  .industries { display: block; padding: 0; }
  .industry {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 10px;
    border-radius: 24px;
  }
  .industry + .industry { margin-top: 20px; }
  /* The entrance belongs to a tab switch; stacked, all six would play at once.
     Matching the animation rules' own specificity, or they win. */
  .industry:not([hidden]),
  .industry:not([hidden]) .industry__media { animation: none; }
  /* the photo leads, and keeps the deep rounding the wide layout gives it */
  .industry__media { order: -1; min-height: 0; padding: 0; }
  .industry__media img { height: auto; border-radius: 100px; }
  .industry__body { gap: 16px; padding: 0 10px 10px; }
  .industry__desc { max-width: none; }
  .industry .btn-pill { align-self: stretch; }
}