/* Dynamic site – bastema (ärvt från Torrequebrada-designen).
   Färgvariablerna nedan är defaults; sajtens inställningar kan skriva över
   --sea/--sea-deep/--sun/--sand via en :root-injektion i SSR-layouten. */
:root {
  color-scheme: light dark;

  /* BAS-färgerna är de VALDA: temats, eller kundens override. De
     semantiska nedan härleds ur dem och är det CSS:en faktiskt använder.
     Uppdelningen finns för mörkt läge: där måste accenten ljusas upp för
     att synas mot mörk botten, och det går inte att räkna på en variabel
     som refererar sig själv. */
  --sand-base: #f6f1e7;
  --paper-base: #fffdf8;
  --ink-base: #23201b;
  --ink-2-base: #5b544a;
  --sea-base: #1f6f78;
  --sea-deep-base: #12484f;
  --sun-base: #d98a3d;
  --rule-base: #e6ddcd;

  --sand: var(--sand-base);
  --paper: var(--paper-base);
  --ink: var(--ink-base);
  --ink-2: var(--ink-2-base);
  --sea: var(--sea-base);
  --sea-deep: var(--sea-deep-base);
  --sun: var(--sun-base);
  --rule: var(--rule-base);
  --shadow: 0 12px 40px -20px rgba(18, 72, 79, .45);
}

