/* ------------------------------------------------------------------------------------------------
   Løgismosestrand Camping — Concept A
   Design tokens taken from the approved design boards (see C:\git\LogismosestrandDesign).
   ------------------------------------------------------------------------------------------------ */

:root {
  --teal: #1B7F94;
  --teal-dark: #146273;
  --tint: #E6F2F5;
  --sand: #F6EFE3;
  --sand-stamp: #F3E5C3;
  --mist: #CFE3E8;          /* secondary text on the teal grounds */
  --accent: #E08A3C;
  --ink: #17262B;
  --ink-soft: #2F4348;      /* running text on white */
  --muted: #4F6369;
  --line: #E3ECEF;
  --line-strong: #C9D9DE;
  --ground: #FFFFFF;

  --font-heading: "Libre Baskerville", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1440px;
  --gutter: 80px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 2px 8px rgba(23, 38, 43, .06);
  --shadow-lg: 0 10px 30px rgba(23, 38, 43, .10);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal); }

img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 1100px) { .container { padding-inline: 40px; } }
@media (max-width: 640px) { .container { padding-inline: 16px; } }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--teal-dark);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

:where(a, button, input, label, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---- buttons ---------------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); color: #fff; }
.btn--sand { background: var(--sand-stamp); color: var(--ink); }
.btn--sand:hover { background: var(--sand); color: var(--ink); }
/* The 2px border comes out of the padding, so it is as tall as a filled button. */
.btn--outline { background: transparent; border: 2px solid var(--teal); color: var(--teal-dark); padding-block: 11px; }
.btn--outline:hover { background: var(--tint); color: var(--teal-dark); }
.btn--icon { display: inline-flex; align-items: center; gap: 10px; }
.btn--icon svg { flex-shrink: 0; }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; }

/* ---- topbar ------------------------------------------------------------------------------------ */

.topbar {
  background: var(--teal-dark);
  color: #fff;
  font-size: .875rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 40px;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

/* Languages (Partials/languages): listed only once a page is published in more than one culture. */
.langs {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.langs a { color: var(--mist); text-decoration: none; }
.langs a.is-current { color: #fff; font-weight: 700; }
.langs a:hover { color: #fff; }
.langs__code { display: none; }

/* The languages sit on the left, the hours and contacts together on the right. */
.topbar__hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--sand-stamp);
  font-weight: 600;
}
.topbar__contact { display: flex; gap: 28px; }
.topbar__contact a { display: inline-flex; align-items: center; gap: 6px; }
.topbar svg { flex-shrink: 0; }

@media (max-width: 860px) {
  .topbar__hours { display: none; }
  .topbar__inner { justify-content: space-between; gap: 12px; }
  .topbar__contact { gap: 14px; margin-left: auto; }
}
/* The phone board has no topbar; the footer carries the phone and hours. */
@media (max-width: 560px) {
  .topbar { display: none; }
}

/* ---- header ----------------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 120px;
}

.site-header__logo { text-decoration: none; margin-right: auto; }

/* The logo from the current logismosestrand.dk: a 976x225 PNG on white, sized by height. */
.site-header__logo-img {
  display: block;
  width: auto;
  height: 56px;
}

.site-nav { display: flex; align-items: center; gap: 28px; }

.site-nav__list,
.lang-switch {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .97rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--teal-dark); border-bottom-color: var(--line-strong); }
.site-nav__list a.is-current { color: var(--teal-dark); border-bottom-color: var(--teal); }

.lang-switch {
  gap: 10px;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.lang-switch a {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  text-decoration: none;
}
.lang-switch a.is-current { color: var(--teal-dark); }

.site-nav__cta { display: inline-flex; align-items: center; gap: 8px; }
.site-nav__cta svg { flex-shrink: 0; }

/* The board's 38px spacing only fits once the viewport is this wide; below it the nav would wrap. */
@media (min-width: 1400px) {
  .site-nav, .site-nav__list { gap: 38px; }
  .site-nav__list a { font-size: 1rem; }
}

/* On desktop the topbar carries the languages; the drawer keeps its own switch. */
@media (min-width: 961px) {
  .lang-switch { display: none; }
}

.nav-toggle, .nav-toggle__button { display: none; }

@media (max-width: 960px) {
  .site-header__inner { min-height: 64px; flex-wrap: wrap; }
  .site-header__logo-img { height: 40px; }

  /* Three 17px bars, 5.4px apart, as the board's 26px icon draws them. */
  .nav-toggle__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    cursor: pointer;
  }
  .nav-toggle__button span {
    display: block;
    width: 17px;
    height: 2.4px;
    background: var(--ink);
    border-radius: 2px;
  }

  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 16px;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-nav__list a.is-current { border-bottom-color: var(--teal); }

  .lang-switch { border-left: 0; padding: 14px 0 0; }
  .site-nav__cta { margin-top: 14px; justify-content: center; }
}

@media (max-width: 720px) {
  .site-header__inner { min-height: 84px; }
}

/* ---- block grid ------------------------------------------------------------------------------- */
/* Umbraco emits the markup and the custom properties but ships no layout CSS. */

.umb-block-grid__layout-container {
  display: grid;
  grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), 1fr);
  gap: 32px;
  align-items: start;
}

