/*
 * Kurbad Limfjorden – layoutlag
 *
 * Erstatter de Bootstrap-grid-klasser, markup'en hang på. Basisreglerne ligger
 * i reboot.css, som indlæses før main.css – ligesom Bootstrap gjorde.
 * Kolonner mellem sektioner styres af Block Grid (css/blockgrid.css).
 */

/* --- utilities der stadig bruges i markup --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.d-none      { display: none !important; }
.img-fluid   { max-width: 100%; height: auto; }
.visuelt-skjult {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- to-spaltede sektioner ---
   Før: <div class="row"><div class="col-md-6 item">…</div>…</div>
   Nu:  sektionen er selv flex-container med to .item-børn. */
.text-w-image-section,
.subpage-top-section {
  display: flex;
  flex-wrap: wrap;
}
.text-w-image-section > .item,
.subpage-top-section > .item {
  flex: 1 1 50%;
  max-width: 50%;
}
/* Bemærk: flipCol vender IKKE noget om på desktop – rækkefølgen bestemmes af
   markup'en. main.css bruger klassen under 767px til at stable billedet nedenunder. */

/* v8 brugte col-md-6 her, så sektionen stabler under 768px. */
@media (max-width: 767px) {
  .text-w-image-section > .item {
    flex-basis: 100%;
    max-width: 100%;
  }
  /* Teksten skal altid stå øverst på mobil. Det er hele formålet med flipCol:
     i sektioner hvor billedet står til venstre på desktop, vendes rækkefølgen
     om, så teksten kommer først når kolonnerne stables. */
  .text-w-image-section.flipCol {
    flex-direction: column-reverse;
  }
}

/* v8 brugte col-lg-6 her, så denne stabler først under 992px. */
@media (max-width: 991px) {
  .subpage-top-section > .item {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* --- galleri ---
   Før: .col-6 .col-md-3 pr. billede. */
.gallery-section .gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 768px) {
  .gallery-section .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- links i tekstsektioner ---
   Før: .row med .col-6 pr. link når ListLinks var sat. */
.cta-links--liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 15px;
}

/* --- forbeholdstekst ---
   v8 brugte <small> til faste forbehold ("Der tages forbehold for fejl, pris og
   ændringer"). Tiptap har ingen small-node, så importen konverterer dem til
   <span class="forbehold">. Se migration/rte-analyse.md.
   Inline som <small>: redaktørerne sætter den som "Lille tekst" i Typografi-menuen,
   også på enkelte ord. Står den alene i et afsnit, ser den ud som før. */
.forbehold {
  font-size: 0.8em;
  opacity: 0.75;
}

/* --- Block Grid ---
   Ingen mellemrum mellem sektionerne; de støder op til hinanden som i v8.
   Sektionernes egen højde skal IKKE overskrives – fx sætter .hero-slider 75vh. */
.umb-block-grid__layout-container { gap: 0; }

/* --- footer ---
   Før: .row med .col-md-3 / .col-md-4 / .col-md-2. */
.footer-section .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media (min-width: 768px) {
  .footer-section .footer-grid {
    grid-template-columns: 3fr 3fr 4fr 2fr;
  }
}
.footer-section .footer-menu-kolonner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 15px;
}

/* --- topbar ---
   v8 satte farverne inline på hvert element. De hører hjemme her. */
.topbar a,
.topbar a:hover,
.topbar i {
  color: #fff;
}
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

/* --- kolonner i en tekstsektion ---
   Bootstraps grid gav hver kolonne 15px vandret luft (.row havde -15px margin,
   .col +15px padding). Block Grid har ingen tilsvarende gutter, så den
   genskabes her – ellers rykker indholdet 15px til venstre. */
.text-col-section .umb-block-grid__layout-item {
  padding-left: 15px;
  padding-right: 15px;
}

/* --- ActiveCampaign-formularer ---
   v8 brugte Bootstraps grid: en centreret col-md-5 med et indre gitter af
   col-12 / col-6 / col-md-3 / col-md-9. Her er kun det, markup'en faktisk brugte. */
.ActiveCampaign .ac-form-wrapper {
  display: flex;
  justify-content: center;
}
.ActiveCampaign .ac-form-wrapper > .item {
  width: 100%;
  max-width: 41.666667%;   /* col-md-5 */
}
@media (max-width: 767px) {
  .ActiveCampaign .ac-form-wrapper > .item { max-width: 100%; }
}
.ActiveCampaign .ac-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 15px;
}
.ActiveCampaign .ac-fuld     { grid-column: span 12; }
.ActiveCampaign .ac-halv     { grid-column: span 6; }
.ActiveCampaign .ac-kvart    { grid-column: span 3; }
.ActiveCampaign .ac-trekvart { grid-column: span 9; }
@media (max-width: 767px) {
  .ActiveCampaign .ac-halv     { grid-column: span 12; }
  .ActiveCampaign .ac-kvart    { grid-column: span 6; }
  .ActiveCampaign .ac-trekvart { grid-column: span 6; }
}

