/* =============================================================================
   layout.css — Structural Layer
   Owns: site shell, main column, section spacing, glass-panel base,
         page-builder classes (.page-section, .page-column, .section-inner, .section-fullbleed).
   Does NOT own: component visual styles, colours, typography, animation.
   ============================================================================= */

/* ─── Site shell ─────────────────────────────────────────────────────────────
   .site-shell is the flex column that stretches the page to full height so the
   footer is always pushed to the bottom, even on short pages. */

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

/* ─── Container ──────────────────────────────────────────────────────────────
   .container is the primary constrained-width wrapper used inside sections.
   Max-width comes from --container (1280px, declared in tokens.css).
   The 2.4rem total horizontal gap prevents content touching viewport edges. */

.container {
  width: min(calc(100% - 2.4rem), var(--container));
  margin-inline: auto;
}

/* ─── Section spacing ────────────────────────────────────────────────────────
   .section provides vertical rhythm. Specific sections override via their own
   class (e.g. .hero-home.section sets padding-top: 0 in home.css).
   Do not remove .section from section tags — it is load-bearing for spacing. */

.section {
  position: relative;
  padding: 3.2rem 0;
}

.section--tight {
  padding: 2.4rem 0;
}

.hero-home.section {
  padding-top: 0;
  padding-bottom: 2.4rem;
}

.intro-strip.section {
  padding-top: 2.6rem;
  padding-bottom: 3rem;
}

/* ─── Glass panel ────────────────────────────────────────────────────────────
   Shared visual surface. Used on the header bar, hero panel, feature cards,
   and any component that needs the frosted-glass treatment.
   Colours intentionally hard-coded — do not rely on CSS vars here as this
   must render correctly before tokens are fully cascaded. */

.glass-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.52));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
}

/* ─── Page-builder layout classes ────────────────────────────────────────────
   These classes form the modular section system used in index.php.

   .page-section   — root element of every section file (sections/*.php).
                     Adds `position: relative` so inner absolute elements work.
                     Carries no padding or visual style — existing .section,
                     .hero-home, .value-matrix etc. provide those separately.

   .page-column    — a standard centred content rail inside any section.
                     Max-width matches the --container token (1280px). Use this
                     instead of .container when you need consistent padding
                     separate from the section's own internal wrappers.

   .section-inner  — a narrower 72rem rail for editorial text and card grids.
                     Consistent with the rails used in home.css, layout-overrides.css
                     and the dashboard-opening section. Use for content-dense sections
                     where a slightly narrower line length improves readability.

   .section-fullbleed — escape hatch applied to an element INSIDE a constrained
                     parent. Breaks the element out to full viewport width.
                     The section's own background/image can then be full-bleed
                     while inner children remain constrained via .page-column.
   ──────────────────────────────────────────────────────────────────────────── */

.page-section {
  position: relative;
}

.page-column {
  width: min(calc(100% - 2.4rem), var(--container));
  margin-inline: auto;
  box-sizing: border-box;
}

.section-inner {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  box-sizing: border-box;
}

.section-fullbleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ─── Responsive adjustments ──────────────────────────────────────────────── */

@media (min-width: 768px) {
  .section        { padding: 4.4rem 0; }
  .section--tight { padding: 3rem 0; }

  .hero-home.section   { padding-bottom: 2.8rem; }
  .intro-strip.section { padding-top: 3rem; padding-bottom: 3.6rem; }
}

@media (max-width: 900px) {
  .section-inner {
    width: min(100% - 1.5rem, 72rem);
  }
}

@media (max-width: 640px) {
  .section-inner {
    width: min(100% - 1.25rem, 72rem);
  }
}