.umb-block-grid__layout-item {
  grid-column: span var(--umb-block-grid--item-column-span, 12);
  min-width: 0;
}

/* Eleven 32px gaps alone are wider than a phone's content box, so the columns tighten too. Quarter-width
   items pair up two to a row; everything else goes full width. */
@media (max-width: 860px) {
  .umb-block-grid__layout-container { column-gap: 14px; }
  .umb-block-grid__layout-item { grid-column: span var(--umb-block-grid--grid-columns, 12); }
  .umb-block-grid__layout-item[data-col-span="3"] { grid-column: span 6; }
}

.block { padding-block: 0; }
.block__heading { margin-bottom: .4em; }
.block__intro { color: var(--muted); max-width: 62ch; margin-bottom: .6em; }
.block--text .rte { max-width: 70ch; }

.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }

/* ---- decorative marks (Partials/decor: wave, squiggle) ------------------------------------------ */

/* The wave edge of a coloured ground; its parent needs position: relative. */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 64px;
  display: block;
  pointer-events: none;
  fill: var(--ground);
}
.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; }

.squiggle { display: block; flex-shrink: 0; color: var(--teal); }
.band--teal .squiggle { color: var(--sand-stamp); }

@media (max-width: 720px) {
  .wave { height: 36px; }
  .squiggle { width: 56px; }
}

/* ---- bands (sectionBlock) --------------------------------------------------------------------- */
/* A full-width band whose contents stay within the container. The board's rhythm: 104px above a white
   section, a coloured band set 88px off with 96/88 inside, 72px after a coloured band. A white band has
   no bottom padding; the next band's top provides the gap. */

.band { position: relative; padding-block: 104px 0; }
.band:not(.band--white) { margin-top: 88px; padding-block: 96px 88px; }
.umb-block-grid__layout-item:has(> .band:not(.band--white)) + .umb-block-grid__layout-item > .band--white { padding-top: 72px; }

/* The teal band is set further off and taller. */
.band.band--teal { margin-top: 104px; padding-block: 104px 96px; }
.umb-block-grid__layout-item:has(> .band.band--teal) + .umb-block-grid__layout-item > .band--white { padding-top: 96px; }

/* The bands carry the spacing on the front page, so the top-level grid adds none. Content pages keep it
   (their blocks sit inside article.page). */
main > .umb-block-grid > .umb-block-grid__layout-container { row-gap: 0; }


/* A block nested in a band already sits in the band's container, so its own container adds no gutter. */
.band .container .container { padding-inline: 0; max-width: none; }

