/* ==========================================================================
   Underfladen · styles.css (UI-fase)
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --paper: #ECE9E2;       /* baggrund, varm råhvid. Samme farve som theme-color i index.html */
  --ink: #1F1E1A;
  --soft: #6B675E;        /* sekundær tekst, kontrast 5:1 mod --paper */
  --line: #D9D4C8;
  --shade: #E6E1D6;       /* pladsholder til portrætter */
  --shade-ink: #BDB5A5;
  --video: #A3B0A4;       /* pladsholder til videoen */
  --on-video: #F3F0E9;
  --error: #9A3B26;

  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;

  --label-size: clamp(0.6875rem, 0.62rem + 0.18vw, 0.8125rem);
  --title-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  --edge: clamp(16px, 5.5vw, 112px);              /* afstand fra skærmkanten */
  --pad-y: max(1.25rem, calc(var(--edge) * .5));  /* afstand fra top og bund */
  --col: clamp(30rem, 50vw, 76svh);               /* scenens og listens bredde */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --unfold: .8s;
  --arrive: 1.6s;
}

@supports not (height: 1svh) {
  :root { --col: clamp(30rem, 50vw, 76vh); }
}

/* ── Grundlag ───────────────────────────────────────────────────────────── */

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

[hidden] { display: none !important; }

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

/* Papiret: baggrundsfarven med et svagt korn, der svinger lige meget lysere og
   mørkere omkring --paper. Gennemsnittet er derfor præcis --paper, så toplinjen
   på iPhone (som farves efter theme-color/baggrundsfarven) flugter med siden.
   Kornet er bagt med farven: hvis --paper ændres, skal tallene i filteret følge med. */
body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.07 0 0 0 .8905 .07 0 0 0 .8787 .07 0 0 0 .8513 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: 400; }

.label {
  font-family: var(--mono);
  font-size: var(--label-size);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.soft { color: var(--soft); }

/* Kun for skærmlæsere */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  transition: text-underline-offset var(--unfold) var(--ease);
}
a:hover { text-underline-offset: .52em; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--paper); }

/* ── Toplinjen ──────────────────────────────────────────────────────────── */

/* Ligger oven på første skærmbillede, så scenen kan starte i samme højde
   som teksten. Hovederne flugter dermed med navigationen. */
.masthead {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  padding: var(--pad-y) var(--edge) 0;
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }

.masthead__mark { grid-column: 1 / span 4; justify-self: start; }
.masthead__mark a { text-decoration: none; }

.masthead__nav {
  grid-column: 10 / -1;
  display: flex;
  gap: 2.4em;
  white-space: nowrap;
}

/* ── Første skærmbillede: skrivemaskine, scene, kommende retreats ───────── */

.opening {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto;   /* skrivemaskine, scene, liste */
  column-gap: 1.25rem;
  row-gap: 2.5rem;
  padding: var(--pad-y) var(--edge);
}

/* Skrivemaskinen står midt i toplinjen, lige over hovederne */
.typer {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  margin-bottom: -.75rem;   /* lidt tættere på hovederne end det normale mellemrum */
  text-align: center;
  white-space: nowrap;
}
.typer__cursor {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: .2em;
  vertical-align: -.2em;
  background: currentColor;
}

.retreats {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: center;
  width: min(var(--col), 100%);
}

/* ── Scenen: video + overflade ──────────────────────────────────────────── */

.stage {
  --stage-ratio: 2.4 / 1;
  --surface-width: .38;     /* figurernes bredde i forhold til boksen. Større tal = større figurer */
  --ledge: .585;            /* hvor langt nede i overflade.webp kanten, I sidder på, ligger (0–1) */
  --surface-ratio: .9324;   /* billedets bredde ÷ højde (800 ÷ 858). main.js læser det selv */
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  position: relative;
  width: var(--col);
}

/* Plads til det, der stikker op over boksen. Procent i padding regnes ud fra
   bredden, så højden følger scenen. Figurerne starter dermed præcis i toppen,
   og fordi billedet er beskåret lige over hovederne, flugter de med toplinjen. */
.stage::before {
  content: '';
  display: block;
  padding-top: calc(100% * var(--surface-width) * var(--ledge) / var(--surface-ratio));
}

.stage__body { position: relative; }

.stage__frame {
  position: relative;
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  background: var(--video);
}

