/**
 * =============================================================================
 * PAGE: Home (front-page.php)
 * =============================================================================
 * Section-specific layout glue between the registered Gutenberg blocks that
 * make up the homepage. Block-internal styling lives in each block's own
 * /blocks/{block}/style.css — this file only styles the inline sections
 * injected directly in front-page.php and the spacing between sections.
 *
 * Markup (top to bottom):
 *   1. <section class="hero hero--tall">                 → blocks/hero-banner
 *   2. <section class="home-highlight">                  → inline (3 nav cards)
 *   3. <section class="home-partner">                    → inline
 *   4. <section class="video-player">                    → blocks/video-player
 *   5. <section class="home-uc">                         → inline (header + 5 cards)
 *   6. <section class="crop-teaser">                     → blocks/crop-teaser
 *   7. <section class="news-blog-slider">                → blocks/news-blog-slider
 *   8. <section class="events-slider">                   → blocks/events-slider
 *   9. <section class="request-demo request-demo--with-info"> → blocks/request-demo
 *
 * All values from variables.css. BEM naming. Mobile-first.
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * 0. PAGE SHELL
 * Container sizing is handled site-wide by `.container` in base.css.
 * --------------------------------------------------------------------------- */
.home-page {
  display: block;
}

/* ---------------------------------------------------------------------------
 * Grid items: prevent `repeat(N, 1fr)` from inflating tracks to fit each
 * card's min-content width (the use-case-card frame has `aspect-ratio +
 * min-height` which would otherwise expand the grid container past its
 * max-width). `minmax(0, 1fr)` keeps tracks at exactly 1fr, and resetting
 * `aspect-ratio` on the inner frame lets each card fill its track.
 * --------------------------------------------------------------------------- */
.home-highlight__row .use-case-card,
.home-uc__row .use-case-card,
.home-highlight__row .use-case-card__frame,
.home-uc__row .use-case-card__frame {
  width: 100%;
  min-width: 0;
}

.home-highlight__row .use-case-card__frame,
.home-uc__row .use-case-card__frame {
  aspect-ratio: auto;
}

/* =============================================================================
 * 1. HIGHLIGHT ROW — 3 use-case-card --navigation tiles, overlapping the hero
 *
 * Figma: the 3 cards sit at y=640 inside a 1021px-tall hero (810px image +
 * 211px card-overlap zone). The cards span the page width minus the standard
 * 120px gutters and are 320px tall.
 * ========================================================================== */
.home-highlight {
  position: relative;
  z-index: 2;
  /* 50px gap requested between the hero section and the cards row.
     Closest design token is var(--space-24) = 48px. */
  margin-top: var(--space-24);
  padding-bottom: var(--space-20);
}

.home-highlight__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* Height + frame min-height are owned by the use-case-card block now
   (--navigation variant defaults to 350px). The grid-track overrides
   above still apply via the shared `.home-highlight__row .use-case-card`
   width/min-width rules. */

@media (max-width: 1023px) {
  .home-highlight {
    margin-top: var(--space-20);
  }

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

@media (max-width: 640px) {
  .home-highlight {
    margin-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .home-highlight__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================================
 * 2. HIPHEN INTRO SECTION
 *
 * Storytelling text (30%) beside the corporate video (70%), from 1024px up.
 * Below that the two stack, text first, in the original flex column.
 *
 * Emptied out on 2026-09-03 (title + description + CTA, then the 4-image
 * AI-segmentation row); the text column came back on 2026-10-05 as the
 * .home-partner__story split.
 * ========================================================================== */
.home-partner {
  /* Tightened top padding so the partner intro sits closer to the highlight
     cards above it. Bottom aligned on the ~48px section rhythm used site-wide
     (Solutions / Crops / About) instead of the previous 80px. */
  padding: var(--space-20) 0 var(--space-24);
}

.home-partner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
}

.home-partner__video-title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  /* Same format as the other Home section titles (.home-uc__title /
     .crop-teaser__title): 50/40/32px across breakpoints, line-height 1.2. */
  font-size: 50px;
  line-height: 1.2;
  color: var(--color-text-primary);
  text-align: left;
}

.home-partner__story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.home-partner__story-text {
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  color: var(--color-text-secondary);
}

.home-partner__story-text p {
  margin: 0;
}

.home-partner__story-text p + p {
  margin-top: var(--space-8);
}

.home-partner__story-text strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

/* 30/70 split. minmax(0, …) lets the player shrink inside its track instead
   of pushing the grid wider than the container. The title steps down from the
   50px section-title format: a 30% column (~340px) cannot carry it. */
@media (min-width: 1024px) {
  .home-partner__inner {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--space-20);
  }

  .home-partner__video-title {
    font-size: clamp(28px, 2.6vw, 36px);
  }
}

@media (max-width: 1023px) {
  .home-partner__video-title { font-size: 40px; }
}

