/* ============================================================
   Boligvideo — tilpasning til skærmen (indlæses SIDST)
   Siden var tegnet til en høj skærm. På en almindelig bærbar er
   browservinduet kun 620–760 px højt, og så fyldte næsten hver
   sektion 1,5–2 skærme. Her følger luft, overskrifter og de store
   elementer (film, telefoner, portal, priskort) skærmens HØJDE og
   bredde, så hver del kan ses samlet.
   Ændrer kun størrelser og afstande — ikke indhold eller farver.
   ============================================================ */

/* ---------- 1. Luft og overskrifter (tablet og op) ---------- */
@media (min-width: 761px) {
  .bv-page .section { padding: clamp(44px, 8.4vh, 96px) 0; }
  .bv-page .section-head { margin-bottom: clamp(20px, 4.4vh, 52px); }
  .bv-page .section-head h2 { font-size: clamp(25px, min(3.4vw, 5.2vh), 38px); margin-bottom: clamp(8px, 1.6vh, 14px); }
  .bv-page .eyebrow { margin-bottom: clamp(8px, 1.6vh, 14px); }

  /* Filmen: aldrig højere end vinduet, så film og afsnit ses sammen */
  .bv-page .bv-film-frame { max-width: min(1080px, calc((100vh - 210px) * 1.7778)); }
  .bv-page .bv-film-kap { margin-top: clamp(12px, 2.2vh, 20px); }
  .bv-page .bv-film-tip { margin-top: clamp(10px, 1.8vh, 18px); }

  /* De lodrette eksempel-videoer: bredden følger højden */
  .bv-page .bv-reels { grid-template-columns: repeat(3, minmax(0, min(230px, calc((100vh - 290px) * 0.5625)))); }

  /* Priskort: tættere, så alle tre kan ses i ét blik */
  .bv-page .plan-card { padding: clamp(18px, 3vh, 30px) clamp(18px, 1.8vw, 26px); }
  .bv-page .plan-name { margin-bottom: clamp(6px, 1.3vh, 12px); }
  .bv-page .plan-price { font-size: clamp(25px, 4vh, 32px); margin-bottom: 4px; }
  .bv-page .plan-desc { margin-bottom: clamp(10px, 2.2vh, 22px); }
  .bv-page .plan-meta { padding: clamp(4px, 0.9vh, 7px) 0; }
  .bv-page .plan-feats { margin-bottom: clamp(12px, 2.6vh, 26px); }
  .bv-page .plan-feats li { padding: clamp(2px, 0.7vh, 6px) 0; }
  .bv-page .pricing-note { margin-top: clamp(12px, 2.2vh, 22px); }

  .bv-page .bv-callout { margin-top: clamp(18px, 3.4vh, 36px); }
  .bv-page .bv-svc-shot { height: clamp(120px, 19vh, 176px); }
}

/* ---------- 2. Toppen: skal kunne ses i ét skærmbillede ---------- */
@media (min-width: 1001px) {
  .bv-page .hero { padding-top: clamp(84px, 15vh, 128px); padding-bottom: clamp(14px, 4vh, 36px); }
  .bv-page .hero h1 { font-size: clamp(36px, min(5.1vw, 8.6vh), 66px); margin-bottom: clamp(12px, 2.4vh, 20px); }
  .bv-page .hero-actions { margin-bottom: clamp(14px, 3vh, 28px); }

  /* FAQ i to spalter — halvt så lang */
  .bv-page .faq-list { max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: start; }
  .bv-page .faq-list .faq-item { margin-bottom: 0; }
}
@media (min-width: 1001px) and (max-height: 780px) {
  .bv-page .bv-hero-visual { height: 480px; }
  .bv-page .bv-phones { transform: scale(0.86); transform-origin: 50% 46%; }
}
@media (min-width: 1001px) and (max-height: 670px) {
  .bv-page .bv-hero-visual { height: 410px; }
  .bv-page .bv-phones { transform: scale(0.73); }
  .bv-page .bv-concept { margin-bottom: 14px; }
}

