/* ============================================================
   BRANCHE-SIDER — /bilvideo /restaurantvideo /butiksvideo
   Samme opbygning som /boligvideo, men hver branche har sin egen
   stemning: bil = køligt showroom, restaurant = varmt stearinlys,
   butik = blød boutique-rosé. Indlæses efter theme-bv.css.
   ============================================================ */

/* ---------- Farver pr. branche (mørkt tema) ---------- */
body.bv-page.iv-bil:not(.theme-light) {
  --bg: #07090d; --bg-2: #0a0d12; --surface: #0f131a; --surface-2: #141922;
  --border: #1a2029; --border-2: #27303c;
}
body.bv-page.iv-restaurant:not(.theme-light) {
  --bg: #0b0806; --bg-2: #100b08; --surface: #150f0b; --surface-2: #1b140f;
  --border: #251c15; --border-2: #35291f;
}
body.bv-page.iv-butik:not(.theme-light) {
  --bg: #0b090a; --bg-2: #100d0e; --surface: #151113; --surface-2: #1b1618;
  --border: #261f22; --border-2: #352b2f;
}
body.bv-page.iv-bil        { --iv-a: #8fbaff; --iv-a2: #5b8ff5; --iv-rgb: 110, 160, 255; --iv-g1: #d6e5ff; --iv-g2: #7fb2ff; }
body.bv-page.iv-restaurant { --iv-a: #f3b562; --iv-a2: #e0873a; --iv-rgb: 240, 150, 70;  --iv-g1: #ffe2b8; --iv-g2: #f0a54a; }
body.bv-page.iv-butik      { --iv-a: #f2b8a8; --iv-a2: #dc8f7d; --iv-rgb: 236, 160, 145; --iv-g1: #ffe4dc; --iv-g2: #e9a894; }

/* Lyst tema — hver branche får sin egen tone af off-white og en mørk accent */
body.bv-page.theme-light.iv-bil {
  --bg: #f4f6f9; --bg-2: #eceff4; --surface: #ffffff; --surface-2: #f1f4f8; --border: #dde2ea; --border-2: #c6cdd9;
  --iv-a: #1f56c8; --iv-a2: #1f56c8; --iv-rgb: 31, 86, 200;
}
body.bv-page.theme-light.iv-restaurant { --iv-a: #b25e17; --iv-a2: #b25e17; --iv-rgb: 178, 94, 23; }
body.bv-page.theme-light.iv-butik {
  --bg: #faf5f3; --bg-2: #f3ebe8; --surface: #ffffff; --surface-2: #f8f1ee; --border: #ecdfda; --border-2: #dccac3;
  --iv-a: #a84e62; --iv-a2: #a84e62; --iv-rgb: 168, 78, 98;
}

/* ---------- Stemning: glød, prikker, linjer ---------- */
body.iv-page .ambient-top {
  background:
    radial-gradient(ellipse 70% 60% at 50% -20%, rgba(var(--iv-rgb), 0.13), transparent 65%),
    radial-gradient(ellipse 40% 35% at 72% 8%, rgba(var(--iv-rgb), 0.07), transparent 60%);
}
body.iv-page .hero-glow,
body.iv-page.bv-page .hero-glow {
  background:
    radial-gradient(50% 55% at 72% 38%, rgba(var(--iv-rgb), 0.14), transparent 62%),
    radial-gradient(38% 42% at 18% 18%, rgba(var(--iv-rgb), 0.07), transparent 60%),
    radial-gradient(28% 32% at 88% 78%, rgba(255, 255, 255, 0.05), transparent 62%);
}
body.iv-page .hero-label .hl-dot { background: var(--iv-a); box-shadow: 0 0 12px rgba(var(--iv-rgb), 0.6); }
body.iv-page .bv-phones::before { background: radial-gradient(circle, rgba(var(--iv-rgb), 0.28), transparent 68%); }
body.iv-page ::selection { background: rgba(var(--iv-rgb), 0.35); }
body.iv-page .eyebrow::before { background: var(--iv-a); opacity: 0.7; }
body.iv-page .svc-num,
body.iv-page .ps-num,
body.iv-page .wi-num,
body.iv-page .plan-feats li .chk { color: var(--iv-a); }
body.iv-page .process-grid--3::after { background: var(--iv-a); opacity: 0.7; }
body.iv-page .bv-sticky-dot { background: var(--iv-a); animation-name: ivDotPulse; }
@keyframes ivDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--iv-rgb), 0.5); }
  60%      { box-shadow: 0 0 0 8px rgba(var(--iv-rgb), 0); }
}
body.iv-page .bv-callout { background: linear-gradient(180deg, rgba(var(--iv-rgb), 0.08), transparent 70%), var(--surface); }
body.iv-page .bv-callout::before { background: linear-gradient(90deg, transparent, rgba(var(--iv-rgb), 0.12), transparent); }
body.iv-page .plan-card.popular {
  border-color: var(--iv-a2);
  background: linear-gradient(170deg, rgba(var(--iv-rgb), 0.09), transparent 45%), var(--surface);
}
body.iv-page.bv-page .plan-card.popular { animation: ivCardGlow 3.8s ease-in-out infinite; }
@keyframes ivCardGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--iv-rgb), 0.18), 0 18px 50px -28px rgba(var(--iv-rgb), 0.24); }
  50%      { box-shadow: 0 0 0 1px rgba(var(--iv-rgb), 0.42), 0 28px 64px -22px rgba(var(--iv-rgb), 0.4); }
}
body.iv-page .plan-tag { background: var(--iv-a2); color: #0a0a0a; }
body.iv-page.theme-light .plan-tag { color: #ffffff; }

/* Kursiv accent i overskrifter — samme greb som i filmen, i brancheens farve */
.iv-accent {
  font-style: italic; font-weight: 400;
  background: linear-gradient(92deg, #ffffff 0%, var(--iv-g1) 48%, var(--iv-g2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.08em;
}
body.iv-page.theme-light .iv-accent { background: linear-gradient(92deg, var(--text) 0%, var(--iv-a) 100%); -webkit-background-clip: text; background-clip: text; }

/* Overskriften ligger delvist over den første telefon — en blød glorie holder den læsbar i begge temaer */
body.iv-page .bv-hero-title span { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55); }
body.iv-page.theme-light .bv-hero-title span { text-shadow: 0 0 2px var(--bg), 0 0 14px var(--bg), 0 0 30px var(--bg), 0 0 44px var(--bg); }
body.iv-page.theme-light .bv-hero-title .iv-accent { text-shadow: none; filter: drop-shadow(0 0 10px var(--bg)) drop-shadow(0 0 18px var(--bg)); }

/* Bil: tynd showroom-lysliste over hero */
body.iv-bil .hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 96px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--iv-rgb), 0.55) 30%, rgba(var(--iv-rgb), 0.55) 70%, transparent);
  box-shadow: 0 0 22px 2px rgba(var(--iv-rgb), 0.35);
  opacity: 0.55;
}
/* Restaurant: varm vignet, som et bord i stearinlys */
body.iv-restaurant:not(.theme-light) .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 70% 55%, rgba(255, 170, 90, 0.07), transparent 70%);
}
/* Butik: blød spotlight-cirkel bag produkterne */
body.iv-butik .bv-phones::after {
  content: ""; position: absolute; left: 50%; top: 48%; width: 520px; height: 520px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(var(--iv-rgb), 0.18); pointer-events: none; z-index: 0;
}

