/* 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 {
  --sand: #f6f1e7;
  --paper: #fffdf8;
  --ink: #23201b;
  --ink-2: #5b544a;
  --sea: #1f6f78;
  --sea-deep: #12484f;
  --sun: #d98a3d;
  --rule: #e6ddcd;
  --shadow: 0 12px 40px -20px rgba(18, 72, 79, .45);
}

* { 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;
}

.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.alt { background: var(--paper); padding-top: 3rem; }
.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; }
.section.alt .cards article { background: var(--sand); }
.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 */
.contact { max-width: 640px; }
.contact h2, .unlock h2 { color: var(--sea-deep); }
.contact form, .unlock form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.contact label, .unlock label { display: grid; gap: .35rem; font-size: .9rem; color: var(--ink-2); }
.contact input, .contact textarea, .unlock input {
  font: inherit; padding: .7rem .8rem; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--paper);
}
.contact input:focus, .contact textarea:focus, .unlock input:focus {
  outline: 2px solid var(--sea); border-color: transparent;
}
.contact button, .unlock button {
  justify-self: start; padding: .8rem 1.6rem; border: 0; border-radius: 999px;
  background: var(--sea); color: #fff; font-weight: 600; cursor: pointer;
}
.contact button:hover, .unlock button:hover { background: var(--sea-deep); }
.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); }