/* Campaign page (sutaz.html) on top of home.css + page.css: a dark, calm hero with the car,
   three facts, the prizes, three steps and the full rules. */

/* Light hero (owner 2026-11-06): colour light, the car drives in, tickets – shared with the homepage slide (home.css). */
.camp-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s6); align-items: center; padding: var(--section-sm) var(--edge); background: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #eef2f3 70%); color: var(--ink); }
.camp-hero > :not(.hero-fx) { position: relative; z-index: 1; }
.camp-hero .car-drive { animation: drive-in 1.6s cubic-bezier(.16, 1, .3, 1) both; }
.camp-hero-text > * { animation: rise 0.9s cubic-bezier(.16, 1, .3, 1) both; }
.camp-hero-text > :nth-child(2) { animation-delay: 0.12s; } .camp-hero-text > :nth-child(3) { animation-delay: 0.24s; } .camp-hero-text > :nth-child(4) { animation-delay: 0.36s; } .camp-hero-text > :nth-child(5) { animation-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) { .camp-hero .car-drive, .camp-hero-text > * { animation: none; } }
.camp-hero-text { display: grid; gap: var(--s4); justify-items: start; max-width: 38rem; }
.camp-eyebrow { color: var(--cyan-text); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.camp-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.06; letter-spacing: -0.01em; }
.camp-lead { color: var(--ink-soft); font-size: 1.15rem; max-width: 34rem; }
.camp-lead strong { color: var(--ink); }
.camp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }

.camp-car { margin: 0; }
.camp-car figcaption { margin-top: var(--s2); color: var(--ink-soft); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Facts band: lined up with the content column, thin dividers between the three facts. */
.camp-facts { display: grid; padding-inline: var(--edge); background: var(--paper); border-bottom: 1px solid var(--line); }
.camp-fact { display: grid; gap: var(--s1); align-content: start; padding: var(--s4) 0; }
.camp-fact + .camp-fact { border-top: 1px solid var(--line); }
.camp-fact-big { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.05; color: var(--cyan-text); white-space: nowrap; }

.prize-list, .step-list { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.prize { display: grid; gap: var(--s2); align-content: start; padding: var(--s5) var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.prize-main { background: #e3f1f7; border: 2px solid var(--cyan-button); }
.prize-rank { color: var(--cyan-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.prize h3 { font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 700; line-height: 1.15; }

.step-list { counter-reset: step; }
.step-list li { counter-increment: step; display: grid; gap: var(--s1); padding-top: var(--s3); border-top: 2px solid var(--night); }
.step-list li::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-weight: 700; color: var(--cyan-text); }
.step-list h3 { font-size: 1.2rem; font-weight: 700; }

.camp-tuned { margin-top: var(--s5); font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--cyan-text); }
.camp-downloads { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s3) 0; }
.camp-downloads a { color: var(--cyan-text); font-weight: 650; }
.rules { margin-top: var(--s3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rules summary { min-height: 3.25rem; padding: var(--s3) 0; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.rules-body { display: grid; gap: var(--s4); max-width: 48rem; padding-bottom: var(--s5); }
.rule h3, .rule h4 { margin-bottom: var(--s1); font-size: 1rem; font-weight: 700; }
.rule p, .rule ul { margin: 0 0 var(--s2); color: var(--ink); font-size: 0.95rem; }
.rule ul { padding-left: 1.2rem; }
.rules-legal-title { margin-top: var(--s4); font-family: var(--display); font-size: 1.4rem; }

.camp-contact { display: grid; justify-items: start; gap: var(--s2); padding-bottom: var(--section); }
.camp-contact .parking-note { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }

@media (min-width: 48rem) {
  .camp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: min(calc(100svh - 4.5rem), 44rem); }
  .camp-facts { grid-template-columns: repeat(3, 1fr); }
  .camp-fact { padding: var(--s5) var(--s4); }
  .camp-fact:first-child { padding-left: 0; }
  .camp-fact + .camp-fact { border-top: 0; border-left: 1px solid var(--line); }
  .prize-list { grid-template-columns: 1.3fr 1fr 1fr; }
  .step-list { grid-template-columns: repeat(3, 1fr); }
}

/* Section headings in the same campaign typeface. */
.campaign .page-section h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.6rem); }

/* Prize pictures: the car photo, a hotel picture (placeholder until Hotel Orchidea's), a drawn voucher. */
.prize-media { display: grid; place-items: center; height: 9.5rem; margin: 0 0 var(--s2); overflow: hidden; border-radius: 10px; }
.prize-media img { width: 100%; height: 9.5rem; object-fit: contain; }
.prize-main .prize-media img { object-fit: contain; }
.prize-photo img { object-fit: cover; }
.voucher { position: relative; gap: 0.2rem; align-content: center; background: linear-gradient(135deg, #ffffff 0%, #e8f3f8 100%); border: 1px dashed #9cc7d8; box-shadow: inset 0 0 0 6px #fff; }
.voucher img { width: 7.5rem; height: auto; }
.voucher-kind { margin: 0; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.voucher-value { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--cyan-text); }