/* ==========================================================================
   RUBRIK — LAYOUT PRIMITIVES
   Container, 12-column grid, section rhythm, stacks.
   --------------------------------------------------------------------------
   GRID CONTRACT
     page  max 1440px, centred (the canvas is capped, as in the reference)
     gutter 16px <1200  /  64px ≥1200
     columns 4 <768  /  8 768–1199  /  12 ≥1200
     gap    24px at every breakpoint
     content max = 1312px (1440 − 64×2)
   ========================================================================== */

.rb-page {
  max-width: var(--rb-sys-page-max);
  margin-inline: auto;
  overflow-x: clip;
  background: var(--rb-sys-bg-canvas);
}

/* --- Container ------------------------------------------------------------
   The single horizontal authority. Nothing else sets page-edge padding. */
/* max-width is the OUTER width: content-max plus a gutter on each side. At
   ≥1200 that resolves to 1312 + 64 + 64 = 1440 — the page width — so the
   content box measures exactly 1312px starting at x=64, as the reference does.
   Setting max-width to the content width instead would subtract the gutter
   twice and narrow every column on the page. */
.rb-container {
  width: 100%;
  max-width: calc(var(--rb-sys-content-max) + var(--rb-sys-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--rb-sys-gutter);
}

/* Bleed to the page edge but keep the inner rhythm */
.rb-container--flush { padding-inline: 0; max-width: none; }

/* A narrower measure for editorial blocks */
.rb-container--narrow { max-width: 960px; }

/* --- 12-column grid ------------------------------------------------------- */
.rb-grid {
  display: grid;
  grid-template-columns: repeat(var(--rb-sys-grid-columns), minmax(0, 1fr));
  gap: var(--rb-sys-grid-gap);
}

/* Column spans. Mobile (4 col) is the base; tablet/desktop override.
   Written as data attributes so markup reads as intent, not arithmetic. */
[data-span]                { grid-column: span var(--rb-span-m, 4); }
@media (min-width: 768px)  { [data-span] { grid-column: span var(--rb-span-t, 8); } }
@media (min-width: 1200px) { [data-span] { grid-column: span var(--rb-span-d, 12); } }

/* An explicit start line. Start and span must be set together — setting only
   grid-column-start leaves the end at `auto`, which collapses the item to a
   single track no matter what the span said. */
@media (min-width: 1200px) {
  [data-span][data-start] { grid-column: var(--rb-start-d, auto) / span var(--rb-span-d, 12); }
  [data-start]:not([data-span]) { grid-column-start: var(--rb-start-d, auto); }
}

/* --- Section rhythm -------------------------------------------------------
   Four tiers. A section declares its tier; it never hard-codes padding. */
.rb-section { position: relative; }
.rb-section--xl { padding-block: var(--rb-sys-section-y-xl); }
.rb-section--lg { padding-block: var(--rb-sys-section-y-lg); }
.rb-section--md { padding-block: var(--rb-sys-section-y-md); }
.rb-section--sm { padding-block: var(--rb-sys-section-y-sm); }
.rb-section--flush { padding-block: 0; }

/* Surfaces */
.rb-surface--canvas    { background: var(--rb-sys-bg-canvas); }
.rb-surface--muted     { background: var(--rb-sys-bg-muted); }
.rb-surface--dark      { background: var(--rb-sys-bg-dark); color: var(--rb-sys-fg-on-dark); }
.rb-surface--warm      { background: var(--rb-sys-bg-warm); }
.rb-surface--teal-tint { background: var(--rb-sys-bg-teal-tint); }

/* --- Stack: vertical rhythm between siblings ------------------------------ */
.rb-stack        { display: flex; flex-direction: column; }
.rb-stack > * + * { margin-block-start: var(--rb-stack-gap, var(--rb-ref-space-4)); }
.rb-stack--1  { --rb-stack-gap: var(--rb-ref-space-1); }
.rb-stack--2  { --rb-stack-gap: var(--rb-ref-space-2); }
.rb-stack--3  { --rb-stack-gap: var(--rb-ref-space-3); }
.rb-stack--4  { --rb-stack-gap: var(--rb-ref-space-4); }
.rb-stack--5  { --rb-stack-gap: var(--rb-ref-space-5); }
.rb-stack--6  { --rb-stack-gap: var(--rb-ref-space-6); }
.rb-stack--7  { --rb-stack-gap: var(--rb-ref-space-7); }
.rb-stack--8  { --rb-stack-gap: var(--rb-ref-space-8); }
.rb-stack--9  { --rb-stack-gap: var(--rb-ref-space-9); }
.rb-stack--10 { --rb-stack-gap: var(--rb-ref-space-10); }
.rb-stack--12 { --rb-stack-gap: var(--rb-ref-space-12); }

/* --- Cluster: horizontal group that wraps --------------------------------- */
.rb-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rb-cluster-gap, var(--rb-ref-space-4));
}
.rb-cluster--2 { --rb-cluster-gap: var(--rb-ref-space-2); }
.rb-cluster--3 { --rb-cluster-gap: var(--rb-ref-space-3); }
.rb-cluster--4 { --rb-cluster-gap: var(--rb-ref-space-4); }
.rb-cluster--6 { --rb-cluster-gap: var(--rb-ref-space-6); }
.rb-cluster--7 { --rb-cluster-gap: var(--rb-ref-space-7); }

/* --- Visibility by breakpoint ---------------------------------------------
   Doubled class names so these beat a same-specificity rule in a section
   stylesheet (which loads later in the cascade). When shown, the element gets
   `--rb-show-display` so a section can opt into flex/grid without a fight. */
.rb-only-mobile.rb-only-mobile,
.rb-only-desktop.rb-only-desktop,
.rb-upto-desktop.rb-upto-desktop { display: var(--rb-show-display, block); }

.rb-only-desktop.rb-only-desktop { display: none; }
@media (min-width: 768px)  { .rb-only-mobile.rb-only-mobile  { display: none; } }
@media (min-width: 1200px) {
  .rb-only-desktop.rb-only-desktop { display: var(--rb-show-display, block); }
  .rb-upto-desktop.rb-upto-desktop { display: none; }
}

/* --- Media ---------------------------------------------------------------- */
.rb-media { position: relative; overflow: hidden; }
.rb-media > img,
.rb-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder used where the reference ships no art yet */
.rb-media-placeholder {
  background: var(--rb-sys-bg-muted);
  width: 100%;
  height: 100%;
}