/* Fotbollsresan.se – mörkt tema, serif-typografi inspirerad av exklusiva resesajter.
   Färgerna styrs av BRAND.md: svart #0e0f0d, äggvit #ece6da, orange #d4804a. Lägg inte till nya. */
:root {
  --bg: #0e0f0d;
  --bg-2: #151713;
  --surface: #1b1d19;
  --line: rgba(236, 230, 218, 0.12);
  --text: #ece6da;
  --muted: #a39d91;
  --accent: #d4804a;
  --accent-ink: #0e0f0d;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 104px; /* sidhuvudets höjd, 72px på mobil (se längre ner) */
  --max: 1280px;
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.eyebrow {
  font: 500 .75rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
  view-transition-name: site-header;
}
.site-header.is-solid, body:not(.home):not(.team):not(.post) .site-header {
  background: rgba(14, 15, 13, .92); backdrop-filter: blur(12px); border-color: var(--line);
}
.logo { display: inline-block; line-height: 0; text-decoration: none; }
.logo img { width: auto; height: 20px; }
/* Sidhuvud: logon med tagline på större skärmar, utan tagline på mobil där den blir för liten (se BRAND.md).
   På dator växer den med skärmen men krymper så att menyn får plats på smalare skärmar. */
.logo--header img { height: 26px; }
@media (min-width: 761px) { .logo--header img { height: clamp(44px, 4.6vw, 62px); } }
.logo--footer { margin-bottom: 20px; }
.logo--footer img { height: 43px; }
.site-nav { display: flex; gap: 32px; }
.site-nav a { font: 500 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--text); opacity: .85; }
.site-nav a:hover { opacity: 1; color: var(--accent); }
.menu-btn { display: none; width: 44px; height: 44px; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; height: 1.5px; background: var(--text); margin: 6px 0; transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49; background: var(--bg);
  padding: 32px var(--gutter);
}
.mobile-menu nav { display: grid; }
.mobile-menu a { font: 400 2rem/1.2 var(--serif); text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--line); }