@media (max-width: 640px) {
  .home-partner__video-title { font-size: var(--text-2xl); }

  .home-partner {
    padding: var(--space-24) 0;
  }

  .home-partner__inner {
    gap: var(--space-20);
  }
}

/* =============================================================================
 * 3. USE CASES ROW — header (title + CTA) + N compact use-case cards
 *
 * Figma: 1200×455. Header is 65px tall (title left, "All Use Cases" button
 * right at 941px / 60px tall). Cards row is 360px tall; Figma shows 5 columns
 * × 224px, but the tile count is editable so the columns are computed.
 * ========================================================================== */
.home-uc {
  /* Aligned on the ~48px section rhythm used site-wide (Solutions / Crops /
     About) — was 70px top / 80px bottom, which read as oversized gaps. */
  padding: var(--space-24) 0;
}

.home-uc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Header = grouped title + button. Same values as .crop-teaser__header so
     both Home sections are identical: 15px title↔button gap and 15px from the
     header down to the cards. (Button stays right-aligned via space-between,
     so the 15px gap only kicks in when the row gets tight.) */
  gap: 15px;
  margin-bottom: var(--space-20); /* 40px */
}

.home-uc__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  /* Mirror the crop-teaser section title exactly so the two Home headings
     ("Browse Our Solutions By Use Cases" / "Or Explore Crop By Crop") match:
     50/40/32px across breakpoints, line-height 1.2, capitalised. */
  font-size: 50px;
  line-height: 1.2;
  color: var(--color-text-primary);
}

/* The tiles are an editable list now (Home ▸ Use Cases ▸ Use case tiles), so
   the column count is not a constant: front-page.php writes --home-uc-cols /
   -md / -sm on this element from the number of tiles, and the row spans the
   full width whatever that number is. The fallbacks are the original 5/3/2,
   used only if the properties ever fail to reach the element. */
.home-uc__row {
  display: grid;
  grid-template-columns: repeat(var(--home-uc-cols, 5), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.home-uc__row .use-case-card {
  height: 360px; /* Figma: 224 × 360 */
}

.home-uc__row .use-case-card__frame {
  min-height: 0;
  height: 100%;
}

@media (max-width: 1023px) {
  .home-uc__title { font-size: 40px; }

  .home-uc__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-uc__row {
    grid-template-columns: repeat(var(--home-uc-cols-md, 3), minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-uc__title { font-size: var(--text-2xl); }

  .home-uc {
    padding: var(--space-24) 0;
  }

  .home-uc__row {
    grid-template-columns: repeat(var(--home-uc-cols-sm, 2), minmax(0, 1fr));
  }

  .home-uc__row .use-case-card {
    height: 300px;
  }
}

/* =============================================================================
 * 4. SECTION SPACING — vertical rhythm between block sections
 *
 * Figma uses dedicated "Spacer" frames between the video, blog and events
 * slider sections (70px / 55px / 9px / 115px). We approximate that rhythm
 * with consistent block-level margins so the page reads top-to-bottom with
 * the same beat as the maquette.
 * ========================================================================== */

/* Video group: lives inside `.home-partner__inner` (see front-page.php) as a
   flex child, so it keeps the section's --space-30 inner gap from the 4-image
   row above. Inside the group, the headline sits --space-20 (40px) above the
   player — the same heading → content beat used across the site. */
.home-partner__video {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* This group is the scroll target of the hero's "Watch the Video" button
   (id from HIPHEN_HOME_INTRO_VIDEO_ID). animations.css already offsets any
   `:target` by a flat 100px, which the 88px sticky header leaves almost
   nothing under: measure the header instead, and keep a breath below it so
   the headline lands clear of the bar rather than tucked against it. Written
   at (0,2,0) so it beats `:target` (0,1,0) whatever the stylesheet order. */
.home-page .home-partner__video {
  scroll-margin-top: calc(var(--header-h, 88px) + var(--space-16));
}

/* Crop teaser: sits directly under the use cases row in Figma without a
   spacer frame. Keep a small rhythm break for legibility. */
.home-page > .crop-teaser {
  padding-block: var(--space-24);
}

/* News & blog slider: a tall section with its own watermark. Top margin
   aligned on the ~48px section rhythm used site-wide. */
.home-page > .news-blog-slider {
  margin-top: var(--space-24);
}

/* Events slider: Figma uses only a 9px spacer between blog and events,
   so we keep the gap tiny here. */
.home-page > .events-slider {
  margin-top: var(--space-12);
}

/* Request demo (with-info): aligned on the ~48px section rhythm used
   site-wide (was 80px). */
.home-page > .request-demo {
  margin-top: var(--space-24);
}

@media (max-width: 767px) {
  .home-page > .video-player {
    margin-block: var(--space-20) var(--space-16);
  }

  .home-page > .crop-teaser {
    padding-block: var(--space-16) var(--space-24);
  }

  .home-page > .news-blog-slider,
  .home-page > .request-demo {
    margin-top: var(--space-24);
  }
}