/**
 * =============================================================================
 * PAGE: Solutions (Hub + Field + Controlled + Harvest)
 * =============================================================================
 * Shared styles for all Solutions pages.
 *
 * Hub layout (page-solutions.php) is orchestrated via registered Gutenberg
 * blocks (hero-banner, solution-finder, use-case-card, solution-card) — each
 * block carries its own CSS. This file styles:
 *   - inline hub sections (intro, app-fields, use-cases, products grids)
 *   - shared sub-page layouts (screenshots, image grid, crops grid)
 *   - section-level utility classes used across all 4 Solutions templates
 *
 * All values from variables.css. BEM naming. Mobile-first.
 * =============================================================================
 */

/* =========================================================================
 * SHARED SECTION LAYOUT (used by hub + sub-pages)
 * ========================================================================= */
.sol-fields,
.sol-use-cases,
.sol-products,
.sol-detail,
.sol-crops {
  padding: var(--space-40) var(--padding-x);
}

.sol-section__inner {
  max-width: var(--container-content);
  margin-inline: auto;
}

.sol-section__title {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-white);
  margin-bottom: var(--space-10);
}

.sol-section__desc {
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
  max-width: 880px;
  margin-bottom: var(--space-16);
}

/* Section header with inline button */
.sol-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.sol-section__header .sol-section__title {
  margin-bottom: 0;
}

/* =========================================================================
 * HUB — container sizing is handled site-wide by `.container` in base.css.
 * ========================================================================= */

/* =========================================================================
 * HUB SECTION 2 — INTRO ("Find Your Go-To Phenotyping Product")
 * Title + single-paragraph block, no cards. Sits directly below the hero.
 * ========================================================================= */
.sol-intro {
  padding: calc(var(--space-30) - 10px) 0 calc(var(--space-20) - 10px);
}

.sol-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.sol-intro__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

.sol-intro__desc {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
}

/* Solution finder sits in the hub between the intro and the application
   fields — pull it tight so the page reads as one connected block. */
.solutions-page > .finder {
  margin-block: var(--space-7) var(--space-24);
}

/* =========================================================================
 * HUB SECTION 4 — APPLICATION FIELDS (3 descriptive use-case cards)
 * Figma: 1200×766 — title + intro + 3 cards at 380×500 with 30px gutter.
 * ========================================================================= */
.sol-app-fields {
  padding: var(--space-24) 0;
}

.sol-app-fields__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.sol-app-fields__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

.sol-app-fields__desc {
  margin: 0 0 var(--space-16);
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
}

.sol-app-fields__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

.sol-app-fields__grid .use-case-card {
  height: 500px; /* Figma: 380 × 500 */
}

@media (max-width: 1023px) {
  .sol-app-fields__grid {
    grid-template-columns: 1fr;
  }

  /* Let the card grow with its frame at narrow widths — the frame's
     min-height controls the visible size now that aspect-ratio is off. */
  .sol-app-fields__grid .use-case-card {
    height: auto;
  }
}

/* =========================================================================
 * HUB SECTION 5 — USE CASES (4 compact use-case cards) — hub-specific
 * Figma: 1200×671 — header (title + CTA) + intro + 4 cards at 285×360.
 *
 * NOTE: this `.sol-uc` class is intentionally distinct from the shared
 * `.sol-use-cases` (used by sub-pages with the .card-uc-grid layout).
 * ========================================================================= */
.sol-uc {
  padding: var(--space-24) 0;
}

.sol-uc__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.sol-uc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.sol-uc__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

.sol-uc__desc {
  margin: 0 0 var(--space-12);
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
}

.sol-uc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

.sol-uc__grid .use-case-card {
  height: 360px; /* Figma: 285 × 360 */
}

@media (max-width: 1023px) {
  .sol-uc__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sol-uc__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Same fix as .sol-app-fields above — let the card adapt to the frame
     once aspect-ratio is dropped at this breakpoint. */
  .sol-uc__grid .use-case-card {
    height: auto;
  }
}

