/* ===============================================================
   main.css — SURKOV one-pager sections.
   Block names mirror the Figma layer names so the WordPress
   template partials can map 1:1.
   =============================================================== */

/* ---------------------------------------------------------------
   Streamer — Figma "Website blocks/Streamer" (1:214)
   --------------------------------------------------------------- */
.streamer {
  background: var(--c-red);
  color: var(--c-black);
  padding: 9px 0;
}
.streamer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.streamer__text {
  font-size: 12px;
  line-height: 1;
  text-align: center;
}
.streamer__arrow { width: 17px; flex: none; }

/* ---------------------------------------------------------------
   Top menu — Figma "Website blocks/Parts/Top menu" (1:169)
   Overlays the hero, so it is transparent and absolutely placed.
   --------------------------------------------------------------- */
/* Fixed so the menu stays reachable the whole way down. It lives outside
   .hero-stage because that clips its overflow. */
.site-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
}
.site-header {
  padding-block: 20px;
  transition: background-color 0.3s ease;
}
/* Over the hero photo the menu is transparent, as designed. Past it the bar
   crosses #090909 sections and the red footer — where white-on-red is weak and
   the red CTA would vanish entirely — so it takes a solid ground. */
.site-bar.is-stuck .site-header {
  background: var(--c-black);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.site-header__emblem { width: 77px; height: 80px; flex: none; }
.site-header__emblem img { width: 100%; height: 100%; }

/* 60px at 1440 as designed, easing to 24px so the row compresses instead of
   holding its width and pushing "DK / EN" off the edge. Below 1024 the burger
   takes over — even at 24px the full row cannot fit past that point. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, calc(8.18vw - 57.8px), 60px);
}
.nav__link {
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.nav__link:hover { color: var(--c-red); }

.nav__lang {
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__lang a { color: var(--c-white-30); transition: color 0.18s ease; }
.nav__lang a:hover { color: var(--c-white); }

/* Burger — no mobile design in Figma, so this is an added pattern */
.nav-toggle { display: none; width: 32px; height: 24px; position: relative; flex: none; }
.nav-toggle span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--c-white); transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 22px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ---------------------------------------------------------------
   Button — Figma "Website blocks/Parts/Button" (1:210)
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid var(--c-red);
  background: var(--c-red);
  color: var(--c-black);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: transparent; color: var(--c-red); }

/* Outlined variant used inside the date rows */
.btn--ghost {
  border-color: currentColor;
  background: transparent;
  color: var(--c-white);
}
.btn--ghost:hover { background: var(--c-white); color: var(--c-black); }

/* Sold out — a state label, not an action */
.btn--soldout {
  border-color: var(--c-red);
  background: transparent;
  color: var(--c-red);
  text-decoration: line-through;
  cursor: default;
}

/* ---------------------------------------------------------------
   Hero — Figma "Website blocks/Hero" (1:115)
   --------------------------------------------------------------- */
/* The stage carries the photo; the hero and the quote strip both sit on it,
   which is how Figma has it — the image (1050px) overruns the hero frame
   (858px) by exactly the height of the quote strip. */
.hero-stage {
  position: relative;
  overflow: hidden;
  background: var(--c-black);
}
.hero {
  position: relative;
  height: 100vh;
  /* svh keeps the hero from jumping as mobile browser chrome hides/shows */
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 12px;
}
.hero__media { position: absolute; inset: 0; pointer-events: none; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Figma gradient: transparent -> rgba(0,0,0,.2) between 51.8% and 85.8% */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 51.8%, rgba(0,0,0,0.2) 85.8%);
}
/* Full 943px on the 1440 canvas, but never wider than the gutter allows,
   so the wordmark keeps a margin on narrow screens instead of bleeding. */
