/* ===== HERO: båtbilde i full bredde med kalenderen lagt oppå =============
   Full-bleed uten å røre Elementor-oppsettet: 100vw + negativ margin. */
.hb-hero{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  /* Høyden må SKALERE MED BREDDEN i den brede sonen, ikke være et fast tak.
     Bildet skaleres etter bredden her (cover på en vid boks), så båtbåndet
     (7,5–20,5% = 13% av bildehøyden) opptar 0,13 · 2,25 · bredde ≈ 0,29·vw
     i piksler. Med et fast `min(76vh,700px)` ble heroen for lav på skjermer
     over ~1900px og kuttet både mastetopp og vannlinje. 34vw holder forholdet
     konstant, slik at 7,5%-posisjonen under treffer likt på hele spennet, og
     gir båtbåndet ~15% luft rundt. TAKET senket 900→560px (06.08→12.08):
     Andreas ville ikke at heroen skulle vokse høy på veldig brede skjermer.
     Båten ligger i øverste ~20% av bildet (mast 7,5% – vannlinje 20,5%), så et
     lavere tak beholder båten i utsnittet — på ultrawide vises fortsatt mast +
     skrog, bare mindre av sjøen (som uansett dekkes av kalenderpanelet). Over
     ~1647px er høyden dermed konstant 560px i stedet for å klatre mot 900. */
  min-height:clamp(520px,34vw,560px);display:flex;align-items:stretch;
  background-color:#10336e;
  overflow:hidden;
}
/* Bildet ligger i et EGET lag (::before), ikke som background-image direkte på
   .hb-hero, slik at hver breddesone kan bestemme både lagets AVGRENSNING og
   bildets utsnitt uavhengig av hvor høy selve seksjonen blir.
   Bildet kommer fra --hb-hero-img (satt inline av PHP).

   MOTIVETS HOLDEPUNKTER (målt i originalen, se hermes-booking.php):
     mastetopp 7,5%  ·  skrog 17%  ·  vannlinje 20,5%  ·  sjø 20,5–100%
     båten vannrett på 27–68% av bildebredden · bildeformat 0,4444 (h = 2,25·b)
   Alle background-position-verdiene under er REGNET UT fra disse, ikke gjettet:
   med cover er synlig utsnitt = (skalert bildehøyde − bokshøyde) · posisjon%,
   så posisjon% = (skalert_høyde · båtsenter − bokshøyde/2) / overflyt.

   BRED (≥1800px): bildet spenner hele seksjonen; kalenderpanelet flyter oppå
   til høyre, båten står i den åpne venstre-/midtflaten. 7,5% sentrerer
   båtbåndet (7,5–20,5%) — verdien er gyldig for HELE sonen fordi seksjonshøyden
   over skalerer med bredden (34vw), så synlig utsnitt blir like stort uansett
   skjerm. */
.hb-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hb-hero-img);background-size:cover;background-position:50% 7.5%;
}
/* Tre lag: mykt mot headeren, tungt i bunn/venstre bak tittelen,
   så båten midt i bildet står fritt. */
