/* ============================================================
   ONE4ALL — Layout Utilities
   Container, Section, Grid — sourced from Grid System Spec.
   Kein Bootstrap. Kein Tailwind. Eigenes System.
   ============================================================ */

/* ----------------------------------------------------------
   CONTAINERS
   See Grid System Spec §D for usage rules.
---------------------------------------------------------- */

.o4-container {
  width: 100%;
  max-width: var(--o4all-container);        /* 1200px */
  margin-inline: auto;
  padding-inline: var(--o4all-page-padding);
}

.o4-container-wide {
  width: 100%;
  max-width: var(--o4all-container-wide);   /* 1320px */
  margin-inline: auto;
  padding-inline: var(--o4all-page-padding);
}

.o4-container-narrow {
  width: 100%;
  max-width: var(--o4all-container-narrow); /* 780px */
  margin-inline: auto;
  padding-inline: var(--o4all-page-padding);
}

/* ----------------------------------------------------------
   SECTION SPACING
---------------------------------------------------------- */

.o4-section {
  padding-block: var(--o4all-section-y);
}

.o4-section-tight {
  padding-block: var(--o4all-section-y-tight);
}

/* ----------------------------------------------------------
   GRID SYSTEM
   Source: Grid System Spec §D
---------------------------------------------------------- */

.o4-grid {
  display: grid;
  grid-template-columns: repeat(var(--o4all-grid-columns), 1fr);
  gap: var(--o4all-grid-gap);
}

.o4-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--o4all-grid-gap);
}

.o4-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--o4all-grid-gap);
}

.o4-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--o4all-grid-gap);
}

/* ----------------------------------------------------------
   GRID RESPONSIVE COLLAPSE
   Source: Grid System Spec §D + §E5/E6
---------------------------------------------------------- */

@media (max-width: 1023px) {
  .o4-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--o4all-grid-gap-tablet);
  }

  .o4-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--o4all-grid-gap-tablet);
  }

  .o4-grid-2 {
    gap: var(--o4all-grid-gap-tablet);
  }
}

@media (max-width: 767px) {
  .o4-grid,
  .o4-grid-2,
  .o4-grid-3,
  .o4-grid-4 {
    grid-template-columns: 1fr;
    gap: var(--o4all-grid-gap-mobile);
  }
}

/* ----------------------------------------------------------
   COLUMN SPAN UTILITIES (for .o4-grid 12-column layout)
---------------------------------------------------------- */

.o4-col-3  { grid-column: span 3; }
.o4-col-4  { grid-column: span 4; }
.o4-col-5  { grid-column: span 5; }
.o4-col-6  { grid-column: span 6; }
.o4-col-7  { grid-column: span 7; }
.o4-col-8  { grid-column: span 8; }
.o4-col-9  { grid-column: span 9; }
.o4-col-12 { grid-column: span 12; }

@media (max-width: 1023px) {
  .o4-col-3,
  .o4-col-4,
  .o4-col-5,
  .o4-col-6,
  .o4-col-7,
  .o4-col-8,
  .o4-col-9 { grid-column: span 12; }
}

/* ----------------------------------------------------------
   FLEXBOX UTILITIES
---------------------------------------------------------- */

.o4-flex        { display: flex; align-items: center; }
.o4-flex-wrap   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o4all-inline-gap); }
.o4-flex-apart  { display: flex; align-items: center; justify-content: space-between; }
.o4-flex-center { display: flex; align-items: center; justify-content: center; }

/* ----------------------------------------------------------
   TEXT ALIGNMENT
---------------------------------------------------------- */

.o4-text-center { text-align: center; }
.o4-text-left   { text-align: left; }
.o4-text-right  { text-align: right; }

/* ----------------------------------------------------------
   SITE HEADER
   Default: solid dark on all pages.
   Homepage (body.home): transparent until user scrolls.
   JS adds .is-scrolled → solid on all pages.
   JS sets --o4all-header-height on :root for content offset.
   No layout shift: inner pages push .site-main down by
   var(--o4all-header-height). Homepage hero fills full viewport.
---------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--o4all-z-nav);
  background-color: var(--o4all-color-ink);  /* Default: solid dark */
  box-shadow: var(--o4all-shadow-nav);
  transition: background-color var(--o4all-transition-slow),
              box-shadow var(--o4all-transition-slow);
}

/* Homepage: start transparent over hero video/image */
body.home .site-header {
  background-color: transparent;
  box-shadow: none;
}

/* After scroll: all pages get solid dark header with subtle glass depth.
   body.home .site-header has specificity 21 (two classes + element),
   so we need body.home .site-header.is-scrolled (specificity 31) to win. */
.site-header.is-scrolled,
body.home .site-header.is-scrolled {
  background-color: rgba(13, 27, 42, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(13, 27, 42, 0.22);
}

/* WordPress admin bar offset */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o4all-inline-gap);
  padding-block: 20px;
}

@media (max-width: 1023px) {
  .site-header__inner {
    padding-block: 16px;
  }
}

/* ----------------------------------------------------------
   SITE MAIN
---------------------------------------------------------- */

.site-main {
  flex: 1;
  min-height: 0;
}

/* ----------------------------------------------------------
   SITE FOOTER LAYOUT
   Source: Design System §8.16 / Grid System Spec §F12
---------------------------------------------------------- */

.site-footer {
  background-color: var(--o4all-color-ink);
  color: var(--o4all-text-inverse);
  padding-top: 5rem;
  padding-bottom: 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 3.5rem 4rem;
  padding-bottom: 3.5rem;
}

.site-footer__bottom {
  border-top: 1px solid var(--o4all-border-dark);
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-footer__copy {
  font-size: var(--o4all-type-small);
  color: var(--o4all-footer-text-accessible);
  margin: 0;
}

.site-footer__copy a {
  color: var(--o4all-footer-link-accessible);
  text-decoration: none;
}

.site-footer__copy a:hover {
  color: var(--o4all-text-inverse);
}

@media (max-width: 1023px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding-top: 3rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }
}