/* Cards in a band sit closer than the default grid gap; rows keep it. */
.band .umb-block-grid__area .umb-block-grid__layout-container { column-gap: 24px; }
@media (max-width: 860px) {
  .umb-block-grid__area .umb-block-grid__layout-container,
  .band .umb-block-grid__area .umb-block-grid__layout-container { gap: 14px; }
}

.band--white { background: var(--ground); }
.band--sand { background: var(--sand); }
.band--tint { background: var(--tint); }
.band--creme { background: var(--sand-stamp); }
.band--teal { background: var(--teal-dark); color: #fff; }

.band--teal :is(h2, h3, .band__heading) { color: #fff; }
.band--teal .band__intro { color: rgba(255, 255, 255, .85); }
.band--teal .band__link { color: #fff; }
.band--teal .rte a { color: #fff; }

.band__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 26px;
}

.band__titles { display: flex; flex-direction: column; gap: 10px; }

.band__heading { color: var(--teal-dark); margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.375rem); }
.band__intro { color: var(--ink-soft); margin: 0; font-size: 1.125rem; }

.band__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--teal-dark);
  text-decoration: none;
  white-space: nowrap;
}
.band__link svg { flex-shrink: 0; }
.band__link:hover { color: #0F4B59; }
.band--teal .band__link:hover { color: var(--sand-stamp); }

@media (min-width: 721px) {
  .band:not(.band--white) .band__header { margin-bottom: 32px; }
}

@media (max-width: 720px) {
  .band { padding-block: 48px 0; }
  .band:not(.band--white), .band.band--teal { margin-top: 48px; padding-block: 56px 48px; }
  .umb-block-grid__layout-item:has(> .band:not(.band--white)) + .umb-block-grid__layout-item > .band--white { padding-top: 40px; }
  .umb-block-grid__layout-item:has(> .band.band--teal) + .umb-block-grid__layout-item > .band--white { padding-top: 48px; }
  .band__header { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
  .band__titles { gap: 14px; }
  .band:not(.band--white) .band__header { margin-bottom: 18px; }
  .band:not(.band--white) .band__titles { gap: 18px; }

  /* The phone board shows the front page's bands with the heading alone: no intro, no "see all" link.
     Content pages keep theirs. */
  main > .umb-block-grid .band__intro,
  main > .umb-block-grid .band__header:has(.band__heading) > .band__link:not(.band__link--instagram) { display: none; }

  /* An Instagram header stays one row: the heading, and the glyph alone as a 44px link at the right. */
  .band__header:has(.band__link--instagram) { flex-direction: row; align-items: flex-end; }
  .band__header:has(.band__link--instagram) .band__squiggle { display: none; }
  .band__link--instagram { justify-content: center; width: 44px; height: 44px; }
  .band__link--instagram svg { width: 22px; height: 22px; }
  /* Off screen but still the link's name. */
  .band__link--instagram .band__link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---- hero ------------------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 820px;
  color: #fff;
  background: var(--teal-dark);
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Only the lower part of the photo is shaded, behind the text; the top stays untinted. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 460px;
  background: linear-gradient(180deg, rgba(15, 50, 60, 0) 0%, rgba(15, 50, 60, .78) 55%);
}

.hero--plain { min-height: 420px; }
.hero--plain::after { background: none; }

/* Above the shade; the search card (z-index 10) still overlaps it. */
.hero .wave { z-index: 1; }

/* The bottom padding keeps the text clear of the search card, which overlaps the hero by 132px. */
.hero__body {
  position: relative;
  z-index: 1;
  padding-block: 64px 216px;
}

.hero__heading em { font-style: italic; color: var(--sand-stamp); }

.hero__heading {
  color: #fff;
  max-width: 800px;
  font-size: clamp(2.2rem, 4.1vw, 3.625rem);   /* 58px on the board */
  line-height: 1.08;
  margin-bottom: 22px;
}

.hero__sub {
  max-width: 640px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);   /* 20px on the board */
  line-height: 1.5;
  color: var(--tint);
  margin-bottom: 0;
}
.hero__sub + .btn { margin-top: 22px; }

/* ---- split (text with image) ------------------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split--reverse .split__media { order: 2; }

.split__media { position: relative; }
.split__media > img { border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 98, 115, .18); }
/* A photo on the left gets the board's leaf curve on its lower-left corner. */
.split:not(.split--reverse) .split__media > img { border-radius: 16px 16px 16px 120px; }

.split__body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.split__body h2 { color: var(--teal-dark); font-size: clamp(1.7rem, 2.8vw, 2.375rem); line-height: 1.2; margin: 0; }
.split__body .rte { font-size: 1.125rem; color: var(--ink-soft); }
.split__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Lists in the text column are checklists. */
.split__body .rte ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1rem;
}
.split__body .rte li { position: relative; padding-left: 28px; }
.split__body .rte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(.825em - 9px);      /* centred on the first line */
  width: 18px;
  height: 18px;
  background-color: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The badge field drawn as the board's stamp on the photo's top-right corner. */
