/* ============================================================
   LIACARA Foundation — Layout Patterns
   ============================================================ */
@import './components.css';

/* ============================================================
   CONTAINER / WRAPPER UTILITIES
   ============================================================ */
.container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-l);
}

.container-prose {
  max-width: var(--prose-width);
  margin-inline: auto;
  padding-inline: var(--space-l);
}

/* ============================================================
   SECTION SPACING
   ============================================================ */
.section {
  padding-block: var(--space-4xl);
  position: relative;
}

.section-sm   { padding-block: var(--space-2xl); }
.section-lg   { padding-block: clamp(var(--space-4xl), 8vw, 10rem); }

/* Alternating background */
.section-alt  { background: var(--surface); }
.section-panel { background: var(--panel); }

/* ============================================================
   HERO — Home page
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  grid-template-rows: 1fr;
  grid-template-areas: "text signs";
  column-gap: 60px;
  align-items: center;
  min-height: 100vh;
  padding: 80px;
  position: relative;
  background-color: var(--bg);
  background-image: url('../assets/img/Child_s_hand_27k_El_Castillo.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Dark overlay + bottom fade */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 32, 34, 0.65) 0%,
    rgba(30, 32, 34, 0.65) 60%,
    rgba(42, 44, 46, 1)   100%
  );
  pointer-events: none;
}

.hero-text {
  grid-area: text;
  position: relative;
  z-index: 2;
  padding-right: 40px;
}

.hero-signs {
  grid-area: signs;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 120px);
  gap: 40px;
  justify-content: flex-start;
  align-content: center;
  user-select: none;
  pointer-events: none;
}

.hero-signs .sign-img {
  width: 100px;
  height: auto;
  display: block;
}

/* Photo attribution — bottom-left */
.hero-credit {
  position: absolute;
  bottom: var(--space-m);
  left: 80px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(240, 237, 230, 0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-l);
  line-height: 1.6;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
  margin-bottom: var(--space-s);
}

.hero h1 { margin-bottom: var(--space-l); }

.hero-cta {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 60px 32px;
  }
  .hero-signs { display: none; }
}

/* ============================================================
   GRID LAYOUTS
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

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

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

/* Activities grid (Mission page): wider container so the 4
   cards get more room, with the gap scaled up to match —
   otherwise a fixed 32px gutter would look too tight against
   the wider cards. */
.activities-section .container {
  max-width: 100rem;
}

.activities-section .grid-4 {
  gap: var(--space-2xl);
}

/* Auto-responsive grids */
.grid-auto-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-xl);
}

/* Board grid (Governance page): wider container so the 3
   cards get more room, gap scaled up to match — same
   treatment as the Activities grid on the Mission page. */
.governance-section .container {
  max-width: 100rem;
}

.governance-section .grid-auto-3 {
  gap: var(--space-2xl);
}

/* Asymmetric layouts */
.layout-60-40 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-3xl);
  align-items: start;
}

.layout-40-60 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-3xl);
  align-items: start;
}

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

/* ============================================================
   DIVIDER / ORNAMENT ROW
   ============================================================ */
.divider-signs {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  margin-block: var(--space-2xl);
}

.divider-signs::before,
.divider-signs::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  opacity: 0.3;
}

.divider-signs span {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.divider-signs .sign-img {
  width: 48px;
  height: auto;
  opacity: 0.85;
}

/* ============================================================
   PERSON CARD (Governance page)
   ============================================================ */
.person-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--space-xl);
}

.person-card h3 {
  font-size: var(--step-2);
  margin-bottom: var(--space-xs);
}

.person-card .person-bio {
  font-size: var(--step-0);
  color: var(--muted);
  max-width: 100%;
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-m);
  background: var(--accent);
  color: var(--nav);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--border-radius);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
  z-index: 999;
  transition: top var(--transition-fast);
}

.skip-link:focus { top: var(--space-m); }

/* ============================================================
   SCROLL REVEAL ANIMATION
   JS adds .reveal immediately, .is-visible on intersection
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children when parent has [data-reveal-children] */
[data-reveal-children] > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-children] > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-children] > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-children] > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-children] > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-children] > *:nth-child(6) { transition-delay: 400ms; }

/* ============================================================
   PRINT UTILITIES
   ============================================================ */
@media print {
  .site-nav, .site-footer, .nav-toggle { display: none; }
  body { background: white; color: black; }
  .hero { min-height: auto; }
}