/**
 * =============================================================================
 * BLOCK: Use Case Grid (.use-case-grid)
 * =============================================================================
 * Paginated 3-column grid of use-case cards. Clicking a card swaps it to
 * an "active" style (lime accent border + close button) and opens an inline
 * detail panel inserted after the last card of that row.
 *
 * Animation follows the crop-grid pattern exactly:
 *   grid-template-rows: 0fr → 1fr (+ opacity fade + slide-in keyframe).
 *
 * Markup (generated by view.js):
 *   <section class="use-case-grid">
 *     <div class="use-case-grid__wrapper">
 *       <div class="use-case-grid__cards">
 *         <article class="uc-grid__card">…</article>  × N per page
 *         <div class="uc-grid__detail is-open">…</div>
 *       </div>
 *       <nav class="uc-grid__pagination">…</nav>
 *     </div>
 *   </section>
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * SECTION
 * --------------------------------------------------------------------------- */
.use-case-grid {
  /* True 1200px content area, matching `.container` and the filter panel
     above (max-width includes the 120px gutters). */
  max-width: calc(var(--container-content) + 2 * var(--padding-x));
  margin-inline: auto;
  padding: var(--space-40) var(--padding-x);
  contain: layout style;
}

.use-case-grid__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* ---------------------------------------------------------------------------
 * CARD GRID
 * --------------------------------------------------------------------------- */
.uc-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16); /* 30px on desktop below */
}

@media (min-width: 1024px) {
  .uc-grid__cards { gap: 30px; }
}

/* ---------------------------------------------------------------------------
 * CARD — descriptive size (380×500 Figma), tuned min-height per breakpoint
 * so cards don't feel overly portrait at 3-col (narrow tracks) while
 * keeping the taller proportions at 2-col where each track is wider.
 * --------------------------------------------------------------------------- */
.uc-grid__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  padding: var(--space-3); /* 6px */
  border: 2px solid var(--color-white-20);
  border-radius: var(--radius-lg); /* 20px */
  /* Reserved transparent ring for the active state — keeps the border
     width fixed at 2px, so activation doesn't trigger any layout shift.
     Matches the .use-case-card pattern (outline-offset 6px, 4px ring). */
  outline: 4px solid transparent;
  outline-offset: 6px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    outline-color var(--transition-base),
    box-shadow var(--transition-base);
}

.uc-grid__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-white-40);
  box-shadow: var(--shadow-md);
}

.uc-grid__card:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 3px;
}

/* Active card — the reserved outline lights up in lime; border, radius
   and image inset all stay untouched, so the only visual delta is the
   outer ring appearing. Identical semantics to .use-case-card.is-active. */
.uc-grid__card--active {
  outline-color: var(--color-text-accent);
}

/* Card background image */
.uc-grid__card-image {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.uc-grid__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.uc-grid__card:hover .uc-grid__card-image img {
  transform: scale(1.04);
}

/* Glass label at the bottom — stacks a top row (title + arrow button)
   over a full-width description so the excerpt uses the entire inner
   width of the card instead of sharing horizontal space with the arrow. */
.uc-grid__card-label {
  position: relative;
  z-index: var(--z-above);
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 10px between head row and description */
  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-fade);
  transition: background var(--transition-base);
}

/* Top row inside the label: title (flex 1, clamps to 2 lines) + arrow
   (fixed 44px, flush-right). Arrow vertically centered with the title. */
.uc-grid__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-10); /* 20px */
  width: 100%;
}

.uc-grid__card--active .uc-grid__card-label {
  background: var(--gradient-card-label);
}

.uc-grid__card-title {
  /* flex: 1 + min-width: 0 lets the title fill the head row next to the
     arrow while still allowing line-clamp to kick in on long titles. */
  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: 1.4;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uc-grid__card-desc {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: var(--fw-regular);
  font-size: var(--text-base); /* 14px (was 16px) */
  line-height: 1.5;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right-side button (arrow → close when active) */
.uc-grid__card-button {
  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:
    background var(--transition-base),
    transform var(--transition-base);
}

.uc-grid__card:hover .uc-grid__card-button {
  transform: translateX(2px);
}

.uc-grid__card--active .uc-grid__card-button {
  background: var(--gradient-radial-glass);
  transform: none;
}

.uc-grid__card-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =============================================================================
 * DETAIL PANEL — inline expand/collapse (pattern from crop-grid)
 * ========================================================================== */
.uc-grid__detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--transition-modal),
    opacity var(--transition-base);
}

.uc-grid__detail.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.uc-grid__detail-wrapper {
  overflow: hidden;
  min-height: 0;
  padding-top: var(--space-10); /* 20px */
  animation: uc-grid-expand-in 0.4s ease;
}