.hb-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,30,66,.34) 0%,rgba(10,30,66,0) 22%),
    linear-gradient(0deg,rgba(10,30,66,.86) 0%,rgba(10,30,66,.42) 40%,rgba(10,30,66,0) 70%), /* UU1 27.08: .80/.28@36 -> .86/.42@40 — hvit ingress mot lyst vann */
    linear-gradient(100deg,rgba(10,30,66,.58) 0%,rgba(10,30,66,.14) 32%,rgba(10,30,66,0) 58%);
}
.hb-hero__inner{
  position:relative;z-index:2;width:100%;max-width:min(1680px,94vw);margin:0 auto;
  padding:34px 26px 40px;display:grid;grid-template-columns:minmax(220px,1fr) auto;
  gap:40px;align-items:center;
}
.hb-hero__intro{align-self:end;padding-bottom:6px}
.hb-hero__intro{color:#fff}
.hb-hero__title{
  font-family:"gin","Arial Narrow",Georgia,serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,4vw,58px);line-height:.95;letter-spacing:.01em;margin:0 0 14px;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.3);
}
/* Liten seilmerke-strek over tittelen — gir hero-en et eget preg */
.hb-hero__title::before{
  content:"";display:block;width:52px;height:3px;background:#c81919;
  margin-bottom:16px;border-radius:2px;
}
.hb-hero__sub{
  font-size:clamp(14px,1.15vw,17px);line-height:1.55;color:#dfe7f5;margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
/* Kalenderen inne i hero: kremfarget panel i stedet for hvit boks */
.hb-hero__intro{max-width:30ch}
/* Panelet: varm off-white med navy topplist — ikke «hvit widget-boks».
   Smalt og skjøvet helt til høyre i hero-en, så båten (midt/venstre i bildet)
   står fritt — panelet skal ligge i åpen himmel/vann til høyre for masta. */
.hb-hero .hb-cal{
  /* 620px = 580px innhold + 20px padding på hver side (Andreas' mål).
     vw-andelen er hevet fra 41 til 45 så boksen når 620 allerede ved 1408px,
     der grensa for bred visning går — ellers ville den blitt 577px der. */
  /* 17.08: +10px (620 → 630) etter ønske fra Andreas. Månedskolonnen står urørt
     på 174px, så de ekstra pikslene går til dagpanelet (390 → 400px).
     45vw holder fortsatt: ved 1408px (grensa for bred visning) gir det 633,6px. */
  margin:0 0 0 auto;width:min(630px,45vw);max-width:none;
  /* Navy topplist fjernet 10.08 (Andreas) — panelet står rent i kremfarge. */
  background:#fdfaf1;border:0;border-radius:8px;
  box-shadow:0 22px 60px rgba(6,22,52,.42),0 2px 6px rgba(6,22,52,.18);
  padding:18px 20px 16px;gap:16px;
  /* Kortet er et grid-element ⇒ `min-width:auto` ⇒ det krymper aldri under
     innholdets min-bredde. Dagstripa har 700+ dagceller, så uten dette blåses
     kolonnen opp til titusenvis av piksler (skjult av overflow:hidden, men
     layouten blir feil). Gjelder alle soner. */
  min-width:0;
}
.hb-hero .hb-cal__left{flex:0 0 200px;max-width:200px;position:relative}
/* Rad-oppsett i den smale hero-panelet: navn øverst, tid/knapper på egen linje
   under — for få bredde til alt på én rad uten å pakke om teksten. */
.hb-hero .hb-dep{flex-wrap:wrap;row-gap:8px}
.hb-hero .hb-dep__act{flex:1 1 100%;justify-content:flex-start;padding-left:66px}
/* Tynn skillelinje mellom kalender og dagpanel */
.hb-hero .hb-cal__left::after{
  content:"";position:absolute;top:4px;bottom:4px;right:-12px;width:1px;
  background:linear-gradient(180deg,rgba(40,60,140,0),rgba(40,60,140,.18) 18%,rgba(40,60,140,.18) 82%,rgba(40,60,140,0));
}
.hb-hero .hb-cal__right{min-width:0;flex:1}
.hb-hero .hb-dep{gap:10px;padding:11px 0}
.hb-hero .hb-dep__t{font-size:18px;flex:0 0 52px}
.hb-hero .hb-dep__nm b{font-size:16px;line-height:1.2}
.hb-hero .hb-dep__meta{font-size:12px}

/* (kalender-internene er polert nederst i fila — må komme etter grunnstilene) */

/* ===== SPLIT (641–1407px): ekte todelt oppsett — bilde og kalenderpanel side
   om side, ingen overlapp. Fra 1408px og opp brukes overlay-oppsettet over
   (kalenderen flyter oppå bildet). Grensa lå tidligere på 1800px; flyttet ned
   etter ønske fra Andreas, som vil ha overlay-visningen allerede ved 1408px.
   Da forsvant samtidig den gamle 1361–1799-sonen med månedsgrid side om side. */
@media (max-width:1407px) and (min-width:641px){
  /* Høyden må romme båtbåndet ØVERST (0,2925·kolonnebredde ≈ 0,157·vw) pluss
     tekstblokken NEDERST (~245px på de bredeste). Det gamle `min(64vh,560px)`
     var for lavt fra ~1700px og opp, der båtens skrog begynte å overlappe
     tittelen igjen. 40vw følger båtens vekst; 88vh-taket hindrer at heroen
     sluker hele skjermen på lave vinduer. */
  .hb-hero{min-height:min(clamp(520px,40vw,700px),88vh)}
  /* Bildelaget BEGRENSES til venstre kolonne (bildekolonnen). Før spente det
     hele seksjonsbredden mens det ugjennomsiktige kalenderpanelet dekket høyre
     ~47% — da ble bildet komponert etter en flate som var halvveis skjult, og
     siden båten ligger på 27–68% av bildebredden havnet hele akterenden bak
     panelet: bare baugen var synlig. Når laget i stedet er nøyaktig den
     synlige kolonnen, sentrerer cover båten i det man faktisk ser.
     right:46.5% = høyre kolonne (1fr av 1.15fr+1fr).
     8% legger båtbåndet øverst i kolonnen med en smal stripe himmel over. */
  .hb-hero::before{right:46.5%;background-position:50% 8%}
  .hb-hero__inner{
    max-width:none;padding:0;gap:0;align-items:stretch;
    grid-template-columns:1.15fr 1fr;
  }
  .hb-hero__title{font-size:clamp(26px,3.4vw,42px)}
  /* Teksten står NEDERST i bildekolonnen, ikke vertikalt sentrert.
     Grunn (målt): tekstblokken er ~265px bred uansett skjermbredde (24ch-taket
     slår inn), mens bildekolonnen varierer fra 350px (ved 700px skjerm) til
     936px (ved 1750px). Å bare skyve båten mot høyre — som var ønsket — løser
     det bare på de bredeste skjermene: ved 700px er hele kolonnen smalere enn
     teksten pluss båten, så de kan aldri stå ved siden av hverandre der.
     Vertikal deling virker derimot i HELE sonen: båten øverst (se 8% over),
     teksten nederst over den åpne sjøflaten — samme grep som på bred skjerm,
     der tittelen også står nede til venstre. Grunnstilens bunntunge gradient
     gir teksten lesbar bakgrunn her. */
  .hb-hero__intro{align-self:end;max-width:24ch;padding:0 24px 34px 5vw}
  .hb-hero .hb-cal{
    width:100%;max-width:none;margin:0;
    border-top:0;border-left:4px solid #283c8c;border-radius:0;
    box-shadow:-16px 0 36px rgba(6,22,52,.16);
    padding:26px 5vw 26px 28px;
  }
  .hb-hero .hb-cal__left{flex:0 0 190px;max-width:190px}
}
/* Litt trangere ~1024px og under: gi kalenderkolonnen mer relativ plass. */
/* (Her lå tidligere egne blokker for ≤1024px og ≤950px som justerte
   månedsgrid-kolonnen ved siden av dagpanelet. De er fjernet: i hele 641–1407
   vises nå dagstripa i stedet for månedsgriden (se blokka lenger ned), så
   kolonnereglene var uten virkning — månedsgriden opptrer kun som popover,
   og den har sin egen breddestyring.) */

/* ===== MOBIL (≤640px): båten øverst, sjøen som bakgrunn bak HELE ukesvelgeren.
   Kalenderen er sitt eget hvite kort som ligger PÅ sjøflaten i bildet — ikke på
   en navy bunnflate slik det var før. */
@media (max-width:640px){
  .hb-hero{
    min-height:240px;
    /* Reservefarge = bildets nederste kant (målt: #033134). Med det nye, høye
       bildet (h = 2,25·b) rekker bildet normalt HELE seksjonen på mobil, så
       denne vises ikke i det hele tatt. Den trengs kun på dager med uvanlig
       mange avganger, der kortet gjør seksjonen høyere enn 225vw — og da
       ligger skjøten uansett bak det ugjennomsiktige kortet. */
    background-color:#033134;
  }
  /* Bildelaget dekker HELE hero. Alle bakgrunnslag (to toner + bildet) settes
     i den SISTE mobilregelen nederst i fila — den vinner i cascaden, og deles
     definisjonen opp havner man i fella fra 26.08: gradienten forsvant mens
     `background-size` fra den ble stående og strakk bildet. Se notatet der. */
  .hb-hero::before{
    inset:0;
  }
  /* ::after er NULLET UT på mobil. Den bar tittelens navy-tone, men ::after
     dekker HELE hero — som vokser med kalenderkortet (målt 616–818px). Tonen
     rakk derfor 185px ned på rolige datoer og 246px på travle, altså over hele
     båten. Det var siste kilde til «kontrasten endrer seg når man bytter dato».
     ALT visuelt ligger nå på ::before, der ingenting følger hero-høyden. */
  .hb-hero::after{background:none}
  .hb-hero__inner{grid-template-columns:1fr;gap:18px;padding:26px 18px 28px}
  .hb-hero__title{font-size:clamp(28px,9vw,40px)}
  /* Undertittelen ble utvidet 26.08 fra én linje til fire setninger. På mobil
     fylte den hele det reserverte feltet (50vw) og la seg oppå båten, som
     nettopp skal stå fri der. Strammere sats gir samme tekst på færre linjer;
     reservasjonen under er økt tilsvarende så båten beholder luften sin. */
  .hb-hero__sub{font-size:13.2px;line-height:1.42}
  /* Teksten står ØVERST i et reservert felt på 54vw. Feltet skyver kortet ned
     til under vannlinja (51vw), slik at hele båten — mast til skrog — står fritt
     over ukesvelgeren. Reservasjonen er i vw, samme enhet som bildet skalerer
     etter, så forholdet båt/kort holder seg likt på alle mobilbredder OG er
     uavhengig av hvor høyt kortet blir (dager med flere avganger). */
  .hb-hero__intro{max-width:none;align-self:start;min-height:64vw;padding-bottom:0}
  .hb-hero .hb-cal{
    width:100%;max-width:440px;margin:0 auto;
    background:#fff;border:1px solid #e6e1d9;border-radius:12px;   /* navy topplist fjernet 10.08 */
    box-shadow:0 14px 34px rgba(6,22,52,.24);
    padding:14px 14px 16px;gap:12px;
    /* Kortet er et grid-element, og grid/flex-elementer har `min-width:auto` =
       «krymp aldri under innholdets min-bredde». Innholdet (knapper med
       white-space:nowrap m.m.) presset kortet til 440px i et 390px vindu, så
       det fløt utenfor skjermen og datovelger-knappen havnet utenfor kanten.
       min-width:0 lar kortet følge kolonnebredden som tiltenkt. */
    min-width:0;
  }
  .hb-hero .hb-cal__left{flex:1 1 100%;max-width:none}
  .hb-hero .hb-cal__left::after{display:none}
  /* Dag-cellene har aspect-ratio:1 og skalerer med kolonnebredden — uten tak
     blir de kjempesirkler når kalenderen strekkes over hele kort-bredden
     (415px/7 ≈ 54px per celle). Sett et tak så den ser ut som en kompakt
     kalender, ikke en «kjempekalender» som spiser skjermen. */
  .hb-hero .hb-cal__grid{max-width:270px;margin:0 auto}
}

/* ===== BRED MOBIL (481–640px): bildet BESKJÆRES i stedet for å vises helt.
   Bakgrunn: på smale telefoner er `background-size:100% auto` riktig — hele det
   høye bildet vises, båten øverst og sjøen bak kortet. Men bildehøyden er
   225vw, så på et bredt mobilvindu (f.eks. 637px) blir bildet 1433px høyt og
   båtreservasjonen 50vw = 318px. Da fyller båten nesten hele skjermen og man
   ser knapt noe av avgangslista — nettopp det Andreas meldte.
   Her byttes derfor til `cover`: bildet fyller flaten og beskjæres loddrett, så
   båten får en fast andel av høyden i stedet for å vokse med bredden.
   Reservasjonen kuttes tilsvarende fra 50vw til 34vw. Sjøen ligger fortsatt bak
   hele kortet (cover dekker hele seksjonen), så ingen flat bunnfarge.
   Målt ved 637px: hero ~814px → ~713px. */
@media (min-width:481px) and (max-width:640px){
  .hb-hero::before{
    /* Bakgrunnslagene settes i den SISTE regelen nederst i fila (cascade).
       `height` sto her og kuttet bildet ved 78vw på bredde 481–640px — samme
       feil som ble rettet for smal mobil, men glemt her. Bildet skal dekke hele
       hero, også bak kalenderkortet. */
    inset:0;
  }
  /* Teksten lå «midt over båten» ved ~520px (Andreas). Årsak: med cover ligger
     mastetopp/skrog høyt i utsnittet, mens undertittelen nå er fire linjer.
     Bildet flyttes opp (12%→4%) så båten kommer lavere i flaten, og
     reservasjonen økes så kortet ikke spiser sjøen under den. */
  .hb-hero__intro{min-height:52vw}
}

/* Hermes II – forsidens ukesoversikt (kalender + dag-panel). Brand-stylet. */
.hb-cal{
  --navy:#283c8c;--ink:#1c2b33;--mut:#6b7a82;--red:#c81919;--red-dark:#a52a23;
  --cream:#f5f0d7;--soft:#faf8f4;--line:#e6e1d9;
  display:flex;gap:30px;flex-wrap:wrap;max-width:1040px;margin:0 auto;padding:26px 28px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);
}
.hb-cal *{box-sizing:border-box}
.hb-cal__loading,.hb-cal__empty{color:var(--mut);padding:40px 10px;text-align:center;width:100%;font-size:15px}

.hb-cal__left{flex:0 0 320px;max-width:360px}
.hb-cal__right{flex:1;min-width:270px}
/* Dagstripe (mobil) og lukk-knapp (datovelger-popover) er skjult som standard —
   vises kun inni @media(max-width:640px) lenger ned, se der for hvorfor. */
.hb-cal__strip{display:none;width:100%}
/* NB spesifisitet (25.08): `.hb-cal__close` alene (0,1,0) tapte mot en regel i et
   fremmed stilark og dukket opp i bred visning. Alle tre reglene for denne
   knappen (her + de to @media-blokkene under) er derfor prefikset med `.hb-cal`
   (0,2,0) — endres én, må de andre følge med. */
.hb-cal .hb-cal__close{display:none}

.hb-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hb-cal__month{font-family:"gin","Georgia",serif;font-weight:900;text-transform:uppercase;color:var(--navy);font-size:20px;letter-spacing:.02em}
.hb-cal__nav{background:var(--soft);border:1px solid var(--line);border-radius:9px;width:38px;height:38px;font-size:20px;color:var(--navy);cursor:pointer;line-height:1;transition:background .12s}
.hb-cal__nav:hover:not(:disabled){background:var(--cream)}
.hb-cal__nav:disabled{opacity:.3;cursor:default}
/* NB `padding:0`: temaet gir alle <button> `padding:8px 16px`. Uten
   nullstilling ble innholdsboksen 38−32 = 6px bred, og SVG-en (flex-element med
   `flex-shrink:1`) ble klemt fra 16px til 4px — ikonet så ødelagt ut.
   `flex:none` på svg-en hindrer at den krymper uansett. */
