/* ────────────────────── MOBILE RESPONSIVE ────────────────────── */
/* NOTE: !important is required throughout because page CSS lives in
   inline <style> blocks which outrank external stylesheets in the
   cascade. These overrides must win. */

/* ────────────────────── HAMBURGER BUTTON (always) ────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  z-index: 200;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

/* ────────────────────── MOBILE NAV DROPDOWN (always) ────────────────────── */
.nav-mobile-menu {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(27,51,80,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 98;
  padding: 8px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-direction: column;
  align-items: stretch;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.nav-mobile-menu ul li a {
  display: block;
  padding: 13px 28px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  font-family: "DM Sans", sans-serif;
  transition: color 0.2s, background 0.2s;
}
.nav-mobile-menu ul li a:hover,
.nav-mobile-menu ul li a.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.nav-mobile-cta {
  margin: 10px 28px 0;
  display: block;
  text-align: center;
  background: #C4896A;
  color: #fff;
  padding: 13px 22px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  font-family: "DM Sans", sans-serif;
  transition: background 0.25s;
}
.nav-mobile-cta:hover { background: #b87860; }

/* ────────────────────── ≤ 768 px ────────────────────── */
@media (max-width: 768px) {

  /* ── CSS variable override so var(--nav-h) resolves correctly ── */
  :root { --nav-h: 64px; }

  /* ── NAV ── */
  nav {
    display: flex !important;
    height: 64px !important;
    padding: 0 20px !important;
  }
  .nav-links { display: none !important; }
  .nav-cta   { display: none !important; }
  .nav-logo img { height: 44px !important; }
  .nav-burger { display: flex; }

  /* Burger → X when open */
  nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Dropdown sits right below the 64 px nav */
  .nav-mobile-menu { top: 64px; }

  /* ── PAGE OFFSET ── */
  .page-offset { padding-top: 64px !important; }

  /* ── HERO (index) ── */
  .hero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: unset !important;
  }
  .hero-img {
    height: 56vw !important;
    min-height: 220px !important;
  }
  .hero-panel {
    padding: 44px 24px 100px !important;
  }
  .hero-h1 { font-size: clamp(36px, 10vw, 54px) !important; }
  .hero-body { max-width: 100% !important; }
  .hero-creds {
    position: static !important;
    flex-wrap: wrap !important;
  }
  .cred { padding: 14px 16px !important; flex: 1 1 45% !important; }
  .scroll-hint { display: none !important; }

  /* ── PAGE HERO (private) ── */
  .page-hero {
    grid-template-columns: 1fr !important;
    padding: 44px 24px 48px !important;
    gap: 24px !important;
  }

   /* ── FAG HERO (fagpersoner) ── */
   .fag-hero {
     display: block !important;
     height: auto !important;
     min-height: unset !important;
     margin-top: 0 !important;
     padding-top: 64px !important;
   }
   .fag-hero picture {
     display: block !important;
     position: relative !important;
     width: 100% !important;
     height: 56vw !important;
     min-height: 200px !important;
     overflow: hidden !important;
   }
   .fag-hero picture img {
     position: absolute !important;
     inset: 0 !important;
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     object-position: center 30% !important;
   }
   .fag-hero::before {
     display: none !important;
   }
   .fag-content {
     position: relative !important;
     z-index: auto !important;
     background: var(--navy) !important;
     padding: 36px 24px 48px !important;
     max-width: 100% !important;
   }
   .fag-eyebrow { color: var(--terracotta) !important; }
   .fag-h1 { color: #fff !important; }
   .fag-intro { color: rgba(255,255,255,0.65) !important; }

  /* ── CARDS (index) ── */
  .cards { grid-template-columns: 1fr !important; }
  .card {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    padding: 32px 24px !important;
  }
  .card:last-child { border-bottom: none !important; }

  /* ── SPLIT SECTIONS ── */
  .split { grid-template-columns: 1fr !important; }
  .split.flip { direction: ltr !important; }
  .split-img { min-height: 52vw !important; }
  .split-content { padding: 40px 24px !important; }

  /* ── BIO LAYOUT (om-jeppe) ── */
  .bio-layout {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }
  .bio-img { min-height: 72vw !important; max-height: 420px !important; }
  .bio-img::after { display: none !important; }
  .bio-content { padding: 40px 24px 48px !important; }

  /* ── BRAIN BAND (om-jeppe) ── */
  .brain-band {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .brain-img { height: 52vw !important; min-height: 200px !important; }
  .brain-text { padding: 40px 24px !important; }

  /* ── CONTACT (kontakt) ── */
  .contact-wrap {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }
  .contact-img { height: 52vw !important; min-height: 200px !important; }
  .contact-content { padding: 40px 24px 52px !important; }
  .contact-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
  }

  /* ── TOPIC GRID (fagpersoner) ── */
  .topic-grid { grid-template-columns: 1fr !important; }
  .topic-item { padding: 28px 24px !important; }

  /* ── QUOTE BAND (fagpersoner) ── */
  .quote-band {
    grid-template-columns: 1fr !important;
    padding: 48px 24px !important;
    gap: 36px !important;
  }
  .q-details {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding-left: 0 !important;
    padding-top: 32px !important;
  }

  /* ── PRICES SECTION (private) ── */
  .price-box { padding: 24px 20px !important; }
  section > div > div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* ── FOOTER ── */
  footer {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 40px 24px 32px !important;
    gap: 20px !important;
  }
  .footer-logo { justify-content: center !important; }
  .footer-links { justify-content: center !important; flex-wrap: wrap !important; }

  /* ── TYPOGRAPHY ── */
  .heading { font-size: clamp(28px, 8vw, 42px) !important; }
}

/* ────────────────────── ≤ 480 px ────────────────────── */
@media (max-width: 480px) {
  nav { padding: 0 16px !important; }
  .hero-panel { padding: 36px 18px 90px !important; }
  .hero-img { height: 62vw !important; }
  .page-hero { padding: 36px 18px 40px !important; }
  .split-content { padding: 32px 18px !important; }
  .bio-content { padding: 32px 18px 40px !important; }
  .brain-text { padding: 32px 18px !important; }
   .contact-content { padding: 32px 18px 44px !important; }
   .contact-grid { grid-template-columns: 1fr !important; }
   .fag-content { padding: 32px 18px 40px !important; }
  .quote-band { padding: 40px 18px !important; }
  footer { padding: 32px 18px 28px !important; }
  .card { padding: 28px 18px !important; }
  .topic-item { padding: 24px 18px !important; }
}

/* ────────────────────── PRICES SECTION (private) ────────────────────── */
@media (max-width: 768px) {
  .prices-section { padding: 48px 24px 56px !important; }
  .price-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  .prices-section { padding: 40px 18px 48px !important; }
}

/* ────────────────────── UNDERVISNING SECTION (fagpersoner) ────────────────────── */
@media (max-width: 768px) {
  .undervisning-section { padding: 48px 24px 0 !important; }
}
@media (max-width: 480px) {
  .undervisning-section { padding: 40px 18px 0 !important; }
}