/* ───────────────────────────────────────────────────────────
   book.css — kun det som er spesifikt for book.html.
   Delt designsystem ligger i sider.css, forside.css og
   underside.css, som må lastes først.
   ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   HERO — kort. Kalenderen er det folk kom for.
   ═══════════════════════════════════════════════════════════ */
.page-hero { min-height: min(44vh, 420px); }
.bkp-hero { margin-top: auto; padding: 0 68px 48px; max-width: 780px; }
.bkp-hero .ph-title { font-size: clamp(36px, 4.4vw, 64px); }


/* ═══════════════════════════════════════════════════════════
   KALENDEREN — hvem du møter og hva som skjer til venstre,
   Googles bookingside til høyre. På mobil kommer kalenderen
   først: den som trykket «Book en prat» vil se tidene.
   ═══════════════════════════════════════════════════════════ */
.bkp { background: var(--ark); padding: 40px 0 120px; }
.bkp-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 56px;
  max-width: var(--bredde);
  margin: 0 auto;
  padding: 0 var(--kant);
  align-items: start;
}

.bkp-side { display: grid; gap: 28px; position: sticky; top: 110px; }

.bkp-person {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--ark-3);
  border: 1px solid rgba(0,0,0,.05);
}
.bkp-person-bilde { width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #e3e5e1; }
.bkp-person p { margin: 2px 0 0; font-size: .85rem; color: var(--blekk-2); }
/* Vanlig tekst, ikke h2: undersidene gjør alle h2 store. */
.bkp-person .bkp-navn { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--blekk); }

.bkp-steg { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: steg; }
.bkp-steg li {
  counter-increment: steg;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px;
  font-size: .95rem; line-height: 1.55; color: var(--blekk-2);
}
.bkp-steg li::before {
  content: counter(steg);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lime); color: var(--blekk);
  font-size: .85rem; font-weight: 700;
}
.bkp-steg b { color: var(--blekk); font-weight: 600; }

.bkp-annet { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--blekk-2); }
.bkp-annet a, .bkp-reserve a {
  color: var(--blekk); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(12,13,14,.25);
}
.bkp-annet a:hover, .bkp-reserve a:hover { text-decoration-color: var(--lime); }

/* Googles side tegner sin egen kalender og ruller selv inni rammen.
   Høyden gir plass til uke-visningen uten dobbel rullefelt på PC. */
.bkp-kalender {
  border: 1px solid var(--strek);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.bkp-kalender iframe { display: block; width: 100%; height: 760px; border: 0; }
.bkp-reserve {
  margin: 0; padding: 12px 18px;
  border-top: 1px solid var(--strek);
  font-size: .85rem; color: var(--blekk-3);
  background: var(--ark-2);
}

@media (max-width: 980px) {
  .bkp-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bkp-kalender { order: -1; }
  .bkp-side { position: static; }
}
@media (max-width: 760px) {
  .bkp-hero { padding: 0 0 32px; }
  .bkp { padding: 8px 0 96px; }
  /* Google stabler kalender og tider under hverandre på smal skjerm. */
  .bkp-kalender iframe { height: 900px; }
}