/* --- delt farve ---
   v8 satte klassen .splitColor på hver kolonne. Block Grids områdeelementer kan
   ikke få en klasse fra blokken, så reglerne peger i stedet på selve elementet. */
.text-col-section.splitColorSection .umb-block-grid__layout-item {
  background-color: #fff;
  padding-left: 0;
  padding-right: 0;
}
.text-col-section.splitColorSection .umb-block-grid__layout-item:last-child {
  background-color: #BFC2BD;
}
.text-col-section.splitColorSection .umb-block-grid__layout-item:last-child .cta-link i {
  color: #254A4B;
  border-color: #254A4B;
}
.text-col-section.splitColorSection .umb-block-grid__layout-item .item {
  padding: 180px 45px;
}

/* --- bookingwidget i hero-tekstboksen ---
   v8's redaktør havde pakket widgeten på /gift-card/ i en div med
   max-width:800px, margin:auto og padding-top:50px. Uden begrænsningen folder
   den widget sig ud i fuld højde. De øvrige fem hero-widgets ligger i en
   tekstkolonne, der i forvejen er smallere end 800px, så reglen ændrer intet
   for dem. */
.subpage-top-section .text-box [id^="gecko_"] {
  margin: auto;
  padding-top: 50px;
  max-width: 800px;
}

/* --- karrusel (anmeldelser og billedserien i hero-billedet) ---
   Afløser Owl Carousel. Opbygningen svarer til Owls: vindue (.owl-stage-outer),
   spor (.owl-stage), slides (.owl-item) og pile/prikker som søskende til vinduet.
   Derfor kunne main.css' regler beholde deres værdier. Her ligger det, Owls egen
   CSS og standardtema leverede. Adfærden ligger i kurbad.js. */
.karrusel {
  position: relative;
  width: 100%;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.karrusel:focus { outline: none; }
.karrusel-vindue {
  position: relative;
  overflow: hidden;
}
.karrusel-spor {
  display: flex;
  transition: transform 250ms ease;
  touch-action: pan-y;
}
.karrusel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.karrusel-pil,
.karrusel-prikker button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.karrusel-pil {
  display: inline-block;
  margin: 5px;
}
.karrusel-prikker {
  margin-top: 10px;
  text-align: center;
}
.karrusel-prikker button { display: inline-block; }
.karrusel-prikker button span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  transition: opacity .2s ease;
}

/* --- lysboks til galleriblokken ---
   Afløser Fancybox. Et <dialog>, som kurbad.js opretter ved første klik. */
.lysboks {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
.lysboks::backdrop { background: rgba(24, 28, 28, .92); }
.lysboks[open] { animation: lysboks-ind 200ms ease; }
@keyframes lysboks-ind { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lysboks[open] { animation: none; }
}
html:has(.lysboks[open]) { overflow: hidden; }

.lysboks-billede {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 60px 100px;
  box-sizing: border-box;
}
.lysboks-billede img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
}
.lysboks-antal {
  position: absolute;
  top: 22px;
  left: 24px;
  margin: 0;
  font-size: 14px;
  letter-spacing: .05em;
  opacity: .8;
}
.lysboks-luk,
.lysboks-pil {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  line-height: 1;
  opacity: .8;
  cursor: pointer;
  transition: color .3s ease, opacity .3s ease;
}
.lysboks-luk { top: 12px; right: 12px; }
.lysboks-luk svg { width: 36px; height: 36px; }
.lysboks-pil { top: 50%; transform: translateY(-50%); }
.lysboks-pil.prev { left: 20px; }
.lysboks-pil.next { right: 20px; }
.lysboks-luk:hover,
.lysboks-pil:hover { color: #f97316; opacity: 1; } /* samme hover som hero-sliderens pile */
.lysboks-luk:focus,
.lysboks-pil:focus { outline: none; }
.lysboks-luk:focus-visible,
.lysboks-pil:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.lysboks [hidden] { display: none; }

@media (max-width: 767px) {
  .lysboks-billede { padding: 60px 0; }
  .lysboks-pil { top: auto; bottom: 16px; transform: none; }
  .lysboks-pil svg { width: 36px; height: 36px; }
}

/* --- skalerede baggrundsbilleder ---
   Billeder.Baggrund() sætter --bg (desktop) og --bg-m (mobil) inline. */
.bg-billede { background-image: var(--bg); }
@media (max-width: 767px) {
  .bg-billede { background-image: var(--bg-m, var(--bg)); }
}