.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js .stage__video { opacity: 0; transition: opacity 2.4s var(--ease); }
.js .has-video .stage__video { opacity: 1; }

.stage__placeholder {
  position: absolute;
  left: .9rem;
  bottom: .75rem;
  color: var(--on-video);
}

/* Pause-knappen er usynlig og dukker kun op, når man tabber til den med tastaturet.
   Så kan video og skrivemaskine stadig stoppes (WCAG 2.2.2), uden at knappen ses. */
.stage__toggle {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  display: none;
  padding: .35em .65em;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.has-video .stage__toggle { display: block; }
.stage__toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline-color: var(--paper);
  outline-offset: 3px;
}

/* Kanten, I sidder på, flugter med boksens overkant: billedet flyttes op med
   --ledge gange sin egen højde. */
.stage__surface {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: calc(100% * var(--surface-width));
  max-width: none;
  height: auto;
  transform: translate(-50%, calc(-100% * var(--ledge)));
  pointer-events: none;
  user-select: none;
}

/* ── Sektioner længere nede ─────────────────────────────────────────────── */

main { padding-bottom: clamp(5rem, 14vh, 10rem); }

.section {
  width: min(var(--col), 100% - 2 * var(--edge));
  margin-inline: auto;
  padding-top: clamp(4.5rem, 12vh, 9rem);
}

/* Sektionsoverskrifterne er større end de øvrige labels, så de slår igennem */
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  font-size: clamp(1rem, .8rem + .6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: .02em;
}
/* Antallet, fx "05", står småt og i almindelig vægt */
.section__head .soft { font-size: var(--label-size); font-weight: 400; letter-spacing: .03em; }

/* ── Rækker, der folder ud (retreats og praktisk) ───────────────────────── */

/* Listen er en container, så indholdet kan tilpasse sig listens egen bredde */
.list {
  container: list / inline-size;
  border-top: 1px solid var(--line);
}

.item {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 2rem;
}

.item__summary {
  display: block;
  list-style: none;
  cursor: pointer;
}
.item__summary::-webkit-details-marker { display: none; }

/* Titel og plus på første linje. Retreats har land og dato på linjen under, på alle skærme */
.item__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) .75rem;
  column-gap: 1rem;
  align-items: baseline;
  padding-block: .75rem;
}
.retreat .item__row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'title icon'
    'place date';
  row-gap: .25rem;
}
.retreat .item__title { grid-area: title; }
.retreat .item__icon { grid-area: icon; justify-self: end; }
.retreat__place { grid-area: place; }
.retreat__date { grid-area: date; justify-self: end; }

.item__title {
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.25;
  transition: transform var(--unfold) var(--ease);
}
.item__summary:hover .item__title { transform: translateX(.3em); }

/* Plus, der bliver til minus: den lodrette streg skaleres væk.
   Står ud for titlens første linje, også når titlen fylder to linjer. */
.item__icon {
  position: relative;
  width: .75rem;
  height: .75rem;
  align-self: start;
  margin-top: calc((var(--title-size) * 1.25 - .75rem) / 2);
}
.item__icon::before,
.item__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--unfold) var(--ease);
}
.item__icon::before { left: 0; right: 0; top: calc(50% - .5px); height: 1px; }
.item__icon::after { top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; }
.item[open] > .item__summary .item__icon::after { transform: scaleY(0); }

/* Retreats: "Se detaljer" i stedet for plusset, så man kan se, at rækken kan foldes ud */
.retreat .item__icon { align-self: baseline; width: auto; height: auto; margin-top: 0; font-family: var(--mono); font-size: var(--label-size); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.retreat .item__icon::after { content: none; }
.retreat .item__icon::before { content: 'Se detaljer'; position: static; height: auto; background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; transition: none; }
.retreat[open] > .item__summary .item__icon::before { content: 'Skjul detaljer'; }

.item__body { padding: .35rem 0 2.5rem; }
.faq .item__body { max-width: 36em; }

/* ── Et retreat, foldet ud ──────────────────────────────────────────────── */

.retreat__lede { max-width: 34em; margin-bottom: 2rem; text-wrap: pretty; }

.retreat__days { max-width: 36em; margin-bottom: 2rem; }
.retreat__days h3 { margin-bottom: .75rem; }
.retreat__days ol { display: grid; gap: .6rem; padding: 0; list-style: none; }
.retreat__days li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  max-width: 36em;
  margin-bottom: 2.25rem;
}
.facts dt { margin-bottom: .25rem; }

