/* ==========================================================================
   FLEXIONEX — LAYOUT
   Containers, grids, section rhythm.
   Depends on tokens.css.
   ========================================================================== */

/* ── CONTAINERS ──────────────────────────────────────────────────────── */

.fx-container,
.fx-container--narrow,
.fx-container--wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--fx-gutter);
}

.fx-container          { max-width: var(--fx-container); }
.fx-container--narrow  { max-width: var(--fx-container-narrow); }
.fx-container--wide    { max-width: var(--fx-container-wide); }
.fx-container--full    { max-width: none; padding-inline: 0; }

/* ── SECTION RHYTHM ──────────────────────────────────────────────────────
   Vertical rhythm carries the pacing. Never let three consecutive sections
   share the same value — rhythm comes from spacing variation, not from
   alternating background colours.
   ------------------------------------------------------------------------ */

.fx-section    { padding-block: var(--fx-section-y); }
.fx-section--lg { padding-block: var(--fx-section-y-lg); }
.fx-section--sm { padding-block: var(--fx-section-y-sm); }
.fx-section--flush-top    { padding-block-start: 0; }
.fx-section--flush-bottom { padding-block-end: 0; }

/* Section header block — eyebrow + heading + lead */
.fx-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--fx-s3);
  margin-block-end: var(--fx-s7);
}

.fx-section__head--center {
  align-items: center;
  text-align: center;
}

.fx-section__head--center :is(.fx-h2, .fx-lead) {
  margin-inline: auto;
}

/* ── STACK ───────────────────────────────────────────────────────────── */

.fx-stack { display: flex; flex-direction: column; gap: var(--fx-block-gap); }
.fx-stack--tight { gap: var(--fx-s3); }
.fx-stack--loose { gap: var(--fx-s6); }

/* ── CLUSTER (inline wrap) ───────────────────────────────────────────── */

.fx-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fx-s4);
}

.fx-cluster--tight { gap: var(--fx-s2); }

/* ── SYMMETRIC GRIDS ─────────────────────────────────────────────────────
   Anti-template rule (Gate 3A A4.5): .fx-grid--3 may appear at most TWICE
   on any single page. Equal three-column grids are the single largest
   source of templated feel.
   ------------------------------------------------------------------------ */

.fx-grid { display: grid; gap: var(--fx-s5); }

.fx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fx-grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fx-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.fx-grid--gap-lg { gap: var(--fx-s6); }
.fx-grid--gap-sm { gap: var(--fx-s4); }

/* ── ASYMMETRIC GRIDS ────────────────────────────────────────────────────
   The primary defence against template feel. Collapse to single column
   below 1024px.
   ------------------------------------------------------------------------ */

.fx-grid--7-5,
.fx-grid--5-7,
.fx-grid--8-4,
.fx-grid--4-8 {
  display: grid;
  gap: var(--fx-s6);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .fx-grid--7-5 { grid-template-columns: 7fr 5fr; gap: var(--fx-s8); }
  .fx-grid--5-7 { grid-template-columns: 5fr 7fr; gap: var(--fx-s8); }
  .fx-grid--8-4 { grid-template-columns: 8fr 4fr; gap: var(--fx-s8); }
  .fx-grid--4-8 { grid-template-columns: 4fr 8fr; gap: var(--fx-s8); }
}

/* Vertically centre an asymmetric pair */
.fx-grid--align-center { align-items: center; }
.fx-grid--align-start  { align-items: start; }

/* ── SPAN UTILITIES ──────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .fx-span-2 { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .fx-span-lg-2 { grid-column: span 2; }
  .fx-span-lg-3 { grid-column: span 3; }
}

/* ── STAGGERED GRID ──────────────────────────────────────────────────────
   Offsets alternate items vertically. Used on product grids to break the
   uniform-card-wall effect.
   ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .fx-grid--staggered > :nth-child(even) {
    transform: translateY(var(--fx-s7));
  }
}

/* ── RAIL (horizontal scroll) ────────────────────────────────────────── */

.fx-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--fx-s5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--fx-s2);
  /* bleed to viewport edge on mobile */
  margin-inline: calc(var(--fx-gutter) * -1);
  padding-inline: var(--fx-gutter);
}

.fx-rail::-webkit-scrollbar { display: none; }

.fx-rail > * { scroll-snap-align: start; }

@media (min-width: 1024px) {
  .fx-rail {
    grid-auto-columns: minmax(320px, 1fr);
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ── DIVIDER ─────────────────────────────────────────────────────────── */

.fx-divider {
  height: 1px;
  border: 0;
  background: var(--fx-border);
  margin-block: var(--fx-s6);
}

.fx-divider--brand {
  height: 2px;
  width: 48px;
  background: var(--fx-orange-400);
  margin-block: var(--fx-s4);
}

/* ── DARK SECTION ────────────────────────────────────────────────────────
   Dark blocks are a rhythm tool, not a theme. Target 25–35% of sections
   per page, and never place two dark sections adjacently.
   ------------------------------------------------------------------------ */

.fx-section.fx-dark {
  background-color: var(--fx-ink-900);
  color: var(--fx-text);
}

/* Shadows are invisible on dark; borders carry hierarchy instead. */
.fx-dark .fx-card,
.fx-dark .fx-panel {
  box-shadow: none;
  border: 1px solid var(--fx-border);
}

/* ── PANEL ───────────────────────────────────────────────────────────── */

.fx-panel {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius);
  padding: var(--fx-s5);
}

/* ── ASPECT RATIOS ───────────────────────────────────────────────────── */

.fx-ratio-4-3  { aspect-ratio: 4 / 3;  object-fit: cover; width: 100%; }
.fx-ratio-3-2  { aspect-ratio: 3 / 2;  object-fit: cover; width: 100%; }
.fx-ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.fx-ratio-8-5  { aspect-ratio: 8 / 5;  object-fit: cover; width: 100%; }
.fx-ratio-1-1  { aspect-ratio: 1 / 1;  object-fit: cover; width: 100%; }