.hero__lockup {
  position: relative;
  width: min(943px, calc(100% - 2 * var(--gutter)));
}
.hero__lockup img { width: 100%; }
.hero__tagline {
  position: relative;
  padding-inline: var(--gutter);
  margin-top: 11px;
  font-weight: var(--fw-bold);
  font-size: clamp(14px, 1.736vw, 25px);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Press quotes — Figma "Website blocks Logos" (1:118)
   --------------------------------------------------------------- */
.quotes { position: relative; padding: 30px 0; }
.quotes__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.quotes__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 75px;
  padding: 10px;
}
.quotes__figure {
  width: 172px;
  max-width: 100%;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.quotes__text { font-size: 15px; line-height: 1.1; letter-spacing: 1.2px; }
.quotes__source {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.8px;
}

/* ---------------------------------------------------------------
   Intro — Figma text nodes 1:42 / 4:13 / 1:43
   Two columns: 412px heading | 645px body, 143px apart.
   --------------------------------------------------------------- */
.intro { background: var(--c-ink); padding: 160px 0 120px; }
/* Figma's heading box is 412px with a 143px gap, but its longest line renders
   at ~411px here — close enough to the edge that a scrollbar decides whether
   it wraps. Widening the column by 40 and shrinking the gap by the same 40
   buys slack while keeping the body column's left edge at Figma's 675px. */
.intro__grid {
  display: grid;
  grid-template-columns: 452fr 645fr;
  column-gap: 103px;
  align-items: start;
}
.intro__heading {
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2.083vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.03em; /* 0.9px at 30px */
  text-transform: uppercase;
}
.intro__heading .is-muted {
  color: var(--c-muted);
  letter-spacing: 0.016em; /* 0.48px at 30px */
}
.intro__meta {
  margin-top: 37px;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.intro__body { font-size: 15px; line-height: 1.1; letter-spacing: -0.05em; }
.intro__body p + p { margin-top: 1.1em; }

/* ---------------------------------------------------------------
   Image strip — Figma "Website blocks/Img slider" (1:107)
   Bleeds past both edges; scrolls horizontally.
   --------------------------------------------------------------- */
.gallery {
  background: var(--c-ink);
  padding-bottom: 100px;
  /* The strip is driven by its height, not fixed widths: 433/1440 of the
     viewport. Item widths follow from aspect-ratio, so the whole strip stays
     110.7% of the viewport and keeps bleeding on wide screens instead of
     sitting as a fixed 1594px row with dead space beside it. */
  --strip-h: clamp(200px, 30.07vw, 620px);
}
.gallery__track {
  display: flex;
  gap: calc(var(--strip-h) * 50 / 433);
  height: var(--strip-h);
  overflow-x: auto;
  /* Past ~2060px even the capped strip fits; centre it there rather than
     pinning it left. "safe" falls back to flex-start while it overflows, so
     the first image is never clipped out of reach. */
  justify-content: safe center;
  /* No scroll-snap: the design frames the strip at an arbitrary offset, and
     snapping would fight both that offset and the drag handler. */
  scrollbar-width: none;
  cursor: grab;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; }
.gallery__item {
  flex: none;
  height: 100%;
  width: auto;
  border-radius: var(--radius-img);
  overflow: hidden;
}
.gallery__item img { pointer-events:none; width:100%; height: 100%; object-fit: cover; }
.gallery__item  { pointer-events:none; ; }
.gallery__track  { pointer-events:none; ; }

.gallery__track::selection {
    background: transparent;
} 

.nav__lang {
  display:none;
}

/* Displayed proportions from Figma, at a shared 433px height */
.gallery__item--w500 { aspect-ratio: 500 / 433; }
.gallery__item--w366 { aspect-ratio: 366 / 433; }
.gallery__item--w289 { aspect-ratio: 289 / 433; }

/* ---------------------------------------------------------------
   Credits — Figma "Website blocks/Playing" (1:96, 4:2, 4:14)
   Heading column 338px, then 3 equal columns, 35px gaps.
   --------------------------------------------------------------- */
.credits { background: var(--c-ink); padding: 60px 0; }
.credits__grid {
  display: grid;
  grid-template-columns: 338px repeat(3, minmax(0, 1fr));
  gap: 35px;
}
.credits__title {
  grid-row: span 3;
  font-weight: var(--fw-medium);
  font-size: clamp(22px, 2.083vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.credits__role {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
/* Logo cells: a credit row can carry a mark instead of the two text lines.
   Partner logos arrive at whatever size and colour the partner supplies, so the
   cell dictates the box instead of the file. A fixed height with object-fit:
   contain gives every mark the same optical weight while keeping its own aspect
   ratio, and left alignment matches the text cells beside them. */
.credits__cell--logo {
  display: flex;
  align-items: center;
  min-height: clamp(48px, 4.6vw, 64px);
}
/* A linked logo: the anchor has to become the flex item, otherwise it stays
   inline and the height rule on the image resolves against a text box. */
.credits__cell--logo a {
  display: flex;
  align-items: center;
  max-width: 100%;
  transition: opacity 0.18s ease;
}
.credits__cell--logo a:hover { opacity: 0.6; }
.credits__logo {
  display: block;
  /* Normalised on height, not on a box: every mark renders at the same optical
     height and keeps its own width. Sizing by a shared box instead would leave
     wide wordmarks limited by the column while stacked marks stayed short. */
  height: clamp(44px, 4.2vw, 60px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  /* Flatten every mark to white: brightness(0) drives all colour to black while
     keeping the alpha channel, then invert(1) lifts that to white. One rule
     covers the yellow, black and already-white logos alike. */
  filter: brightness(0) invert(1);
}
.credits__name {
  font-weight: var(--fw-bold);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.05em;
}

/* ---------------------------------------------------------------
   Video — Figma "Website blocks/Playing" (1:112)
   --------------------------------------------------------------- */
.video { background: var(--c-ink); padding: 50px 0; }
/* Wider than .container: Figma insets this image by 46px, not the 120px gutter. */
.video__inner {
  width: 100%;
  max-width: calc(1348px + 2 * 46px);
  margin-inline: auto;
  padding-inline: clamp(20px, 3.194vw, 46px);
}
.video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1348 / 758;
  border-radius: var(--radius-img);
  overflow: hidden;
}
.video__frame img,
.video__frame iframe,
.video__frame video { width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video__play img {
  width: clamp(40px, 5vw, 72px);
  height: auto;
  transition: transform 0.25s ease;
}
.video__play:hover img { transform: scale(1.12); }

/* ---------------------------------------------------------------
   Performance dates — Figma "Website blocks/Playing" (1:44)
   Scrolling list with a bottom fade and chevron controls.
   --------------------------------------------------------------- */
.dates { background: var(--c-ink-2); padding: 62px 0 50px; }
.dates__title {
  font-weight: var(--fw-medium);
  font-size: clamp(22px, 2.083vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.dates__viewport { position: relative; margin-top: 62px; }
.dates__scroller {
  /* Six rows measure 6x73 + 5x32 = 598px, but Figma renders five crisp rows
     and a sixth dissolving under the gradient. Showing 5 rows + ~40px of the
     next reproduces that and — unlike a band tall enough to fit all six —
     leaves the list genuinely scrollable, so the gradient and the arrows below
     it are real affordances rather than decoration. */
  max-height: 565px;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-snap-type: y proximity;
}
.dates__scroller::-webkit-scrollbar { display: none; }

/* The wheel must not move the list; the chevrons below are the only control.
   Hiding the overflow is what achieves that: the element stops consuming wheel
   events, so the page keeps scrolling normally when the cursor is over the
   list. Cancelling the wheel event instead would freeze the page while hovering
   here. scrollBy() from the buttons still works — an overflow:hidden element
   remains scrollable programmatically.

   Scoped to fine pointers on purpose: a touch device has no wheel, and taking
   the swipe away there would make the list harder to use, not easier. */
@media (hover: hover) and (pointer: fine) {
  .dates__scroller { overflow-y: hidden; }
}

.dates__list { display: flex; flex-direction: column; gap: 32px; }

.date-row {
  display: grid;
  grid-template-columns: 88px 96px minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 73px;
  border: 1px solid var(--c-white);
  scroll-snap-align: start;
}
.date-row__day,
.date-row__venue {
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: -0.075em;
}
.date-row__day { padding-left: 14px; border-right: 1px solid var(--c-white); }
.date-row__venue { grid-column: 3; text-transform: uppercase; }
.date-row__lg { font-weight: var(--fw-medium); font-size: 20px; line-height: 1.35; }
.date-row__sm { font-size: 15px; line-height: 1.35; }
.date-row__action { display: flex; }
.date-row__action .btn {
  border-top: 0; border-right: 0; border-bottom: 0;
  min-width: 131px;
}

/* Sold-out row is entirely red */
.date-row--soldout { border-color: var(--c-red); color: var(--c-red); }
.date-row--soldout .date-row__day { border-right-color: var(--c-red); }

/* Fade — Figma "Fade" (1:88) */
.dates__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  pointer-events: none;
  transition: opacity 0.25s ease;
  /* Figma's ramp is still ~78% transparent where the last row begins and only
     goes solid at its bottom edge, so that row stays readable as it dissolves.
     A linear 0->100% ramp would bury it, hence the shallow midpoint. */
  background: linear-gradient(
    180deg,
    rgba(27, 27, 27, 0) 0%,
    rgba(27, 27, 27, 0.15) 50%,
    var(--c-ink-2) 100%
  );
}

.dates__nav {
  display: flex;
  justify-content: center;
  gap: 33px;
  margin-top: 68px;
}
.dates__nav button { padding: 6px; }
/* One exported glyph serves both directions; the design rotates it in Figma. */
.dates__nav img { width: 31px; }
.dates__nav img.is-down { transform: rotate(180deg); }
.dates__nav button[disabled] { opacity: 0.35; cursor: default; }

/* ---------------------------------------------------------------
   Newsletter — no Figma counterpart. Reuses the credits grid, the
   date-row border treatment and the standard red CTA so it reads as
   part of the same system.
   --------------------------------------------------------------- */
.newsletter { background: var(--c-ink-2); padding: 62px 0 60px; }
/* Same 338px heading column as .credits, so the form starts on the
   vertical line the credits values already sit on. */
.newsletter__grid {
  display: grid;
  grid-template-columns: 338px minmax(0, 1fr);
  gap: 35px;
  align-items: start;
}
.newsletter__title {
  font-weight: var(--fw-medium);
  font-size: clamp(22px, 2.083vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.newsletter__lede {
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.05em;
}
.newsletter__form { margin-top: 28px; max-width: 620px; }

/* Mirrors .date-row: a 1px white box with the action butted to its right. */
.newsletter__field {
  display: flex;
  align-items: stretch;
  min-height: 73px;
  border: 1px solid var(--c-white);
}
.newsletter__field:focus-within {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
.newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--c-white);
  font-family: inherit;
  font-weight: var(--fw-medium);
  font-size: 20px;
  letter-spacing: -0.075em;
}
.newsletter__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.newsletter__input:focus { outline: none; }
/* Fills the field's height and drops its own border, as the date-row CTA does */
.newsletter__submit {
  flex: none;
  min-width: 131px;
  border: 0;
}

.newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.newsletter__consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--c-red);
}

.newsletter__status {
  margin-top: 12px;
  min-height: 1.4em;
  font-size: 14px;
  letter-spacing: -0.03em;
}
.newsletter__status.is-error { color: var(--c-red); }

/* ---------------------------------------------------------------
   Legal pages (privatlivspolitik) — no Figma counterpart. Same
   palette and headings as the sections; the one deliberate departure
   is line-height, since the 1.1 used for short display copy is
   punishing across a document this long.
   --------------------------------------------------------------- */
.legal {
  background: var(--c-ink);
  /* the bar is fixed, so clear its height before the content starts */
  padding-top: calc(var(--bar-h) + 72px);
  padding-bottom: 120px;
}
.legal__title {
  font-weight: var(--fw-medium);
  font-size: clamp(30px, 3.9vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.legal__meta {
  margin-top: 16px;
  font-size: 15px;
  letter-spacing: -0.05em;
  color: var(--c-muted);
}
.legal__head {
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* A measured column: legal text is read, not scanned. */
.legal__body {
  max-width: 74ch;
  margin-top: 48px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.03em;
}
.legal__body h2 {
  margin-top: 48px;
  margin-bottom: 14px;
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin-bottom: 16px; }
.legal__lines { line-height: 1.9; }

.legal__body ul { margin: 0 0 16px; }
.legal__body li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}
/* Red dash marker rather than a bullet, echoing the brand accent */
.legal__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 1px;
  background: var(--c-red);
}

.legal__body a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__body a:hover { color: var(--c-white); }

/* Unfilled placeholders are flagged so they cannot be published by accident.
   Delete the wrapping span along with the bracketed text. */
.legal__placeholder {
  color: var(--c-red);
  border-bottom: 1px dashed currentColor;
  white-space: nowrap;
}

.legal__back {
  margin-top: 64px;
  font-size: 15px;
  letter-spacing: -0.03em;
}
.legal__back a { color: var(--c-white); }
.legal__back a:hover { color: var(--c-red); }

/* ---------------------------------------------------------------
   Footer — Figma "Footer" (1:5)
   --------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--c-red);
  color: var(--c-black);
  padding-top: 104px;
  /* The wordmark is absolutely positioned, so it contributes no height — but it
     scales with the footer's width, so a fixed height let it climb into the menu
     on wide screens. Reserve room for it instead: it is 108.82% of the width at
     a 4.439 aspect, of which 90.65% sits above the bottom crop = 22.2% of the
     width. Percentage padding resolves against that same width, so the two
     scale together. The 127px is Figma's gap between menu and wordmark. */
  padding-bottom: calc(22.2% + 127px);
  overflow: hidden;
}
.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 958fr) minmax(0, 242fr);
  gap: 40px;
}
.site-footer__label {
  font-weight: var(--fw-bold);
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  font-feature-settings: "salt" 1;
  margin-bottom: 12px;
}
.site-footer__links a {
  display: block;
  font-size: clamp(22px, 2.153vw, 31px);
  line-height: 1.3;
  letter-spacing: -0.039em;
  transition: opacity 0.18s ease;
}
.site-footer__links a:hover { opacity: 0.6; }

/* A second label in the same column needs the separation the first one gets
   from the grid. The gap sits on the label rather than the paragraph so the
   heading stays tight to the text it introduces. */
.site-footer__label--spaced { margin-top: 36px; }

/* Contact note under the social links. Deliberately far smaller than the nav
   links beside it: at their 22-31px it would read as another menu entry rather
   than a line of prose. */
.site-footer__contact {
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.site-footer__contact a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity 0.18s ease;
}
.site-footer__contact a:hover { opacity: 0.6; }

/* Oversized wordmark: 1567 wide on a 1440 canvas, cropped 33px at the
   bottom. Percentages keep that crop proportional as the page scales. */
.site-footer__wordmark {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 108.82%;
  max-width: none;
  transform: translate(-50%, 9.35%);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Section rhythm.
   Sections carry their own background over the black page, so the
   deliberate black bands between them in Figma are margins here.
   --------------------------------------------------------------- */
#holdet-bag { margin-bottom: 35px; }
.dates      { margin-bottom: 100px; }
#om-os      { margin-bottom: 11px; }
#tak-til    { margin-bottom: 11px; }
#nyhedsbrev { margin-bottom: 11px; }

/* ===============================================================
   Responsive — no mobile design exists in Figma, so these
   breakpoints are an interpretation of the desktop layout.
   =============================================================== */

/* The heading column narrows faster than the font-size clamp shrinks the type,
   so below this the two-column intro is cramped — collapse it instead. */
@media (max-width: 1024px) {
  .intro__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .newsletter__grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    background: var(--c-black);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .nav.is-open { transform: none; }
  .nav__link { font-size: 22px; }
  .nav-toggle { display: block; z-index: 30; }
}

@media (max-width: 1100px) {
  .quotes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .credits__grid { grid-template-columns: 260px repeat(2, minmax(0, 1fr)); }
  .credits__title { grid-row: span 2; }
}

@media (max-width: 900px) {

  .intro { padding: 90px 0 70px; }

  .date-row { grid-template-columns: 80px minmax(0, 1fr); }
  /* Desktop spaces this with a 96px spacer column, which the restack drops —
     so inset it by the same 14px the date cell uses. Both cells get matching
     vertical padding so the upper band is not pinched against its borders. */
  .date-row__venue { grid-column: 2; padding-inline: 14px; }
  .date-row__day,
  .date-row__venue { padding-block: 12px; }
  .date-row__action { grid-column: 1 / -1; }
  .date-row__action .btn {
    width: 100%;
    border: 0;
    border-top: 1px solid currentColor;
    padding-block: 14px;
  }
  /* Stacked rows are 116px on a 148px pitch (vs 73/105 on desktop), so the
     desktop band would run past the fold. 3x116 + 3x32 lands on the fourth
     row's top edge; the extra 40px exposes enough of it for the gradient to
     have something to dissolve, matching the desktop composition. */
  .dates__scroller { max-height: 484px; }

  /* padding-bottom stays on the percentage formula so the wordmark keeps its
     clearance here too; only the top padding tightens up. */
  .site-footer { padding-top: 70px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 640px) {
  .quotes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits { padding: 40px 0; }
  .credits__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .credits__title { grid-row: auto; margin-bottom: 8px; }
  .streamer__text { font-size: 10px; }

  /* Side by side the input gets too narrow to read a full address */
  .newsletter__field { display: block; border: 0; }
  .newsletter__input {
    width: 100%;
    height: 60px;
    border: 1px solid var(--c-white);
    font-size: 17px;
  }
  .newsletter__submit { width: 100%; margin-top: 12px; padding-block: 18px; }
}

/* ---------------------------------------------------------------
   Modal — no Figma counterpart, so it is assembled from the existing
   system: the #090909 page ground, the red CTA, the condensed heading
   face and the same 20px radius the images use.
   --------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: clamp(32px, 4vw, 56px);
  background: var(--c-ink);
  border: 1px solid var(--c-white-30);
  border-radius: var(--radius-img);
  text-align: left;
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 40px;
  height: 40px;
  font-size: 30px;
  line-height: 1;
  color: var(--c-white-30);
  transition: color 0.18s ease;
}
.modal__close:hover { color: var(--c-white); }
.modal__eyebrow {
  font-weight: var(--fw-bold);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 14px;
}
.modal__title {
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.modal__text {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 28px;
}
.modal__action { display: inline-flex; }

/* The panel animates in, but only when the visitor has not asked for less
   motion; the reduced-motion block in base.css neutralises the duration. */
@keyframes wdwc-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.modal__panel { animation: wdwc-modal-in 0.22s ease both; }

/* Stops the page behind the dialog from scrolling while it is open. */
body.has-modal { overflow: hidden; }