.retreat__note { max-width: 34em; margin-bottom: 1.75rem; font-style: italic; }
/* Retreats med fast dato: billeder af stedet og dagen i korte træk.
   Kolonnerne følger billedernes format (4:3 og to 3:4), så de står lige høje */
.retreat__photos { display: grid; grid-template-columns: 1.337fr .75fr .75fr; gap: .5rem; align-items: start; margin-bottom: 1.75rem; }
.retreat__photos img { display: block; width: 100%; height: auto; }
/* dagens program er foldet sammen, til man trykker "Se mere" */
.retreat__program { margin-bottom: 1.75rem; border-block: 1px solid var(--line); }
.retreat__program-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; list-style: none; cursor: pointer; }
.retreat__program-summary::-webkit-details-marker { display: none; }
.retreat__program-toggle::before { content: 'Se mere'; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.retreat__program[open] .retreat__program-toggle::before { content: 'Skjul'; }
.retreat__program .retreat__fine { margin-bottom: 1rem; }
.retreat__day { max-width: 34em; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.retreat__day li { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); text-wrap: pretty; }
.retreat__day .label { padding-top: .25rem; }
.retreat__day-note { max-width: 34em; margin: .9rem 0 .4rem; font-size: .92em; }
.retreat__fine { margin-bottom: 1.25rem; font-size: .8em; }   /* det med småt */

/* Et kig ind i retreatet under rækken: det første billede med tape på og starten af beskrivelsen,
   klippet med …. På bundlinjen står pladser og pris til venstre og "Se detaljer" til højre, i flugt
   med billedets bund. Retreats med fast dato har "Tilmeld og betal" oppe ved titlen. Når retreatet er
   foldet ud, står beskrivelsen og billederne lige nedenunder, så kun bundlinjen bliver */
.retreat .item__row:has(> [data-pay]) { row-gap: .45rem; }   /* luft mellem knappen og datoen */
.retreat .item__row > [data-pay] { grid-area: icon; justify-self: end; align-self: center; padding: .5em .9em; }   /* lav knap, så titlen ikke får et hul under sig */
.retreat__peek { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'teaser icon'; align-items: end; gap: .5rem 1.25rem; padding-bottom: 1.1rem; }
.retreat__peek:has(.retreat__thumb) { grid-template-columns: 8rem minmax(0, 1fr) auto; grid-template-rows: 1fr auto; grid-template-areas: 'thumb teaser teaser' 'thumb seats icon'; padding-top: .45rem; }
.retreat__thumb { grid-area: thumb; align-self: start; position: relative; transform: rotate(-1deg); }
.retreat__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid #FBF8F2; box-shadow: 0 1px 2px rgba(31, 30, 26, .12), 0 8px 16px -10px rgba(70, 45, 20, .45); }
/* et stykke papirtape hen over hjørnet holder billedet fast, med revne ender */
.retreat__thumb::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -.4rem;
  left: -.5rem;
  width: 2.8rem;
  height: .95rem;
  background: linear-gradient(rgba(226, 216, 190, .9), rgba(214, 203, 176, .9));
  transform: rotate(-36deg);
  clip-path: polygon(4% 0, 25% 6%, 50% 0, 75% 5%, 96% 0, 100% 50%, 96% 100%, 72% 94%, 48% 100%, 24% 95%, 3% 100%, 0 50%);
}
.retreat__teaser { grid-area: teaser; align-self: start; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 36em; color: var(--soft); font-size: .95em; line-height: 1.45; }
.retreat__seats { grid-area: seats; }
.retreat__peek .item__icon { grid-area: icon; justify-self: end; align-self: end; }   /* nederst, også ud for to linjers tekst */
/* uden JavaScript: pladser og knap under rækken */
.retreat__quick { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .6rem 1.25rem; }
.item__summary > .retreat__quick { padding-bottom: 1.1rem; }
.retreat[open] .retreat__thumb,
.retreat[open] .retreat__teaser { display: none; }
.retreat[open] .retreat__peek { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: 'seats icon'; padding-top: 0; }
/* smal liste: billede og tekst øverst og bundlinjen under dem i hele bredden */
@container list (max-width: 36rem) {
  .retreat__peek:has(.retreat__thumb) { grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: 'thumb teaser teaser' 'seats seats icon'; column-gap: 1rem; row-gap: .9rem; }
  .retreat__peek:has(.retreat__thumb) .retreat__teaser { -webkit-line-clamp: 3; line-clamp: 3; }
}
/* Kristian ved alle retreats, med en genvej ned til anmeldelserne. Uden streger, så kun programrækken har dem */
.retreat__kristian { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 0 0 2rem; }
.retreat__kristian-photo { display: block; width: 100%; height: auto; }
.retreat__kristian-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; margin-bottom: .5rem; }
.retreat__kristian-top .label { white-space: nowrap; }
.retreat__kristian p { text-wrap: pretty; }
.retreat__stars { font-family: var(--serif); letter-spacing: .1em; }
.reviews { scroll-margin-top: 2rem; }
/* Udsolgt: står også i rækken, så man kan se det uden at folde retreatet ud */
.retreat.is-sold-out .retreat__date::after { content: ' · Udsolgt'; }

