/**
 * =============================================================================
 * PAGE: Cloverfield Data Platform
 * =============================================================================
 * Figma reference: node 955:14575 — "Cloverfield Data Platform".
 *
 * Shared section primitives (.solfld-section__title / __desc / __header,
 * .solfld-products__*, .solfld-crops__grid) come from page-solutions.css,
 * which is enqueued alongside this stylesheet — see functions.php.
 *
 * What lives here:
 *   - Section wrappers padding (.cf-intro, .cf-features, .cf-versatility,
 *     .cf-analytics)
 *   - All-In-One full-width feature infographic (.cf-features__image)
 *   - Versatility 4-column workflow diagram (.cf-workflow + children) —
 *     pill-shaped items decreasing by ~20px per row, connected by SVG arrows
 *
 * Hero, video player, analytics use-case-cards, products solution-cards
 * and request-demo are rendered by registered Gutenberg blocks and carry
 * their own CSS.
 *
 * All values from variables.css. BEM naming. Mobile-first.
 * =============================================================================
 */

/* =========================================================================
 * SHARED SECTION PADDING
 * Horizontal width + padding handled by `.container`; sections only carry
 * vertical rhythm so they stack like the Solutions sub-pages.
 * ========================================================================= */
.cf-intro,
.cf-features,
.cf-versatility,
.cf-analytics {
  /* 48px per side → ~96px between sections, matching the Solutions sub-pages
     and the Home / Crops / About rhythm (was 80px, which read as oversized). */
  padding-block: var(--space-24);
}

/* =========================================================================
 * ALL-IN-ONE — Full-width feature infographic
 * The image ships with its own background/composition so no extra border
 * or border-radius is applied — let it bleed naturally.
 * ========================================================================= */
.cf-features__image {
  margin-top: var(--space-10);
}

.cf-features__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================================
 * VERSATILITY — 4-chapter workflow diagram
 * =========================================================================
 * Each chapter (header + items) is grouped into one .cf-workflow__chapter
 * flex-column so the header sits directly above its items, both centered
 * on the same vertical axis. Chapters are placed in a 7-track grid
 * (chapter / arrow / chapter / arrow / chapter / arrow / chapter), so the
 * arrows sit between chapters at the top of the row.
 *
 * On tablet/mobile the grid collapses to one column → each chapter
 * (header + items) renders as a complete block, then an arrow, then the
 * next chapter — a natural chapter-by-chapter narrative.
 * ========================================================================= */
.cf-workflow {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

.cf-workflow__chapter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* Header pills on top — fixed-width pills (Figma: col 1-3 are 210px wide,
   col 4 is 280px to fit the longer label). Icon + text live on the same
   line with a small gap; the pair is centered as a group inside the pill. */
.cf-workflow__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 230px;
  min-height: 60px;
  padding: var(--space-3) var(--space-5);
  border-radius: 9999px;
  background: var(--color-white-10);
  border: 1px solid var(--color-white-20);
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  line-height: 1.2;
  color: var(--color-white);
  text-align: center;
}

.cf-workflow__header--wide {
  max-width: 300px;
  font-size: var(--text-sm);
}

.cf-workflow__header--logo {
  background: transparent;
  border-color: transparent;
  padding: 0;
  gap: 0;
}

.cf-workflow__header--logo img {
  width: 100%;
  max-width: 210px;
  height: auto;
  object-fit: contain;
}

/* Lucide-style stroke icon to the left of the header label. Sized in line
   with the Gilroy Bold text-base above (~16px) so the visual weight stays
   balanced inside the 60px pill. Coloured to match the workflow arrows
   so the icon + arrow form a coherent accent palette. */
.cf-workflow__header-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-light-green);
}

/* Arrows sit in their own auto grid track between chapters, anchored at
   the top so they align with the chapter headers (not the items). */
.cf-workflow__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 60px;
  color: var(--color-light-green);
}

.cf-workflow__arrow svg {
  width: 100%;
  height: 100%;
}

/* Items list — flex column with centered pills. */
.cf-workflow__items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cf-workflow__item {
  width: 100%;
  max-width: 160px;
  padding: var(--space-3) var(--space-5);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-white-10);
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--color-white-70);
  text-align: center;
}

/* Decreasing-pill stack — each subsequent item is 20px narrower than the
   previous, creating a converging visual that points toward the centre. */
.cf-workflow__item:nth-child(1) { max-width: 160px; }
.cf-workflow__item:nth-child(2) { max-width: 140px; }
.cf-workflow__item:nth-child(3) { max-width: 120px; }
.cf-workflow__item:nth-child(4) { max-width: 100px; }
.cf-workflow__item:nth-child(5) { max-width:  80px; }
.cf-workflow__item:nth-child(6) { max-width:  60px; font-size: var(--text-xs); padding-inline: var(--space-3); }

/* =========================================================================
 * RESPONSIVE
 * Mobile/tablet: stack the 4 chapters vertically, with rotated arrows
 * between them. Each chapter stays self-contained (header + its items
 * together), so the reading order is naturally "chapter by chapter".
 * ========================================================================= */
@media (max-width: 1023px) {
  .cf-workflow {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .cf-workflow__arrow {
    width: 100%;
    height: 32px;
    margin: var(--space-2) auto;
    transform: rotate(90deg);
  }

  .cf-workflow__arrow svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 767px) {
  .cf-intro,
  .cf-features,
  .cf-versatility,
  .cf-analytics {
    padding-block: var(--space-24);
  }
}