/**
 * =============================================================================
 * PAGE: Crops (page-crops.php)
 * =============================================================================
 * Page-specific layout glue between the registered Gutenberg blocks that make
 * up the Crops page. Block-internal styling lives in each block's own
 * /blocks/{block}/style.css — this file only styles the inline section(s)
 * injected directly in page-crops.php.
 *
 *   1. <section class="hero hero--compact">      → blocks/hero-banner
 *   2. <section class="crop-grid">               → blocks/crop-grid
 *   3. <section class="crops-cta">               → inline (Not Listed Here?)
 *   4. <section class="request-demo">            → blocks/request-demo
 *
 * All values from variables.css. BEM naming. Mobile-first.
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * SHARED CONTAINER — matches the home/solutions pattern so the inline
 * sections align with the surrounding blocks (1200px content area).
 * --------------------------------------------------------------------------- */
.crops-page {
  display: block;
}

.crops-page .container {
  max-width: calc(var(--container-content) + 2 * var(--padding-x));
  margin-inline: auto;
  padding-inline: var(--padding-x);
}

@media (max-width: 1023px) {
  .crops-page .container {
    padding-inline: var(--padding-x-md);
  }
}

@media (max-width: 767px) {
  .crops-page .container {
    padding-inline: var(--padding-x-sm);
  }
}

/* ---------------------------------------------------------------------------
 * HERO → CROP GRID SPACING — match the Solutions pages' vertical rhythm
 * (var(--space-40) = 80px below the hero, like the first section of any
 * sub-page after its hero-banner). Previously zero because the crop-grid
 * block carries no padding-top of its own — fine when the hero has no
 * background image, but cramped once the patchwork bg fills the hero.
 * --------------------------------------------------------------------------- */
.crops-page .crop-grid {
  padding-top: var(--space-40);
}

@media (max-width: 767px) {
  .crops-page .crop-grid {
    padding-top: var(--space-24);
  }
}

/* =============================================================================
 * "YOUR CROP IS NOT LISTED HERE?" CTA — title left + button right, anchors
 * down to the request-demo section. Mirrors the .sol-uc__header /
 * .home-uc__header pattern so the page rhythm reads as one connected block.
 * ============================================================================= */
.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);
  }
}