/* ---------- 3. Video-typerne: fire på række på en lav, bred skærm ---------- */
@media (min-width: 1001px) and (max-height: 880px) {
  .bv-page .svc-grid--2 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .bv-page .svc-card.bv-svc { padding: 0 20px 20px; gap: 8px; }
  .bv-page .bv-svc-shot { margin: 0 -20px 4px; height: clamp(110px, 17vh, 150px); }
  .bv-page .svc-card.bv-svc h3 { font-size: 18.5px; }
  .bv-page .svc-card.bv-svc p { font-size: 13.5px; line-height: 1.55; }
}

/* ---------- 4. Portal-demoen: passer til vinduets højde ---------- */
@media (min-width: 1001px) and (max-height: 820px) {
  .bv-page .bvp-app { height: 548px; }
  .bv-page .bvp-step { padding: 7px 12px; }
  .bv-page .bvp-step-desc { display: none; }
  .bv-page .bvp-step.is-on .bvp-step-desc { display: block; }
  .bv-page .bvp-drawer { inset: 6px 26px; }
}
@media (min-width: 1001px) and (max-height: 700px) {
  .bv-page .bv-portal-frame { zoom: 0.88; }
}

/* ---------- 4b. Menuen: aldrig i to linjer på en smal bærbar/tablet ---------- */
.bv-page .nav-links a, .bv-page .nav-login, .bv-page .nav-cta .btn { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) {
  .bv-page .nav-links a { padding-left: 8px; padding-right: 8px; font-size: 13px; }
  .bv-page .nav-login { padding-left: 8px; padding-right: 8px; font-size: 13px; }
  .bv-page .nav-cta { gap: 6px; }
}

/* ---------- 5. Mobil: mindre luft, tættere kort ---------- */
@media (max-width: 760px) {
  .bv-page .section { padding: 44px 0; }
  .bv-page .section-head { margin-bottom: 24px; }
  .bv-page .section-head h2 { font-size: clamp(23px, 6.6vw, 28px); }
  .bv-page .plan-card { padding: 22px 18px; }
  .bv-page .plan-desc { margin-bottom: 14px; }
  .bv-page .plan-feats { margin-bottom: 18px; }
  .bv-page .plan-feats li { padding: 4px 0; }
  .bv-page .bv-svc-shot { height: 150px; }
  .bv-page .bv-callout { margin-top: 20px; }
}

/* ---------- 6. Toppen: link-felt og rigtige klip i telefonerne ---------- */
.bv-hero-form { display: flex; gap: 8px; max-width: 520px; margin: 0 0 14px; padding: 6px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface); box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.35); transition: border-color .2s; }
.bv-hero-form:focus-within { border-color: var(--text-3); }
.bv-hero-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15.5px; padding: 0 12px; outline: none; box-shadow: none; }
.bv-hero-form input::placeholder { color: var(--text-3); }
.bv-hero-form .btn { flex: none; white-space: nowrap; }
.bv-hero-under { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 13px; color: var(--text-3); }
.bv-page .hero .hero-sub { margin-bottom: clamp(14px, 3vh, 24px); }
.bv-phone-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s; z-index: 1; pointer-events: none; }
.bv-phone-screen.is-playing video { opacity: 1; }
.bv-phone-screen.is-playing .bv-play { opacity: 0; animation: none; transition: opacity .4s; }
@media (max-width: 520px) {
  .bv-hero-form { flex-direction: column; padding: 8px; }
  .bv-hero-form input { padding: 12px 10px; font-size: 16px; }
  .bv-hero-form .btn { width: 100%; }
  .bv-hero-under { justify-content: space-between; }
}