/* ---------------------------------------------------------------------
   Mörkt läge.

   Neutralerna byts mot fasta mörka toner — kundens ljusa bakgrundsfärg
   säger ingenting om hur en mörk sajt ska se ut. Accenterna DÄREMOT är
   kundens identitet och ska följa med, men en bränd sienna som fungerar
   mot grädde försvinner mot nästan svart. Därför ljusas de upp med
   color-mix, som behåller kulören men lyfter ljusheten.

   Två väljare, samma värden: media query för den som inte valt något
   (systemets inställning styr), attribut för den som klickat i
   sidhuvudet. :root:not([data-theme="light"]) gör att ett aktivt
   ljus-val vinner över systemets mörka läge.

   Hero-slöjan rörs INTE här. Varje tema uttrycker den i variabler som
   redan vänder (medelhav: color-mix på --sand), så en hårdkodad slöja
   hade kört över temats egen avsikt i stället för att följa den.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sand: #16130f;
    --paper: #1e1a15;
    --ink: #ece5da;
    --ink-2: #a89e91;
    --rule: #332c24;
    /* Två deklarationer per färg med flit. color-mix mot vitt fungerar
       överallt men drar chroman mot noll — en bränd sienna blir dammig
       beige. oklch(from …) lyfter BARA ljusheten och behåller kulör och
       mättnad, vilket är vad man faktiskt vill: samma färg, läsbar mot
       mörkt. Webbläsare som inte kan relativ färgsyntax hoppar över den
       andra raden och behåller den första. */
    --sea: color-mix(in oklab, var(--sea-base), #fff 40%);
    --sea: oklch(from var(--sea-base) 0.78 c h);
    --sea-deep: color-mix(in oklab, var(--sea-base), #fff 66%);
    --sea-deep: oklch(from var(--sea-base) 0.86 c h);
    --sun: color-mix(in oklab, var(--sun-base), #fff 26%);
    --sun: oklch(from var(--sun-base) 0.82 c h);
    --shadow: 0 14px 44px -22px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  --sand: #16130f;
  --paper: #1e1a15;
  --ink: #ece5da;
  --ink-2: #a89e91;
  --rule: #332c24;
  --sea: color-mix(in oklab, var(--sea-base), #fff 40%);
  --sea: oklch(from var(--sea-base) 0.78 c h);
  --sea-deep: color-mix(in oklab, var(--sea-base), #fff 66%);
  --sea-deep: oklch(from var(--sea-base) 0.86 c h);
  --sun: color-mix(in oklab, var(--sun-base), #fff 26%);
  --sun: oklch(from var(--sun-base) 0.82 c h);
  --shadow: 0 14px 44px -22px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
}
.wrap { width: min(1100px, 92%); margin: 0 auto; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.02em; line-height: 1.1; }
a { color: inherit; }

/* Textfärg-klasser (enum – saneraren tillåter endast dessa i rik text) */
.c-sea { color: var(--sea); }
.c-sun { color: var(--sun); }
.c-sea-deep { color: var(--sea-deep); }
.c-ink-2 { color: var(--ink-2); }

/* Masthead */
.masthead {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 253, 248, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; }
.brand .mark {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--sea); color: #fff; font-family: Georgia, serif; font-size: .95rem;
}
.brand .word { font-size: 1.05rem; }
nav a { margin-left: 1.4rem; text-decoration: none; color: var(--ink-2); font-size: .95rem; }
nav a:hover, nav a.active { color: var(--sea); }

/* Hero */
.hero {
  background:
    linear-gradient(180deg, rgba(18,72,79,.72), rgba(18,72,79,.55)),
    radial-gradient(120% 120% at 80% 0%, #2b8b93 0%, var(--sea-deep) 60%, #0d363b 100%);
  color: #fff;
  padding: 6rem 0 5rem;
}
/* Foto-hero: valfri bakgrundsbild med tema-styrd gradient-slöja. Bilden
   kommer via --hero-photo (style-attr från SSR, strikt uuid-byggd URL);
   slöjans ton/täthet sätts per tema via variablerna nedan. Klassisk = mörk
   teal-slöja (vit herotext), ljusa teman overridar med ljus slöja. */
:root {
  --hero-veil-top: rgba(18, 72, 79, .58);
  --hero-veil-bottom: rgba(18, 72, 79, .88);
}
.hero.has-photo {
  background-image:
    linear-gradient(180deg, var(--hero-veil-top), var(--hero-veil-bottom)),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Smal skärm tar thumben (max 1200 px). Heron går kant till kant, så
   fullstorleken behövs på stora skärmar — men en telefon som ritar den
   400 px bred ska inte ladda ned en halv megabyte för det.
   Regeln står EFTER basregeln: --hero-photo-sm sätts av SSR bredvid
   --hero-photo, och saknas den (äldre sajt) faller allt tillbaka på
   basregeln ovan. */
@media (max-width: 48rem) {
  .hero.has-photo {
    background-image:
      linear-gradient(180deg, var(--hero-veil-top), var(--hero-veil-bottom)),
      var(--hero-photo-sm, var(--hero-photo));
  }
}

.hero .eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .72rem;
  color: #ffd9a8; margin: 0 0 1rem;
}
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0 0 1rem; }
.hero .lede { max-width: 40rem; font-size: 1.15rem; color: #eaf3f2; }
.hero-actions { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.cta {
  display: inline-block; padding: .8rem 1.5rem; border-radius: 999px;
  background: var(--sun); color: #fff; text-decoration: none; font-weight: 600;
  box-shadow: var(--shadow); transition: transform .15s ease;
}
.cta:hover { transform: translateY(-2px); }
.cta.ghost { background: transparent; border: 1px solid rgba(255,255,255,.6); box-shadow: none; }

/* Språkväxlare i masthead – diskret pill-rad, ärver temats färger. */
.langs { display: flex; gap: .15rem; align-items: center; }
.langs a {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none;
  padding: .2rem .45rem; border-radius: 999px; line-height: 1;
}
.langs a:hover { color: var(--sea); background: color-mix(in srgb, var(--sea) 10%, transparent); }
.langs a.active { color: #fff; background: var(--sea); }
@media (max-width: 760px) { .langs { margin-left: auto; } }

/* Sektioner. Varje block renderas som en egen section — utan justering
   dubbleras avståndet (3+3rem) mellan alla block. Regeln: ett block bär
   sitt eget avstånd NEDÅT, efterföljande block börjar tätt. Rubrikblock
   hör ihop med blocket efter sig: stor luft före rubriken, liten efter. */
.section { padding: 3rem 0; }
.section + .section { padding-top: 0; }
.section.section-heading { padding-bottom: 1.1rem; }
.section-head { max-width: 42rem; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .6rem; color: var(--sea-deep); }
.section-head p { color: var(--ink-2); font-size: 1.05rem; margin: 0; }

/* Rik text */
.prose { max-width: 46rem; font-size: 1rem; }
.prose h2, .prose h3 { color: var(--sea-deep); margin: 1.4rem 0 .5rem; }
.prose a { color: var(--sea); }
.prose blockquote {
  margin: 1rem 0; padding: .4rem 0 .4rem 1.1rem;
  border-left: 3px solid var(--sun); color: var(--ink-2);
}

/* Kort */
.cluster { margin-top: 1rem; }
.cluster-title {
  font-size: 1.1rem; color: var(--sun); margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .7rem;
  text-transform: uppercase; letter-spacing: .1em; font-family: inherit; font-weight: 700;
}
.cluster-title::before { content: ""; width: 1.8rem; height: 2px; background: var(--sun); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.cards article {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  padding: 1.5rem; box-shadow: 0 6px 24px -18px rgba(18,72,79,.4);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden; /* miniatyrbilden klipps av kortets hörnradie (temaföljsamt) */
}
/* Miniatyrbild i kort: kant-till-kant upptill, klick öppnar lightbox (public.js). */
.card-photo { display: block; margin: -1.5rem -1.5rem 1rem; cursor: zoom-in; }
.card-photo img { width: 100%; height: 150px; object-fit: cover; display: block; }
.cards article:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pin {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sea); background: rgba(31,111,120,.1);
  padding: .25rem .6rem; border-radius: 999px; margin-bottom: .8rem;
}
.cards h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.cards p { margin: 0 0 .4rem; color: var(--ink-2); font-size: .96rem; }

/* Checklistor (ul.checklist ur rik text): boxar i CSS, avbockningsbara –
   public.js togglar li.checked och minns valet i localStorage. */
.checklist { list-style:none; padding-left:.2rem; }
.checklist li { position:relative; padding-left:1.8rem; cursor:pointer; }
.checklist li::before {
  content:""; position:absolute; left:.15rem; top:.3em;
  width:.95em; height:.95em; border:2px solid var(--sea);
  border-radius:4px; background:var(--paper);
}
.checklist li.checked::before { background:var(--sea); }
.checklist li.checked::after {
  content:"✓"; position:absolute; left:.38rem; top:.32em;
  color:#fff; font-size:.75em; font-weight:700; line-height:1.1;
}
.checklist li.checked { color:var(--ink-2); }

/* Bildgalleri: kollage på 6-kolumnsraster. Varje bild spänner kolumner/rader
   efter vald storlek (s/m/l) och dense-flödet packar igen hålen. */
.gallery {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  /* Rad + mellanrum i cqw → cellernas proportioner är konstanta oavsett
     containerbredd (admin-editorns miniraster använder samma kvoter =
     WYSIWYG). px-raderna är fallback för browsers utan container queries.
     8.18cqw ≈ 90px och 1.45cqw ≈ 16px vid 1100px innehållsbredd. */
  gap: 1rem; grid-auto-rows: 90px;
  gap: 1.45cqw; grid-auto-rows: 8.18cqw;
}
.section { container-type: inline-size; }
.gallery figure {
  margin: 0; position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--paper);
}
.gallery .sz-s { grid-column: span 2; grid-row: span 2; }
.gallery .sz-m { grid-column: span 3; grid-row: span 3; }
.gallery .sz-l { grid-column: span 4; grid-row: span 5; }
/* Stående ram: samma kolumner, fler rader (aspekt ~2:3). */
.gallery .sz-s.por { grid-row: span 5; }
.gallery .sz-m.por { grid-row: span 7; }
.gallery .sz-l.por { grid-row: span 9; }
.gallery a { display: block; width: 100%; height: 100%; }
.gallery img {
  width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block;
}
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.1rem .7rem .45rem; font-size: .82rem; color: #fff;
  background: linear-gradient(transparent, rgba(18, 72, 79, .78));
}
@media (max-width: 760px) {
  .gallery { grid-auto-rows: 64px; gap: .6rem; }
  .gallery .sz-s { grid-column: span 3; grid-row: span 3; }
  .gallery .sz-m { grid-column: span 6; grid-row: span 4; }
  .gallery .sz-l { grid-column: span 6; grid-row: span 5; }
  .gallery .sz-s.por { grid-row: span 4; }
  .gallery .sz-m.por { grid-column: span 3; grid-row: span 5; }
  .gallery .sz-l.por { grid-column: span 6; grid-row: span 8; }
}
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(18, 72, 79, .92);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 2vh 2vw;
}
.lightbox img { max-width: 96vw; max-height: 96vh; border-radius: 6px; }

/* Kalender-embed */
.calendar-embed { position: relative; width: 100%; }
.calendar-embed iframe {
  width: 100%; height: 600px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--paper);
}

/* Kontakt + upplåsningsformulär */
/* Kontaktblocket låg tidigare i en egen max-width på SAMMA element som
   .wrap, som har margin:0 auto — resultatet blev en centrerad spalt
   medan varje annan sektion börjar vid vänsterkanten av 1100-spalten.
   Och .section.alt målade sin paper-bakgrund enbart på den smala rutan,
   så blocket läste som en lös låda mitt på sidan i stället för en del av
   sidan.
   Nu: full spaltbredd som resten, med texten till vänster och
   formuläret i en panel till höger. Panelen är det enda som avtecknar
   sig, och den gör det med avsikt. */
.contact-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 54rem) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3.5rem; }
}
.contact-intro { max-width: 34rem; }
.contact-intro h2, .unlock h2 {
  color: var(--sea-deep);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 0 0 .7rem;
}
.contact-intro p { color: var(--ink-2); font-size: 1.05rem; margin: 0; }

