/**
 * =============================================================================
 * BLOCK: Use Case Section (.use-case-section)
 * =============================================================================
 * Layout-only stylesheet. All visual atoms (button, use-case card) are styled
 * by their own shared components — this file only arranges them into the
 * three-row composition and applies the typography unique to the section
 * (H2 + lead + value tiles).
 *
 * Structure:
 *   .use-case-section
 *     .use-case-section__header       → H2 (left) + CTA (right), flex row
 *     .use-case-section__values-band  → lead + eyebrow + value tiles, full width
 *     .use-case-section__cards        → 3 descriptive use-case cards (3-col grid)
 * =============================================================================
 */

.use-case-section {
  display: flex;
  flex-direction: column;
  gap: 41px;
  /* Match the site-wide `.container` so the content area is a true 1200px
     on desktop (max-width includes the 120px gutters, like every other
     reworked page). Previously `var(--container-content)` capped the box at
     1200px *including* padding, shrinking the content to ~960px. */
  max-width: calc(var(--container-content) + 2 * var(--padding-x));
  margin-inline: auto;
  /* Vertical rhythm — matches the major-section cadence used on the
     Solutions page (.sol-app-fields, .sol-uc, .sol-products). Total gap
     between two stacked use-case-section instances ≈ 140px, comparable
     to the Figma inter-section breathing on the overview page. */
  padding-block: calc(var(--space-40) - 10px);
  padding-inline: var(--padding-x);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------------
 * HEADER ROW (title + CTA)
 *
 * The H2 is always flush left and the CTA always flush right, in every
 * section — including the reversed ones, which used to mirror this row too.
 * A predictable title column is what makes the stack of sections scannable.
 * --------------------------------------------------------------------------- */
.use-case-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}

.use-case-section__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  /* Fluid — 28px floor on phones, up to 46px (Figma spec) on wide desktop. */
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.2;
  color: var(--color-white);
}

.use-case-section__cta {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * VALUE BAND — the section's headline message
 *
 * These tiles are the reason a visitor should care about the segment, so they
 * get the treatment the rest of the page does not:
 *   - the full content width, directly under the H2 and its lead, so they are
 *     the first thing read in the section;
 *   - a lime-tinted surface and a filled lime icon disc. Nothing else on the
 *     page uses lime as a *surface* (buttons aside), so the band registers
 *     before the card photos do;
 *   - label AND caption legible at rest. The caption used to be a hover-only
 *     overlay, which meant the whole value proposition was invisible to anyone
 *     who did not hover, and entirely absent on touch.
 *
 * The lead sits inside the band rather than as a sibling of it, so it stays
 * tied to the tiles it introduces instead of floating halfway between the H2
 * and the band on the section's 41px rhythm.
 *
 * Motion is deliberately cheap and reuses the global system:
 *   - the grid is [data-stagger], each tile is [data-animate="fade-up"], so
 *     assets/js/animations.js sequences the reveal (80ms apart) with no new JS;
 *   - on reveal, the icon strokes draw themselves via stroke-dashoffset. This
 *     works because every icon path in inc/icons.php declares pathLength="100",
 *     making a single dasharray value valid for all of them.
 * --------------------------------------------------------------------------- */
.use-case-section__values-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

/* Intro sentence for the segment. Runs the full width of the section (no ch
   cap): the tile grid below it already spans 1200px, and a paragraph stopping
   short of that read as a stray column. The extra bottom margin separates it
   from the eyebrow without loosening the eyebrow → tiles pairing. */
.use-case-section__lead {
  margin: 0 0 var(--space-2);
  font-family: var(--font-inter);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.use-case-section__values-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 1.6px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-light-green);
}

/* Short lime rule — same accent language as the CTA button. */
.use-case-section__values-title::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-cta);
}

/* One row wherever the tiles fit: at 1200px the 5 tiles every segment carries
   land on 5 equal columns, and auto-fit collapses the empty track so they still
   stretch edge to edge. 4 or 6 tiles work the same way; 7+ wraps. */
