/* ============================================================================
   PADEV Zenith — layout layer
   The showroom/catalog board system extracted from dark board 03 + light 03:
   a masthead, then a dense 12-column field of numbered, framed panels of
   deliberately varied span. Container 1320px / gutter 24px (dark board 05).
   ========================================================================== */

.z-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.z-container--wide {
  max-width: 96rem;
}

/* --- Board masthead strip (top rail of every reference board) -------------- */
.z-boardbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-24);
}

.z-boardbar__identity {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}

.z-boardbar__meta {
  justify-self: end;
  text-align: right;
}

.z-boardbar__rule {
  display: block;
  width: 5.5rem;
  height: 2px;
  margin-top: var(--space-8);
  margin-left: auto;
  border-radius: var(--radius-pill);
  background: var(--gradient-aurora);
}

/* --- Masthead ------------------------------------------------------------- */
.z-masthead {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.z-masthead__wordmark {
  font-size: clamp(2.75rem, 1.1rem + 6.6vw, 6.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  font-family: var(--font-display);
}

.z-masthead__lede {
  max-width: 46rem;
  margin-inline: auto;
  margin-top: var(--space-16);
}

.z-masthead__divider {
  position: relative;
  width: min(30rem, 70%);
  height: 1px;
  margin: var(--space-32) auto 0;
  background: linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent);
}

.z-masthead__divider::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 7px;
  height: 7px;
  translate: -50% -50%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

/* Hero split used by the Day board: wordmark left, palette panel right. */
.z-masthead--split {
  display: grid;
  gap: var(--space-32);
  text-align: start;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .z-masthead--split {
    /* The focal object is the dominant visual, so it takes the larger track
       while the copy column keeps a full measure. */
    grid-template-columns: minmax(24rem, 1fr) minmax(0, 1.12fr);
    align-items: center;
    gap: var(--space-48);
  }
}

/* --- Board field: 12-column showroom grid --------------------------------- */
.z-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--board-gap);
}

@media (min-width: 48rem) {
  .z-board {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .z-board {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* Column spans. Mobile = full width; tablet = 8-col; desktop = 12-col.
   Board 09 requires deliberate reprioritisation rather than naive stacking,
   so tablet spans are declared independently of desktop spans. */
[class*="z-col-"] {
  grid-column: span 4;
}

@media (min-width: 48rem) {
  .z-col-3,
  .z-col-4 { grid-column: span 4; }
  .z-col-5,
  .z-col-6,
  .z-col-7,
  .z-col-8,
  .z-col-9,
  .z-col-12 { grid-column: span 8; }
}

@media (min-width: 80rem) {
  .z-col-2 { grid-column: span 2; }
  .z-col-3 { grid-column: span 3; }
  .z-col-4 { grid-column: span 4; }
  .z-col-5 { grid-column: span 5; }
  .z-col-6 { grid-column: span 6; }
  .z-col-7 { grid-column: span 7; }
  .z-col-8 { grid-column: span 8; }
  .z-col-9 { grid-column: span 9; }
  .z-col-12 { grid-column: span 12; }
}

/* --- Section rhythm -------------------------------------------------------- */
.z-section {
  padding-block: var(--section-pad);
  scroll-margin-top: 6rem;
}

.z-section--tight {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.z-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  margin-block-end: var(--space-24);
}

/* --- Generic stacks and rows ----------------------------------------------- */
.z-stack {
  display: grid;
  gap: var(--space-16);
  align-content: start;
}

.z-stack--sm { gap: var(--space-8); }
.z-stack--lg { gap: var(--space-24); }

.z-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

.z-row--sm { gap: var(--space-8); }
.z-row--between { justify-content: space-between; }
.z-row--nowrap { flex-wrap: nowrap; }

/* Clusters carry an explicit column count so a panel never ends with an
   orphan cell — the reference boards always show complete rows. */
.z-cluster {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  align-items: stretch;
}

.z-cluster--wide { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.z-cluster--tight { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }

.z-cluster--2,
.z-cluster--3,
.z-cluster--4,
.z-cluster--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 48rem) {
  .z-cluster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .z-cluster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .z-cluster--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Icon shelves keep their 24px optical grid instead of stretching. */
.z-iconrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* Matrix used by the state tables on board 03 (rows = variant, cols = state) */
.z-matrix {
  display: grid;
  gap: var(--space-8) var(--space-12);
  align-items: center;
  min-width: 30rem;
}

.z-matrix--6 { grid-template-columns: 5.25rem repeat(6, minmax(0, 1fr)); }
.z-matrix--5 { grid-template-columns: 5.25rem repeat(5, minmax(0, 1fr)); }
.z-matrix--3 { grid-template-columns: 5.25rem repeat(3, minmax(0, 1fr)); }

.z-matrix__scroll {
  overflow-x: auto;
  padding-block-end: var(--space-4);
}

.z-matrix__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-small);
}

.z-matrix__head {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-faint);
  text-align: center;
}

/* --- Footer strip ---------------------------------------------------------- */
.z-boardfoot {
  display: grid;
  gap: var(--space-24);
  padding-block: var(--space-32);
  border-block-start: var(--border-hairline) solid var(--border-hair);
}

.z-boardfoot__grid {
  display: grid;
  gap: var(--space-16);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.z-colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-block: var(--space-24);
  border-block-start: var(--border-hairline) solid var(--border-hair);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}