/* ===========================================================================
   layout.css — containers, sections, grids, decorative backgrounds
   ===========================================================================
   RULE: spacing between siblings comes from `gap` on the parent. Do not add
   margins to individual elements — that is a source of collapsing and doubling.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Containers
--------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--width-narrow);
}

/* ---------------------------------------------------------------------------
   Sections — one vertical rhythm across the whole site
--------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-pad-y);
  position: relative;
}

.section--sm {
  padding-block: var(--section-pad-y-sm);
}

/* Background variants. Do not change the background inline — add a modifier. */
.section--surface {
  background-color: var(--color-surface);
}

.section--deep {
  background-color: var(--color-canvas-deep);
}

/* ---------------------------------------------------------------------------
   SECTION AS A PANEL
   ---------------------------------------------------------------------------
   The strongest separator on the page, and the reason it exists:

   A flat background swap between two adjacent sections relies entirely on a
   difference in lightness. On a dark theme that difference has to stay small to
   keep text legible, so it ends up invisible and the whole page reads as one
   slab — which is precisely the complaint this variant answers.

   A panel separates by being an OBJECT instead: it has rounded corners, a lit
   edge and air around it, so the eye registers a boundary regardless of how
   close the two fills happen to be in value.

   The panel is deliberately WIDER than the text grid (--width-panel 1400px vs
   --width-page 1240px). If both were the same width the panel edge would run
   exactly along the text column and read as a frame around the paragraph rather
   than as a slab the section sits on.

   Use it for ALTERNATION, not for everything. Every second or third section is
   the point; a page of panels is a page of stripes and no rhythm at all.
--------------------------------------------------------------------------- */
.section--panel {
  padding-block: 0;
  background-color: transparent;
}

.section--panel > .container {
  max-width: var(--width-panel);
  padding-block: var(--section-pad-y);
  padding-inline: clamp(var(--space-5), 5vw, var(--space-9));
  background-color: var(--color-surface);
  border: 1px solid var(--color-panel-edge);
  border-radius: var(--radius-lg);
}

/* ONE GAP BETWEEN ANY TWO SECTIONS, WHATEVER THEIR TYPE.

   A panel's own air lives on its .container, not on the section, so the
   section-level padding here is purely the gap between neighbours. Previously
   a panel added 72 px on top of the previous section's 101 px, so approaching
   a panel cost 173 px while leaving one cost 72 — the page had four different
   gaps and no rhythm.

   Now exactly one neighbour pays for the gap. Before a panel the previous
   section's bottom padding is the whole of it; after a panel the next section's
   top padding is. Both come out at --section-pad-y, same as plain to plain. */
.section + .section--panel {
  padding-top: 0;
}

.section--panel + .section {
  padding-top: var(--section-pad-y);
}

/* TWO PLAIN SECTIONS MEETING WAS THE ONLY CASE NOBODY HANDLED.

   The rule above covers a panel touching a section, so those boundaries came
   out at 72 px. Everywhere else both neighbours contributed a full
   --section-pad-y and the gap doubled to 202 px, which is why the rhythm down
   the page measured 72, 102, 173 and 202 — noise rather than a rhythm.

   One section's worth of air between two sections is enough, so the second one
   stops adding its own. The selector cannot collide with the panel rule above:
   that one needs a panel on one side, this one needs a panel on neither. */
.section:not(.section--panel) + .section:not(.section--panel) {
  padding-block-start: 0;
}

/* On narrow screens the side padding would eat the content, so the panel gives
   up its rounded corners and behaves like a plain background band. */
@media (max-width: 47.9375rem) {
  .section--panel > .container {
    border-inline: 0;
    border-radius: 0;
    padding-inline: var(--gutter);
  }
}

/* Content on a panel sits one level higher than content on the page. Without
   this, cards would share the panel's own fill and vanish into it.

   The list must name EVERY component that paints --color-surface itself — and
   that includes the ones assembled in JS, so grepping the HTML is not enough
   (the two demo panels are built by demo.js inside a `data-demo` container).
   A component left off this list keeps the panel's own fill, so the only thing
   holding it apart from its parent is a 1 px border: in the dark theme that
   reads as a flat slab, and in the light theme it is white on white.

   Every selector here carries one class more than the component's own rule in
   sections.css, which is what lets it win — sections.css is loaded later, so
   equal specificity would lose. Keep it that way when adding to the list. */
