/**
 * =============================================================================
 * 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. PARTNER SECTION
 *
 * Centered title + description + CTA on top, 4-image row below, then a
 * secondary descriptive paragraph spanning the full width.
 *
 * Figma frame: 1200×712 — 354px text/CTA, then 193px image row, then 72px
 * second paragraph (with 60px vertical gaps).
 * ========================================================================== */
.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__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-12);
  max-width: 1036px;
  margin-inline: auto;
}

.home-partner__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  /* Match the section-title size used by news-blog-slider / events-slider /
     crop-teaser (~50–56px desktop). var(--text-4xl) scaled up to 68px which
     was visibly larger than the surrounding sections. */
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: var(--lh-tight);
  text-transform: capitalize;
  color: var(--color-text-primary);
}

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

.home-partner__images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px; /* Figma: 15px between the 4 image cards */
}

.home-partner__images img {
  width: 100%;
  height: 193px; /* Figma: 288×193 image tile */
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-white-10);
}

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

@media (max-width: 1023px) {
  .home-partner__images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .home-partner__images img {
    height: 180px;
  }
}

@media (max-width: 640px) {
  .home-partner {
    padding: var(--space-24) 0;
  }

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

  .home-partner__images {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* =============================================================================
 * 3. USE CASES ROW — header (title + CTA) + 5 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, 5 columns × 224px.
 * ========================================================================== */
.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;
  text-transform: capitalize;
  color: var(--color-text-primary);
}

.home-uc__row {
  display: grid;
  grid-template-columns: repeat(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(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(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 player: now lives inside `.home-partner__inner` (see front-page.php)
   as a flex child, so it shares the section's --space-30 inner gap — the same
   spacing used between the 4-image row and the footnote text above it. No
   per-element spacing needed here; the flex gap handles it. */
.home-partner__video {
  width: 100%;
}

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