/* Elbows Up campaign page -- page-specific styles.
   Design system classes (.bs-page, .bs-ticker, .bs-rulepair, .bs-dateline,
   .rise, .reveal, .stamp-in, etc.) come from components.css. */

/* ------------------------------------------------------------------ */
/* 1. Ticker band                                                     */
/* ------------------------------------------------------------------ */
.eu-ticker {
  background: var(--maple);
  color: var(--maple-ink-inverse, oklch(0.98 0.005 27));
}

/* ------------------------------------------------------------------ */
/* 2. Hero section                                                    */
/* ------------------------------------------------------------------ */
.eu-hero {
  background: var(--maple);
  color: var(--maple-ink-inverse, oklch(0.98 0.005 27));
  padding: 80px 0 56px;
}
.eu-hero a {
  color: inherit;
}

.eu-hero-eyebrow {
  display: inline-block;
  border: 2px solid var(--maple-ink-inverse, oklch(0.98 0.005 27));
  outline: 2px solid var(--maple-ink-inverse, oklch(0.98 0.005 27));
  outline-offset: 4px;
  color: var(--maple-ink-inverse, oklch(0.98 0.005 27));
  background: transparent;
  padding: 6px 16px;
  font-family: var(--scrawl);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  margin-bottom: 42px;
}

.eu-hero-h1 {
  font-family: var(--shout);
  font-weight: 400;
  font-size: clamp(56px, 12vw, 140px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 28px;
}
.eu-hero-h1-line {
  display: block;
}
.eu-hero-h1-tilt {
  transform: rotate(-1deg);
}

.eu-hero-sub {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.35;
  max-width: 52ch;
  margin: 0 0 21px;
}

.eu-hero-body {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
  opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* 3. The doctrine section                                            */
/* ------------------------------------------------------------------ */
.eu-doctrine-section {
  padding: 84px 0 0;
}

.eu-doctrine {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
}

.eu-doctrine-content {
  min-width: 0;
}

.eu-doctrine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.eu-doctrine-num {
  display: block;
  font-family: var(--shout);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  color: var(--maple);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

.eu-doctrine-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.eu-doctrine-text {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

.eu-doctrine-aside {
  position: sticky;
  top: 28px;
}

/* ------------------------------------------------------------------ */
/* 4. The poster wall                                                 */
/* ------------------------------------------------------------------ */
.eu-poster-section {
  padding: 84px 0 0;
}

.eu-poster-label {
  display: inline-block;
  font-family: var(--scrawl);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 35px;
}

.eu-poster-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 35px;
}

.eu-slogan {
  display: inline-block;
  padding: 12px 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  user-select: none;
}

/* Style 0: maple bg, white text, no border */
.eu-slogan-0 {
  background: var(--maple);
  color: var(--maple-ink-inverse, oklch(0.98 0.005 27));
}

/* Style 1: transparent bg, maple-deep text, 2px solid maple border */
.eu-slogan-1 {
  background: transparent;
  color: var(--maple-deep);
  border: 2px solid var(--maple);
}

/* Style 2: color-text bg, color-bg text, no border */
.eu-slogan-2 {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Style 3: maple-tint bg, maple-deep text, no border */
.eu-slogan-3 {
  background: var(--maple-tint);
  color: var(--maple-deep);
}

/* Style 4: transparent bg, color-text text, 2px solid color-text border */
.eu-slogan-4 {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
}

.eu-poster-note {
  font-size: 15.5px;
  line-height: 28px;
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* 5. The pledge section                                              */
/* ------------------------------------------------------------------ */
.eu-pledge-section {
  padding: 84px 0 0;
}

.eu-pledge-label {
  display: inline-block;
  font-family: var(--scrawl);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--maple);
  color: var(--maple-ink-inverse, oklch(0.98 0.005 27));
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 35px;
}

.eu-pledge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.eu-pledge-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 10px;
}

.eu-pledge-text {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

/* ------------------------------------------------------------------ */
/* 6. The fine print / quote section                                  */
/* ------------------------------------------------------------------ */
.eu-quote-section {
  padding: 84px 0 84px;
}

.eu-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.4;
  margin: 0 0 14px;
  max-width: 38ch;
  border: 0;
  padding: 0;
}

.eu-figcaption {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ------------------------------------------------------------------ */
/* Responsive: 860px -- stack 2-column and 4-column layouts            */
/* ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .eu-doctrine {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .eu-doctrine-aside {
    position: static;
  }

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

  .eu-pledge-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

/* ------------------------------------------------------------------ */
/* Responsive: 480px -- single column everything, full-width buttons   */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .eu-hero {
    padding: 56px 0 49px;
  }

  .eu-hero-eyebrow {
    font-size: 11px;
    padding: 5px 12px;
    margin-bottom: 28px;
  }

  .eu-doctrine-grid {
    grid-template-columns: 1fr;
  }

  .eu-poster-wall {
    gap: 8px;
  }

  .eu-slogan {
    padding: 10px 16px;
  }

  .btn {
    width: 100%;
  }
}