.contact-form, .unlock form {
  display: grid;
  gap: 1.1rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--shadow);
}
/* Namn och e-post delar rad när panelen är bred nog. Container query:
   det är PANELENS bredd som avgör om två fält får plats, inte skärmens
   — panelen är halva spalten på desktop och hel på mobil. */
.contact-form { container-type: inline-size; }
@container (min-width: 26rem) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form .span-2, .contact-form button { grid-column: 1 / -1; }
}
.contact-form label, .unlock label { display: grid; gap: .45rem; }
.contact-form label > span, .unlock label {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}
.contact-form input, .contact-form textarea, .unlock input {
  font: inherit; color: var(--ink);
  padding: .8rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sand);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-2); opacity: .6; }
.contact-form input:focus, .contact-form textarea:focus, .unlock input:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sea) 22%, transparent);
}
.contact-form button, .unlock button {
  justify-self: start;
  padding: .85rem 1.9rem; border: 0; border-radius: 999px;
  background: var(--sea); color: var(--paper); font: inherit; font-weight: 700;
  cursor: pointer; transition: background .15s, transform .1s;
}
.contact-form button:hover, .unlock button:hover { background: var(--sea-deep); }
.contact-form button:active { transform: translateY(1px); }
.sent-ok { color: var(--sea); font-weight: 600; }
.unlock-error { color: #b3402a; font-weight: 600; }

/* Footer */
footer { padding: 2.5rem 0; color: var(--ink-2); font-size: .88rem; border-top: 1px solid var(--rule); }

/* Granskningsband – syns bara medan ett ogranskat AI-bygge ligger på
   sajten. Avsiktligt omöjligt att missa: den som landar här ska inte
   kunna tro att sajten är färdig. Försvinner när säljaren godkänt. */
.review-ribbon {
  background: #8a3b00;
  color: #fff;
  font-size: .8125rem;
  letter-spacing: .02em;
  text-align: center;
  padding: .5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Temaväxlare i sidhuvudet.
   Diskret: en ikon i samma vikt som språkväxlaren, inte en knapp som
   konkurrerar med sajtens egna. Ikonen visar vad man BYTER TILL — sol i
   mörkt läge, måne i ljust — vilket är den konvention folk känner igen. */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; margin-left: .5rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--sea); border-color: var(--sea); }
.theme-toggle:focus-visible {
  outline: none; border-color: var(--sea);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sea) 25%, transparent);
}
.theme-toggle svg { grid-area: 1 / 1; }
/* Utan JS visas månen (sidan är ljus som default) — knappen gör inget då,
   men den ska inte se trasig ut. */
.theme-toggle .i-sun { display: none; }
.is-dark .theme-toggle .i-sun { display: block; }
.is-dark .theme-toggle .i-moon { display: none; }