@media (max-width: 640px) {
  .sol-uc__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
 * HUB SECTION 6 — ALL HIPHEN PRODUCTS (3+2 solution-card grid)
 *
 * Figma: 1200×1015 — header (title + CTA) + intro, then two rows of
 * solution cards:
 *   row 1 → 3 equal cards (PhenoScale, Literal, PhenoMobile) at ~390×360
 *   row 2 → 2 equal cards (PhenoStation, Cloverfield) at ~590×360
 *
 * Both rows reuse the same grid-gutter (20px). Sub-pages use
 * `.card-product-grid` and are untouched by these styles (different class).
 * ========================================================================= */
.solutions-page .sol-products {
  /* Override the shared `.sol-products` padding from the sub-page block above
     because the hub uses the container helper for inner padding. Aligned on the
     ~48px section rhythm used across Home / Crops / About. */
  padding: var(--space-24) 0;
}

.sol-products__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.sol-products__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.sol-products__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

.sol-products__desc {
  margin: 0 0 var(--space-12);
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
}

.sol-products__row {
  display: grid;
  gap: var(--grid-gutter);
}

.sol-products__row--top {
  grid-template-columns: repeat(3, 1fr);
}

.sol-products__row--bottom {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--grid-gutter);
}

.sol-products__row .solution-card {
  height: 360px;
}

@media (max-width: 1023px) {
  .sol-products__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sol-products__row--top,
  .sol-products__row--bottom {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .sol-products__row--top,
  .sol-products__row--bottom {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
 * SUB-PAGE: SCREENSHOTS LAYOUT (main + 2 side)
 * ========================================================================= */
.sol-screenshots {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--grid-gutter);
  margin-bottom: var(--space-16);
}

.sol-screenshots__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-white-10);
}

.sol-screenshots__side {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
}

.sol-screenshots__side img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-white-10);
}

/* =========================================================================
 * IMAGE GRID (application fields, data screenshots)
 * ========================================================================= */
.sol-img-grid {
  display: grid;
  gap: var(--grid-gutter);
}

.sol-img-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.sol-img-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.sol-img-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-white-10);
  transition: transform var(--transition-base);
}

.sol-img-card:hover {
  transform: translateY(-3px);
}

.sol-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================================
 * USE CASE GRID OVERRIDES (2-col and 3-col variants)
 * ========================================================================= */
.card-uc-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.card-uc-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* =========================================================================
 * CROP CARDS GRID
 * ========================================================================= */
.sol-crop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

.sol-crop-grid--5col {
  grid-template-columns: repeat(5, 1fr);
}

.sol-crop-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-white-10);
  aspect-ratio: 1;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base);
}

.sol-crop-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-white-20);
}

