/* ================================================================
   BUNT ROK FESTIVAL — GRUNGE variant overrides
   Dodaje se poverh base.css + components.css kao treći stylesheet.
   ================================================================ */

body.grunge {
  --brand-red: #D6151C;
  --brand-yellow: #FFE04A;
  background: #0A0808;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  background-size: 320px 320px;
}

body.grunge .container { position: relative; }

/* --- Display type: condensed + distressed feel via text-shadow + roughen --- */
body.grunge {
  --font-display: 'Anton', 'Archivo Black', sans-serif;
}

body.grunge .hero__title,
body.grunge .h2,
body.grunge .page-header h1,
body.grunge .section-head h2,
body.grunge .host-hero__name,
body.grunge .cta-band h2 {
  text-shadow:
    2px 0 0 rgba(214,21,28,0.6),
    -2px 0 0 rgba(30,58,229,0.4),
    0 0 40px rgba(0,0,0,0.6);
  letter-spacing: -0.02em;
}

/* --- Tape strip accents --- */
body.grunge .hero__edition {
  background: var(--brand-yellow);
  color: #000;
  padding: 6px 14px 4px;
  transform: rotate(-2deg);
  display: inline-block;
}
body.grunge .hero__edition::before { display: none; }

/* --- Buttons become blockier, no radius, with tape overlay on hover --- */
body.grunge .btn {
  border-width: 2px;
  position: relative;
  transform: rotate(-0.5deg);
}
body.grunge .btn--primary {
  background: var(--brand-red);
  color: #fff;
  box-shadow: 4px 4px 0 #000;
}
body.grunge .btn--primary:hover {
  transform: rotate(-0.5deg) translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--brand-yellow);
}
body.grunge .btn--yellow {
  box-shadow: 4px 4px 0 var(--brand-red);
}

/* --- Cards get torn paper edge --- */
body.grunge .video-card,
body.grunge .contact-form,
body.grunge .timer-cell,
body.grunge .logo-strip__item {
  border-width: 2px;
  border-color: #fff;
  background: #0E0B0B;
  position: relative;
}
body.grunge .video-card:hover {
  border-color: var(--brand-yellow);
  box-shadow: 8px 8px 0 var(--brand-red);
}

/* --- Filter pills become stickers --- */
body.grunge .filter-pill {
  border-width: 2px;
  transform: rotate(-1deg);
}
body.grunge .filter-pill:nth-child(even) { transform: rotate(1deg); }
body.grunge .filter-pill[aria-pressed="true"] {
  background: var(--brand-yellow);
  border-color: #000;
  color: #000;
}

/* --- Heavy red block under section titles --- */
body.grunge .section-head h2 {
  display: inline-block;
  background: linear-gradient(180deg, transparent 65%, var(--brand-red) 65%, var(--brand-red) 82%, transparent 82%);
}

/* --- Grainy overlay on hero --- */
body.grunge .hero__overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.95) 100%);
}
body.grunge .hero__grain { opacity: 0.28; }

/* --- CTA band becomes torn yellow --- */
body.grunge .cta-band {
  background: var(--brand-yellow);
  color: #000;
}
body.grunge .cta-band h2 { color: #000; text-shadow: 3px 3px 0 var(--brand-red); }

/* --- Nav gets a tape strip underline --- */
body.grunge .nav { border-bottom: 2px solid var(--brand-red); }
body.grunge .nav__link[aria-current="page"]::after { height: 3px; background: var(--brand-yellow); }

/* --- About image gets a rotated frame --- */
body.grunge .about__image,
body.grunge .host-preview__image,
body.grunge .host-hero__portrait {
  transform: rotate(-1.2deg);
  outline: 4px solid #fff;
  outline-offset: -4px;
  box-shadow: 12px 12px 0 var(--brand-red);
}

/* --- Marquee speed-up --- */
body.grunge .marquee__track { animation-duration: 20s; }

/* --- Stats: give them a hand-drawn red underline --- */
body.grunge .stat__num {
  color: var(--brand-yellow);
  text-shadow: 3px 3px 0 var(--brand-red);
}