/**
 * =============================================================================
 * 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)
 *   - section-level classes shared by the 4 Solutions templates (.solfld-*)
 *
 * All values from variables.css. BEM naming. Mobile-first.
 * =============================================================================
 */

/* =========================================================================
 * HUB PRODUCTS SECTION — outer padding
 * ========================================================================= */
.sol-products {
  padding: var(--space-40) var(--padding-x);
}

/* =========================================================================
 * 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;
  }
}

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

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

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

  .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);
  }
}

/* =============================================================================
 * 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 former `.sol-section__*` rules
 * (removed in P2, 2026-10-01: no template used them any more).
 * ========================================================================== */

.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 {
  /* 40px down to the content, matching .home-uc__header / .crop-teaser__header
     on the Home page. When a section intro follows, that paragraph is part of
     the heading block, so the gap tightens back to 20px (see the :has() rule
     below) and the 40px moves down to the paragraph instead. */
  margin: 0 0 var(--space-20);
  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 {
  /* Last element of the heading block, so it carries the 40px Home gap down
     to the content (was 32px). */
  margin: 0 0 var(--space-20);
  font-family: var(--font-inter);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  /* Flush left, not justified — full justification opens rivers of white space
     and reads as machine-set copy. */
  text-align: left;
}

/* Centred variant framed by two lime rules. Used where a title announces the
   block below it rather than introducing copy (Client Success Stories on the
   harvest sub-page). The rules are pseudo-elements, so the markup stays a plain
   heading with a single <span> for the text. */
.solfld-section__title--ruled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  text-align: center;
}

.solfld-section__title--ruled::before,
.solfld-section__title--ruled::after {
  content: "";
  /* Equal flex-grow on both keeps them the same length, so the text stays
     centred whatever its width. */
  flex: 1 1 auto;
  height: 2px;
  border-radius: 1px;
  background: var(--color-light-green);
}

/* The rules stop at the content rail, level with the story rows below them,
   rather than bleeding to the page edges. `flex: 1 1 auto` above is all that
   is needed for that: the heading is a `.container` child, so its content box
   IS the rail and each rule simply takes half the space the text leaves.
   (Both rules previously carried a `calc((100% - 100vw) / 2)` negative margin
   to pull themselves out into the gutters — removed, since the separator must
   not overrun the page content.) */
.solfld-section__title-text {
  flex: 0 1 auto;
}

/* Standalone separator: the same lime line as the pseudo-elements framing a
   --ruled title, without a heading. Used to close off a section from the next
   one (Client Success Stories → Use Cases on the harvest sub-page). Stops at
   the content rail like everything else, since it is a `.container` child. */
.solfld-section__rule {
  width: 100%;
  height: 2px;
  /* Equal air above and below the line. The space ABOVE is not the rule's own
     margin: it is the previous section's padding-bottom plus this section's
     padding-top, both var(--space-24), stacked — so 2 × that is what the rule
     has to put underneath itself to sit centred. Derived from the same token
     rather than hardcoded to 96px, so the symmetry survives a change to the
     section rhythm. */
  margin: 0 0 calc(var(--space-24) * 2);
  border: 0;
  border-radius: 1px;
  background: var(--color-light-green);
}

.solfld-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  /* Same 40px as .home-uc__header / .crop-teaser__header on the Home page. */
  margin-bottom: var(--space-20);
}

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

/* Intra-heading gap. A title, or a title + CTA header, immediately followed by
   the section intro keeps the tighter 20px: the 40px belongs between the whole
   heading block and the content, and .solfld-section__desc carries it. */
.solfld-section__title:has(+ .solfld-section__desc),
.solfld-section__header:has(+ .solfld-section__desc) {
  margin-bottom: var(--space-10);
}

/* .solfld-stories__inner is the one section inner that is a flex column with
   its own 32px gap (that gap also separates the two story rows), so a margin on
   the heading stacks on top of it instead of replacing it. Trim the margin to
   the difference so the heading-to-content gap still lands on the same 40px. */
.solfld-stories__inner > .solfld-section__title {
  margin-bottom: calc(var(--space-20) - var(--space-16));
}

/* 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;
  /* No text-transform: titles are authored in Title Case (project rule). */
  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);
}

/* Static (unlinked) crop cards — see hiphen_render_crop_card( …, false ).
   They illustrate crops the technology can extend to, none of which has a
   Crops-page entry, so every affordance that promises a click is stripped:
   no pointer cursor, no lift, no arrow button. The label keeps its full
   width now that the arrow is gone. */
