/* ==========================================================================
   REVCENDIA — LAYOUT
   Containers, grid, section rhythm, and structural shell (header/footer).
   Depends on base.css tokens. No colour or type values are declared here
   directly — everything references custom properties.
   ========================================================================== */

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

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

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

/* --------------------------------------------------------------------------
   2. SECTION RHYTHM
   Every homepage/page section uses one of these as its outer wrapper.
   Deliberate, consistent vertical rhythm is what makes editorial pacing
   feel intentional rather than cramped or arbitrary.
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-12);
  position: relative;
}

.section--tight {
  padding-block: var(--space-10);
}

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

.section--dark {
  background-color: var(--color-primary);
  color: var(--color-white-70);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #FFFFFF;
}

.section--border-top {
  border-top: 1px solid var(--color-border);
}

.section--border-bottom {
  border-bottom: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   3. GRID SYSTEM
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.grid--12 {
  grid-template-columns: repeat(12, 1fr);
}

@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Asymmetric two-column layout used for editorial pairings
   (e.g. hero copy + visual, narrative + metric column). */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-9);
  align-items: center;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

.split--reverse {
  grid-template-columns: 0.9fr 1.1fr;
}

@media (max-width: 900px) {
  .split--reverse {
    grid-template-columns: 1fr;
  }
  .split--reverse > *:first-child {
    order: 2;
  }
}

/* --------------------------------------------------------------------------
   4. FLEX UTILITIES (structural, not decorative)
   -------------------------------------------------------------------------- */
.flex {
  display: flex;
}

.flex--between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex--column {
  display: flex;
  flex-direction: column;
}

.flex-gap-2 { gap: var(--space-2); }
.flex-gap-3 { gap: var(--space-3); }
.flex-gap-4 { gap: var(--space-4); }
.flex-gap-5 { gap: var(--space-5); }
.flex-gap-6 { gap: var(--space-6); }

/* --------------------------------------------------------------------------
   5. SITE SHELL — HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

/* The frosted-glass background lives on a pseudo-element rather than
   directly on .site-header. A backdrop-filter/filter/transform on an
   element makes IT the containing block for any position:fixed
   descendants — and the mobile nav panel (.nav, position:fixed) is
   nested inside .site-header. Putting the filter on ::before instead
   keeps .site-header "clean" so .nav still sizes itself against the
   real viewport, not the 84px-tall header bar. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: var(--space-6);
}

/* --------------------------------------------------------------------------
   6. SITE SHELL — FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-primary);
  color: var(--color-white-70);
}

.site-footer__top {
  padding-block: var(--space-11);
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-8);
}

@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
}

@media (max-width: 560px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

.site-footer__bottom {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-white-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   7. MAIN LANDMARK
   Ensures no content ever sits under the sticky header on anchor jumps.
   -------------------------------------------------------------------------- */
main {
  display: block;
  scroll-margin-top: 84px;
}

main > section[id] {
  scroll-margin-top: 84px;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE VISIBILITY HELPERS
   -------------------------------------------------------------------------- */
.hide-mobile {
  display: none;
}

@media (min-width: 900px) {
  .hide-mobile {
    display: revert;
  }
  .hide-desktop {
    display: none;
  }
}