/**
 * =============================================================================
 * BLOCK: Use Case Card (.use-case-card)
 * =============================================================================
 * Image-backed card with a glass-morphism label overlay at the bottom.
 *
 * Variants:
 *   .use-case-card--compact      → title + arrow only
 *   .use-case-card--descriptive  → title + description + arrow (default)
 *   .use-case-card--navigation   → circular icon + title + description + pill CTA
 *
 * State:
 *   .use-case-card.is-active     → outer lime-accent border (4px), applies
 *                                  to any variant — used by grids to
 *                                  highlight the selected card.
 *
 * Markup:
 *   <article class="use-case-card use-case-card--{variant} [is-active]">
 *     <a class="use-case-card__frame" href="...">
 *       <img class="use-case-card__image" ...>
 *       <div class="use-case-card__label">
 *         <div class="use-case-card__header">
 *           <span class="use-case-card__icon">…svg…</span>   <!-- navigation only -->
 *           <h3 class="use-case-card__title">…</h3>
 *           <span class="use-case-card__arrow">→</span>      <!-- compact/descriptive -->
 *         </div>
 *         <p class="use-case-card__description">…</p>
 *         <span class="use-case-card__cta">…</span>          <!-- navigation only -->
 *       </div>
 *     </a>
 *   </article>
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * OUTER WRAPPER
 * --------------------------------------------------------------------------- */
.use-case-card {
  position: relative;
  display: block;
  border-radius: 25px;
  transition: transform var(--transition-base);
}

.use-case-card:hover {
  transform: translateY(-4px);
}

/* ---------------------------------------------------------------------------
 * FRAME — the actual card visual.
 * The frame always reserves a transparent 4px outline at 6px offset so
 * the active state (lime accent) can appear without shifting layout.
 * This reproduces the Figma "4px lime outer border + 6px gap + 2px white
 * inner border" exactly.
 * --------------------------------------------------------------------------- */
.use-case-card__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3); /* 6px — Figma-exact */
  border: 2px solid var(--color-white-20);
  border-radius: var(--radius-lg); /* 20px */
  outline: 4px solid transparent;
  outline-offset: 6px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  min-height: 500px;
  aspect-ratio: 380 / 500;
  transition:
    border-color var(--transition-base),
    outline-color var(--transition-base);
}

/* ---------------------------------------------------------------------------
 * ACTIVE STATE — lime-accent outer ring (works on any variant)
 * --------------------------------------------------------------------------- */
.use-case-card.is-active .use-case-card__frame {
  outline-color: var(--color-text-accent);
}

.use-case-card--compact .use-case-card__frame {
  min-height: 360px;
  aspect-ratio: 280 / 360;
}

.use-case-card--navigation .use-case-card__frame {
  /* Compact navigation tiles (Home highlight row). The frame doesn't
     force an aspect-ratio so it fills its grid track width while keeping
     a 350px minimum height — enough for the glass label + a generous
     band of the background photo above it. */
  min-height: 350px;
  aspect-ratio: auto;
}

.use-case-card:hover .use-case-card__frame {
  border-color: var(--color-white-40);
}

.use-case-card__frame:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * IMAGE — fills the frame, subtle zoom on hover
 * --------------------------------------------------------------------------- */
.use-case-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform var(--transition-slow);
  pointer-events: none;
}

.use-case-card:hover .use-case-card__image {
  transform: scale(1.04);
}

/* ---------------------------------------------------------------------------
 * LABEL — glass-morphism overlay at bottom
 * --------------------------------------------------------------------------- */
.use-case-card__label {
  position: relative;
  z-index: var(--z-above);
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 10px */
  padding: var(--space-8); /* 16px */
  border: 1px solid var(--color-white-20);
  border-radius: var(--crop-card-label-radius); /* 14px */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--gradient-card-label);
}

.use-case-card--descriptive .use-case-card__label {
  background: var(--gradient-card-label-fade);
  padding-top: var(--space-10);   /* 20px top */
  padding-bottom: var(--space-8); /* 16px */
}

/* ---------------------------------------------------------------------------
 * HEADER — title row.
 * Reserves 2 lines of title height on the *header* (not the title) so that
 * a 1-line or 2-line title is vertically centred with the arrow/icon.
 *
 *   - 2 lines of 20px/28px = 56px   → default (compact / descriptive)
 *   - 2 lines of 24px/30px = 60px   → navigation variant, clamped to
 *                                     64px so it matches the 64px icon
 * --------------------------------------------------------------------------- */
.use-case-card__header {
  display: flex;
  align-items: center;      /* arrow / icon always centered with the title */
  gap: var(--space-5);      /* 10px */
  width: 100%;
  min-height: 56px;
}

.use-case-card--navigation .use-case-card__header {
  gap: 14px;                /* Figma-exact icon→title gap */
  min-height: 64px;         /* match the 64px icon badge */
}

/* ---------------------------------------------------------------------------
 * TITLE — clamps to 2 lines, natural height. Centring handled by the header.
 * --------------------------------------------------------------------------- */
.use-case-card__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl); /* 20px */
  line-height: 28px;
  color: var(--color-text-primary);
  text-transform: capitalize;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Navigation variant: larger title (24/30px — Figma) */