.button {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  padding: .85em 1.2em;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
.button::-webkit-details-marker { display: none; }
.button:hover { background: var(--ink); color: var(--paper); }

.button__arrow { display: inline-block; transition: transform var(--unfold) var(--ease); }
.signup[open] > .button .button__arrow { transform: rotate(90deg); }

/* ── Formularer ─────────────────────────────────────────────────────────── */

.signup__slot { padding-top: 1.75rem; }

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
  max-width: 36em;
}
.field--wide { grid-column: 1 / -1; }
.field__check { display: flex; align-items: baseline; gap: .6rem; cursor: pointer; }
.field__check input { flex: none; width: 1em; height: 1em; margin: 0; accent-color: var(--ink); transform: translateY(.12em); }
.field__label { display: block; margin-bottom: .4rem; }

.field__input {
  display: block;
  width: 100%;
  padding: .35rem 0 .5rem;
  border: 0;
  border-bottom: 1px solid var(--soft);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
textarea.field__input { min-height: 6rem; resize: vertical; line-height: 1.45; }
.field__input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field__input[aria-invalid='true'] { border-bottom-color: var(--error); }
.field__input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 100vmax var(--paper); }
.field__input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100vmax var(--paper), 0 1px 0 var(--ink); }

.field__input::placeholder,
.notify__input::placeholder { color: var(--soft); opacity: .75; }

.field__error {
  margin-top: .45rem;
  font-family: var(--mono);
  font-size: var(--label-size);
  line-height: 1.4;
  color: var(--error);
}
.field__error:empty { display: none; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}
.form__note { max-width: 24em; font-size: .9em; color: var(--soft); }
.form[aria-busy='true'] { opacity: .6; }

.form__done { max-width: 30em; padding-top: 1.75rem; font-style: italic; }
.form__done:focus { outline: none; }

/* Få besked */
.notify { margin-top: 2rem; scroll-margin-top: 30vh; }
.notify .form__done { padding-top: 0; }

.notify__form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.75rem;
  align-items: baseline;
}

.notify__field {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  transition: box-shadow .5s var(--ease);
}
.notify__field:focus-within { box-shadow: 0 1px 0 var(--ink); }
.notify__field:has([aria-invalid='true']) { border-bottom-color: var(--error); }