/* ---------- Før / efter (brugte biler) ---------- */
.iv-ba {
  position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 3 / 2;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--border-2); background: #0a0a0a;
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8);
  --pos: 50%;
}
.iv-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.iv-ba .iv-ba-after { clip-path: inset(0 0 0 var(--pos)); }
.iv-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 18px rgba(0, 0, 0, 0.55); pointer-events: none; }
.iv-ba-knob {
  position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: #fff; color: #0a0a0a; display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); font: 700 16px/1 var(--font-sans); letter-spacing: -2px;
}
.iv-ba-tag {
  position: absolute; top: 16px; z-index: 2; font: 600 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px; background: rgba(10, 10, 10, 0.68); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
}
.iv-ba-tag.l { left: 16px; }
.iv-ba-tag.r { right: 16px; background: #f2f2f2; color: #0a0a0a; border-color: #f2f2f2; }
.iv-ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.iv-ba-note { text-align: center; margin: 14px auto 0; font-size: 13px; color: var(--text-3); max-width: 720px; }

.iv-fix { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 30px auto 0; }
.iv-fix-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 24px 14px; }
.iv-fix-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin-bottom: 12px; }
.iv-fix-card li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
.iv-fix-card li b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.iv-fix-card.yes li b { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.iv-fix-card.no li b { background: rgba(226, 91, 74, 0.14); color: #ef7b6b; }
body.theme-light .iv-fix-card.yes li b { color: #0b7a45; background: rgba(11, 122, 69, 0.1); }
body.theme-light .iv-fix-card.no li b { color: #b3261e; background: rgba(179, 38, 30, 0.08); }

/* ---------- Små kort-grids (ugeplan, fototips, anvendelser) ---------- */
.iv-week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.iv-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.iv-day-shot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.iv-day-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.iv-day:hover .iv-day-shot img { transform: scale(1.05); }
.iv-day-shot span {
  position: absolute; left: 12px; top: 12px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; background: rgba(10, 10, 10, 0.62); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
}
.iv-day-body { padding: 16px 18px 18px; }
.iv-day-body .d { font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--iv-a); }
.iv-day-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin: 8px 0 6px; }
.iv-day-body p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.iv-week-note { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--text-3); }

.iv-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.iv-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 20px; }
.iv-mini .n { font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--iv-a); }
.iv-mini h3 { font-family: var(--font-display); font-weight: 500; font-size: 18.5px; margin: 10px 0 6px; }
.iv-mini p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }

/* ---------- Rigtig levering (bevis) ---------- */
.iv-proof { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; max-width: 980px; margin: 0 auto; }
.iv-proof h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 14px; }
.iv-proof p { color: var(--text-2); font-size: 15.5px; line-height: 1.65; }
.iv-proof p + p { margin-top: 12px; }
.iv-proof .iv-proof-vid { max-width: 300px; justify-self: center; width: 100%; }
.iv-proof .bv-reel-cap { margin-top: 12px; }

/* ---------- Andre brancher ---------- */
.iv-cross { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.iv-cross a {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.iv-cross a:hover { transform: translateY(-3px); border-color: var(--border-2); }
.iv-cross .shot { aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.iv-cross .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.iv-cross a:hover .shot img { transform: scale(1.06); }
.iv-cross .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.iv-cross strong { font-family: var(--font-display); font-weight: 500; font-size: 19px; }
.iv-cross span { color: var(--text-3); font-size: 13px; }
.iv-cross a[aria-current="page"] { border-color: var(--iv-a, var(--border-2)); }
.iv-cross a[aria-current="page"] span { color: var(--iv-a, var(--text-2)); }

/* ---------- Responsivt ---------- */
@media (max-width: 960px) {
  .iv-week, .iv-mini-grid, .iv-cross { grid-template-columns: repeat(2, 1fr); }
  .iv-proof { grid-template-columns: 1fr; gap: 28px; text-align: center; }
}
@media (max-width: 760px) {
  .iv-fix { grid-template-columns: 1fr; }
  body.iv-butik .bv-phones::after { width: 340px; height: 340px; }
}
@media (max-width: 520px) {
  .iv-week, .iv-cross { gap: 10px; }
  .iv-mini-grid { grid-template-columns: 1fr; }
  .iv-day-body { padding: 12px 12px 14px; }
  .iv-day-body h3 { font-size: 16px; }
  .iv-day-body p { font-size: 12.5px; }
  .iv-cross .body { padding: 12px; }
  .iv-ba { aspect-ratio: 4 / 3; border-radius: 12px; }
  .iv-ba-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}