.split__stamp {
  position: absolute;
  top: -24px;
  right: -24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 136px;
  padding: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  transform: rotate(8deg);
}
.split__stamp-label { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.split__stamp-main { font-family: var(--font-heading); font-size: 1.625rem; line-height: 1; }
.split__stamp-note { max-width: 80px; font-size: .6875rem; font-weight: 700; line-height: 1.3; }

/* Without a photo there is nothing to stamp, so the badge is a pill above the heading. */
.split__badge {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* A second photo turns the media into the board's composition: the photo top-left and a tilted polaroid
   over its bottom-right corner. */
.split__media:has(.split__inset) { height: 520px; }
.split__media:has(.split__inset) > img { width: calc(100% - 64px); height: 415px; object-fit: cover; }

.split__inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 280px;
  height: 240px;
  margin: 0;
  padding: 10px 10px 34px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(20, 98, 115, .22);
  transform: rotate(4deg);
}
.split__inset img { width: 100%; height: 100%; object-fit: cover; }
.split__inset figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: .875rem;
  line-height: 1.2;
  color: var(--muted);
  text-align: center;
}

/* On teal the pladskort map sits in a tilted white frame showing a zoomed crop. On desktop the frame is
   taken out of the grid, so the text sets the band's height and the band clips the frame's overhang. */