@keyframes uc-grid-expand-in {
  from { transform: translateY(-12px); }
  to   { transform: translateY(0); }
}

/* Inner detail card */
.uc-grid__detail-card {
  position: relative;
  padding: var(--space-16); /* 32px */
  border-radius: var(--radius-lg);
  background: var(--color-bg-page);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

/* Close button — sits at the end of .uc-grid__detail-header as its last
   flex child; margin-left: auto pushes it to the far right while the
   header's align-items: center keeps it aligned with the use-case title
   row. Same visual language as the crop-grid modal close button. */
.uc-grid__detail-close {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: var(--space-4);
  background: var(--gradient-card-label-fade);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-circle);
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-base);
}

.uc-grid__detail-close:hover {
  background: var(--gradient-card-label-fade-hover);
  transform: rotate(90deg);
}

.uc-grid__detail-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* =============================================================================
 * DETAIL PANEL CONTENT
 * ========================================================================== */
.uc-grid__detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.uc-grid__detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--color-text-accent);
  border-radius: 43px;
  color: var(--color-white);
}

/* The Trait SVG ships in green gradient; force it to pure white inside the
   green badge so it reads correctly. brightness(0) collapses to black, then
   invert(1) flips to white — works on any colored fill or stroke. */
.uc-grid__detail-icon img {
  width: 35px;
  height: 28px;
  display: block;
  filter: brightness(0) invert(1);
}

.uc-grid__detail-icon svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
}

.uc-grid__detail-title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: 40px;
  line-height: 1.2;
  color: var(--color-text-primary);
}

/* -----------------------------------------------------------------------------
 * BODY — featured image + article, tech specs as a strip underneath
 * -----------------------------------------------------------------------------
 * Reworked 2026-09-03: the image used to be a thumbnail at the bottom of a tall
 * "Tech Specs" sidebar, which pushed a wall of label/value text to the top of
 * the panel. It now leads the panel as a full-height visual, the specs are a
 * compact three-up strip below the fold of the card, and the KPI figures moved
 * into the article column so they read alongside the copy they support.
 * --------------------------------------------------------------------------- */
.uc-grid__detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: stretch;
}

/* A use case with no image at all: the article takes the full width rather
   than leaving an empty track. */
.uc-grid__detail-body--no-media {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------------------
 * LEFT COLUMN — FEATURED IMAGE
 * --------------------------------------------------------------------------- */
.uc-grid__media {
  position: relative;
  margin: 0;
  /* Fills whatever height the article column ends up at, with a floor so the
     image stays the dominant element even next to short copy. */
  min-height: 420px;
  border: 3px solid var(--color-text-accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.uc-grid__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * RIGHT COLUMN — ARTICLE
 * --------------------------------------------------------------------------- */
.uc-grid__article {
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* 16px */
}

.uc-grid__article-title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: 32px;
  line-height: 1.25;
  color: var(--color-text-primary);
}

/* Clamped to keep the panel scannable; .uc-grid__article-more lifts the clamp
   and is hidden by JS when the copy already fits. */
.uc-grid__article-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
  font-family: var(--font-gilroy);
  font-weight: 300;
  font-size: var(--text-md); /* 15px */
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

.uc-grid__article-body.is-expanded {
  display: block;
  overflow: visible;
}

.uc-grid__article-body p { margin: 0 0 var(--space-8); }
.uc-grid__article-body p:last-child { margin-bottom: 0; }

.uc-grid__article-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-accent);
  cursor: pointer;
}

.uc-grid__article-more[hidden] { display: none; }
.uc-grid__article-more:hover { text-decoration: underline; }

.uc-grid__article-more-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
}

.uc-grid__article-more-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-grid__article-more[aria-expanded="true"] .uc-grid__article-more-icon {
  transform: rotate(-90deg);
}

/* KPI figures — inside the article column, hairline-separated rather than
   boxed, so they read as part of the copy instead of as a second panel. */
.uc-grid__kpis {
  display: grid;
  grid-template-columns: repeat(var(--uc-kpi-count, 3), minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-2);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-white-20);
}

.uc-grid__kpis[data-count="1"] { --uc-kpi-count: 1; }
.uc-grid__kpis[data-count="2"] { --uc-kpi-count: 2; }

.uc-grid__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.uc-grid__kpi-value {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: 40px;
  line-height: 1.1;
  color: var(--color-text-accent);
}

.uc-grid__kpi-label {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs); /* 12px */
  line-height: 1.35;
  color: var(--color-text-primary);
  opacity: 0.85;
}