.solfld-crops__grid .crop-grid__card--static {
  cursor: default;
}

.solfld-crops__grid .crop-grid__card--static:hover {
  transform: none;
  border-color: var(--color-white-20);
  box-shadow: none;
}

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

/* The closing "And more..." tile stands in for the crops NOT listed. Card
   titles no longer carry any text-transform (project rule), so this override
   is a belt-and-braces guard that keeps the sentence exactly as authored. */
.solfld-crops__grid .crop-grid__card--more .crop-grid__card-title {
  text-transform: none;
}

/* =============================================================================
 * 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);
  }

  .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
 *   - 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)));
}

/* 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;
  }
}

/* =============================================================================
 * 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:
 *   - Single full-width product card (vs. a 3-col grid elsewhere)
 *                                                       → .solfld-products__grid--full
 *   - 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__*
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Full-width product card
 * -----------------------------------------------------------------------------
 * The harvest page shows a single product (PhenoStation) across the whole rail.
 * A lone compact card at 1200px wide would read as a centred stack floating in
 * a very wide box, so the modifier re-lays it as a proper two-panel card:
 * a full-height device panel on the left, and a tight, vertically centred text
 * column (wordmark → description → CTA) on the right.
 *
 * WHY THE DEVICE IS ABSOLUTELY POSITIONED
 * The compact markup is `article > .solution-card__stack(device, logo, desc)`
 * with the CTA as a *sibling* of the stack. Nothing groups the three text
 * elements, so no single grid can put the device beside them: the device would
 * have to span rows sized by the text, which stretches the text apart (and is
 * exactly what made the first attempt look loose and unbalanced). Lifting the
 * device out of flow into its own left panel leaves the card free to lay the
 * text out as the simple centred column it already is, with padding reserving
 * the left half. Collapses back to the stock centred card on tablet and below.
 * -------------------------------------------------------------------------- */

/* Panel geometry, declared once so the padding, the device width and the
   divider can never drift apart. */
.solfld-products__grid--full {
  --product-panel: 42%;
  --product-pad: var(--space-14);

  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.solfld-products__grid--full .solution-card--compact {
  position: relative;
  max-width: none;
  min-height: 340px;
  /* Text column only: the left half is reserved for the absolutely positioned
     device panel. */
  padding: var(--product-pad) var(--product-pad) var(--product-pad)
    calc(var(--product-panel) + var(--space-16));
  /* Centre the text block vertically, flush left horizontally. */
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-8);
}

/* Hairline between the two panels — enough structure to read as a composed
   card rather than two things that happen to share a box. */
.solfld-products__grid--full .solution-card--compact::before {
  content: "";
  position: absolute;
  left: var(--product-panel);
  /* Inset by the panel padding, not by its own value: the line then starts and
     ends level with the content it separates. It used to be --space-12 (24px)
     against a 28px padding, so it overshot both columns by 4px at each end. */
  top: var(--product-pad);
  bottom: var(--product-pad);
  width: 1px;
  background: var(--color-white-10);
}

.solfld-products__grid--full .solution-card__device {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--product-panel);
  max-width: none;
  /* Height comes from the card, not from a ratio — the panel always fills it. */
  aspect-ratio: auto;
  /* Right padding is --space-16, not --product-pad, so the image clears the
     hairline by the same 32px the text column does on the other side (the text
     gets it from the card's `calc(var(--product-panel) + var(--space-16))` left
     padding). With 28px here the image sat 4px closer to the line than the text,
     which reads as the two halves being on different grids. */
  padding: var(--product-pad) var(--space-16) var(--product-pad) var(--product-pad);
}

.solfld-products__grid--full .solution-card__stack {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-6);
  width: 100%;
}

.solfld-products__grid--full .solution-card__logo,
.solfld-products__grid--full .solution-card__text-logo {
  align-self: flex-start;
  text-align: left;
}

.solfld-products__grid--full .solution-card__description {
  /* The text column runs ~600px wide here; cap the measure so the copy stays
     comfortably readable instead of running the full panel. */
  max-width: 62ch;
}

.solfld-products__grid--full .solution-card__cta {
  align-self: flex-start;
  margin-top: 0;
}