.band--teal { overflow: hidden; }
.band--teal .wave { z-index: 2; }
.band--teal .split__media {
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
  transform: rotate(-3deg);
}
.band--teal .split__media > img {
  position: absolute;
  left: -100px;
  top: -150px;
  width: 1040px;
  max-width: none;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.band--teal .split__body { gap: 18px; }
.band--teal .split__body .rte { color: #fff; }
.band--teal .split__body .rte p { color: var(--mist); line-height: 1.6; }
.band--teal .split__body .rte li::before { background-color: var(--sand-stamp); }

/* A teal primary button would vanish on the teal ground; the board draws it in sand. */
.band--teal .split__body .btn--primary { background: var(--sand-stamp); color: var(--teal-dark); padding: 14px 26px; }
.band--teal .split__body .btn--primary:hover { background: var(--sand); color: var(--teal-dark); }
.band--teal .btn--outline { border-color: var(--sand-stamp); color: #fff; }
.band--teal .btn--outline:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@media (min-width: 861px) {
  .band--teal .split { position: relative; }
  .band--teal .split__media { position: absolute; top: -32px; left: calc(50% + 40px); width: 760px; height: 540px; }
  .band--teal .split__body { position: relative; z-index: 1; }
  /* The board puts the teal band's squiggle under the heading on desktop, above it on phones. */
  .band--teal .split__body h2 { order: -1; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--reverse .split__media { order: 0; }
  /* The phone board keeps the teal band's text first, then the map, then the button: the text column is
     dissolved into the grid so the map can sit between its paragraph and its button. */
  .band--teal .split { gap: 18px; }
  .band--teal .split__body { display: contents; }
  .band--teal .split--reverse .split__media { order: 2; }
  .band--teal .split__actions { order: 3; }

  .split__media:has(.split__inset) { height: 300px; }
  .split__media:has(.split__inset) > img { height: 230px; }
  .split__inset { width: 170px; height: 150px; padding: 7px 7px 26px; border-radius: 5px; box-shadow: 0 12px 30px rgba(20, 98, 115, .22); }
  .split__inset figcaption { bottom: 6px; font-size: .6875rem; }
  .split__inset-more { display: none; }

  .band--teal .split__media { height: 220px; margin: 8px 4px; border-width: 4px; border-radius: 14px; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); transform: rotate(-2deg); }
  .band--teal .split__media > img { left: -60px; top: -90px; width: 640px; }
}

@media (max-width: 720px) {
  .split { gap: 16px; }
  .split__body, .band--teal .split { gap: 14px; }
  /* The phone board drops the pladskort checklist. */
  .band--teal .split__body .rte ul { display: none; }
  .band--teal .split__body .rte p:last-of-type { margin-bottom: 0; }
  .split__media:has(.split__inset) > img { width: 78%; }
  .split__media:has(.split__stamp) > img { width: 100%; height: 240px; object-fit: cover; }
  .split__body .rte { font-size: 1rem; line-height: 1.6; }
  .split__actions { margin-top: 0; }
  .split__media > img { border-radius: 14px; box-shadow: 0 12px 30px rgba(20, 98, 115, .18); }
  .split:not(.split--reverse) .split__media > img { border-radius: 14px 14px 14px 70px; }
  .band--teal .split__body .btn--primary { padding: 13px 22px; }

  .split__stamp { width: 96px; height: 96px; top: -14px; right: -6px; padding: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
  .split__stamp-label { font-size: .5625rem; letter-spacing: .12em; }
  .split__stamp-main { font-size: 1.125rem; }
  .split__stamp-note { max-width: 64px; font-size: .5625rem; }
}

/* ---- cards ------------------------------------------------------------------------------------ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  height: 100%;
}

.card__frame {
  width: 100%;
  height: 300px;
  border: 4px solid #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(20, 98, 115, .12);
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card:hover .card__frame img { transform: scale(1.04); }

.card__body { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.card__heading {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--teal-dark);
  margin: 0;
}
.card__text { font-size: .9375rem; color: var(--muted); line-height: 1.5; margin: 0; }

.card__badge {
  font-size: .875rem;
  font-weight: 700;
  color: var(--teal-dark);
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
}

.card__link { font-weight: 600; font-size: .94rem; text-decoration: none; color: var(--teal-dark); }
.card__link::after { content: " \2192"; }
.card__link:hover { text-decoration: underline; }

/* The heading's link covers the whole card. */
.card__cover { color: inherit; text-decoration: none; }
.card__cover::after { content: ""; position: absolute; inset: 0; }
.card__cover:hover { color: inherit; }

/* On white the framed look has nothing to stand out from: the board draws plain, left-aligned cards. */
.band--white .card { align-items: stretch; text-align: left; gap: 12px; }
.band--white .card__body { align-items: flex-start; gap: 12px; }
.band--white .card__frame { height: 260px; border: 0; box-shadow: none; border-radius: 16px; }
.band--white .card__text { font-size: 1rem; }

@media (max-width: 860px) {
  .card__frame { height: 220px; }
}

/* Quarter-width cards pair up on phones (see block grid), so they shrink to the board's small cards. */
@media (max-width: 720px) {
  [data-col-span="3"] > .card, [data-col-span="3"] .card__body { gap: 8px; }
  [data-col-span="3"] .card__frame { height: 190px; border-width: 3px; border-radius: 12px; box-shadow: 0 8px 20px rgba(20, 98, 115, .12); }
  [data-col-span="3"] .card__heading { font-size: 1.0625rem; }
  [data-col-span="3"] .card__text { font-size: .8125rem; }
  [data-col-span="3"] .card__badge { display: none; }
}

/* ---- gallery ---------------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.gallery__item { display: block; border-radius: var(--radius); overflow: hidden; }
.gallery__item img { aspect-ratio: 1; object-fit: cover; width: 100%; }

@media (max-width: 720px) {
  .gallery { gap: 8px; }
  .gallery__item { border-radius: 10px; }
}

/* ---- call to action --------------------------------------------------------------------------- */

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  background: var(--teal-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 44px 48px;
}
.cta__heading { color: #fff; margin-bottom: .25em; }
.cta__text { color: rgba(255, 255, 255, .9); margin: 0; max-width: 54ch; }

@media (max-width: 640px) {
  .cta { padding: 32px 26px; }
}

/* ---- booking widget host ---------------------------------------------------------------------- */

.booking-widget {
  background: #F8F6F1;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-height: 420px;
  padding: 8px;
}

/* ---- page ------------------------------------------------------------------------------------- */

/* No bottom padding: the footer's top margin is the gap after the last block. */
.page { padding-block: 48px 0; }
.page__title { max-width: 24ch; }

/* ---- footer ----------------------------------------------------------------------------------- */

/* The footer's margin is the white gap after the last block (a white band ends without bottom padding);
   the top wave (Partials/decor/wave) then bites into the teal, so the content starts below it. */
.site-footer {
  position: relative;
  margin-top: 112px;
  background: var(--teal-dark);
  color: var(--mist);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-block: 96px 40px;
}

.site-footer__about { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.site-footer__brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.site-footer__address { font-size: 1rem; line-height: 1.6; margin: 0; }
.site-footer__address > span { display: block; }

.site-footer__squiggle { margin-top: 6px; color: var(--sand-stamp); }

.site-footer__heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 10px;
}

.site-footer a { color: var(--mist); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.25;
}

/* The rule sits inside the container, so it stops at the content edges. */
.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-block: 20px 32px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .875rem;
}
.site-footer__legal small { font-size: inherit; }
.site-footer .langs a.is-current { font-weight: 400; }

@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__about { grid-column: 1 / -1; }
}

/* The phone board has no link columns: the links of all three run together in one two-column grid under
   the address, and the column headings are left to screen readers. */
@media (max-width: 720px) {
  .site-footer { margin-top: 56px; }
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding-block: 52px 24px; }
  .site-footer__about { gap: 8px; margin-bottom: 12px; }
  .site-footer__brand { font-size: 1rem; letter-spacing: .06em; }
  .site-footer__address { font-size: .9375rem; }
  .site-footer__squiggle { display: none; }
  .site-footer__col:not(.site-footer__about), .site-footer__links { display: contents; }
  .site-footer__links a { font-size: .9375rem; }
  .site-footer__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .site-footer__legal { padding-block: 16px 24px; font-size: .8125rem; }
  .site-footer__langs { gap: 14px; }
  .site-footer__langs .langs__name { display: none; }
  .site-footer__langs .langs__code { display: inline; }
}

/* ---- hero eyebrow and stamp --------------------------------------------------------------------- */

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand-stamp);
  margin: 0 0 22px;
}
.hero__squiggle { width: 48px; color: inherit; }