/* Menyn får plats bredvid den större logotypen först från 961 px; under det visas menyknappen */
@media (max-width: 960px) {
  .site-nav { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 760px) { :root { --header-h: 72px; } }

/* ---------- Startsidans hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding: 120px var(--gutter) clamp(120px, 22vh, 240px); overflow: hidden;
}
.hero::after { background: linear-gradient(180deg, rgba(14,15,13,.6) 0%, rgba(14,15,13,.45) 45%, rgba(14,15,13,.7) 80%, var(--bg) 100%) !important; }
.hero__bg, .page-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.hero::after, .page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,15,13,.55) 0%, rgba(14,15,13,.15) 35%, rgba(14,15,13,.55) 70%, var(--bg) 100%);
}
/* Videobakgrund: mörkare toning än bilden, eftersom rörlig publik gör texten svårare att läsa */
/* Videon förankras i underkant så att flaggorna syns; toningen är jämnt mörk och tonar ut mot svart först längst ner */
.hero__video { filter: brightness(.85); object-position: 50% 85%; }
/* Extra mörkt upptill (de första ~340 px) så att logotyp och meny ligger mot en mörkare platta */
.hero--video::after { background: linear-gradient(180deg, rgba(14,15,13,.98) 0, rgba(14,15,13,.95) 140px, rgba(14,15,13,.84) 340px, rgba(14,15,13,.78) 45%, rgba(14,15,13,.78) 88%, var(--bg) 100%) !important; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
/* Mobil: videon tar mindre plats bakom texten, så toningen kan vara ljusare */
@media (max-width: 760px) {
  .hero--video::after { background: linear-gradient(180deg, rgba(14,15,13,.9) 0, rgba(14,15,13,.78) 100px, rgba(14,15,13,.62) 260px, rgba(14,15,13,.58) 45%, rgba(14,15,13,.62) 88%, var(--bg) 100%) !important; }
}
.hero__inner { max-width: 880px; margin: 0 auto; width: 100%; text-align: center; }
.hero h1 { font-size: clamp(2.75rem, 8vw, 6.5rem); font-weight: 300; }
.hero__lead { font: 400 clamp(1.125rem, 2vw, 1.375rem)/1.5 var(--serif); color: var(--text); opacity: .9; max-width: 620px; margin: 20px auto 36px; }
.hero__lead:has(+ .hero__ask) { margin-bottom: 28px; }
.hero__ask { font: italic 400 clamp(1.25rem, 2.4vw, 1.625rem)/1.3 var(--serif); color: var(--text); margin: 0 0 20px; }

/* ---------- Sökruta (alltid en rad) ---------- */
.search {
  position: relative; display: flex; align-items: center; width: 100%; max-width: 640px; margin: 0 auto;
  background: rgba(236, 230, 218, .96); border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.search__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: #4a463f; stroke-width: 2; }
.search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: 400 1.0625rem/1 var(--sans); color: var(--bg); padding: 14px 12px; text-overflow: ellipsis;
}
.search input::placeholder { color: #6f6a61; }
.search input::-webkit-search-cancel-button { display: none; }
.search__btn {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); display: grid; place-items: center; transition: transform .2s var(--ease);
}
.search__btn:hover { transform: scale(1.05); }
.search__btn svg { width: 20px; height: 20px; fill: none; stroke: var(--accent-ink); stroke-width: 2; }
.search__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; list-style: none; margin: 0; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-align: left;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); max-height: 60vh; overflow: auto;
}
.search__list li a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.search__list li a[aria-selected="true"], .search__list li a:hover { background: rgba(236,230,218,.08); }
.search__list .n { font: 400 1.125rem/1.3 var(--serif); }
.search__list .n mark { background: none; color: var(--accent); }
.search__list .s { font: 500 .6875rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.search__list .empty { padding: 14px; color: var(--muted); }
@media (max-width: 560px) {
  .search { padding-left: 16px; }
  .search input { font-size: 1rem; padding: 12px 8px; }
  .search__btn { width: 44px; height: 44px; }
}

/* ---------- Sektioner ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 9vw, 112px) var(--gutter) 0; }
.section--narrow { max-width: 1040px; }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section__head h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.link-arrow { font: 500 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding-bottom: 6px; border-bottom: 1px solid var(--accent); }
.link-arrow::after { content: " →"; }

/* ---------- Karusell (svep i sidled) ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
  margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > div { scroll-snap-align: start; }
.carousel--teams .carousel__track { grid-auto-columns: clamp(200px, 22vw, 280px); }
/* Startsidans populära lag: två rader med fyra lag på desktop, karusell på mindre skärmar */
@media (min-width: 1100px) {
  .carousel--grid .carousel__track {
    grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 48px 24px;
    overflow: visible; margin: 0; padding-inline: 0;
  }
  .carousel--grid .carousel__nav { display: none; }
}
.carousel--cities .carousel__track { grid-auto-columns: clamp(280px, 82vw, 420px); gap: 20px; }
@media (min-width: 900px) { .carousel--cities .carousel__track { grid-auto-columns: calc((100% - 2 * var(--gutter) - 40px) / 3); } }
.carousel__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.carousel__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--text); font-size: 1.125rem; cursor: pointer; transition: border-color .2s, background .2s;
}
.carousel__btn:hover { border-color: var(--accent); background: rgba(212,128,74,.1); }
.carousel__btn:disabled { opacity: .3; cursor: default; }
@media (hover: none) { .carousel__nav { display: none; } }

/* Lagkort */
.card { display: block; text-decoration: none; }
.card__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__img img { transform: scale(1.05); }
.card__body { display: grid; gap: 6px; padding-top: 14px; }
.card__kicker { font: 500 .6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card__title { font: 400 1.5rem/1.15 var(--serif); }

/* Stadskort – stora bildkort med text ovanpå */
.city-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); text-decoration: none; }
.city-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.city-card:hover img { transform: scale(1.04); }
.city-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,9,.85) 100%); }
.city-card__text { position: absolute; inset: auto 0 0; z-index: 1; padding: 28px; text-align: center; }
.city-card h3 { font-size: clamp(2.25rem, 4vw, 3rem); }
.city-card p { margin: 10px auto 0; max-width: 32ch; color: rgba(236,230,218,.88); font-size: .9375rem; }

/* Guidekort */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { text-decoration: none; display: grid; gap: 10px; align-content: start; }
.post-card__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--surface); margin-bottom: 6px; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card time { font: 500 .6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.post-card h3 { font-size: 1.5rem; line-height: 1.2; }
.post-card:hover h3 { color: var(--accent); }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 20px; }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; } .card__title { font-size: 1.25rem; } }
.group-title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 56px 0 24px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.group-title:first-child { margin-top: 0; }