/* 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;
}

/* No desktop override for PhenoStation's device panel any more.
   There used to be one here claiming a "420×220 frame", but it could never take
   effect: the --full panel is absolutely positioned with BOTH top and bottom set
   and no explicit height, so its height comes from the constraint equation and
   `aspect-ratio` is ignored. Its `max-width: 100%` was equally moot next to the
   modifier's `max-width: none`. All it did was outrank the modifier's own
   `aspect-ratio: auto` with a number that would spring to life, and silently
   resize the panel, the day someone dropped `bottom: 0`.
   The ≤1023px override of the same selector is real and stays — there the card
   collapses to the stock compact layout and the ratio does apply. */

/* =============================================================================
 * 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;
}

/* Staggered layout ("quinconce"): every other story puts the media on the
   left and the text on the right, so the section zig-zags down the page instead
   of stacking into one column.

   Two things have to flip together, and only the first used to be here:
     - the column widths, so the media keeps the wide track (660fr) and the text
       the narrow one (505fr) whichever side each is on;
     - the visual order of the two children.
   The markup used to carry the swap itself (story 2 was hand-written with the
   media first), which stopped working when the stories became a reorderable
   list rendered by a single loop. `order` does it in CSS instead, so any number
   of stories alternates correctly and reordering them in the admin can never
   break the rhythm.

   DOM order stays text-then-media on every row, which is also the sensible
   reading order for assistive tech: story title, then its video. */
.solfld-stories__row--reverse {
  grid-template-columns: minmax(0, 660fr) minmax(0, 505fr);
}

.solfld-stories__row--reverse .solfld-stories__media {
  order: 1;
}

.solfld-stories__row--reverse .solfld-stories__text {
  order: 2;
}

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

/* Client logo above the story title. Height-constrained rather than
   width-constrained: client logos arrive in wildly different aspect ratios, and
   capping the height is what makes a row of them look evenly weighted. */
.solfld-stories__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 48px;
  margin-bottom: var(--space-3);
}

.solfld-stories__logo img {
  max-height: 100%;
  max-width: 220px;
  width: auto;
  object-fit: contain;
}

/* Empty slot: shown until a logo is chosen in the "Client success stories" meta
   box, so the space is visibly reserved rather than silently missing. Dashed and
   muted so it reads as "to be filled in", not as a designed element. */
.solfld-stories__logo--placeholder {
  align-items: center;
  justify-content: center;
  width: 160px;
  border: 1px dashed var(--color-white-40);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-white-10);
}

.solfld-stories__logo--placeholder span {
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-white-70);
}

.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%;
}

/* Some YouTube uploads have letterboxing baked into the source, so the
   auto-generated thumbnail carries visible black bars top + bottom. Zoom the
   poster slightly to crop them and fill 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).

   Opt-in per story, via the "Crop black bars from the video thumbnail" tick in
   the Client success stories box. This used to key off `--reverse`, i.e. "the
   second story" — which was the Champagne Grape video at the time. Now that the
   list is reorderable, a positional rule would crop whichever video happened to
   land in that slot. */
.solfld-stories__row--zoom-poster .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;
  }
}

/* Full-width product card — below 1023px the two-panel split leaves the text
   column too narrow, so fall back to the stock centred compact card. Every
   override from the desktop modifier is unwound explicitly rather than relying
   on the base rules, because the modifier is more specific than they are. */
@media (max-width: 1023px) {
  .solfld-products__grid--full {
    justify-items: center;
  }

  .solfld-products__grid--full .solution-card--compact {
    min-height: 425px;
    padding: 30px 20px;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
  }

  /* No two panels to divide once the card is a single column. */
  .solfld-products__grid--full .solution-card--compact::before {
    content: none;
  }

  .solfld-products__grid--full .solution-card__device,
  .solutions-harvest-page .solution-card--phenostation .solution-card__device {
    position: static;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 320 / 150;
    padding: 0;
  }

  .solfld-products__grid--full .solution-card__stack {
    flex: 1;
    align-items: center;
    justify-content: center;
  }

  /* `align-self` is the CROSS axis in a column flex container, so the desktop
     flex-start would pin the wordmark left instead of centring it. */
  .solfld-products__grid--full .solution-card__logo,
  .solfld-products__grid--full .solution-card__text-logo {
    align-self: auto;
  }

  .solfld-products__grid--full .solution-card__description {
    max-width: none;
  }

  .solfld-products__grid--full .solution-card__cta {
    align-self: center;
    margin-top: var(--space-5);
  }
}

/* On small screens the heading wraps and the rules have little room left
   inside the rail, so tighten the gap to give the text every pixel it can
   get. */
@media (max-width: 767px) {
  .solfld-section__title--ruled {
    gap: var(--space-5);
  }
}

/* =============================================================================
 * "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);
  }
}