/* 148px inside a 3px white rim, as the board draws it. */
.hero__stamp {
  position: absolute;
  top: 56px;
  right: 120px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 154px;
  height: 154px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--sand-stamp);
  color: var(--teal-dark);
  text-align: center;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(15, 50, 60, .25);
  transform: rotate(-8deg);
}

.hero__stamp-stars { display: flex; gap: 2px; }
.hero__stamp-stars svg { display: block; }

/* balance breaks "Åbent hele året" as the board does: "Åbent" / "hele året". */
.hero__stamp-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.1;
  text-wrap: balance;
}

.hero__stamp-sub {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .hero:not(.hero--plain) { min-height: 560px; }
  .hero:not(.hero--plain)::after { height: 400px; background: linear-gradient(180deg, rgba(15, 50, 60, 0) 0%, rgba(15, 50, 60, .82) 55%); }
  .hero__body { padding-bottom: 108px; }
}

@media (max-width: 720px) {
  .hero__eyebrow { gap: 10px; font-size: .75rem; letter-spacing: .12em; margin-bottom: 18px; }
  .hero__squiggle { width: 40px; }
  .hero:not(.hero--plain) { min-height: 680px; }
  /* The narrow measure breaks the heading into the board's four lines. */
  .hero__heading { max-width: 256px; font-size: 2.125rem; line-height: 1.15; margin-bottom: 18px; }
  .hero__stamp { width: 98px; height: 98px; top: 20px; right: 16px; gap: 2px; padding: 8px; box-shadow: 0 8px 24px rgba(15, 50, 60, .25); }
  .hero__stamp-stars svg { width: 9px; height: 9px; }
  .hero__stamp-text { font-size: .8125rem; line-height: 1.15; }
  .hero__stamp-sub { display: none; }
}