.section--panel .card,
.section--panel .autocard,
.section--panel .module,
.section--panel .channel,
.section--panel .caps__item,
.section--panel .faq__item,
.section--panel .panels__body,
.section--panel .panels__tab:hover,
.section--panel .panels__tab.is-selected,
.section--panel .demo__panel {
  background-color: var(--color-surface-raised);
}

.section--panel .datafield,
.section--panel .pledge__limits,
.section--panel .disclaimer {
  background-color: var(--color-surface-sunken);
}

/* Hairline separating sections that share the same background. */
.section--divided {
  border-top: 1px solid var(--color-border-subtle);
}

/* ---------------------------------------------------------------------------
   Section header
--------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 760px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.section-head--wide {
  max-width: 920px;
}

/* Eyebrow: monospace in small caps. Signals "data label". */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* Short rule before the eyebrow — visually anchors the start of a section. */
.eyebrow::before {
  content: '';
  width: var(--space-5);
  height: 1px;
  background-color: var(--color-accent-border);
}

.section-head--center .eyebrow::before {
  display: none;
}

.section-lead {
  max-width: var(--width-prose);
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
}

.section-head--center .section-lead {
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Vertical spacing inside a section
--------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
}

.stack--2 { gap: var(--space-2); }
.stack--3 { gap: var(--space-3); }
.stack--4 { gap: var(--space-4); }
.stack--5 { gap: var(--space-5); }
.stack--6 { gap: var(--space-6); }
.stack--7 { gap: var(--space-7); }
.stack--8 { gap: var(--space-8); }
.stack--9 { gap: var(--space-9); }

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

.row--between {
  justify-content: space-between;
}

/* ---------------------------------------------------------------------------
   Grids
   The name says how many columns on the widest screen; narrowing is automatic.
--------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
}

/* NOTE: `.grid--2` needs about 680 px to produce two columns. Nested inside the
   narrow `.grid--split` column (about 550 px) it COLLAPSES to a single column
   and creates a tall, empty section. This bug already happened in the „Nasze
   podejscie" section. Put multi-column grids at the `.container` level. */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* EXACTLY two columns on a wide screen. Use it with FOUR cards:
   `.grid--2` would automatically lay them out in three columns and leave one
   orphan on the second row — a 2x2 layout is calmer and reads better. */
.grid--pair {
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .grid--pair {
    grid-template-columns: 1fr 1fr;
  }
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* Asymmetric layout: content + side panel. */
.grid--split {
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 62rem) {
  .grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-9);
  }

  /* Columns start on the same line instead of being centred against each other.
     Centring is right when two short blocks sit side by side, but when one
     column is a heading with copy and the other a list, the taller one pushes
     the shorter one down — here by 75 px and 108 px — and the section reads as
     misaligned even though nothing is broken. */
  .grid--split-top {
    align-items: start;
  }

  .grid--split-narrow {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  /* Picture on the left, words on the right — the mirror of the default. The
     HEADING STAYS FIRST IN THE MARKUP so reading order and the heading outline
     are unaffected; only the painted order flips. Alternating this down the
     page is what stops three split sections from reading as one long column. */
  .grid--split-mirror > :first-child {
    order: 2;
  }
}

/* ---------------------------------------------------------------------------
   Decorative backgrounds
--------------------------------------------------------------------------- */

/* Hairline grid — echoes instrument rasters and building facades.
   Purely decorative element, always aria-hidden. */
.grid-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--color-hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-hairline) 1px, transparent 1px);
  background-size: 72px 72px;
  /* Fade towards the bottom — the grid must not compete with the content. */
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 70%), transparent 65%);
  z-index: var(--z-base);
}

/* Subtle copper glow behind the hero section. */
.accent-glow {
  position: absolute;
  pointer-events: none;
  inset-block-start: -20%;
  inset-inline-end: -10%;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at center,
    var(--color-accent-quiet) 0%,
    transparent 62%
  );
  z-index: var(--z-base);
}

/* Content must sit above the decorative backgrounds. */
.section > .container {
  position: relative;
  z-index: var(--z-raised);
}

/* ---------------------------------------------------------------------------
   Horizontal scrolling — only inside its own container.
   The page NEVER scrolls horizontally.
--------------------------------------------------------------------------- */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}