.notify__input {
  flex: 1;
  min-width: 0;
  padding: .3rem 0 .45rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.notify__input:focus { outline: none; }

.notify__submit {
  padding: 0 0 0 1rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform var(--unfold) var(--ease);
}
.notify__submit:hover { transform: translateX(.3rem); }
.notify .field__error { grid-column: 2; }

/* ── Smal liste (mobil og små skærme) ───────────────────────────────────────
   Står efter grundreglerne for rækker, fakta og formularer, så den vinder. */

@container list (max-width: 520px) {
  .retreat__days li { grid-template-columns: 4.75rem minmax(0, 1fr); }
}

@container list (max-width: 480px) {
  .facts,
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Om os ──────────────────────────────────────────────────────────────── */

.about__intro {
  display: grid;
  gap: 1em;
  max-width: 30em;
  margin-bottom: clamp(4rem, 10vh, 7rem);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  line-height: 1.38;
  text-wrap: pretty;
}

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem clamp(1.5rem, 3vw, 3rem);
}

/* Fritlagte portrætter i fuld figur: samme højde, og de står på samme linje */
.person__photo {
  position: relative;
  height: clamp(22rem, 34vw, 30rem);
  margin-bottom: 1.25rem;
}
/* Smal pladsholder med forbogstav, indtil portrættet er lagt ind */
.person__photo::before {
  content: attr(data-initial);
  position: absolute;
  inset: 0 auto 0 0;
  aspect-ratio: 9 / 20;
  display: grid;
  place-items: center;
  background: var(--shade);
  font-size: clamp(3.5rem, 6vw, 6rem);
  color: var(--shade-ink);
}
.person__photo:has(img.is-loaded)::before,
html:not(.js) .person__photo::before { content: none; }
.person__photo img {
  position: relative;
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}
.js img[data-fade] { opacity: 0; transition: opacity 1.6s var(--ease); }
.js img[data-fade].is-loaded { opacity: 1; }

.person__name { font-size: var(--title-size); font-weight: 600; line-height: 1.25; }
.person__role { margin: .4rem 0 .9rem; }
.person__text { max-width: 26em; }

/* Anmeldelser af Kristian fra hans klinik: snittet, et stort citat, tre mindre og vejen til dem alle */
.reviews { margin-top: clamp(3.5rem, 9vh, 6rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.reviews__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }
.reviews__score { display: flex; align-items: baseline; gap: .7rem; }
.reviews__stars { font-family: var(--serif); font-size: 1.15em; letter-spacing: .14em; }
.reviews__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 3vw, 3rem); }
.review { margin: 0; display: grid; align-content: start; gap: .9rem; }
.review p { font-size: clamp(1.2rem, 1.02rem + .6vw, 1.55rem); line-height: 1.36; text-wrap: pretty; }
.review--lead { grid-column: 1 / -1; }
.review--lead p { max-width: 22em; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.2; letter-spacing: -.01em; }
.review p::before { content: '»'; }
.review p::after { content: '«'; }
/* noten står ved siden af det sidste citat, så rækken er fuld */
.reviews__note { align-self: end; max-width: 30em; font-size: .9em; text-wrap: pretty; }

/* ── Tekstsider, fx privatlivspolitikken ────────────────────────────────── */

.prose { max-width: 40rem; }
.thanks__lead { font-size: clamp(1.45rem, 1.15rem + 1vw, 2.1rem); line-height: 1.25; }   /* tak-siden efter betaling */
.prose h2 {
  margin: 2.5rem 0 .75rem;
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.3;
}
.prose p,
.prose ul { margin: 0 0 1rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5rem; }
.prose strong { font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: end;
  padding: 2rem var(--edge) var(--pad-y);
}
.footer > * { grid-row: 1; }
.footer__mark { grid-column: 1 / span 4; }
.footer__copy { grid-column: 5 / span 4; justify-self: center; }
.footer__links {
  grid-column: 10 / -1;
  display: flex;
  gap: 2.4em;
  white-space: nowrap;
}
/* Cookie-indstillinger: en knap, der ligner linkene ved siden af (js/samtykke.js) */
.footer__consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  cursor: pointer;
  transition: text-underline-offset var(--unfold) var(--ease);
}
.footer__consent:hover { text-underline-offset: .52em; }

/* ── Cookiebanneret (js/samtykke.js) ────────────────────────────────────── */

/* Nederst på skærmen, oven på siden. Afvis og Accepter er ens og lige brede, så ingen af dem
   skubber til valget. Det er et krav i de danske cookieregler */
.consent {
  position: fixed;
  right: var(--edge);
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: var(--edge);
  z-index: 10;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-size: .95em;
  line-height: 1.45;
}
.consent__text { text-wrap: pretty; }
.consent__buttons { display: flex; gap: .75rem; margin-top: 1rem; }
.consent__buttons .button { flex: 1 1 0; justify-content: center; }

/* ── Bevægelse ──────────────────────────────────────────────────────────── */

