/*
 * globals.css — Layout system, resets, and animation engine
 *
 * Tokens in tokens.css use a standard 16px rem base.
 * Linked by every page after tokens.css.
 */

/* Font and container vars — not in tokens.css */
:root {
  --font-heading: 'Outfit', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --container-width: 1320px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background-color: var(--bg-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Section ──────────────────────────────────────────────────────────────────
 * Semantic structural wrappers. Own padding and background.
 * Never apply background to .container.
 * ───────────────────────────────────────────────────────────────────────────── */
section,
main {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}

header {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}

footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-3xl);
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}

/* ── Container ────────────────────────────────────────────────────────────────
 * Single responsibility: max-width + margin auto.
 * Never add visual styles to .container.
 * ───────────────────────────────────────────────────────────────────────────── */
.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--container-width);
  row-gap: var(--space-l);
  column-gap: var(--space-l);
  margin-left: auto;
  margin-right: auto;
}

/* ── Heading Defaults ─────────────────────────────────────────────────────────
 * ───────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-body);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-l); }

/* ── Base Resets ──────────────────────────────────────────────────────────────
 * ───────────────────────────────────────────────────────────────────────────── */
p {
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.7;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Grid Utilities ───────────────────────────────────────────────────────────
 * ───────────────────────────────────────────────────────────────────────────── */
.grid--2col,
.grid--3col,
.grid--4col {
  display: grid;
  gap: var(--space-l);
  width: 100%;
}

.grid--2col { grid-template-columns: var(--columns-2); }
.grid--3col { grid-template-columns: var(--columns-3); }
.grid--4col { grid-template-columns: var(--columns-4); }

.grid--2col > *:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - var(--space-l) / 2);
  margin-inline: auto;
}

@media (max-width: 991px) {
  .grid--3col,
  .grid--4col { grid-template-columns: var(--columns-2); }
}

@media (max-width: 767px) {
  section,
  main {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }

  header {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }

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

  .grid--2col > *:last-child:nth-child(odd) {
    max-width: 100%;
  }
}

/* ── Entrance Animations ──────────────────────────────────────────────────────
 * Progressive enhancement — scoped to .js-animations.
 * animation.js adds .js-animations to <html> on load.
 * ───────────────────────────────────────────────────────────────────────────── */

@keyframes anim-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes anim-slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.js-animations [data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

.js-animations [data-animate="fade-up"]  { transform: translateY(24px); }
.js-animations [data-animate="slide-up"] { transform: translateY(32px); }

.js-animations [data-animate].is-visible {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-duration: 0.55s;
}

.js-animations [data-animate="fade-up"].is-visible  { animation-name: anim-fade-up; }
.js-animations [data-animate="fade-in"].is-visible  { animation-name: anim-fade-in; }
.js-animations [data-animate="slide-up"].is-visible { animation-name: anim-slide-up; }

.js-animations [data-animate-order="0"] { animation-delay: 0ms; }
.js-animations [data-animate-order="1"] { animation-delay: 80ms; }
.js-animations [data-animate-order="2"] { animation-delay: 160ms; }
.js-animations [data-animate-order="3"] { animation-delay: 240ms; }
.js-animations [data-animate-order="4"] { animation-delay: 320ms; }
.js-animations [data-animate-order="5"] { animation-delay: 400ms; }
.js-animations [data-animate-order="6"] { animation-delay: 480ms; }
.js-animations [data-animate-order="7"] { animation-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .js-animations [data-animate],
  .js-animations [data-animate].is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}