/*
  CarlosSuarezArt — Layout
  Structural page scaffolding: containers, the header/nav, the footer,
  and the asymmetric grid primitive used for artwork listings. This file
  has no opinion about individual components' internal styling — see
  components.css for that.
*/

/* ===== Containers ===== */

.container{
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container--reading{
  max-width: var(--reading-max);
  margin: 0 auto;
}

/* Hero / single-artwork moments break out to full viewport width
   (Gagosian-style) — deliberately outside the .container constraint. */
.full-bleed{
  width: 100%;
}

/* ===== Header / primary nav =====
   A thin, quiet bar — Gagosian-quiet, per the visual design system.
   Transparent, no fill, sits directly on Gallery White. A hairline
   bottom border everywhere except Home, where it stays invisible
   during the ceremony (see home.css / .site-header--home). */

.site-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 var(--space-4);
  border-bottom: 0.5px solid var(--color-border);
  /* On the Homepage, .site-header--home's ceremony animation touches
     transform, which creates its own stacking context for the whole
     header even once the animation has settled (the computed transform
     reads as an identity matrix, but the element still counts as
     "having a transform" for stacking purposes). Without an explicit
     z-index here, that traps .site-nav's own z-index inside the header's
     local context, so the header (as one unit, z-index:auto) still lost
     to .hero__frame's z-index:1 (home.css) at the outer level — the real
     cause of the mobile Collections-link tap bug. This must sit above
     any content z-index on any page, on purpose, always. */
  z-index: 10;
}

.site-header--home{
  border-bottom: none;
}

.site-header__wordmark{
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--color-blue);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav{
  display: flex;
  gap: var(--space-4);
  list-style: none;
}

.site-nav a{
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 0.5px solid transparent;
  transition: color 0.4s ease, border-color 0.4s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* Mobile nav toggle — thin-line only, no fill, no personality
   (Bible §17 Iconography & Button Philosophy). The icon itself stays
   visually minimal (28x20) but the tappable button is 44x44 — WCAG's
   comfortable touch-target minimum — so restraint never comes at the
   cost of usability (Bible §18: Human Connection extends to every
   visitor). The icon is centered inside the larger invisible hit area. */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span{
  position: absolute;
  left: 50%;
  width: 24px;
  height: 1px;
  background: var(--color-black);
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease-gentle), opacity 0.35s var(--ease-gentle);
}

.nav-toggle span:nth-child(1){ top: 16px; }
.nav-toggle span:nth-child(2){ top: 22px; }
.nav-toggle span:nth-child(3){ top: 28px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 760px){
  .nav-toggle{ display: block; }

  .site-nav{
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-white);
    padding: var(--space-4);
    border-bottom: 0.5px solid var(--color-border);
    /* Without an explicit z-index, this absolutely-positioned dropdown
       has no defense against any other positioned element on the page
       that declares its own z-index — .hero__frame's z-index:1 (home.css)
       was winning the stacking order and silently capturing taps meant
       for these links, even though the link text was fully visible and
       its href was completely correct. 20 clears every current z-index
       on the site (highest found elsewhere is 5) with real headroom for
       future sections, while staying below the skip-to-content link's
       100 (base.css), which should always win regardless of nav state. */
    z-index: 20;
  }

  .site-nav.is-open{
    display: flex;
  }
}

/* ===== Footer ===== */

.site-footer{
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-7);
  border-top: 0.5px solid var(--color-border);
}

.site-footer p{
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  color: var(--color-border);
  text-transform: uppercase;
  max-width: none;
}

/* ===== Asymmetric grid primitive (Bible §10) =====
   Museum-catalogue in spirit, never a uniform e-commerce tile grid.
   Column spans are content-driven and vary per listing — these three
   stagger patterns are the recurring shapes used across Gallery,
   Collection detail, and New Works, not a rigid fixed system. */

.stagger-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-7) var(--space-4);
}

/* Offsets use transform, not margin-top: a visual stagger that doesn't
   add to document flow height. Margin-based offsets compound with each
   card's own (now-variable, true-ratio) height and can inflate a
   three-card section well past what the composition intends. Modest
   values here read as "hung at slightly different heights," not a
   slow cumulative descent down the page. */
.stagger-grid .span-a{ grid-column: 1 / 8; }
.stagger-grid .span-b{ grid-column: 8 / 13; transform: translateY(var(--space-4)); }
.stagger-grid .span-c{ grid-column: 3 / 10; transform: translateY(var(--space-2)); }

@media (max-width: 760px){
  .stagger-grid{
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .stagger-grid .span-a,
  .stagger-grid .span-b,
  .stagger-grid .span-c{
    grid-column: 1;
    transform: none;
  }
}

/* ===== Museum grid — a scalable listing for an arbitrary number of
   pieces (a full Collection, later a full Gallery), where .stagger-grid's
   fixed three-item composition doesn't apply. Two columns, alternating
   items offset vertically by one fixed amount (not additive — total
   height never inflates regardless of how many pieces there are), which
   reads as "hung at slightly different heights" rather than a uniform,
   interchangeable tile grid (Bible §10). ===== */
.museum-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-5);
}

.museum-grid > *:nth-child(even){
  margin-top: var(--space-8);
}

@media (max-width: 760px){
  .museum-grid{
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .museum-grid > *:nth-child(even){
    margin-top: 0;
  }
}