.use-case-section__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Icon at the top, then label, then caption. Equal-height tiles (stretch is the
   grid default) keep the row reading as one band rather than five objects. */
.use-case-section__value {
  position: relative;
  /* Own stacking context, so the ::after glow below can sit at z-index 0 and
     the tile's text can sit above it at z-index 1 without leaking into the
     page's stacking order. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10);
  /* Lime border and surface at rest, not on hover: this is what pulls the eye
     to the band before it reaches the photo or the cards below. */
  border: 1px solid var(--color-glass-lime-22);
  border-radius: var(--radius-lg);
  background: var(--color-glass-lime-06);
  box-shadow: var(--shadow-inset-glass);
  overflow: hidden;
  transition:
    transform    var(--transition-base),
    border-color var(--transition-base),
    background   var(--transition-base),
    box-shadow   var(--transition-base);
}

/* Lime glow that blooms from the icon corner on hover. A pseudo-element rather
   than a second background layer, because opacity interpolates smoothly where
   a gradient background would snap. */
.use-case-section__value::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    120% 120% at 0% 0%,
    var(--color-glass-lime-18) 0%,
    transparent 60%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

/* Above the glow. */
.use-case-section__value-icon,
.use-case-section__value-label,
.use-case-section__value-caption {
  position: relative;
  z-index: 1;
}

.use-case-section__value:hover {
  transform: translateY(-3px);
  border-color: var(--color-glass-lime-50);
  background: var(--color-glass-lime-12);
  box-shadow: var(--shadow-glow-green);
}

.use-case-section__value:hover::after {
  opacity: 1;
}

/* Filled lime disc at rest (it used to be glass, going green only on hover).
   A saturated 56px disc is the single strongest attention cue available here,
   and five of them in a row read as a deliberate icon set. `align-self` keeps
   the disc circular instead of stretching to the tile width. */
.use-case-section__value-icon {
  display: grid;
  place-items: center;
  align-self: flex-start;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--gradient-radial-green);
  box-shadow: var(--shadow-glow-green);
  color: var(--color-white);
  transition:
    box-shadow var(--transition-base),
    transform  var(--transition-base);
}

.use-case-section__value-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
}

.use-case-section__value:hover .use-case-section__value-icon {
  transform: scale(1.08);
}

/* Draw-on: every icon element is normalised to pathLength="100", so a single
   dasharray covers exactly one full stroke regardless of the real geometry.
   The undrawn state is only entered when scripting is available — nothing
   here clears it otherwise, and an icon that never draws is an invisible
   icon. Browsers without `scripting` support simply skip the animation and
   show the icons outright. */
@media (scripting: enabled) {
  .use-case-section__value-icon svg > * {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--stagger-index, 0) * 80ms + 180ms);
  }

  .use-case-section__value.is-visible .use-case-section__value-icon svg > * {
    stroke-dashoffset: 0;
  }
}

/* 20px: the label is the promise itself, so it is set at the same size as a
   use-case card title rather than as list text.
   Two lines are reserved even for a 1-line label, so every caption in the row
   starts at the same height — the same reservation .use-case-card__header makes
   for its own title. Without it, a mix of 1-line and 2-line labels leaves the
   captions stepping up and down across the band. */
.use-case-section__value-label {
  min-height: 2.6em; /* 2 × line-height */
  font-family: var(--font-gilroy);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-white);
}

/* In the flow, always legible. This is the actual value proposition, so it is
   not hidden behind a hover any more. */