.use-case-card--navigation .use-case-card__title {
  font-size: 24px;
  line-height: 30px;
}

/* ---------------------------------------------------------------------------
 * TITLE-SM ITERATION — smaller title for maximum readability of long
 * use-case names (used by the Use Cases overview section cards). 16/22px
 * lets a longer title fill two lines without clipping; the header min-height
 * shrinks to 2 × 22px so the arrow stays vertically centred with the title.
 * --------------------------------------------------------------------------- */
.use-case-card--title-sm .use-case-card__title {
  font-size: var(--text-lg); /* 16px */
  line-height: 22px;
}

.use-case-card--title-sm .use-case-card__header {
  min-height: 44px; /* 2 × 22px */
}

/* ---------------------------------------------------------------------------
 * DESCRIPTION — aligned with the solution-card title style (Gilroy Regular,
 * 15px, 1.4) so descriptive cards across the Solutions hub read at the same
 * visual weight as the product cards.
 * --------------------------------------------------------------------------- */
.use-case-card__description {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Navigation description: Inter Regular (Figma) */
.use-case-card--navigation .use-case-card__description {
  /* Smaller font + lighter weight so a one-sentence description fits on a
     single line inside the glass label (the Home highlight row uses short
     copy like "Evaluating crops under real-world conditions."). The Home
     row keeps its Inter Regular treatment regardless of the Gilroy alignment
     applied to the descriptive variant. */
  font-family: var(--font-inter);
  font-size: var(--text-base); /* 14px */
  font-weight: var(--fw-regular);
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * ARROW — circular button (compact / descriptive)
 * --------------------------------------------------------------------------- */
.use-case-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--gradient-radial-green);
  border: var(--border-pill);
  border-radius: 22px;
  color: var(--color-white);
  transition: transform var(--transition-base);
}

.use-case-card:hover .use-case-card__arrow {
  transform: translateX(2px);
}

.use-case-card__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
 * NAVIGATION VARIANT — circular icon badge + full-width pill CTA
 * --------------------------------------------------------------------------- */
.use-case-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--color-text-accent);
  border: var(--border-pill);
  border-radius: 43px;
  color: var(--color-white);
}

/* When the icon is supplied as a full badge image (SVG already contains
   the lime disc, gradient border, and glyph), the span is just a sizing
   container — strip its own fill/border so nothing stacks on top. */
.use-case-card__icon--image {
  background: transparent;
  border: none;
}

.use-case-card__icon--image img {
  width: 100%;
  height: 100%;
  display: block;
}

.use-case-card__icon svg {
  width: 32px;
  height: 22px;
  overflow: visible;
}

/* Full-width pill CTA.
 * Uses the design-system `.btn.btn--primary.btn--md.btn--icon` base (pill,
 * radial-green, double border). The card only overrides layout: stretches
 * full-width and re-centres the content since the card CTA has a leading
 * chevron (left) instead of the usual trailing circle icon. */
.use-case-card__cta {
  width: 100%;
  justify-content: center;
  padding-inline: var(--space-12);
  /* Ensure the chevron+label cluster stays tight when centred */
  gap: var(--space-4);
}

/* Small chevron icon that sits before the label (Figma: 8×14 px). */
.use-case-card__cta-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.use-case-card__cta-chevron svg {
  width: 8px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
 * GRID HELPERS
 * --------------------------------------------------------------------------- */
.use-case-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

.use-case-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.use-case-card-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .use-case-card-grid,
  .use-case-card-grid--4,
  .use-case-card-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Drop the aspect-ratio on narrow viewports — otherwise width × (500/380)
     forces the frame far taller than the wrapping card's explicit height,
     and it spills into the next section. */
  .use-case-card__frame {
    min-height: 440px;
    aspect-ratio: auto;
  }

  .use-case-card--compact .use-case-card__frame {
    min-height: 320px;
    aspect-ratio: auto;
  }

  .use-case-card--navigation .use-case-card__frame {
    min-height: 320px;
  }
}

@media (max-width: 767px) {
  .use-case-card-grid,
  .use-case-card-grid--4,
  .use-case-card-grid--5 {
    grid-template-columns: 1fr;
  }

  .use-case-card__frame {
    min-height: 400px;
  }

  .use-case-card--compact .use-case-card__frame {
    min-height: 280px;
  }

  .use-case-card--navigation .use-case-card__frame {
    min-height: 300px;
  }

  .use-case-card__header {
    min-height: 50px;        /* 2 × 25px (mobile title line-height) */
  }

  .use-case-card--navigation .use-case-card__header {
    min-height: 52px;        /* match scaled-down 52px icon */
  }

  .use-case-card__title {
    font-size: 18px;         /* up from 16px — pushes long titles onto 2 lines, killing the reserved-line gap */
    line-height: 25px;
  }

  .use-case-card--navigation .use-case-card__title {
    font-size: 20px;
    line-height: 26px;
  }

  .use-case-card__description {
    font-size: var(--text-base);
  }

  .use-case-card__arrow {
    width: 40px;
    height: 40px;
  }

  .use-case-card__icon {
    width: 52px;
    height: 52px;
  }
}