/* ---------- Destinationshero (lag, städer, artiklar) ---------- */
.page-hero {
  position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden;
  padding: 120px var(--gutter) clamp(72px, 12vh, 140px);
}
.post .page-hero { min-height: 82svh; }
.page-hero__inner { max-width: var(--max); margin: 0 auto; width: 100%; }
.page-hero h1 { font-size: clamp(3rem, 10vw, 8rem); font-weight: 300; font-style: italic; max-width: 14ch; }
.post .page-hero h1 { font-style: normal; font-size: clamp(2.25rem, 6vw, 4.5rem); max-width: 20ch; line-height: 1.08; }
.page-hero__lead { font: 400 clamp(1.125rem, 2.2vw, 1.5rem)/1.45 var(--sans); max-width: 40ch; margin: 24px 0 0; opacity: .92; }
.page-hero__meta { margin: 20px 0 0; font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.page-hero .btn { margin-top: 32px; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; width: 1px; height: 48px; background: linear-gradient(var(--text), transparent); opacity: .5; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--accent-ink);
  font: 600 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: 18px 28px; border-radius: var(--radius); transition: filter .2s;
}
.btn:hover { filter: brightness(1.08); }
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta {
    display: block; position: fixed; right: 16px; bottom: 16px; z-index: 40;
    background: var(--accent); color: var(--accent-ink); text-decoration: none;
    font: 600 .8125rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
    padding: 18px 22px; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.4);
    transition: opacity .3s, transform .3s;
  }
  .sticky-cta.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
}

/* Startsidan: tillbaka till sökrutan när man scrollat förbi den */
.to-top {
  position: fixed; right: max(16px, var(--gutter)); bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font: 600 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 20px 14px 16px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: opacity .3s, transform .3s;
}
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.to-top.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 760px) { .to-top { bottom: 16px; } }

/* ---------- Bokning (Nickes) – ljus sektion i full bredd som smälter ihop med iframen ---------- */
.booking {
  /* Undantag: ren vit för att smälta ihop med Nickes vita iframe (se BRAND.md) */
  --paper: #ffffff; --ink: var(--bg); --ink-muted: #5d594f;
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--paper); color: var(--ink);
  padding: clamp(56px, 8vw, 96px) max(var(--gutter), calc((100vw - 1040px) / 2)) clamp(48px, 6vw, 72px);
  scroll-margin-top: var(--header-h);
}
.section--narrow:has(> .booking) { padding-top: 0; max-width: none; padding-inline: 0; }
.prose .booking { margin-block: 64px; font-family: var(--sans); }
.booking .eyebrow { color: var(--ink); }
.booking .eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 2px; }
.booking__head { max-width: 640px; margin-bottom: 32px; }
.booking h2 { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--ink); margin: 0; }
.booking__lead { font: 400 1.125rem/1.5 var(--serif); color: var(--ink-muted); margin: 12px 0 0; }