.sol-crop-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sol-crop-card__name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6) var(--space-8);
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  color: var(--color-white);
  background: linear-gradient(180deg, transparent, rgba(4, 48, 65, 0.8));
  text-align: center;
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media (max-width: 1023px) {
  .sol-fields,
  .sol-use-cases,
  .sol-products,
  .sol-detail,
  .sol-crops {
    padding-inline: var(--padding-x-md);
  }

  .sol-section__title,
  .sol-intro__title,
  .sol-app-fields__title,
  .sol-uc__title,
  .sol-products__title {
    font-size: var(--text-2xl);
  }

  .sol-screenshots {
    grid-template-columns: 1fr;
  }

  .sol-img-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-uc-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-crop-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sol-crop-grid--5col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .sol-fields,
  .sol-use-cases,
  .sol-products,
  .sol-detail,
  .sol-crops {
    padding-inline: var(--padding-x-sm);
    padding-block: var(--space-24);
  }

  .sol-section__title,
  .sol-intro__title,
  .sol-app-fields__title,
  .sol-uc__title,
  .sol-products__title {
    font-size: var(--text-xl);
  }

  .sol-intro,
  .sol-app-fields,
  .solutions-page .sol-products {
    padding-block: calc(var(--space-24) - 10px);
  }

  .sol-img-grid--3col,
  .sol-img-grid--2col {
    grid-template-columns: 1fr;
  }

  .card-uc-grid--3col,
  .card-uc-grid--2col {
    grid-template-columns: 1fr;
  }

  .sol-crop-grid,
  .sol-crop-grid--5col {
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-section__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================================
 * SOLUTIONS — FIELD SUB-PAGE  (.solutions-field-page)
 * =============================================================================
 * Figma reference: node 927:16317 — "Solutions - Field"
 *
 * Composition (all sections use `.container` for horizontal sizing, so the
 * effective content area is exactly 1200px on desktop):
 *
 *   .solfld-detail     — title + intro + composite (field photo + laptop) + video
 *   .solfld-use-cases  — title row + intro + 3 descriptive use-case-cards
 *   .solfld-crops      — title row + 4 compact use-case-cards
 *   .solfld-products   — title + 3 compact solution-cards
 *
 * Vertical rhythm and typography match the legacy `.sol-section__*` rules
 * (kept for backwards compatibility with controlled + harvest sub-pages
 * until they are also refondues).
 * ========================================================================== */

.solfld-detail,
.solfld-use-cases,
.solfld-crops,
.solfld-products {
  /* var(--space-24) = 48px per side → ~96px between adjacent sections, matching
     the section rhythm of Home / Crops / About. The previous 64px per side read
     as oversized gaps compared to the rest of the site. */
  padding-block: var(--space-24);
}

/* ----- Shared section primitives (field-scoped) --------------------------- */
.solfld-section__title {
  margin: 0 0 var(--space-10);
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

.solfld-section__desc {
  margin: 0 0 var(--space-16);
  font-family: var(--font-inter);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  text-align: justify;
}

.solfld-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.solfld-section__header .solfld-section__title {
  margin-bottom: 0;
}

/* Multi-paragraph intros (e.g. All Products) use `.solfld-section__desc` as a
   <div> wrapping <p> children rather than a single <p>. Single-<p> usages on
   the sub-pages stay untouched because <p> can't nest <p>. */
.solfld-section__desc p {
  margin: 0 0 var(--space-12);
}

.solfld-section__desc p:last-child {
  margin-bottom: 0;
}

/* =============================================================================
 * 2. OUR SOLUTIONS — composite (field photo + overlapping laptop) + video
 *
 * Figma: a 1200×439 group with the field photo as a 859×439 rounded block
 * pinned to the right, and a 498×283 laptop image overlapping the bottom-left.
 * ========================================================================== */
.solfld-detail__composite {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 439;
  margin-bottom: var(--space-20);
}

.solfld-detail__field-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(859 / 1200 * 100%);
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.solfld-detail__laptop {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(498 / 1200 * 100%);
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* =============================================================================
 * 3. USE CASES grid — 3 descriptive cards (380×500 in Figma)
 * Cards are queried from the use_case CPT (random 3 tagged with the "field"
 * environment). Empty state is shown when no field-tagged use case exists.
 * ========================================================================== */
.solfld-use-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.solfld-use-cases__empty {
  margin: 0;
  padding: var(--space-16);
  border: 1px dashed var(--color-white-20);
  border-radius: var(--radius-lg);
  font-family: var(--font-inter);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  text-align: center;
}

/* =============================================================================
 * 4. CROPS grid — 4 compact cards (285×360 in Figma)
 * ========================================================================== */
.solfld-crops__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* Real crop cards (hiphen_render_crop_card) reuse the .crop-grid__card markup;
   its visual CSS is scoped per-context, so it's re-declared here for the
   Solutions rows. Mirrors blocks/crop-teaser/style.css for pixel parity. */
.solfld-crops__grid .crop-grid__card {
  position: relative;
  display: block;
  height: 360px;
  border: 2px solid var(--color-white-20);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.solfld-crops__grid .crop-grid__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-white-40);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

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

.solfld-crops__grid .crop-grid__card-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.solfld-crops__grid .crop-grid__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solfld-crops__grid .crop-grid__card-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5); /* 10px */
  padding: var(--space-8); /* 16px */
  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(--crop-card-label-radius);
  transition: background var(--transition-base);
}

.solfld-crops__grid .crop-grid__card:hover .crop-grid__card-label {
  background: var(--gradient-card-label-fade-hover);
}

.solfld-crops__grid .crop-grid__card-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl); /* 20px */
  line-height: 1.4;
  text-transform: capitalize;
  color: var(--color-text-primary, #fff);
}

.solfld-crops__grid .crop-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: transform var(--transition-base);
}

