/* ==========================================================================
   GUARDIAN PAGE - Editorial Theme Overrides
   Guardian Brand: Black, White, Red
   ========================================================================== */

/* Guardian brand accent — override signal orange with Guardian red */
:root {
  --guardian-red: #DC2626;
  --guardian-red-light: #EF4444;
  --guardian-red-dark: #B91C1C;
}

/* Accent color swaps for Guardian page */
.svc h3 em { color: var(--guardian-red) }
.svc-tag .d { background: var(--guardian-red) }
.why-item h4 em { color: var(--guardian-red-light) }
.step-n em { color: var(--guardian-red) }
.display em { color: var(--guardian-red) }
.bigcta h2 em { color: var(--guardian-red) }
.foot .tag em { color: var(--guardian-red) }
.foot ul a:hover { color: var(--guardian-red) }
.nav-links a:hover::after { background: var(--guardian-red) }
.nav-links a.active::after { background: var(--guardian-red) }
.nav-cta:hover { background: var(--guardian-red) }
.nav-cta .dot { background: var(--guardian-red); box-shadow: 0 0 8px var(--guardian-red) }
::selection { background: var(--guardian-red) }

/* Scroll-scrubbed Guardian hero video */
.hero-scroll-wrapper {
  height: 300vh;
  position: relative;
}

.hero-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.main-card--hero {
  position: relative;
  max-width: 1280px;
  width: calc(100% - 2 * var(--space-6));
  margin: 0 auto;
  background: var(--surface-glass);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  min-height: 70vh;
  transition: border-color 0.4s ease;
}

.main-card--hero.is-playing {
  border-color: rgba(220, 38, 38, 0.25);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: inherit;
}

/* Guardian CTA buttons — black primary */
.btn-primary {
  background: var(--ink);
  box-shadow: 0 16px 30px -18px rgba(26, 26, 26, 0.4);
}
.btn-primary:hover { background: var(--ink-2) }

/* Guardian big CTA section */
.bigcta .ctaline {
  background: var(--guardian-red);
}
.bigcta .ctaline:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Floating call button — Guardian red */
.call-float {
  background: var(--guardian-red);
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
}
.call-float:hover {
  background: var(--guardian-red-dark);
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.5);
}

/* Video grid — 2 columns for Guardian (only 2 videos) */
@media(max-width:820px){
  .video-grid { grid-template-columns: 1fr !important }
}

@media (max-width: 640px) {
  .hero-scroll-wrapper {
    height: auto;
  }

  .hero-scroll-sticky {
    position: relative;
    height: auto;
    min-height: 70vh;
    padding: 28px 0;
  }

  .main-card--hero {
    width: calc(100% - 36px);
    min-height: 58vh;
    border-radius: 18px;
  }
}

@media print {
  .hero-scroll-wrapper {
    height: auto;
  }

  .hero-scroll-sticky {
    position: relative;
    height: auto;
  }

  .hero-video {
    display: none;
  }
}