.use-case-section__value-caption {
  font-family: var(--font-inter);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .use-case-section__value,
  .use-case-section__value::after,
  .use-case-section__value-icon {
    transition: none;
  }

  .use-case-section__value:hover,
  .use-case-section__value:hover .use-case-section__value-icon {
    transform: none;
  }

  .use-case-section__value-icon svg > * {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * CARDS ROW (3 descriptive use-case-cards)
 *
 * The .use-case-card itself (image, label, arrow pill, hover) is styled by
 * blocks/use-case-card/style.css. This grid, plus the block of overrides
 * below, aligns those cards on the library-grid card (.uc-grid__card in
 * blocks/use-case-grid/style.css) so the same use case reads identically on
 * both pages.
 *
 * Why overrides rather than a change to the shared component: the descriptive
 * variant also serves the Solutions hub, where it keeps its 380×500 portrait
 * frame and Gilroy description. Only the geometry and copy styling that differ
 * from the library card are restated here.
 * --------------------------------------------------------------------------- */
.use-case-section__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* library grid gap */
  width: 100%;
}

/* Library frame: 400px landscape box, no forced aspect-ratio. */
.use-case-section__cards .use-case-card--descriptive .use-case-card__frame {
  min-height: 400px;
  aspect-ratio: auto;
}

/* Library label: even 16px padding (the shared variant pads 20px on top). */
.use-case-section__cards .use-case-card__label {
  padding: var(--space-8);
}

/* Library head row: 20px title→arrow gap, height driven by the title itself
   instead of the shared 2-line reservation. */
.use-case-section__cards .use-case-card__header {
  gap: var(--space-10);
  min-height: 0;
}

/* Library title: 20px/1.4 at every breakpoint (the shared component drops to
   18px on phones). */
.use-case-section__cards .use-case-card__title {
  font-size: var(--text-xl);
  line-height: 1.4;
}

/* Library description: Inter 14px, clamped to 3 lines. */
.use-case-section__cards .use-case-card__description {
  font-family: var(--font-inter);
  font-size: var(--text-base);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .use-case-section {
    gap: 32px;
    padding-block: var(--space-24);
    padding-inline: var(--padding-x-md);
  }

  /* Narrower tracks, so 5 tiles still land on 2 rows instead of dropping to a
     single wide column each. */
  .use-case-section__values {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  /* 2 columns, like the library grid at this breakpoint. */
  .use-case-section__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Wider tracks at 2-col, so the library card brings back its full 500px
     height rather than flattening into a landscape block (.uc-grid__card
     does exactly this at the same breakpoint). */
  .use-case-section__cards .use-case-card--descriptive .use-case-card__frame {
    aspect-ratio: auto;
    min-height: 500px;
  }
}

@media (max-width: 767px) {
  .use-case-section {
    gap: 24px;
    padding-block: var(--space-20);
    padding-inline: var(--padding-x-sm);
  }

  .use-case-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
  }

  .use-case-section__cta {
    align-self: stretch;
    justify-content: center;
  }

  .use-case-section__lead {
    font-size: var(--text-lg);
  }

  /* One tile per row on phones. Two columns would squeeze the caption into a
     4-line sliver and undo the whole point of showing it, and the band is the
     content worth scrolling for here. */
  .use-case-section__values {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Landscape tile at 1-col: the disc moves beside the text instead of above it,
     so a full-width tile is not 3 lines of empty space plus an icon. */
  .use-case-section__value {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon label"
      "icon caption";
    align-items: start;
    gap: var(--space-4) var(--space-8);
    padding: var(--space-8);
  }

  .use-case-section__value-icon {
    grid-area: icon;
    align-self: center;
    width: 48px;
    height: 48px;
  }

  .use-case-section__value-icon svg {
    width: 24px;
    height: 24px;
  }

  /* Nothing to align across a single column, so the label goes back to hugging
     its own text. */
  .use-case-section__value-label {
    grid-area: label;
    min-height: 0;
    font-size: var(--text-lg);
  }

  .use-case-section__value-caption {
    grid-area: caption;
    font-size: var(--text-base);
  }

  /* Single column, no max-width — card fills the section's content width
     edge to edge, mirroring .uc-grid__card's mobile layout. */
  .use-case-section__cards {
    grid-template-columns: 1fr;
  }

  /* 420px — the library card's own mobile height. */
  .use-case-section__cards .use-case-card--descriptive .use-case-card__frame {
    min-height: 420px;
  }
}