.solfld-crops__grid .crop-grid__card-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-base);
}

.solfld-crops__grid .crop-grid__card:hover .crop-grid__card-button svg {
  transform: translateX(2px);
}

/* =============================================================================
 * 5. PRODUCTS grid — 3 compact solution-cards (380×425 in Figma)
 *
 * The compact solution-card caps its own width at 380px (see solution-card
 * style.css). justify-items: center keeps the row visually centred when its
 * tracks are wider than the cards.
 * ========================================================================== */
.solfld-products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
  justify-items: center;
}

/* =============================================================================
 * RESPONSIVE — collapse grids progressively. Composite stacks at narrow widths
 * so the laptop image doesn't overflow the screen.
 * ========================================================================== */
@media (max-width: 1023px) {
  .solfld-section__title {
    font-size: var(--text-2xl);
  }

  .solfld-use-cases__grid,
  .solfld-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solfld-crops__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solfld-crops__grid .crop-grid__card {
    height: 300px;
  }

  /* On tablet, drop the composite overlap: stack the field photo and the
     laptop frame so neither gets squashed. */
  .solfld-detail__composite {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  .solfld-detail__field-bg,
  .solfld-detail__laptop {
    position: static;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  .solfld-detail,
  .solfld-use-cases,
  .solfld-crops,
  .solfld-products {
    padding-block: var(--space-24);
  }

  .solfld-section__title {
    font-size: var(--text-xl);
  }

  .solfld-section__desc {
    font-size: var(--text-base);
    text-align: left;
  }

  .solfld-use-cases__grid,
  .solfld-crops__grid,
  .solfld-products__grid {
    grid-template-columns: 1fr;
  }

  .solfld-section__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================================
 * SOLUTIONS — CONTROLLED CONDITIONS SUB-PAGE  (.solutions-controlled-page)
 * =============================================================================
 * Figma reference: node 964:4261 — "Solutions - Controlled Conditions"
 *
 * Reuses every `.solfld-*` layout primitive from the field sub-page. Only the
 * deltas vs. Field are scoped below:
 *   - 2-column use-cases grid (vs. 3 in Field)            → .solfld-use-cases__grid--2col
 *   - Closing portfolio paragraph after the cards         → .solfld-section__desc--closing
 *   - Composite proportions: greenhouse photo is slightly
 *     narrower and the laptop overlay slightly wider than
 *     in Field (per Figma node 964:4308).                  → .solutions-controlled-page .solfld-detail__*
 * ========================================================================== */

.solfld-use-cases__grid--2col {
  /* Render the two cards at the SAME width as a 3-col Field track (and the Use
     Case Library), left-aligned under the section header — instead of stretching
     two cards across the full 1200px row. The descriptive card's 380/500
     aspect-ratio otherwise inflated each card to ~590×776, well beyond spec. */
  grid-template-columns: repeat(2, minmax(0, calc((100% - 2 * var(--grid-gutter)) / 3)));
}

/* Closing paragraph mirrors the section intro typography but sits BELOW the
   cards, so we flip the vertical rhythm: top margin, no bottom margin. */
.solfld-section__desc--closing {
  margin-top: var(--space-16);
  margin-bottom: 0;
}

/* Controlled-conditions composite — greenhouse photo (813/1200) on the right,
   dashboard laptop (639/1200) overlapping the bottom-left. The aspect ratio
   stays 1200:464 to match the Figma group. */
.solutions-controlled-page .solfld-detail__composite {
  aspect-ratio: 1200 / 464;
}

.solutions-controlled-page .solfld-detail__field-bg {
  width: calc(813 / 1200 * 100%);
}

.solutions-controlled-page .solfld-detail__laptop {
  width: calc(639 / 1200 * 100%);
}

@media (max-width: 1023px) {
  .solfld-use-cases__grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .solfld-use-cases__grid--2col {
    grid-template-columns: 1fr;
  }

  .solfld-section__desc--closing {
    margin-top: var(--space-10);
  }
}

/* =============================================================================
 * SOLUTIONS — HARVEST QUALITY SUB-PAGE  (.solutions-harvest-page)
 * =============================================================================
 * Figma reference: node 964:4006 — "Solutions - Harvest Quality"
 *
 * Reuses every `.solfld-*` layout primitive from the field sub-page. Only the
 * deltas vs. Field / Controlled are scoped below:
 *   - 2-column products grid (vs. 3 in Field, 3 in Controlled)
 *                                                       → .solfld-products__grid--2col
 *   - Composite proportions: post-harvest photo slightly
 *     narrower and the laptop overlay distinctly wider
 *     than in Field (per Figma node 964:4046).           → .solutions-harvest-page .solfld-detail__*
 * ========================================================================== */

.solfld-products__grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Override the shared `.solfld-products__grid` rule's `justify-items: center`
     so the cards can stretch to fill each (wider) 2-col track. */
  justify-items: stretch;
}

/* The compact solution-card caps its width at 380px by default, which is fine
   in a 3-col layout but leaves dead space on either side in a 2-col layout.
   Lift the cap so the card fills its track edge to edge. */
.solfld-products__grid--2col .solution-card--compact {
  max-width: none;
}

/* Harvest composite — post-harvest line photo (797/1200) on the right,
   Cloverfield dashboard laptop (672/1200) overlapping the bottom-left.
   The harvest laptop image has a fully transparent background around the
   device, so the default rectangular drop-shadow + radius applied to
   `.solfld-detail__laptop` would render a visible bounding box. Strip both
   so the laptop reads as a free-floating product shot. */
.solutions-harvest-page .solfld-detail__composite {
  aspect-ratio: 1200 / 464;
}

.solutions-harvest-page .solfld-detail__field-bg {
  width: calc(797 / 1200 * 100%);
}

.solutions-harvest-page .solfld-detail__laptop {
  width: calc(672 / 1200 * 100%);
  border-radius: 0;
  box-shadow: none;
}

/* Harvest products row pairs PhenoStation with PhenoLite — match their
   device-shot sizing so the two cards read at the same visual weight.
   Scoped to the harvest page so PhenoStation on the all-products / hub /
   crop-modal pages keeps its default 302×113 frame. */
.solutions-harvest-page .solution-card--phenostation .solution-card__device {
  max-width: 320px;
  aspect-ratio: 320 / 150;
}

/* =============================================================================
 * CLIENT SUCCESS STORIES — dedicated section on Solutions — Harvest Quality
 * =============================================================================
 * Figma reference: node 1838:11146 — sits between "Our Solutions" and the
 * "Use Cases For Berries" section.
 *
 * Composition:
 *   H2 "Client Success Stories"
 *   Row 1 (default)       → text-left  (~505) + video-right (~660)
 *   Row 2 (--reverse)     → video-left (~660) + text-right  (~505)
 *
 * Columns use minmax fractional tracks so they keep the 505:660 ratio at any
 * container width while remaining flexible. Collapses to one stacked column
 * from tablet (≤1023px) downward.
 * ========================================================================== */
.solfld-stories {
  padding-block: var(--space-24);
}

/* Tighten the transition when Client Success Stories sits directly under
   the composite. Without this, the back-to-back 80px paddings stack to a
   160px gap which feels disconnected from the narrative thread above. */
.solfld-detail + .solfld-stories {
  padding-top: 0;
}

.solfld-stories__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.solfld-stories__row {
  display: grid;
  grid-template-columns: minmax(0, 505fr) minmax(0, 660fr);
  column-gap: 35px;
  align-items: center;
}

/* Mirror the columns AND swap the visual order of the two children, so a
   single markup pattern (text first, media second) can render either way. */
.solfld-stories__row--reverse {
  grid-template-columns: minmax(0, 660fr) minmax(0, 505fr);
}

.solfld-stories__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.solfld-stories__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  text-wrap: balance;
}

.solfld-stories__body {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.solfld-stories__media {
  /* The video-player block handles its own aspect ratio (16/9 by default).
     Just give it a full-width container. */
  width: 100%;
}

/* The Champagne Grape video (row 2 = --reverse) was uploaded to YouTube
   with letterboxing baked into the source — the auto-generated thumbnail
   carries visible black bars top + bottom. Zoom the poster slightly so
   the bars get cropped and the content fills the 16/9 frame. Applies only
   to the poster (.is-playing hides it anyway, so the iframe runs natively
   at its true aspect ratio with no impact). */
.solfld-stories__row--reverse .video-player__poster {
  transform: scale(1.20);
}

@media (max-width: 1023px) {
  .solfld-stories__row,
  .solfld-stories__row--reverse {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
  }

  /* On stacked rows, always put the text first followed by the video, so
     the narrative reads naturally regardless of desktop side. */
  .solfld-stories__row--reverse .solfld-stories__text  { order: 1; }
  .solfld-stories__row--reverse .solfld-stories__media { order: 2; }
}

@media (max-width: 767px) {
  .solfld-stories {
    padding-block: var(--space-24);
  }

  .solfld-stories__title {
    font-size: var(--text-xl);
  }

  .solfld-stories__body {
    font-size: var(--text-base);
  }
}

/* =============================================================================
 * SOLUTIONS — ALL HIPHEN PRODUCTS PAGE  (.all-products-page)
 * =============================================================================
 * Figma reference: node 1003:4315 — "All Hiphen Products"
 *
 * Unique 2/1/2 product stack layout:
 *   row 1 (--duo)  → PhenoScale  | Literal
 *   row 2 (--full) → Cloverfield (full-width)
 *   row 3 (--duo)  → PhenoMobile | PhenoStation
 *
 * Cards use the IMAGE variant of hiphen/solution-card; rows are 1200×360 in
 * the Figma so we pin each card to 360px. Mobile collapses --duo rows to one
 * column; the --full row keeps its single track at all widths.
 * ========================================================================== */
.solfld-products__stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
}

.solfld-products__row {
  display: grid;
  gap: var(--grid-gutter);
}

.solfld-products__row--duo {
  grid-template-columns: 1fr 1fr;
}

.solfld-products__row--full {
  grid-template-columns: 1fr;
}

/* In wide-row contexts (duo or full), the PhenoScale image card is wide
   enough that its title fits comfortably on a single line — override the
   default `display: block` applied to `.solution-card__title-tail` for
   the phenoscale slug. Tablet/mobile (≤1023px) fallback below restores
   the natural wrap when the row collapses to 1 column. */
.solfld-products__row--duo .solution-card--phenoscale .solution-card__title-tail,
.solfld-products__row--full .solution-card--phenoscale .solution-card__title-tail {
  display: inline;
}

/* Pin each image-card to 360px so duo and full rows share the Figma height. */
.solfld-products__stack .solution-card--image {
  height: 360px;
  min-height: 360px;
}

@media (max-width: 1023px) {
  .solfld-products__row--duo {
    grid-template-columns: 1fr;
  }

  .solfld-products__stack .solution-card--image {
    height: auto;
    min-height: 320px;
  }
}

@media (max-width: 767px) {
  .solfld-products__stack .solution-card--image {
    min-height: 280px;
  }
}

@media (max-width: 1023px) {
  .solfld-products__grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .solfld-products__grid--2col {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
 * "YOUR CROP IS NOT LISTED HERE?" CTA  (.crops-cta)
 * =============================================================================
 * Originally defined in page-crops.css for the Crops page. Re-declared here
 * so the All Products page (which loads page-solutions.css but not page-
 * crops.css) gets the same visual when it reuses this CTA pattern between
 * its products grid and the request-demo block.
 *
 * Markup mirrors page-crops.php section 3 exactly so a future refactor can
 * promote this to a shared template part.
 * ========================================================================== */
.crops-cta {
  padding-block: var(--space-24) var(--space-40);
}

.crops-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.crops-cta__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

@media (max-width: 1023px) {
  .crops-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .crops-cta__title {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 767px) {
  .crops-cta {
    padding-block: var(--space-16) var(--space-24);
  }

  .crops-cta__title {
    font-size: var(--text-xl);
  }
}