/* ---------- 7. Prøvesagen: tilbud og formular side om side ---------- */
.bv-proeve { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); max-width: 1080px; margin: 0 auto; align-items: start; }
.bv-proeve .bv-offer-grid { grid-template-columns: 1fr; max-width: none; margin: 0; gap: 12px; }
.bv-proeve .bv-trial { max-width: none; margin: 0; }
@media (min-width: 761px) {
  .bv-proeve .bv-offer-card { padding: clamp(16px, 2.6vh, 26px) clamp(18px, 1.8vw, 26px); }
  .bv-proeve .bv-trial { padding: clamp(18px, 3vh, 30px) clamp(18px, 2vw, 28px); }
  .bv-proeve .form-group { margin-bottom: clamp(8px, 1.6vh, 16px); }
}
@media (max-width: 900px) { .bv-proeve { grid-template-columns: 1fr; } }

/* ---------- 8. Toppen: telefonerne må ikke gå ind over teksten ---------- */
@media (min-width: 1101px) {
  .bv-page .bv-hero-grid { column-gap: 36px; }
  .bv-page .bv-phones { left: -4px; }
}


/* ---- Prøvesag fra linkfeltet: dialogen (ét trin til kontakt, ét trin med tak) ---- */
.bv-start { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; }
.bv-start[hidden] { display: none; }
.bv-start-bg { position: absolute; inset: 0; background: rgba(20, 18, 14, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bv-start-kort { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: 18px; padding: 26px 24px 22px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); animation: bvStartInd .22s ease-out; }
@keyframes bvStartInd { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bv-start-x { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.bv-start-eyebrow { margin: 0 0 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.bv-start-kort h3 { margin: 0 0 6px; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.bv-start-sub { margin: 0 0 14px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.bv-start-link { margin: 0 0 16px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-start-link b { color: var(--text); font-weight: 600; }
.bv-start-felt { display: grid; gap: 5px; margin: 0 0 12px; }
.bv-start-felt label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.bv-start-felt input { width: 100%; padding: 11px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 15.5px; outline: none; }
.bv-start-felt input:focus { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--accent-soft, rgba(0, 0, 0, .06)); }
.bv-start-samtykke { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 14px; font-size: 13px; line-height: 1.45; color: var(--text-2); cursor: pointer; }
.bv-start-samtykke input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent, currentColor); }
.bv-start-samtykke a { color: inherit; text-decoration: underline; }
.bv-start-fejl { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(229, 72, 77, .1); color: #b3261e; font-size: 14px; }
.bv-start-knap { width: 100%; }
.bv-start-note { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--text-3); }
.bv-start-tak { text-align: center; padding: 10px 0 4px; }
.bv-start-ok { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--accent, #2a2620); color: var(--surface, #fff); }
.bv-start-ok svg { width: 30px; height: 30px; }
.bv-start-tak h3 { font-size: 22px; margin-bottom: 10px; }
.bv-start-tak .bv-start-sub { margin-bottom: 20px; }
body.bv-start-aaben { overflow: hidden; }
.bv-hero-form-mangler { border-color: #b3261e !important; animation: bvRyst .3s; }
@keyframes bvRyst { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- 9. Mobil: telefonen i toppen må aldrig skæres over af båndet (Kevin 2026-10-16) ----------
   The frame was 300 px (≤ 430 px) / 340 px (≤ 860 px) high, the phone ~435 / ~375 px — the marquee cut off its bottom. The
   frame now follows the phone: its width × 19,2/9 (the phone's aspect) + room for the tilt and the shadow. */
@media (max-width: 860px) {
  .bv-page .bv-hero-visual { height: calc(176px * 2.134 + 64px); }
}
@media (max-width: 430px) {
  .bv-page .bv-phone--2 { width: min(184px, 50vw); margin-left: calc(min(184px, 50vw) / -2); }
  .bv-page .bv-hero-visual { height: calc(min(184px, 50vw) * 2.134 + 40px); }
}

/* ---------- 10. Toppen vises ALTID: kommer bv-ready aldrig (scriptet nåede ikke frem på en dårlig forbindelse), vises
   teksten, knapperne og telefonerne af sig selv efter 2,5 s — aldrig en tom forside ---------- */
html.js .bv-page:not(.bv-ready) .bv-enter,
html.js .bv-page:not(.bv-ready) .bv-hero-title span,
html.js .bv-page:not(.bv-ready) .bv-phone { animation: bvEnter .6s ease 2.5s forwards; }