.uc-grid__article-cta {
  align-self: flex-start;
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
 * TECH SPECS STRIP — up to three panels under the image + article
 * -----------------------------------------------------------------------------
 * Each spec is its own glass panel rather than a bare icon + text pair. With
 * only two specs (many use cases carry no crops) the auto-fit tracks are ~600px
 * wide, and content that hugged the left of each track left the whole strip
 * looking like a half-empty footer. As panels the tracks are visibly filled at
 * any count: 1, 2 or 3 across the same width.
 * --------------------------------------------------------------------------- */
.uc-grid__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-14); /* 28px */
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-white-20);
}

.uc-grid__spec {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-white-15);
  border-radius: var(--radius-md);
  background: var(--gradient-radial-glass);
}

/* A wrapping chip list makes the panel taller than the icon; keep the icon at
   the top so it stays aligned with the label rather than floating mid-panel. */
.uc-grid__spec--chips {
  align-items: flex-start;
}

.uc-grid__spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 11px;
  flex-shrink: 0;
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-sm);
  background: var(--color-white-10);
  color: var(--color-white);
}

.uc-grid__spec-icon img,
.uc-grid__spec-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.uc-grid__spec-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.uc-grid__spec-label {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs); /* 12px */
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white-70);
}

.uc-grid__spec-value {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: var(--text-md); /* 15px — the panel gives it room to breathe */
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* The Crops row renders one chip per crop; those backed by a published `crop`
   post are links that open the matching modal on the Crops page. */
.uc-grid__spec--chips .uc-grid__spec-value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.uc-grid__crop {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-full);
  font-family: var(--font-inter);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.uc-grid__crop--link {
  border-color: var(--color-text-accent);
  color: var(--color-text-accent);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base);
}

.uc-grid__crop--link:hover,
.uc-grid__crop--link:focus-visible {
  background: var(--color-text-accent);
  color: var(--color-text-dark);
}

/* =============================================================================
 * PAGINATION
 * ========================================================================== */
.uc-grid__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding-top: var(--space-10);
}

.uc-grid__page-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--border-pill);
  border-radius: 22px;
  background: var(--gradient-radial-glass);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-base), opacity var(--transition-base);
}

.uc-grid__page-nav:hover:not(:disabled) {
  background: var(--gradient-radial-green);
}

.uc-grid__page-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.uc-grid__page-nav svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-grid__page-nav--prev svg { transform: rotate(180deg); }

.uc-grid__pages {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.uc-grid__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 20px;
  color: var(--color-text-primary);
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.uc-grid__page:hover { background: var(--color-white-10); }

.uc-grid__page--active {
  border: var(--border-pill);
  background: var(--gradient-radial-green);
}

/* =============================================================================
 * RESPONSIVE
 * ========================================================================== */
@media (max-width: 1199px) {
  .use-case-grid {
    padding-inline: var(--padding-x-md);
  }

  .uc-grid__detail-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .uc-grid__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2-col tracks are ~2× wider than the desktop 3-col tracks; bring back
     the full 500px Figma height so the cards keep a near-square, balanced
     ratio rather than becoming flat landscape blocks. */
  .uc-grid__card {
    min-height: 500px;
  }

  /* Single column: the image stacks above the article, so cap its height —
     a 420px-min block that also stretches would dominate the whole panel. */
  .uc-grid__detail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .uc-grid__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .uc-grid__detail-title { font-size: 32px; }
  .uc-grid__article-title { font-size: 26px; }
}

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

  .uc-grid__cards {
    grid-template-columns: 1fr;
  }

  .uc-grid__card {
    min-height: 420px;
  }

  .uc-grid__detail-header { gap: var(--space-8); }
  .uc-grid__detail-icon { width: 52px; height: 52px; }
  .uc-grid__detail-icon img { width: 28px; height: 22px; }
  .uc-grid__detail-title { font-size: 24px; }
  .uc-grid__detail-card { padding: var(--space-10); }

  /* Three KPIs never fit side by side on a phone; two-up wraps cleanly and
     keeps the figures readable at 32px. */
  .uc-grid__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-grid__kpi-value { font-size: 32px; }

  .uc-grid__specs { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .uc-grid__spec { padding: var(--space-5) var(--space-6); }
  .uc-grid__spec-icon { width: 44px; height: 44px; padding: 9px; }
  .uc-grid__spec-icon img,
  .uc-grid__spec-icon svg { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------------------
 * EMPTY STATE (filtered to 0 results)
 * --------------------------------------------------------------------------- */
.uc-grid__empty {
  margin: 0;
  padding: var(--space-20) var(--padding-x);
  text-align: center;
  font-family: var(--font-inter);
  font-size: var(--text-base);
  color: var(--color-white-70);
}
.uc-grid__empty[hidden] { display: none; }