/* Elementer længere nede toner roligt frem, når de kommer ind på skærmen */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Første skærmbillede kommer frem i ro og orden: toplinje, scene, liste, tekster */
  .masthead > *,
  .opening > * { animation: arrive var(--arrive) var(--ease) both; }
  .masthead > *,
  .typer { animation-delay: .1s; }

  /* Markøren blinker roligt, men står stille, mens der skrives */
  .typer__cursor { animation: blink 1.1s steps(1) infinite; }
  .typer.is-typing .typer__cursor { animation: none; }
  .stage { animation-name: rise; animation-delay: .35s; }
  .retreats { animation-delay: .8s; }

  /* Blød udfoldning, hvor browseren kan animere til højden "auto" */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }

    details::details-content {
      block-size: 0;
      overflow-y: clip;
      transition:
        block-size var(--unfold) var(--ease),
        content-visibility var(--unfold) allow-discrete;
    }
    details[open]::details-content { block-size: auto; }
  }
}

@keyframes arrive { from { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .item__summary:hover .item__title { transform: none; }
}

/* ── Mellemstore skærme ─────────────────────────────────────────────────── */

@media (min-width: 900px) and (max-width: 1199px) {
  .masthead__nav,
  .footer__links { grid-column: 9 / -1; }
}

/* ── Mobil og tablet ────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  :root { --col: 100%; }

  /* Toplinjen ligger i det normale flow, ellers rammer navigationen hovederne */
  .masthead {
    position: static;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .masthead__mark { grid-column: 1; }
  .masthead__nav { grid-column: 2; justify-self: end; gap: 1.1em; }

  .opening {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 2.25rem;
    padding-top: 2.25rem;
  }

  .notify__form { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; }
  .notify .field__error { grid-column: 1; }

  .people { grid-template-columns: minmax(0, 1fr); }
  .reviews__list { grid-template-columns: minmax(0, 1fr); }
  .retreat__photos { grid-template-columns: 1fr 1fr; }
  .retreat__kristian { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .retreat__photos img:first-child { grid-column: 1 / -1; }

  .footer { grid-template-columns: minmax(0, 1fr) auto; row-gap: .9rem; }
  .footer__mark { grid-column: 1; grid-row: 1; }
  .footer__copy { grid-column: 1 / -1; grid-row: 3; justify-self: start; }   /* firma, CVR og de juridiske sider på deres egen linje nederst */
  .footer__links { grid-column: 1 / -1; grid-row: 2; gap: 1.5em; }
}

/* ── Breathwork (breathwork.html) ───────────────────────────────────────────
   Cirklen er en ring i vandet. Den vokser, mens man ånder ind, og trækker sig sammen, mens man
   ånder ud. js/breathwork.js sætter kun transform og transition-duration, så rytmen styres derfra */

.breath__lede {
  max-width: 18em;
  margin: 1.5rem 0;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1.15;
  text-wrap: balance;
}
.breath__how { max-width: 34em; margin-top: 1rem; color: var(--soft); text-wrap: pretty; }

.breath__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 24rem, 52svh);
  aspect-ratio: 1;
  margin-inline: auto;
}
.breath__edge,
.breath__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* Den stiplede kant viser, hvor stor cirklen bliver ved en hel indånding */
.breath__edge { border: 1px dashed var(--shade-ink); opacity: .7; transition: opacity .6s var(--ease), border-color .6s var(--ease); }
/* Et tryk på cirklen starter øvelsen, når den ikke kører */
.breath__stage { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.breath__player:not(.is-running) .breath__stage { cursor: pointer; }
.breath__player:not(.is-running) .breath__stage:hover .breath__edge { opacity: 1; border-color: var(--soft); }
.breath__ring {
  border: 1px solid var(--ink);
  background: radial-gradient(circle, rgb(163 176 164 / 0%) 52%, rgb(163 176 164 / 30%) 100%);
  transform: scale(.42);
  transition-property: transform;
  transition-duration: 0s;
  transition-timing-function: cubic-bezier(.37, 0, .63, 1);
  will-change: transform;
}
/* Teksten skal kunne være i den lille cirkel, så den går på to linjer i stedet for at gå ud over stregen */
.breath__cue {
  position: relative;
  max-width: 6.5em;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}
.breath__count {
  position: absolute;
  inset: auto 0 27%;
  min-height: 1.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.breath__bar { height: 1px; margin-top: 1.5rem; overflow: hidden; background: var(--line); }
.breath__bar span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.breath__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-top: 1.25rem; }
.breath__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
/* Lyden slås til og fra som en lille understreget tekst, ligesom "Se detaljer" ved retreatsene */
.breath__sound {
  padding: .4em 0;
  border: 0;
  background: none;
  color: var(--soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  cursor: pointer;
}
.breath__sound[aria-pressed="true"] { color: var(--ink); }
.breath__now { font-variant-numeric: tabular-nums; }

/* Uden JavaScript står kun rytmen som tekst */
.breath__nojs { margin-top: 1rem; }
.js .breath__nojs { display: none; }
html:not(.js) .breath__stage,
html:not(.js) .breath__bar,
html:not(.js) .breath__controls { display: none; }

/* Når øvelsen er slut, toner den ud, og retreatet kommer frem øverst (js/breathwork.js) */
.breath { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.breath.is-leaving { opacity: 0; transform: translateY(-.75rem); }
.section__head[tabindex]:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .is-arriving { animation: rise 1.2s var(--ease) both; }
}
.breath__safety { max-width: 34em; margin-top: 1.5rem; font-size: .9em; }

/* Knapperne over cirklen, der skifter øvelse. Den valgte står med blæk, de andre er dæmpede */
.breath__choose { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.breath__option {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2em;
  padding: .55em .95em;
  line-height: 1.2;
  text-align: left;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.breath__option:hover { border-color: var(--soft); color: var(--ink); }
.breath__option[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
/* Sværhedsgraden under navnet: let, mellem eller øvet */
.breath__level { font-size: .85em; color: var(--soft); }
/* Under Start: om den valgte øvelse og den generelle vejledning. Toppen er kun overskrift, knapper og cirkel */
.breath__about { max-width: 34em; margin-top: 2.25rem; color: var(--soft); text-wrap: pretty; }
.breath__when { color: var(--ink); }
.breath__back { margin-top: 2.5rem; }
/* På telefonen står toplinjen i flowet, så der behøves mindre luft over øvelsen. Så kan cirklen ses med det samme */
@media (max-width: 899px) {
  .section.breath { padding-top: 2rem; }
}

/* Næste skridt: retreatet, solgt som en hel side lige efter øvelsen, ligesom tilbuddet efter et gratis kursus */
.pitch { max-width: 20em; margin: 1.5rem 0 .75rem; font-size: clamp(1.45rem, 1.15rem + 1vw, 2.1rem); line-height: 1.25; text-wrap: balance; }
.offer h4 { margin: 0; }
.offer__head { margin: 2.25rem 0 1.25rem; }
.offer__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-weight: 600; line-height: 1.2; }
.offer__meta { margin-top: .4rem; }
/* Tilmeld og betal lige under titlen, så den er det første, man ser, når øvelsen er slut */
.offer__quick { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: -.25rem 0 2rem; }
.offer__part { max-width: 36em; margin-bottom: 2.25rem; }
.offer__part > .label { margin-bottom: .75rem; }
/* På de smalleste skærme må "Hvad andre siger" gå på to linjer i stedet for at stikke ud */
.offer .retreat__kristian-top .label { white-space: normal; }
.offer__list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.offer__list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); text-wrap: pretty; }
.offer__list li::before { content: '—'; color: var(--soft); }
.offer__buy { display: grid; justify-items: start; gap: .75rem; margin: 2.5rem 0; padding-block: 1.5rem; border-block: 1px solid var(--line); }
.offer__price { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1; }
.offer__again { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.25; }
.offer__fine { font-size: .9em; }
/* Prisboksens bundstreg skiller den fra anmeldelserne, så de ikke også får deres egen */
.offer__buy + .reviews { margin-top: 0; border-top: 0; }
/* Hovedknappen i tilbuddet er fyldt, så den er den, øjet finder */
.button--solid { background: var(--ink); color: var(--paper); }
.button--solid:hover { background: transparent; color: var(--ink); }

/* Landingssiden til annoncerne (find-ind-i-dig-selv.html) er salgsafsnittet herover som hele siden.
   På telefonen skal titel og knap kunne ses med det samme, så der er mindre luft over, som ved øvelsen */
@media (max-width: 899px) {
  .section.landing { padding-top: 2rem; }
}

/* Retreats uden fast dato fører til forsiden, hvor man kan skrive sig op */
.retreat--link { display: block; color: inherit; text-decoration: none; }
.retreat__go { grid-area: icon; justify-self: end; transition: transform var(--unfold) var(--ease); }
.retreat--link:hover .retreat__go { transform: translateX(.3em); }