.hb-cal__pick{background:var(--soft);border:1px solid var(--line);border-radius:9px;width:36px;height:36px;padding:0;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.hb-cal__pick svg{flex:none;display:block}
.hb-cal__pick:hover{background:var(--cream);border-color:rgba(40,60,140,.35)}
/* Verktøy til høyre i dagstripa: bla-piler + datovelger */
.hb-cal__striptools{display:flex;align-items:center;gap:2px}
.hb-cal__snav{
  background:none;border:0;padding:0;width:26px;height:36px;
  font-size:22px;line-height:1;color:var(--navy);opacity:.5;cursor:pointer;
  transition:opacity .15s,transform .15s;
}
.hb-cal__snav:hover:not(:disabled){opacity:1;transform:scale(1.18);background:none}
.hb-cal__snav:disabled{opacity:.15;cursor:default}
.hb-cal__striptools .hb-cal__pick{margin-left:6px}

.hb-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.hb-cal__wd{text-align:center;font-family:"freight-sans-pro","Arial",sans-serif;font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;padding:2px 0}
.hb-cal__d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:14px;color:#cbc6bd;position:relative;user-select:none}
.hb-cal__d.empty{visibility:hidden}
/* Dager med ledig avgang markeres KUN med vekt + mørk farge (ingen prikk).
   Kontrasten mot de lysegrå dagene uten avgang er tydelig nok alene, og da
   trengs heller ingen tegnforklaring under kalenderen. */
.hb-cal__d.has{color:var(--ink);font-weight:600;cursor:pointer;background:var(--soft)}
/* :not(.sel) + hover-media: på touch henger :hover igjen ETTER trykket, og
   `.has:hover` (0,3,0) slo `.sel` (0,2,0) — valgt dag mistet navy-bakgrunnen
   men beholdt hvit tekst = uleselig. Se samme grep på .hb-cal__sd. */
@media (hover:hover){ .hb-cal__d.has:not(.sel):hover{background:var(--cream)} }
.hb-cal__d.sel{background:var(--navy);color:#fff}

.hb-cal__day{font-family:"gin","Georgia",serif;font-weight:900;text-transform:uppercase;color:var(--navy);font-size:19px;margin:0 0 4px}
.hb-cal__sub{color:var(--mut);font-size:13px;margin:0 0 14px}

/* Skillelinje KUN mellom avganger, ikke over den første.
   NB: bruk søskenvelgeren, ikke `:first-of-type` — sistnevnte så på første
   `div` blant søsknene, og det er `.hb-cal__day`, ikke første `.hb-dep`.
   Regelen traff derfor aldri, og den første raden beholdt en strek som
   sammen med streken under «x avganger» ga to tynne linjer på rad. */
.hb-dep{display:flex;align-items:center;gap:14px;padding:11px 0}
.hb-dep + .hb-dep{border-top:1px solid #f1ede6}
/* Klokkeslettet er NØYTRALT, ikke navy. Navy gjorde tidligere tre ulike jobber
   i samme rad (tid, pris, «Les mer») og mistet dermed betydning — raden så
   rotete ut. Nå bærer navy bare dagoverskriften, og rødt bare Bestill. */
.hb-dep__t{font-family:"gin","Georgia",serif;font-weight:900;font-size:19px;color:#4a5960;flex:0 0 56px}
.hb-dep__nm{flex:1;min-width:0}
.hb-dep__nm b{display:block;font-family:"Cormorant Garamond","Georgia",serif;font-size:18px;font-weight:600;color:var(--ink);line-height:1.15}
/* Turnavnet er lenke til tursiden — diskret (arver tekstfargen), så «Bestill»
   forblir den eneste tydelige CTA-en i raden. */
.hb-dep__link{color:inherit;text-decoration:none}
.hb-dep__link:hover{color:var(--red);text-decoration:underline}
/* Metalinja: varighet · voksenpris · barnepris. Vektet som på plakaten —
   voksenprisen er det tydeligste, varigheten nest, barneprisen dempet.
   NB: bruker klassen `.hb-dep__meta`, IKKE `.hb-dep__nm span`. Sistnevnte ville
   truffet de indre spanene også (etterkommer-velger) og overstyrt fargene deres. */
.hb-dep__meta{display:block;font-family:"freight-sans-pro","Arial",sans-serif;font-size:12.5px;color:var(--mut)}
.hb-dep__dur{color:var(--ink);font-weight:500}
/* Voksenprisen bærer VEKT, ikke farge. Den var navy før — sammen med navy
   klokkeslett og navy «Les mer» ble raden fire-farget og rotete. */
.hb-dep__pris{color:var(--ink);font-weight:700;font-size:1.08em;letter-spacing:.01em}
.hb-dep__barn{color:var(--mut);font-size:.88em}
/* Priskolonnen brukes KUN i bred visning (≥1408) — se media-queryen der.
   Under det er dagpanelet for smalt, og prisene står inline i metalinja. */
.hb-dep__prisk{display:none}
.hb-dep__few{color:var(--red);font-weight:600}
/* Skilletegn settes her, ikke i markupen. `::after` på delen FORAN (ikke
   `::before` på delen etter): når linja brytes — den er smal i overlay-panelet,
   der navnekolonnen bare er ~159px — blir prikken hengende igjen på slutten av
   forrige linje i stedet for å starte den nye. Hver del brytes ikke internt. */
.hb-dep__meta > span{white-space:nowrap}
.hb-dep__meta > span:not(:last-child)::after{content:" ·";margin-right:.42em;color:#b9c0c6;font-weight:400}

/* Prislinja på TURKORTENE under heroen ([hermes_pris] i Elementor loop-malen).
   Samme vekting som i kalenderen: voksenprisen tydelig, barneprisen dempet —
   men uten fast fontstørrelse, så den arver Elementors typografi på kortet. */
.hb-pris__voksen{font-weight:700;color:#283c8c}
.hb-pris__barn{color:#4a5960;font-size:.86em;font-weight:400} /* var #6b7a82 — strøk WCAG-kontrast mot kremen (3,8:1); #4a5960 gir 6:1 (25.08) */
.hb-pris__voksen + .hb-pris__barn::before{content:" ·";margin:0 .42em;color:#b9c0c6}
.hb-dep__act{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* Matcher sidens egne knapper (Elementor): gin, 15px, firkantet, blandet
   bokstaver, heltrukket fyll. Les mer = navy, Bestill = rød. */
.hb-dep__more{background:var(--navy);color:#fff;border:0;border-radius:0;padding:11px 20px;font-family:"gin","Georgia",serif;font-weight:500;text-transform:none;letter-spacing:normal;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;display:inline-block}
.hb-dep__more:hover{background:#1f2e63;color:#fff}
.hb-dep__book{background:var(--red);color:#fff;border:0;border-radius:0;padding:11px 20px;font-family:"gin","Georgia",serif;font-weight:500;text-transform:none;letter-spacing:normal;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;display:inline-block;cursor:pointer}
.hb-dep__book:hover{background:var(--red-dark);color:#fff}
.hb-dep__full{background:#efece6;color:#9a938a;border-radius:0;padding:11px 18px;font-family:"gin","Georgia",serif;font-weight:500;text-transform:none;font-size:15px;line-height:1;white-space:nowrap}

/* =====================================================================
   DAGSTRIPE-KOMPONENTEN (bredde-uavhengig)
   Stilene lå tidligere inni mobil-media-queryen. De er flyttet hit fordi
   stripa nå brukes i TO soner: mobil (≤640px) og den delte sonen (641–1407px),
   der månedsgrid + avgangsliste side om side blir for trangt. Kun `display`
   styres per sone — utseendet defineres én gang her.
   ===================================================================== */
.hb-cal{position:relative}          /* ankeret for datovelger-popoveren */
.hb-cal__stripscroll{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 6px;margin:0 -2px;
  -ms-overflow-style:none;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent 100%);
}
.hb-cal__stripscroll::-webkit-scrollbar{display:none}
.hb-cal__sd{
  scroll-snap-align:start;flex:0 0 auto;width:44px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 0 7px;border-radius:10px;border:1px solid transparent;
  background:none;color:#cbc6bd;cursor:default;user-select:none;
}
.hb-cal__sd-wd{font-family:"freight-sans-pro","Arial",sans-serif;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:inherit;opacity:.8}
.hb-cal__sd-num{font-family:"gin","Georgia",serif;font-weight:900;font-size:15px;color:inherit}
.hb-cal__sd.has{color:var(--ink);background:var(--soft);border-color:var(--line);cursor:pointer}
@media (hover:hover){ .hb-cal__sd.has:not(.sel):hover{background:var(--cream)} }
.hb-cal__sd.sel{background:var(--navy);border-color:var(--navy);color:#fff}
/* Dager UTEN avganger skal se like døde ut i alle tilstander. Dagcellene er
   <button>, og et sted i temaets stiler får alle knapper en rosa hover
   (#cc3366) — den slo inn her og fikk tomme dager til å se klikkbare ut.
   Regelen ligger i et stilark nettleseren ikke lar oss lese (CORS), så vi
   nøytraliserer i stedet eksplisitt for hver tilstand. */
.hb-cal__sd:not(.has),
.hb-cal__sd:not(.has):hover,
.hb-cal__sd:not(.has):focus,
.hb-cal__sd:not(.has):active{
  background:none;border-color:transparent;color:#cbc6bd;
  cursor:default;box-shadow:none;outline:none;
}
/* Tastaturbrukere skal fortsatt se hvor de er (museklikk gir ingen ring) */
.hb-cal__sd:not(.has):focus-visible{outline:2px solid rgba(40,60,140,.45);outline-offset:2px}
/* Klikk på en tom dag: kort risting i stedet for ingenting */
@keyframes hb-rist{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)} 40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}
}
.hb-cal__sd.hb-rist{animation:hb-rist .42s ease}
@media (prefers-reduced-motion:reduce){ .hb-cal__sd.hb-rist{animation:none} }

/* Etikett «Ingen avganger». Ligger i .hb-cal__strip, IKKE i dagcella — cella
   står i en `overflow-x:auto`-boks som ville klippet bobla på toppen. */
.hb-cal__strip{position:relative}
.hb-cal__tip{
  position:absolute;z-index:6;pointer-events:none;
  transform:translate(-50%,-100%);
  background:var(--ink);color:#fff;
  font-family:"freight-sans-pro","Arial",sans-serif;font-size:11.5px;line-height:1;
  letter-spacing:.02em;padding:6px 9px;border-radius:6px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(6,22,52,.22);
  opacity:0;transition:opacity .12s ease;
}
.hb-cal__tip::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);
}
.hb-cal__tip.vis{opacity:1}
/* Datovelger-popover: samme månedsgrid (.hb-cal__left) som ellers, vist som et
   flytende kort når JS setter .hb-pickopen på roten. Brukes i begge stripe-soner.
   NB spesifisitet: `.hb-cal.hb-pickopen` (0,3,0) må slå sonenes
   `.hb-hero .hb-cal__left{display:none}` (0,2,0), ellers forblir popoveren
   skjult når den åpnes. */
.hb-cal.hb-pickopen .hb-cal__left{
  display:block;position:absolute;inset:12px;z-index:5;
  background:#fff;border-radius:12px;box-shadow:0 14px 34px rgba(6,22,52,.22);
  padding:16px;overflow:auto;
}
.hb-cal__close{background:none;border:0;font-size:22px;line-height:1;color:var(--mut);cursor:pointer;padding:4px 8px;margin-left:6px}
.hb-cal__close:hover{color:var(--red)}
/* ===== DELT SONE, INNMAT (641–1407px): kalenderen øverst, tynne linjer under.
   Her er panelet for smalt til månedsgrid OG avgangsliste side om side —
   målt ved 1030px ble dagpanelet bare 190px bredt, hver avgang 134px høy
   (tittel over to linjer + egen knapperad) og heroen 650px, mens månedsgriden
   sto med ~410px dødt felt under seg. Under 950px var det enda verre (heroen
   904–1011px), fordi griden da la seg i full bredde OVER lista og ble 250px+ høy.
   Løsningen er samme grep som på mobil: dagstripa øverst i full bredde,
   avgangene som tynne fullbreddelinjer under, og «Les mer»/«Bestill» TIL HØYRE
   for avgangen i stedet for under (der bredden holder, se neste blokk).
   Månedsvisningen er ikke borte — kalender-ikonet åpner den som popover. */
@media (min-width:641px) and (max-width:1407px){
  .hb-hero .hb-cal__left{display:none}
  .hb-hero .hb-cal__strip{display:block;width:100%}
  .hb-hero .hb-cal .hb-cal__close{display:block}
  .hb-hero .hb-cal__right{flex:1 1 100%;min-width:0}
  .hb-hero .hb-cal__left::after{display:none}      /* skillelinja mot dagpanelet */
  /* Litt mindre bilde og strammere panel-padding gir lista pusterom */
  .hb-hero__inner{grid-template-columns:1fr 1fr}
  .hb-hero::before{right:50%}
  .hb-hero .hb-cal{padding:24px 28px}
  .hb-hero .hb-dep{padding:9px 0}
  /* Popoveren må nøytralisere kolonnebredden (flex:0 0 190px / max-width:190px)
     fra delt-sonen, ellers blir månedsgriden 190px smal. 0,4,0 slår begge. */
  .hb-hero .hb-cal.hb-pickopen .hb-cal__left{
    flex:none;width:min(340px,calc(100% - 24px));max-width:none;
    bottom:auto;max-height:calc(100% - 24px);
  }
}

/* KNAPPENE TIL HØYRE for avgangen — i HELE den delte sonen (641–1407).
   Terskelen lå først på 860px, basert på et anslag om at raden trengte ~366px.
   Målt viste seg lavere: «Les mer» er 47px og «Bestill» 80px, så knappegruppa
   er 139px og hele raden ~215px + navnet. Andreas meldte at radene brakk til to
   linjer rundt 855px; med inline helt ned til 641 forsvinner brekket.
   Målt gevinst ved 855px: rad 111px → 85px, hero 680px → 579px. */
@media (min-width:641px) and (max-width:1407px){
  .hb-hero .hb-dep{flex-wrap:nowrap;gap:12px}
  .hb-hero .hb-dep__act{flex:0 0 auto;padding-left:0;gap:12px}
  .hb-hero .hb-dep__t{flex:0 0 50px;font-size:17px}
  .hb-hero .hb-dep__nm b{font-size:16px}
  .hb-hero .hb-dep__book{padding:8px 15px;font-size:13.5px}
  .hb-hero .hb-dep__full{padding:8px 14px;font-size:13.5px}
  .hb-hero .hb-dep__more{font-size:13.5px}
}
/* Under 939px er det ikke plass til «Les mer» og «Bestill» SIDE OM SIDE ved
   siden av turnavnet:
     navn = 0,5·vw − 56 − 50(tid) − 24(mellomrom) − 139(begge knappene)
   og én linje av «Fjord- og historiecruise» krever ~200px ⇒ vw ≥ 939.
   Løsningen er IKKE å skjule «Les mer» (den må være der) — knappene STABLES
   i stedet, som i bred visning. Da er knappesøyla ~80px (bredden på «Bestill»
   alene) i stedet for 139px, og navnet får 0,5·vw − 210. */
@media (min-width:641px) and (max-width:938px){
  .hb-hero .hb-dep__act{
    flex-direction:column;align-items:stretch;gap:5px;
  }
  .hb-hero .hb-dep__more{font-size:12.5px;text-align:center;padding:0 1px 1px}
  .hb-hero .hb-dep__book{padding:7px 12px;font-size:13px;text-align:center}
  .hb-hero .hb-dep__full{padding:7px 10px;font-size:12.5px;text-align:center}
}

/* ===== BRED OVERLAY (≥1408): kompakt rad med CTA-ene STABLET til høyre.
   Dagpanelet er bare ~321px her (panelet er 577px, minus månedsgrid 200 + gap),
   så «Les mer» og «Bestill» ved siden av hverandre (152px) ville ikke fått
   plass sammen med turnavnet. Stablet blir knappesøyla ~88px = bredden på
   «Bestill» alene, og raden går fra to linjer til én.
   Effekt: lavere kremfarget panel ⇒ heroen kan senkes ⇒ båten fyller mer. */
@media (min-width:1408px){
  /* Panelet forankres i TOPPEN av heroen. `align-items:center` på gridet gjorde
     at boksen vokste i begge retninger fra midten: en dag med 4 avganger er
     115px høyere enn en med 2, så overkanten hoppet 120px → 63px når man
     klikket seg gjennom dagene. Med `start` står månedsgriden stille og lista
     vokser nedover. */
  .hb-hero .hb-cal{
    align-self:start;
    /* …men IKKE klistret til toppen. Offset-en gjenskaper nøyaktig der panelet
       lå sentrert på en VANLIG dag (2 avganger, høyde 274px):
         sentrert topp = padding-top + (heroH − padding(34+40) − 274)/2
       ⇒ margin-top = (heroH − 348)/2, der heroH = hero-ens min-height.
       Vanlige dager ser derfor identiske ut med før; travle dager vokser
       NEDOVER i stedet for å skyve kalenderen oppover. */
    margin-top:calc((clamp(520px,34vw,560px) - 348px)/2);
  }
  .hb-hero .hb-dep{flex-wrap:nowrap;gap:10px;padding:10px 0}
  .hb-hero .hb-dep__act{
    flex:0 0 auto;padding-left:0;
    flex-direction:column;align-items:stretch;gap:6px;
  }
  .hb-hero .hb-dep__book{padding:8px 12px;font-size:13.5px;text-align:center}
  .hb-hero .hb-dep__full{padding:8px 10px;font-size:13px;text-align:center}
  .hb-hero .hb-dep__more{font-size:12.5px;text-align:center;padding:0 1px 1px}
  .hb-hero .hb-dep__t{flex:0 0 46px;font-size:17px}
  /* Priskolonnen spiser ~52px av radbredden. For at turnavnene fortsatt skal
     stå på ÉN linje (ellers blir radhøydene ujevne — nettopp det rotet vi
     fjerner) er breddebudsjettet regnet om: månedsgriden ned fra 200 til
     174px, radmellomrom 12→10, tidskolonnen 50→46 og navnet 16→15px.
     Målt lengste turnavn: «En koselig time på sundet» = 198px ved 15px,
     tilgjengelig navnebredde 207px. */
  .hb-hero .hb-cal__left{flex:0 0 174px;max-width:174px}
  .hb-hero .hb-dep__nm b{font-size:15px}
  /* Prisene bytter fra metalinja til egen høyrestilt kolonne */
  .hb-dep__pris,.hb-dep__barn{display:none}
  .hb-dep__prisk{
    display:block;flex:0 0 auto;text-align:right;line-height:1.24;min-width:44px;
    font-family:"freight-sans-pro","Arial",sans-serif;font-variant-numeric:tabular-nums;
  }
  .hb-dep__prisk-v{display:block;color:var(--ink);font-weight:600;font-size:13.5px;letter-spacing:.01em}
  .hb-dep__prisk-b{display:block;color:var(--mut);font-size:11px}
  /* Skilletegnet settes med `:not(:last-child)::after`, og `display:none` på
     pris-spanene fjerner dem IKKE som søsken — varigheten fikk derfor en
     hengende «·» etter seg («4,5 timer ·»). Her er metalinja bare varighet
     (+ evt. «få plasser»), så prikkene slås av og settes i stedet foran
     statusen med `::before`. */
  .hb-dep__meta > span:not(:last-child)::after{content:none}
  .hb-dep__few::before{content:"· ";color:#b9c0c6;font-weight:400}
}

@media (max-width:640px){
  .hb-cal{padding:16px;gap:18px}
  .hb-cal__grid{max-width:270px;margin:0 auto}
  /* Knapperaden må bryte til egen linje her (tid + navn + to knapper får ikke
     plass på 322px innhold), men radene er strammet inn: mindre luft over/under,
     kortere sprang ned til knappene og litt mindre typografi. */
  .hb-dep{flex-wrap:wrap;row-gap:7px;column-gap:12px;padding:9px 0}
  .hb-dep__act{flex:1 1 100%;justify-content:flex-start;padding-left:64px;gap:12px}
  .hb-dep__t{font-size:17px;flex:0 0 52px}
  .hb-dep__nm b{font-size:16px}
  .hb-dep__meta{font-size:12px}
  .hb-dep__book{padding:8px 15px;font-size:13.5px}
  .hb-dep__full{padding:8px 14px;font-size:13.5px}
  .hb-dep__more{font-size:13.5px}

  /* Full månedsgrid byttes ut med dagstripa — gridet brukte alltid 5-6 rader
     uansett hvor mange dager som faktisk hadde avganger. */
  .hb-cal__left{display:none}
  .hb-cal__strip{display:block}
  .hb-cal .hb-cal__close{display:block}
}

/* Booking-popup (åpnes fra Book – widget pre-satt, rett til kurv) */
.hb-modal[hidden]{display:none}
/* z-index 10000: over sideinnhold, men UNDER CityBreaks mfp-wizard (~10043) så
   deres tidsvalg-popup dekker vår automatisk når FORTSETTE åpner den. */
.hb-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:64px 20px 20px;overflow:auto}
/* Prewarm: modalen er rendret (så CityBreak-widgeten hydrerer i bakgrunnen) men
   usynlig og ikke-blokkerende. Ved klikk fjernes klassen = umiddelbar visning. */
.hb-modal.hb-prewarm{pointer-events:none}
.hb-modal.hb-prewarm .hb-modal__backdrop{display:none}
.hb-modal.hb-prewarm .hb-modal__panel{position:fixed;left:-10000px;top:0;opacity:0;box-shadow:none}
.hb-modal__backdrop{position:absolute;inset:0;background:rgba(28,43,51,.55);backdrop-filter:blur(2px)}
/* Krem tvilling av CityBreaks egen popup (.cb-outer, #f3f1dc, 800px, flat) så de
   to stegene i flyten ser like ut og føles sammenhengende. */
.hb-modal__panel{position:relative;background:#f3f1dc;border-radius:0;width:min(480px,94vw);max-height:88vh;overflow:auto;
  padding:26px 26px 24px;box-shadow:none;
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.hb-modal__close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:#6b7a82;cursor:pointer;padding:4px 8px}
.hb-modal__close:hover{color:#c81919}
.hb-modal__body{min-height:322px;position:relative}
/* Under lasting: lås boksen helt (fast høyde + klipp), så verken skjelettet
   eller widgetens trinnvise rendring bak den kan endre størrelsen. */
.hb-modal__body.is-loading{height:322px;overflow:hidden}
/* Skjul CityBreak-kalenderen i popupen: dato er alt forhåndsvalgt via
   startDateISO, så kunden trenger kun antall + FORTSETTE (mindre forvirring,
   rett mot kassa). Scoped til .hb-modal så tur-sidenes egne widgets beholder
   kalenderen. .cb-segment.cb--date er en stabil semantisk klasse; skulle
   CityBreak endre den, dukker kalenderen bare opp igjen (booking virker
   fortsatt) - ingen brekkasje. .cb--options beholder dato-etikett + priser. */
.hb-modal:not(.hb-modal--pick) .cb-segment.cb--date{display:none !important}

/* CityBreaks "I have a code"-lenke farges rød av dem (#c81919) og stjeler fokus
   fra FORTSETTE. Demp den til en diskret grå tekstlenke. .cb-code er en stabil
   semantisk klasse; skulle CityBreak endre den, dukker bare deres røde opp igjen
   (booking virker uansett). */
.hb-modal .cb-code, .hb-modal a.cb-code{
  color:#6b7a82 !important;font-weight:400 !important;text-decoration:underline !important;
}
.hb-modal .cb-code:hover{color:#283c8c !important}

/* "Velg dato"-modus (tur-knapp fra forsiden uten forhåndsvalgt dato): kalenderen
   VISES så kunden kan velge dag. Litt bredere panel så kalenderen får plass, og
   ingen fast-høyde-lås (kalender + antall varierer i høyde). */
.hb-modal--pick .hb-modal__panel{width:min(800px,94vw)}
.hb-modal--pick .hb-modal__body{min-height:200px}
.hb-modal--pick .hb-modal__body.is-loading{height:auto;overflow:visible}
.hb-pickload{color:#6b7a82;text-align:center;padding:46px 10px;font-family:"freight-sans-pro","Arial",sans-serif;font-size:14px}

/* Tur-seksjonenes "Bestill"-knapp (forsiden). Matcher sidens egne knapper:
   gin, 15px, firkantet, heltrukket rød. Åpner samme popup som toppkalenderen. */
.hb-book-btn{background:#c81919;color:#fff;border:0;border-radius:0;padding:12px 26px;
  font-family:"gin","Georgia",serif;font-weight:500;font-size:15px;line-height:1;cursor:pointer;
  text-transform:none;letter-spacing:normal;white-space:nowrap;display:inline-block}
.hb-book-btn:hover,.hb-book-btn:focus{background:#a52a23;color:#fff}

/* Komplett skjelett: popupen har alltid SAMME layout (faste etiketter, tellere,
   total, knapp) - kun DATO og PRISER varierer. Så vi rendrer hele popupen som
   en ekte kopi umiddelbart, med dato/priser som skimmer-placeholders, og bytter
   til CityBreak-widgeten når den er klar. Føles ferdig med en gang. */
.hb-skel{position:absolute;inset:0;background:#f3f1dc;z-index:2;transition:opacity .18s ease;
  font-family:"freight-sans-pro",-apple-system,"Helvetica Neue",Arial,sans-serif}
.hb-skel.is-hiding{opacity:0;pointer-events:none}
.hb-skel__shim{background:linear-gradient(90deg,#ebe8e2 25%,#f6f4ef 37%,#ebe8e2 63%);background-size:400% 100%;
  animation:hb-shimmer 1.25s ease-in-out infinite;border-radius:3px;display:inline-block}
.hb-skel__date{width:112px;height:14px;margin-bottom:20px}
.hb-skel__tier{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.hb-skel__info{display:flex;flex-direction:column;gap:8px}
.hb-skel__lbl{font-weight:700;font-size:15px;color:#1c2b33;line-height:1}
.hb-skel__price{width:74px;height:12px}
.hb-skel__step{display:flex;align-items:stretch;border:1px solid #e6e1d9;border-radius:2px;overflow:hidden}
.hb-skel__step span{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#b9b3a8;font-size:17px;line-height:1}
.hb-skel__step .hb-skel__num{width:36px;border-left:1px solid #e6e1d9;border-right:1px solid #e6e1d9;color:#1c2b33;font-size:15px;font-weight:600}
.hb-skel__total{display:flex;align-items:center;justify-content:space-between;margin:22px 0 16px}
.hb-skel__total .hb-skel__lbl{text-transform:uppercase;letter-spacing:.02em}
.hb-skel__total .hb-skel__price{width:98px;height:16px}
.hb-skel__btn{background:#c81919;color:#fff;text-align:center;padding:13px;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
@keyframes hb-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

@media (max-width:640px){ .hb-modal{padding:0} .hb-modal__panel{width:100vw;max-height:100vh;border-radius:0;padding:44px 14px 18px} }

/* =====================================================================
   POLERING AV KALENDEREN (må ligge SIST — overstyrer grunnstilene over)
   Mål: bort fra «generisk widget», mot Hermes II sitt uttrykk.
   ===================================================================== */
.hb-cal__head{margin-bottom:12px}
.hb-cal__month{font-size:19px;letter-spacing:.06em}
/* Måned-nav: bare chevroner, ingen bokser */
.hb-cal__nav{
  background:none;border:0;width:26px;height:26px;font-size:22px;
  color:#283c8c;opacity:.5;padding:0;transition:opacity .15s,transform .15s;
}
.hb-cal__nav:hover:not(:disabled){background:none;opacity:1;transform:scale(1.18)}
.hb-cal__nav:disabled{opacity:.15}
.hb-cal__wd{font-size:9.5px;letter-spacing:.12em;color:#96a1ad;padding-bottom:5px}
.hb-cal__grid{gap:3px}
/* Dager: ingen grå bokser og ingen prikker — bare tall, der dager med ledig
   avgang står mørke/halvfete mot lysegrå. Valgt dag = navy sirkel. */
.hb-cal__d{border-radius:50%;font-size:13.5px;color:#c6c2ba;font-variant-numeric:tabular-nums}
.hb-cal__d.has{background:none;color:#1c2b33;font-weight:600}
@media (hover:hover){ .hb-cal__d.has:not(.sel):hover{background:rgba(40,60,140,.10)} }
.hb-cal__d.sel{background:#283c8c;color:#fff;box-shadow:0 4px 12px rgba(40,60,140,.45)}
/* Dag-panel. Ingen strek under «x avganger» — skillelinjene mellom avgangene
   holder, og to streker rett etter hverandre så ut som en feil. */
.hb-cal__day{font-size:18px;letter-spacing:.04em;margin-bottom:3px}
.hb-cal__sub{font-size:12px;margin-bottom:12px}
.hb-dep + .hb-dep{border-top-color:rgba(40,60,140,.10)}
/* ÉN tydelig CTA per rad: «Les mer» blir tekstlenke, «Bestill» beholder fyll */
.hb-dep__more{
  background:none;color:#6b7a82;padding:0 1px 2px;font-size:14px;
  border:0;border-bottom:1px solid rgba(107,122,130,.38);border-radius:0;
}
.hb-dep__more:hover{background:none;color:#1c2b33;border-bottom-color:#1c2b33}
.hb-dep__book{padding:10px 18px;font-size:14.5px;border-radius:2px}
.hb-dep__act{gap:14px}

/* ---------------------------------------------------------------------
   MOBIL-INNSTRAMMING (≤640px) — MÅ ligge etter poleringsblokka over.
   Regelen for denne fila: poleringen er sist og vinner på lik spesifisitet,
   så mobil-overstyringer av de SAMME egenskapene må komme HER, ikke i
   media-queryen lenger oppe (der ble de stille overstyrt).
   Formål: lavere kort ⇒ lavere hero, uten å miste lesbarhet.
   --------------------------------------------------------------------- */
@media (max-width:640px){
  .hb-cal__head{margin-bottom:9px}
  .hb-cal__month{font-size:16px}
  .hb-cal__day{font-size:16px;margin-bottom:2px}
  .hb-cal__sub{font-size:11.5px;margin-bottom:9px}
  .hb-dep__more{font-size:13.5px}
  .hb-dep__book{padding:8px 15px;font-size:13.5px}
  .hb-dep__act{gap:12px}
}
/* Fra 450px er kortet bredt nok (≥386px innhold) til at knappene får plass til
   HØYRE for avgangen også på mobil. Under det (typisk 390px-telefoner) er det
   for trangt — da brytes knapperaden som før.
   Terskelen lå først på 481px; senket etter måling — ved 480px var kortet
   allerede bredt nok, men raden brakk likevel og ga 110px høye avganger. */
@media (min-width:450px) and (max-width:640px){
  .hb-cal .hb-dep{flex-wrap:nowrap;column-gap:12px}
  .hb-cal .hb-dep__act{flex:0 0 auto;padding-left:0}
}

/* ===== HERO PÅ ULTRAWIDE: «båten på sjøen» ================================
   Med et lavt hero-tak (560px) og full-bleed cover blir det høye, smale
   bildet (2,25:1) enormt på veldig brede skjermer: båtbåndet (mast 7,5% –
   vannlinje 20,5% = 13% av bildehøyden) blir høyere enn de 560px heroen er,
   så hele båten får ikke plass. Andreas' valg (12.08): behold den lave
   høyden og ram båten så SKROG + VANNLINJE vises (båten «ligger på sjøen»),
   selv om toppen av masta beskjæres på de bredeste skjermene.

   Under ~1900px får hele båten plass i 560px, så der beholdes 7,5% (basis).
   Over det flyttes utsnittet gradvis NEDOVER (større background-position-Y)
   så vannlinja holder seg i bunnkant. Verdiene er regnet ut mot at synlig
   bunn ≈ 22% av bildet (vannlinje 20,5% + litt sjø): p = (0,22 − r)/(1 − r),
   der r = 560 / (2,25 · bredde). Trappet i steg fordi background-position
   ikke kan regnes fra viewport-bredden i ren CSS. Gjelder kun bred sone
   (delt/mobil bruker max-width-spørringer og røres ikke). */
@media (min-width:1900px){ .hb-hero::before{background-position:50% 10%} }
@media (min-width:2200px){ .hb-hero::before{background-position:50% 12%} }
@media (min-width:2600px){ .hb-hero::before{background-position:50% 13.5%} }
@media (min-width:3100px){ .hb-hero::before{background-position:50% 15%} }
@media (min-width:3800px){ .hb-hero::before{background-position:50% 16.5%} }
@media (min-width:4600px){ .hb-hero::before{background-position:50% 17.5%} }

/* --------------------------------------------------------------------------
   LANGE MÅNEDSNAVN I BRED VISNING (17.08)
   Andreas: «noen problemer med september, oktober og november måned visuelt».

   Årsak: månedskolonnen er 174px i bred visning (breddebudsjettet fra 07.08,
   der 26px ble tatt fra griden for å gi plass til priskolonnen). Etiketten
   «SEPTEMBER 2026» er 14 tegn i 19px versaler med .06em sperring, og skal dele
   de 174px med to chevroner. Den fikk aldri plass og brøt til to linjer, som
   gjorde kalenderhodet høyere enn ukedagsraden under.

   Først prøvd med bare `nowrap` + 14,5px og urørt breddebudsjett, men Andreas:
   «måned ble litt smått». Å beholde 174px OG gjøre teksten større går ikke opp
   — 14 tegn i 16px er ~139px, mot ~134px tilgjengelig etter chevronene. Skal
   skriften opp, må rommet opp. Derfor får månedskolonnen de 10 nye pikslene
   fra boksbredden (174 → 184px): da er det ~144px tilgjengelig, og 16px sitter
   med margin. Dagpanelet er uendret 390px (630 − 40 padding − 16 gap − 184).

   `nowrap` er selve fiksen: uten den brøt etiketten til to linjer og gjorde
   kalenderhodet høyere enn ukedagsraden under.

   MÅ ligge nederst i fila: poleringsblokka lenger opp setter font-size og
   letter-spacing på `.hb-cal__month` og vinner ellers på lik spesifisitet.
   -------------------------------------------------------------------------- */
@media (min-width:1408px){
  .hb-hero .hb-cal__left{flex:0 0 184px;max-width:184px}
  .hb-hero .hb-cal__month{font-size:16px;letter-spacing:.01em;white-space:nowrap}
}

/* --------------------------------------------------------------------------
   IKONKNAPPENE: nøytraliser temaets knapp-hover (17.08)
   Andreas, mobil: «når jeg trykker pil høyre/venstre blir knappen visuelt sett
   borte (den fungerer fortsatt)» og «kalenderen dukker opp med lilla/rosa hover
   på X-en».

   ROTÅRSAK — samme som de rosa dagcellene i august, men bare halvveis fikset:
   temaet styler ALLE `<button>` med en kraftig hover (rosa bunn, HVIT tekst).
   Reglene våre satte `background:none` på hover og fjernet dermed det rosa —
   men gjenopprettet aldri `color`. Temaets hvite tekst overlevde, så chevronen
   ble hvit på hvitt panel = usynlig. På X-en satte vi bare `color`, ikke
   bakgrunn, så der slo det rosa gjennom i stedet.
   På berøringsskjerm HENGER `:hover` igjen etter et trykk, derfor så det ut som
   knappen forsvant permanent.

   To grep:
   1) Alle fire ikonknappene får eksplisitt bakgrunn OG farge i hver tilstand
      (:hover/:focus/:active). Da finnes det ingenting temaet kan fylle inn.
   2) De dekorative effektene (forstørring, full opasitet) flyttes bak
      `@media (hover:hover)`, så de aldri henger igjen på berøring.

   MÅ ligge nederst i fila — poleringsblokka lenger opp setter de samme
   egenskapene og vinner ellers på lik spesifisitet.
   -------------------------------------------------------------------------- */
.hb-cal__nav, .hb-cal__nav:hover, .hb-cal__nav:focus, .hb-cal__nav:active,
.hb-cal__snav, .hb-cal__snav:hover, .hb-cal__snav:focus, .hb-cal__snav:active{
  background:none;border:0;color:#283c8c;box-shadow:none;
}
/* :hover MÅ være med her, ikke bare :focus/:active. Det var nettopp den
   hengende `:hover` etter et trykk som slapp temaets rosa bunn gjennom på X-en.
   Pekerenheter får sin dekorative hover tilbake i @media-blokka under, som
   ligger senere i fila og dermed vinner der. */
.hb-cal__close, .hb-cal__close:hover, .hb-cal__close:focus, .hb-cal__close:active{
  background:none;border:0;box-shadow:none;color:#6b7a82;
}
.hb-cal__pick, .hb-cal__pick:hover, .hb-cal__pick:focus, .hb-cal__pick:active{
  background:var(--soft);color:#283c8c;box-shadow:none;
}
/* Museklikk skal ikke gi fokusring; tastaturnavigasjon skal. */
.hb-cal__nav:focus:not(:focus-visible),
.hb-cal__snav:focus:not(:focus-visible),
.hb-cal__pick:focus:not(:focus-visible),
.hb-cal__close:focus:not(:focus-visible){outline:none}
.hb-cal__nav:focus-visible, .hb-cal__snav:focus-visible,
.hb-cal__pick:focus-visible, .hb-cal__close:focus-visible{
  outline:2px solid rgba(40,60,140,.45);outline-offset:2px;
}
/* TEKSTFARGEN måtte ha !important (26.08). Reglene over setter riktig `color`,
   men temaets `button`-regel vinner likevel ved :focus/:active — målt
   rgb(204,51,102) på X-en, stripe-pilene og kalenderikonet etter et trykk.
   Andreas: «ved klikk blir de ofte rosa og oppfører seg generelt rart».
   Regelen er i et stilark vi ikke kan lese (CORS), så spesifisitet alene
   holdt ikke — bakgrunn/ramme var allerede nøytralisert, men ikke fargen.
   `hb-cal__nav` var upåvirket, derfor ble det oversett i forrige runde. */
.hb-cal__snav, .hb-cal__snav:hover, .hb-cal__snav:focus,
.hb-cal__snav:active, .hb-cal__snav:focus-visible{
  color:#283c8c !important; border-color:transparent !important;
}
/* RAMMEN var den synlige feilen (26.08, andre runde). Andreas: «kalenderikonet
   har også en rosa ramme rundt, og X-en på kalenderen har også en rosa ramme».
   Målt: `border: 1px solid rgb(204,51,102)` — og den sto der alt i HVILE, ikke
   bare ved fokus. Derfor bommet forrige måling, som bare så på tekstfargen.
   `.hb-cal__close` hadde `border:0`, men temaet vant likevel; `.hb-cal__pick`
   satte aldri border i det hele tatt. Begge må ha !important. */
.hb-cal__pick, .hb-cal__pick:hover, .hb-cal__pick:focus,
.hb-cal__pick:active, .hb-cal__pick:focus-visible{
  color:#283c8c !important; border:1px solid rgba(40,60,140,.22) !important;
}
.hb-cal__close, .hb-cal__close:focus,
.hb-cal__close:active, .hb-cal__close:focus-visible{
  color:#6b7a82 !important; border:0 !important;
}
@media (hover:hover){
  .hb-cal__close:hover{color:#c81919 !important; border:0 !important}
  .hb-cal__pick:hover{border-color:rgba(40,60,140,.35) !important}
}

/* ── ROSA PÅ MOBIL: bred nøytralisering (26.08, tredje runde) ──────────────
   Andreas: «når jeg trykker på en knapp blir den rosa, noen ganger får jeg
   også én rosa og én blå knapp samtidig … kalenderknappen blir rosa et lite
   millisekund etter trykk».

   Jeg klarte ALDRI å reprodusere det ved måling: 37 stilark ble lest uten
   CORS-feil, ingen regel inneholder #cc3366, ingen CSS-variabel holder den,
   og `-webkit-tap-highlight-color` var nøytral grå. Syntetiske pointer-
   hendelser utløser heller ikke ekte `:active`, så den tilstanden lot seg
   ikke måle herfra.

   Derfor denne brede regelen i stedet for et presist treff: den låser
   utseendet i ALLE tilstander for alle kalenderknapper. Det koster lite og
   virker uansett hvilken kilde fargen har. `.has` og `.sel` settes eksplisitt
   etterpå, ellers ville nøytraliseringen også slått ut de riktige fargene.
   ------------------------------------------------------------------------ */
.hb-cal button, .hb-cal button:hover, .hb-cal button:focus,
.hb-cal button:active, .hb-cal button:focus-visible, .hb-cal button:focus-within,
.hb-cal a, .hb-cal a:hover, .hb-cal a:focus, .hb-cal a:active{
  -webkit-tap-highlight-color:transparent !important;
}
.hb-cal__sd, .hb-cal__sd:hover, .hb-cal__sd:focus, .hb-cal__sd:active, .hb-cal__sd:focus-visible,
.hb-cal__d,  .hb-cal__d:hover,  .hb-cal__d:focus,  .hb-cal__d:active,  .hb-cal__d:focus-visible{
  background-color:transparent !important; border-color:var(--line,#e6e1d9) !important;
  color:var(--mut,#6b7a82) !important; box-shadow:none !important;
}
.hb-cal__sd.has, .hb-cal__sd.has:hover, .hb-cal__sd.has:focus, .hb-cal__sd.has:active,
.hb-cal__d.has,  .hb-cal__d.has:hover,  .hb-cal__d.has:focus,  .hb-cal__d.has:active{
  background-color:var(--soft,#faf8f4) !important; color:var(--ink,#1c2b33) !important;
  border-color:var(--line,#e6e1d9) !important;
}
.hb-cal__sd.sel, .hb-cal__sd.sel:hover, .hb-cal__sd.sel:focus, .hb-cal__sd.sel:active, .hb-cal__sd.sel:focus-visible,
.hb-cal__d.sel,  .hb-cal__d.sel:hover,  .hb-cal__d.sel:focus,  .hb-cal__d.sel:active,  .hb-cal__d.sel:focus-visible{
  background-color:var(--navy,#283c8c) !important; border-color:var(--navy,#283c8c) !important;
  color:#fff !important;
}
/* Kalenderikonet ble rosa i det datovelgeren åpnet seg (Andreas 26.08).
   Ikonet er en SVG med `stroke="currentColor"`, så den ARVER knappens
   tekstfarge — et rosa `:active` slår derfor gjennom på selve streken.
   Her låses både knappen og streken, i alle tilstander. */
.hb-cal__pick, .hb-cal__pick:hover, .hb-cal__pick:focus, .hb-cal__pick:active,
.hb-cal__pick:focus-visible, .hb-cal__pick:focus-within,
.hb-cal__pick[aria-expanded="true"]{
  background:var(--soft,#faf8f4) !important; color:#283c8c !important;
  border:1px solid rgba(40,60,140,.22) !important; box-shadow:none !important;
}
.hb-cal__pick svg, .hb-cal__pick svg *{ stroke:#283c8c !important; fill:none !important; }

/* ── Dager uten avganger: skråstrek (26.08, Andreas) ───────────────────────
   «Tomme» dager var bare bleke, og ble lest som klikkbare. En skrå strek fra
   nede venstre til oppe høyre er den samme konvensjonen som brukes i kalendere
   ellers, og leses uten forklaring. Tegnet som gradient, ikke pseudo-element,
   fordi cellene allerede bruker ::before/::after til annet.
   KUN MOBIL (Andreas 27.08): på desktop var «grået ut + ikke halvfet» allerede
   tydelig nok, og streken ble støy i det store månedsrutenettet. Der er det
   plass til at fargeforskjellen alene bærer beskjeden; på en 36px celle på
   telefon er den det ikke. */
@media (max-width:640px){
  .hb-cal__sd:not(.has), .hb-cal__d:not(.has){
    background-image:linear-gradient(to top right,
      transparent calc(50% - .6px), rgba(107,122,130,.42) calc(50% - .6px),
      rgba(107,122,130,.42) calc(50% + .6px), transparent calc(50% + .6px)) !important;
  }
}

/* ── Dagstripa: månedsetikett + sveipe-hint (26.08, Andreas) ───────────────
   «Ingen har skjønt intuitivt at dagvelgeren kan sveipes», og månedsetiketten
   ble klemt inntil første dato. Tre grep: etiketten får egen kolonne med
   skillestrek, masken til høyre gjøres tydeligere så neste dag «kikker» fram,
   og en kort tekst forklarer bevegelsen. Teksten forsvinner ved første sveip
   (klassen settes i kalender.js) — den skal lære bort, ikke stå i veien. */
/* VENSTREFORANKRET, IKKE SENTRERT (27.08) — dette er en ekte feilretting, ikke
   en smakssak. Med `justify-content:center` er tekstens venstrekant en funksjon
   av tekstens BREDDE: `buildStrip` legger inn en TOM <i>, og innholdet fylles
   først av `oppdaterMnd`. Målt per frame: i den tomme tilstanden står punktet på
   x=50,3 (kolonnens midte), og idet «sep» kommer inn spretter det til x=44,5 —
   altså 5,8px mot høyre og tilbake igjen, nøyaktig slik Andreas beskrev det
   («hopper til høyre, nær streken, og tilbake når animasjonen er over»).
   Med flex-start er venstrekanten låst til paddingen og kan ikke bevege seg
   uansett hva som står der. 7px er den målte sentrerte posisjonen, så det
   optiske resultatet er uendret. (JS fyller nå også etiketten synkront.) */
.hb-cal__smnd{
  min-width:30px !important; padding:0 6px 0 7px !important;
  border-right:1px solid rgba(40,60,140,.14) !important; margin-right:6px !important;
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
}

/* Dagcellene: ukedag OVER dato, og smalere celler (26.08, Andreas) — «ta dato
   og dagsnavnet på hver sin linje og gjør boksene litt smalere så vi får plass
   til flere datoer synlig». Målt ved 414px: 68px bred celle ⇒ 4,2 synlige.
   Stablet innhold + padding 7px/8px gir 36px ⇒ 6,5 synlige, altså nesten en
   hel uke. Høyden holder 43px, så treffområdet for fingeren er intakt.
   !important fordi temaet gir ALLE <button> padding 8px 16px — samme regel som
   er nøytralisert flere steder i denne fila. Uten den blir cellen 52px. */
@media (max-width:640px){
  .hb-cal__sd{
    padding:7px 8px !important; width:auto !important; min-width:36px !important;
    box-sizing:border-box;
  }
  .hb-cal__sd-wd{ display:block; line-height:1.1; margin:0; font-size:9px; }
  .hb-cal__sd-num{ display:block; line-height:1.15; margin:0; }
}
.hb-cal__smnd i{ font-style:normal; font-weight:700; letter-spacing:.06em; color:#283c8c; opacity:.75; }
.hb-cal__striprad{ position:relative; }
.hb-cal__stripscroll{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),rgba(0,0,0,.08) 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 56px),rgba(0,0,0,.08) 100%);
  padding-right:40px;
}
/* Tekst-hintet («Sveip for flere dager») er FJERNET 26.08 — Andreas ville ha
   selve bevegelsen i stedet for en instruksjon. Animasjonen lenger ned gjør
   samme jobb, og tar ikke plass i oppsettet. */
/* Dekorativ hover kun på ekte pekerenheter. */
@media (hover:hover){
  .hb-cal__nav:hover:not(:disabled),
  .hb-cal__snav:hover:not(:disabled){opacity:1;transform:scale(1.18)}
  .hb-cal__close:hover{color:#c81919}
  .hb-cal__pick:hover{background:var(--cream);border-color:rgba(40,60,140,.35)}
}

/* Stripehodet: pilene på hver sin side av måneden (DOM-rekkefølgen er endret i
   buildStrip). Måneden tar plassen i midten, `›` + kalenderikonet står samlet
   til høyre — speiler månedsgridets ‹ MÅNED › på desktop. */
/* (Stripehodet har ikke lenger noen månedsetikett — måneden ligger i stripa.
   Se blokka «MÅNEDEN INN I DAGSTRIPA» nederst i fila.) */

/* --------------------------------------------------------------------------
   MÅNEDEN INN I DAGSTRIPA — overskriften er fjernet (17.08)

   Andreas: «det ser ut som man endrer måned, det gjør man ikke, man blar bare
   bortover på dagene. Og når man faktisk blar langt nok bort så endres heller
   ikke overskriften.» Begge deler stemte: etiketten viste måneden til den VALGTE
   dagen, mens pilene flyttet synsfeltet. En oppsummering av stripa kan alltid
   komme ut av synk med stripa — så oppsummeringen er fjernet.

   Måneden står nå som en KLEBRIG markør inne i stripa, satt inn der måneden
   faktisk skifter (se buildStrip). Den blir liggende i venstre kant mens man
   blar gjennom måneden, og skyves ut av neste måned. Alltid synlig, alltid
   riktig, ingenting å holde i synk.

   Detaljer som er lette å trå feil på:
   • `scroll-snap-align:none` — ellers snapper stripa til markøren, ikke til dager.
   • Markøren må IKKE fange klikk (`pointer-events:none`), ellers stjeler den
     trykk fra dagcellene den ligger oppå.
   • Markøren må IKKE ha bakgrunn eller z-index — se blokka under om hvorfor
     klebringen (og dermed boksen) ble fjernet igjen.

   Pilene: de ble laget for MUS (berøring svaiper), og på telefon var de bare et
   ekstra element som forvirret. Skjules derfor på berøringsskjerm.
   -------------------------------------------------------------------------- */

/* KLEBRINGEN ER FJERNET (17.08, andre runde).
   Andreas: «problemet er at den har en slags boks som ligger delvis oppå
   dagene». Presist — og boksen var ikke pynt: en klebrig markør MÅ ha bakgrunn,
   ellers glir dagcellene synlig gjennom den. Det er altså klebringen selv som
   koster, ikke typografien.

   Og den klebringen løste et problem vi ikke har: dagpanelet rett under stripa
   viser allerede full dato («torsdag 1. oktober», se buildPanel). Måneden går
   derfor aldri tapt selv om markøren ruller ut av syne.

   Markøren er nå et helt vanlig element i flyten: ingen bakgrunn, ingen
   z-index, ingenting som ligger oppå noe. Den markerer bare hvor måneden
   skifter, i samme etikettspråk som ukedagene ved siden av (toppstilt på samme
   optiske linje — cellene har 1px gjennomsiktig kant + 6px padding = 7px). */
/* Rullefeltet og månedskolonnen står side om side. Månedskolonnen er UTENFOR
   rullefeltet, og det er hele poenget: dagene passerer forbi den, ikke bak den,
   så den kan stå i ro uten bakgrunn. Et klebrig element inni rullefeltet ville
   trengt bakgrunn for å skjule cellene som glir under — og nettopp den
   bakgrunnen leste Andreas som «en boks som ligger delvis oppå dagene». */
.hb-cal__striprad{display:flex;align-items:stretch;min-width:0}
.hb-cal__smnd{
  flex:none;display:flex;align-items:center;padding:0 7px 6px 1px;
  pointer-events:none;
}
/* Loddrett, som i skissen. Sparer ~30px vannrett, som er mye når kolonnen står
   permanent og hver dagcelle bare er 44px bred.
   FORMAT: første forsøk sto på 9,5px med 50 % opasitet og forsvant nesten helt
   (Andreas: «AUG ser nesten usynlig ut»). Nå 11,5px, halvfet, full opasitet i
   en dempet navy — kraftig nok til å leses som en etikett, dempet nok til at
   dagtallene fortsatt er det man ser først. */
.hb-cal__smnd i{
  font-family:"freight-sans-pro","Arial",sans-serif;font-style:normal;font-weight:700;
  text-transform:uppercase;font-size:11.5px;letter-spacing:.14em;
  color:#5a6b96;white-space:nowrap;line-height:1;
  writing-mode:vertical-rl;transform:rotate(180deg);
}

/* Markøren MELLOM to måneder — ligger i flyten mellom 31. og 1., følger dagene
   når man blar, og trenger derfor ingen bakgrunn. Hårstreken gjør at den leses
   som en grense og ikke som en tredje dagcelle. */
.hb-cal__skille{
  flex:none;align-self:stretch;display:flex;align-items:center;
  padding:0 6px;margin:0 1px;
  border-left:1px solid rgba(40,60,140,.16);
  scroll-snap-align:none;pointer-events:none;
}
.hb-cal__skille i{
  font-family:"freight-sans-pro","Arial",sans-serif;font-style:normal;font-weight:700;
  text-transform:uppercase;font-size:11.5px;letter-spacing:.14em;
  color:#5a6b96;white-space:nowrap;line-height:1;
  writing-mode:vertical-rl;transform:rotate(180deg);
}
/* Rullefeltet må kunne krympe inne i flex-raden, ellers presser de 700+
   dagcellene kolonnen ut i bredden (samme felle som `min-width:0` på .hb-cal). */
.hb-cal__striprad .hb-cal__stripscroll{flex:1 1 auto;min-width:0}
/* Hodet er nå bare verktøyene, samlet til høyre. */
.hb-cal__head--strip{justify-content:flex-end}
/* Ingen piler i dagstripa på smale skjermer — der svaiper man.
   26.08: sto tidligere KUN på `@media (hover:none)`. Det treffer ekte
   berøringsskjermer, men ikke et smalt vindu på desktop — så pilene «kom
   tilbake» ved testing. `max-width:640px` er den samme grensen som resten av
   mobiloppsettet bruker, så oppførselen henger nå sammen med layouten. */
@media (hover:none), (max-width:640px){
  .hb-cal__head--strip .hb-cal__snav{display:none}
}

/* --------------------------------------------------------------------------
   DATOVELGEREN FLYTTET TIL DATOEN (17.08)
   Da pilene ble skjult på berøring og månedsetiketten flyttet ut av hodet, sto
   kalenderikonet igjen alene i stripehodet — og etterlot «en uheldig stor hvit
   topp» (Andreas). Knappen hører uansett hjemme ved datoen den endrer.

   Nå: ikonet ligger på samme linje som dagoverskriften («TIRSDAG 18. AUGUST»),
   høyrestilt. Det koster ingen egen høyde, og betydningen er tydeligere.
   Stripehodet inneholder bare pilene og faller helt bort der de skjules.
   -------------------------------------------------------------------------- */
.hb-cal__dayrad{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hb-cal__dayrad .hb-cal__day{flex:1 1 auto;min-width:0}
/* Knappen vises KUN der dagstripa faktisk vises. Overalt ellers står
   månedsgriden synlig ved siden av dagpanelet, og da er en «velg dato»-knapp
   bare støy. Speiler synlighetsreglene for `.hb-cal__strip` (skjult som
   standard, vist i `.hb-hero` under 1408px) — endres de, må denne følge med. */
.hb-cal__dayrad .hb-cal__pick{display:none}
@media (max-width:1407px){
  .hb-hero .hb-cal__dayrad .hb-cal__pick{
    display:flex;flex:none;width:34px;height:34px;margin-top:-2px;
  }
}
/* Berøring: pilene er skjult, så hodet er tomt og skal ikke ta plass. */
@media (hover:none){
  .hb-cal__head--strip{display:none}
}

/* Lesbarhet (25.08): hvit herotekst mot hvite skyer i bildet — svak skygge.
   To lag: en tett kant for skarphet + en myk glød for kontrast mot lyse felt.
   Ligger SIST i fila med vilje (cascade-regelen — se notat øverst). */
.hb-hero__title,
.hb-hero__sub{
  text-shadow: 0 1px 2px rgba(3,49,52,.5), 0 2px 16px rgba(3,49,52,.35);
}
/* Undertittelen er mindre og tynnere enn tittelen og trenger mer hjelp mot lyse
   partier (Andreas 25.08): tettere kant + bredere, sterkere glød. */
.hb-hero__sub{
  text-shadow: 0 1px 3px rgba(3,49,52,.8), 0 2px 10px rgba(3,49,52,.55), 0 3px 22px rgba(3,49,52,.4);
}

/* Mobil-hero (25.08): på smale skjermer serveres en NEDSKALERT variant av
   SAMME bilde (--hb-hero-img-m, satt inline av PHP; 828px bred, ~170 KB webp
   mot 410) — ren skalering, ingen beskjæring. Faller tilbake på fullversjonen
   om varianten mangler. Ligger sist i fila (cascade-regelen).

   FELLE (26.08): denne regelen står SIST og vant over to-lags-bakgrunnen
   (tone + bilde) som ble lagt inn i mobilblokka lenger opp. Resultatet var at
   gradienten forsvant, mens `background-size: 100% 100%` — som hørte til
   gradient-laget — ble stående og STREKTE bildet. Begge lagene må derfor
   defineres HER, samlet, siden dette er den siste regelen som gjelder.
   Rører du ett av lagene, må du røre begge. */
@media (max-width: 640px) {
  .hb-hero::before {
    background-image:
      /* 1) Tittelens navy-tone. */
      linear-gradient(180deg,rgba(10,30,66,.58) 0%,rgba(10,30,66,.32) 22%,rgba(10,30,66,.10) 40%,rgba(10,30,66,0) 52%),
      /* 2) Diagonal fra venstre — desktop har denne (100deg .58), mobil manglet
            den helt. Den bidrar mye til det «duse» uttrykket. */
      linear-gradient(100deg,rgba(10,30,66,.40) 0%,rgba(10,30,66,.12) 34%,rgba(10,30,66,0) 64%),
      /* 3) Dybdetone over sjøen. NAVY (10,30,66), ikke teal — Andreas 26.08:
            «bildet er mye mer nedduset og blått på desktop enn på mobil, jeg
            foretrekker desktop».
            NØKKELEN var ikke fargen alene, men at gradienten var for LANG:
            230vw = 938px mens man bare ser ~631px, så tonen rakk aldri lenger
            enn .49 før den forsvant ut av synsfeltet. Målt før/etter:
              under båten .15 → .49   ·   bunn .49 → .80  (desktop: .80)
            Derfor et PLATÅ: full styrke fra 55% og hele veien ned, slik at
            styrken er den samme uansett hvor høy hero blir.
            Går IKKE til solid farge: bildet skal synes hele veien ned, også
            bak kalenderkortet. */
      linear-gradient(180deg,rgba(10,30,66,0) 8%,rgba(10,30,66,.24) 26%,rgba(10,30,66,.46) 42%,rgba(10,30,66,.60) 58%,rgba(10,30,66,.62) 100%),
      /* 3) Selve bildet. */
      var(--hb-hero-img-m, var(--hb-hero-img));
    /* NØKKELEN (26.08, fjerde runde): gradientene har FAST høyde i vw, bildet
       skalerer etter BREDDEN. Ingen av dem er knyttet til hero-høyden, som
       varierer 616–818px med antall avganger. Bildet ble tidligere kuttet ved
       92vw for å oppnå det samme — men det fjernet sjøen bak kalenderen, som
       Andreas savnet. Bildet er 1166px høyt ved 135% zoom mot hero maks 818px,
       så det dekker alltid med god margin. */
    background-size: 100% 92vw, 100% 230vw, 100% 230vw, 135% auto;
    background-position: 50% 0, 50% 0, 50% 0, 50% 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  }
}
@media (min-width: 481px) and (max-width: 640px) {
  .hb-hero::before {
    background-size: 100% 74vw, 100% 190vw, 100% 190vw, cover;
    background-position: 50% 0, 50% 0, 50% 0, 50% 4%;
  }
}