/* Förtroendepunkter ovanför iframen */
.trust {
  list-style: none; margin: 0 0 40px; padding: 24px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-block: 1px solid rgba(14, 15, 13, .12);
}
.trust__item { display: flex; align-items: center; gap: 14px; font: 400 .875rem/1.4 var(--sans); color: var(--ink-muted); }
.trust__item strong { display: block; font-weight: 600; color: var(--ink); font-size: .9375rem; margin-bottom: 2px; }
.trust__icon { flex: none; width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.trust__icon .dot { fill: var(--accent); stroke: none; }
.trust__score { flex: none; font: 400 2.5rem/1 var(--serif); font-variation-settings: "opsz" 72; color: var(--ink); }
.trust__stars { display: flex; gap: 2px; margin-bottom: 4px; }
.trust__stars svg { width: 15px; height: 15px; fill: var(--accent); }
.trust__link { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.trust__link .trust__text { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.trust__link:hover .trust__text { color: var(--ink); }
@media (max-width: 960px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust { grid-template-columns: 1fr; gap: 18px; } }

.booking__frame { position: relative; overflow: hidden; transition: max-height .6s var(--ease); }
/* Mobil: tio matcher syns innan "Visa alla matcher". Desktop: hela listan direkt. */
.booking__frame.is-collapsed { max-height: 2090px; }
@media (min-width: 761px) { .booking__frame.is-collapsed { max-height: none; } }
.booking__frame.is-collapsed.has-more::after {
  content: ""; position: absolute; inset: auto 0 0; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper) 85%);
}
.booking iframe.nickes { display: block; width: 100%; min-height: 900px; border: 0; opacity: 1; transition: opacity .5s ease; }
.booking__frame.is-loading iframe.nickes { opacity: 0; }

/* Reserv när Nickes matchsida inte får visas i rutan: knapp till Nickes i nytt fönster */
.booking__blocked { display: none; }
.booking__frame.is-blocked { max-height: none; }
.booking__frame.is-blocked iframe.nickes { display: none; }
.booking__frame.is-blocked .booking__blocked {
  display: grid; justify-items: center; gap: 12px; text-align: center; padding: 56px 24px;
  border: 1px solid rgba(14, 15, 13, .12); border-radius: 8px; font-family: var(--sans); color: var(--ink-muted);
}
.booking__frame.is-blocked::after { display: none; }
.booking__blocked p { margin: 0; max-width: 46ch; font-size: .9375rem; line-height: 1.55; }
.booking__blocked .booking__blocked-title { font: 400 1.75rem/1.2 var(--serif); color: var(--ink); }
.booking__blocked-btn {
  margin-top: 8px; padding: 18px 28px; border-radius: 999px; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); font: 600 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.booking__blocked-back { background: none; border: 0; padding: 8px; cursor: pointer; font: inherit; font-size: .875rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Laddningsruta medan Nickes laddar */
.booking__skeleton { position: absolute; inset: 0; display: none; gap: 14px; padding: 72px 0 0; align-content: start; }
.booking__frame.is-loading .booking__skeleton { display: grid; }
.booking__skeleton span {
  height: 88px; border-radius: 6px;
  background: linear-gradient(90deg, #f1efea 0%, #f8f7f3 50%, #f1efea 100%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.booking__skeleton span:first-child { height: 44px; width: 60%; margin: 0 auto 24px; border-radius: 999px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.booking__more {
  display: flex; align-items: center; gap: 10px; margin: 8px auto 0; cursor: pointer;
  background: var(--ink); color: var(--text); border: 0; border-radius: 999px;
  font: 600 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 18px 28px;
  transition: background .2s;
}
.booking__more[hidden] { display: none; }
.booking__more:hover { background: var(--accent); color: var(--accent-ink); }
.booking__more::after { content: "↓"; font-size: 1rem; letter-spacing: 0; }
.booking__more[aria-expanded="true"]::after { content: "↑"; }
@media (prefers-reduced-motion: reduce) { .booking__skeleton span { animation: none; } }

/* ---------- Löptext (A&K-inspirerad serif) ---------- */
.prose { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter) 0; font: 400 1.25rem/1.6 var(--serif); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); margin: 2em 0 .6em; line-height: 1.15; }
.prose h3 { font-size: 1.5rem; margin: 1.8em 0 .5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose strong { font-weight: 500; color: var(--text); }
.prose figure { margin: 2em calc(var(--gutter) * -1); }
.prose figure img, .prose > p img { width: 100%; border-radius: var(--radius); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; font: .9375rem/1.5 var(--sans); margin: 2em 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose blockquote { margin: 2em 0; padding-left: 24px; border-left: 2px solid var(--accent); font-style: italic; }
.embed { position: relative; aspect-ratio: 16 / 9; margin: 2em 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed--map { aspect-ratio: 4 / 3; }
.note { font: 500 .875rem/1.5 var(--sans); background: rgba(212,128,74,.12); border-left: 2px solid var(--accent); padding: 12px 16px; }
.prose--page { padding-top: 0; }

/* ---------- Listsidor ---------- */
.list-hero { max-width: var(--max); margin: 0 auto; padding: 160px var(--gutter) 0; }
.list-hero h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); font-weight: 300; }
.list-hero__lead { font: 400 1.25rem/1.5 var(--serif); color: var(--muted); max-width: 52ch; margin: 20px 0 32px; }
.list-hero .search { margin: 0; }
.pagination { display: flex; gap: 8px; margin-top: 56px; }
.pagination a { min-width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; text-decoration: none; }
.pagination a[aria-current] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.list-more { margin: 48px 0 0; }

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(80px, 12vw, 160px); border-top: 1px solid var(--line); padding: 64px var(--gutter) 32px; background: var(--bg-2); }
.footer__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer__grid p { color: var(--muted); max-width: 34ch; }
.footer__grid h3 { font: 500 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer__grid a:not(.logo) { display: block; text-decoration: none; padding: 5px 0; opacity: .9; }
.footer__grid a:not(.logo):hover { color: var(--accent); }
.footer__legal { max-width: var(--max); margin: 56px auto 0; font-size: .8125rem; color: var(--muted); }
.footer__btn { display: block; background: none; border: 0; padding: 5px 0; font: inherit; color: inherit; opacity: .9; cursor: pointer; text-align: left; }
.footer__btn:hover { color: var(--accent); }
/* Platshållare för uppgifter som saknas (syns tydligt tills de är ifyllda) */
mark.todo { background: var(--accent); color: var(--accent-ink); padding: 0 .3em; border-radius: 2px; }

/* ---------- Samtycke (cookies) ---------- */
/* Iframes från tredje part laddas först efter samtycke; innan dess visas en platshållare */
html:not([data-consent="granted"]) iframe[data-consent-src] { display: none; }
html[data-consent="granted"] .consent-ph { display: none; }
html:not([data-consent="granted"]) .booking__skeleton { display: none !important; }

.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 960px; margin: 0 auto; padding: 24px 28px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.consent[hidden] { display: none; }
.consent__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.consent__inner > div:first-child { flex: 1 1 460px; }
.consent__actions { margin-left: auto; }
.consent__title { font: 400 1.375rem/1.2 var(--serif); margin: 0 0 6px; }
.consent__text { font: 400 .875rem/1.55 var(--sans); color: var(--muted); margin: 0; }
.consent__text a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.consent__actions { display: flex; gap: 12px; flex: none; }
/* Båda valen ser likadana ut, så att det är lika lätt att neka som att godkänna */
.consent__btn {
  min-width: 160px; padding: 16px 20px; border-radius: 999px; cursor: pointer;
  background: var(--text); color: var(--bg); border: 1px solid var(--text);
  font: 600 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.consent__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.consent__save, .consent.is-custom .consent__show { display: none; }
.consent.is-custom .consent__save { display: inline; }
.consent__choices { display: grid; gap: 12px; margin-top: 16px; }
.consent__choices[hidden] { display: none; }
.consent__choices label { display: flex; gap: 12px; align-items: flex-start; font: 400 .875rem/1.5 var(--sans); color: var(--muted); cursor: pointer; }
.consent__choices strong { display: block; color: var(--text); font-weight: 600; }
.consent__choices input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
@media (max-width: 760px) {
  .consent { padding: 20px; bottom: 12px; left: 12px; right: 12px; }
  .consent__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .consent__inner > div:first-child { flex: none; }
  .consent__actions { margin-left: 0; }
  .consent__actions { flex-direction: column-reverse; }
  .consent__btn { width: 100%; }
}

.consent-ph { display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center; padding: 40px 24px; font-family: var(--sans); }
.consent-ph__title { font: 400 1.5rem/1.2 var(--serif); margin: 0; }
.consent-ph__text { font-size: .875rem; line-height: 1.55; max-width: 52ch; margin: 0; color: var(--muted); }
.consent-ph__link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; cursor: pointer; }
.consent-ph__btn {
  margin-top: 8px; padding: 18px 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 600 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.consent-ph__btn:hover { filter: brightness(1.08); }
.consent-ph__out { font-size: .8125rem; color: inherit; text-underline-offset: 3px; }
/* Nickes: ljus ruta i bokningssektionen */
.consent-ph--nickes { min-height: 360px; border: 1px solid rgba(14, 15, 13, .12); border-radius: 8px; color: var(--ink); }
.consent-ph--nickes .consent-ph__text { color: var(--ink-muted); }
/* Video och karta: mörk ruta i samma format som inbäddningen */
html:not([data-consent="granted"]) .embed { aspect-ratio: auto; }
.embed .consent-ph { border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 24px; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Sidövergångar (glid åt vänster i mobilen) ----------
   AVSTÄNGT tills sajten är live. Aktivera genom att ta tillbaka raden:
   @view-transition { navigation: auto; }
   Animationerna nedan används först då. */
@keyframes vt-out-left { to { transform: translateX(-100%); } }
@keyframes vt-in-right { from { transform: translateX(100%); } }
@keyframes vt-out-right { to { transform: translateX(100%); } }
@keyframes vt-in-left { from { transform: translateX(-30%); filter: brightness(.6); } }
@keyframes vt-under { from { transform: translateX(30%); filter: brightness(.6); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
::view-transition-group(site-header) { z-index: 3; }
@media (max-width: 860px) {
  ::view-transition-old(root) { animation: vt-out-left .42s var(--ease) both; z-index: 2; box-shadow: 20px 0 40px rgba(0,0,0,.5); }
  ::view-transition-new(root) { animation: vt-under .42s var(--ease) both; z-index: 1; }
  html:active-view-transition-type(back)::view-transition-old(root) { animation: vt-out-right .42s var(--ease) both; z-index: 2; }
  html:active-view-transition-type(back)::view-transition-new(root) { animation: vt-in-left .42s var(--ease) both; z-index: 1; }
}
@media (min-width: 861px) {
  ::view-transition-old(root) { animation: vt-fade-out .25s ease both; }
  ::view-transition-new(root) { animation: vt-fade-in .35s ease both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  * { scroll-behavior: auto !important; }
}