/* The phone board sets the hero text 20px in, wider than the 16px page gutter. */
@media (max-width: 640px) {
  .hero .hero__body { padding-inline: 20px; }
}

/* ---- stats -------------------------------------------------------------------------------------- */

/* One row of equal sand boxes, however many figures are filled in. */
.stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
}
.stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--sand);
  border-radius: 12px;
}
.band:is(.band--sand, .band--creme) .stats__item { background: #fff; }
.stats__value {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  color: var(--teal-dark);
  line-height: 1;
}
.stats__label {
  margin: 0;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 720px) {
  .stats { gap: 10px; }
  .stats__item { padding: 12px; }
  .stats__value { font-size: 1.375rem; }
  .stats__label { font-size: .75rem; }
}

/* ---- gallery handle ----------------------------------------------------------------------------- */

.gallery__handle {
  font-weight: 700;
  color: var(--teal-dark);
  margin-bottom: .9em;
}

/* ---- mega menu ---------------------------------------------------------------------------------- */
/* CSS only: the panel opens on hover and on keyboard focus, so it works without JavaScript. */

.site-nav__list > li { position: static; }

.megamenu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}

.has-panel:hover > .megamenu,
.has-panel:focus-within > .megamenu { display: block; }

.megamenu__inner { padding-block: 32px 36px; }

.megamenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 40px;
}
.megamenu__list li { break-inside: avoid; margin-bottom: 4px; }
.megamenu__list a {
  display: block;
  padding: 10px 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .97rem;
  border-bottom: 1px solid var(--line);
}
.megamenu__list a:hover { color: var(--teal-dark); }

@media (max-width: 960px) {
  /* On small screens the panel is simply an indented list under its parent. */
  .megamenu {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
  }
  .megamenu__inner { padding: 0; max-width: none; padding-inline: 0; }
  .megamenu__list { columns: 1; }
  .megamenu__list a {
    padding: 11px 0 11px 18px;
    font-weight: 400;
    font-size: .94rem;
    color: var(--muted);
  }
}

/* ---- booking search bar ------------------------------------------------------------------------- */

.searchbar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(20, 98, 115, .20);
  padding: 24px 28px 28px;
  margin-top: -132px;         /* lifts the card over the hero, as the board draws it (the front page grid has no row gap) */
  position: relative;
  z-index: 10;
}

.searchbar__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-bottom: 20px;
}

.searchbar__heading { margin: 0; font-size: 1.25rem; line-height: 1.2; color: var(--teal-dark); }

.searchbar__types { display: flex; flex-wrap: wrap; gap: 10px; }
.searchbar__radio { position: absolute; opacity: 0; pointer-events: none; }
.searchbar__chip {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: .94rem;
  line-height: 1.25;
  cursor: pointer;
}
.searchbar__chip:hover { border-color: var(--teal); }
.searchbar__radio:checked + .searchbar__chip {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.searchbar__radio:focus-visible + .searchbar__chip { outline: 3px solid var(--accent); outline-offset: 2px; }

.searchbar__fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.searchbar__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.searchbar__field span {
  font-size: .8125rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.searchbar__field input {
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: normal;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  min-width: 0;
}
.searchbar__field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.searchbar__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0 22px;
  font-size: 1.0625rem;
  white-space: nowrap;
}
.searchbar__submit svg { flex-shrink: 0; }

@media (max-width: 860px) {
  .searchbar { margin-top: -32px; padding: 24px 20px 28px; box-shadow: 0 16px 40px rgba(20, 98, 115, .20); }
  .searchbar__fields { grid-template-columns: 1fr 1fr; }
  .searchbar__submit { grid-column: 1 / -1; }
}

/* On phones the chips are one row that scrolls sideways, running out to the card's edges. */
@media (max-width: 720px) {
  .searchbar { padding: 20px 18px 18px; }
  .searchbar__top { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 16px; }
  .searchbar__types {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    margin: -5px -18px;
    padding: 5px 18px;          /* room for the focus ring, which the scroller would clip */
    scrollbar-width: none;
  }
  .searchbar__chip { padding: 9px 14px; font-size: .875rem; white-space: nowrap; }
  .searchbar__fields { gap: 10px; }
  .searchbar__submit { margin-top: 6px; }
  .searchbar__field { gap: 5px; }
  .searchbar__field span { font-size: .75rem; }
  .searchbar__field input { height: 48px; padding: 0 12px; font-size: 1rem; }
}

/* ---- offer cards ---------------------------------------------------------------------------------- */

/* The grid aligns items to the start; offers stretch so the bordered cards in a row share one height. */
.umb-block-grid__layout-item:has(> .offer) { align-self: stretch; }

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.offer:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.offer__media { position: relative; }
.offer__media img { width: 100%; height: 210px; aspect-ratio: auto; object-fit: cover; }

.offer__flag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--accent);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  transform: rotate(-4deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.offer__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; gap: 8px; }

.offer__label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}
.offer__heading { font-size: 1.375rem; color: var(--ink); margin: 0; }
.offer__text { font-size: 1rem; line-height: 1.5; color: var(--muted); margin: 0; }

.offer__price { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 0; }
.offer__price-prefix, .offer__price-note { font-size: .875rem; font-weight: 600; color: var(--muted); }
.offer__price-value {
  font-family: var(--font-heading);
  font-size: 2.125rem;
  color: var(--teal-dark);
  line-height: 1;
}

.offer__link { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: .94rem; color: var(--teal-dark); text-decoration: none; }
.offer__link::after { content: " \2192"; }
.offer__link:hover { text-decoration: underline; }

/* The heading's link covers the whole card. */
.offer__cover { color: inherit; text-decoration: none; }
.offer__cover::after { content: ""; position: absolute; inset: 0; }
.offer__cover:hover { color: inherit; }

/* On phones an offer is a row: a 120px photo strip on the left, full card height, and the text without
   its description. */
@media (max-width: 720px) {
  .offer { flex-direction: row; border-radius: 14px; }
  .offer__media { flex: 0 0 120px; }
  .offer__media img { position: absolute; inset: 0; height: 100%; }
  .offer__flag { top: 8px; left: 8px; padding: 4px 8px; font-size: .625rem; letter-spacing: .08em; }
  .offer__body { padding: 14px 16px; gap: 3px; min-width: 0; }
  .offer__label { font-size: .75rem; }
  .offer__heading { font-size: 1rem; }
  .offer__text { display: none; }
  .offer__price { gap: 5px; margin-top: 0; }
  .offer__price-value { font-size: 1.5rem; }
  .offer__price-prefix, .offer__price-note { font-size: .75rem; }
}