/* Aspö kursgård
   Paletten är hämtad ur platsen: dimman över Båven en oktobermorgon, den tjärade
   panelen på husen, och det orange lädret på matsalens stolar. */

:root{
  --dim:      #DCE0DA;   /* dis över vattnet. huvudyta */
  --papper:   #F1F3ED;   /* ljusaste ytan. kort och innehållsblock */
  --vatten:   #1B2A2C;   /* djup grågrön. mörka sektioner */
  --tjara:    #141613;   /* tjärad panel. text */
  --barr:     #3E4F43;   /* mellanton, sekundär text på ljus botten */
  --lader:    #B85423;   /* orange läder från matsalsstolarna. accent, sparsamt */
  --linje:    #B6BDB3;   /* hårfina avdelare */
  --linje-m:  #33474A;   /* avdelare på mörk botten */

  --bredd: 1180px;
  --gap: clamp(3rem, 5.4vw, 4.9rem);

  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --brod: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--dim);
  color:var(--tjara);
  font-family:var(--brod);
  font-size:1.0625rem;
  line-height:1.65;
  font-optical-sizing:auto;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--lader);
  outline-offset:3px;
}

.inre{ width:100%; max-width:var(--bredd); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem); }

/* ---------- typografi ---------- */

h1,h2,h3{ font-family:var(--display); font-weight:500; letter-spacing:-.02em; line-height:1.08; margin:0 0 .85rem; }
h1{ margin-bottom:1rem; }

h1{ font-size:clamp(2.05rem, 4.6vw, 3.3rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.25rem); }
h3{ font-size:1.115rem; letter-spacing:-.01em; line-height:1.3; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.ingress{ font-size:clamp(1.09rem,1.55vw,1.24rem); line-height:1.55; color:var(--barr); }

/* etikett i monospace. bär fakta, aldrig dekoration */
.etikett{
  font-family:var(--mono); font-size:.685rem; font-weight:500;
  letter-spacing:.155em; text-transform:uppercase;
  color:var(--barr); margin:0 0 1.15rem;
}
.morkt .etikett{ color:#93A8A4; }

/* ---------- topprad ---------- */

.topp{
  border-bottom:1px solid var(--linje);
  background:var(--dim);
  position:sticky; top:0; z-index:40;
}
.topp .inre{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:62px; }

.marke{
  font-family:var(--display); font-weight:600; font-size:1.02rem;
  letter-spacing:-.015em; text-decoration:none; white-space:nowrap;
}
.marke span{ color:var(--lader); }

.meny{ display:flex; gap:clamp(.85rem,2.2vw,1.9rem); flex-wrap:wrap; }
.meny a{
  font-family:var(--mono); font-size:.715rem; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; color:var(--barr);
  padding-block:.35rem; border-bottom:1px solid transparent;
}
.meny a:hover{ color:var(--tjara); border-bottom-color:var(--lader); }
.meny a[aria-current="page"]{ color:var(--tjara); border-bottom-color:var(--lader); }

/* ---------- hero: bilden är en karta, inte en tapet ---------- */

.hero{ padding-block:clamp(2.6rem,5.5vw,4.4rem) clamp(2.2rem,4vw,3.4rem); }
.hero .inre{
  display:grid; gap:clamp(2rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:900px){
  .hero .inre{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
}

.hero h1{ margin-bottom:1rem; text-wrap:balance; }
.hero figure img{ width:100%; height:auto; }
.hero figcaption{
  font-family:var(--mono); font-size:.655rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--barr); margin-top:.7rem; text-align:right;
}
@media (max-width:640px){ .hero figcaption{ text-align:left; } }
.hero .ingress{ max-width:34ch; }

.knappar{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.knapp{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; padding:.78rem 1.25rem; border:1px solid var(--tjara);
  background:var(--tjara); color:var(--dim); transition:background .18s, color .18s;
}
.knapp:hover{ background:var(--lader); border-color:var(--lader); color:#fff; }
.knapp.tunn{ background:transparent; color:var(--tjara); }
.knapp.tunn:hover{ background:var(--tjara); color:var(--dim); border-color:var(--tjara); }

.kartbild img{ width:100%; height:auto; }
.karta figcaption{
  font-family:var(--mono); font-size:.655rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--barr); margin-top:.7rem; text-align:right;
}

/* Etiketten tas ur flödet så att den aldrig påverkar var punkten hamnar.
   Punktens mitt ligger då exakt på koordinaten, oavsett hur lång etiketten är. */
/* nära bildens underkant sätts etiketten ovanför punkten i stället */

@media (max-width:600px){
  .markor b{
    font-size:.62rem; letter-spacing:.02em; font-weight:500;
    background:rgba(20,22,19,.55); padding:.12rem .3rem;
    text-shadow:0 1px 2px rgba(0,0,0,.9);
  }
  .markor i{ width:8px; height:8px; border-width:2px; }
}

@media (max-width:640px){
  .topp .inre{ flex-wrap:wrap; justify-content:flex-start; gap:.15rem 1rem; padding-block:.6rem; min-height:0; }
  .marke{ flex:1 0 100%; }
  /* Sju menyval bröt till två rader på en bred telefon. Menyn hålls på EN rad och får
     rulla i sidled om skärmen är smalare än raden. Rullisten döljs, kanten visar att
     det fortsätter. */
  .meny{ flex:1 0 100%; flex-wrap:nowrap; gap:.7rem; overflow-x:auto; scrollbar-width:none;
         -webkit-overflow-scrolling:touch; }
  .meny::-webkit-scrollbar{ display:none; }
  .meny a{ font-size:.585rem; letter-spacing:.035em; padding-block:.25rem; white-space:nowrap; flex:0 0 auto; }
  .meny a:last-child{ padding-right:.5rem; }
}
@media (max-width:400px){
  .meny{ gap:.55rem; }
  .meny a{ font-size:.555rem; letter-spacing:.02em; }
  .karta figcaption{ text-align:left; }
}

/* Mobilen får en egen komposition. Bilden går först, eftersom den svarar på
   var man hamnar snabbare än rubriken hinner läsas. */
@media (max-width:899px){
  .hero .inre > .karta{ order:-1; }
  .hero{ padding-top:1.4rem; }
  .hero h1{ font-size:clamp(1.95rem,7.4vw,2.6rem); }
  .hero .ingress{ max-width:none; }
  .knappar .knapp{ flex:1 1 auto; text-align:center; }
}

/* ---------- faktaremsa ---------- */

.fakta{ border-block:1px solid var(--linje); background:var(--papper); }
.fakta ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:820px){ .fakta ul{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.fakta li{ padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid var(--linje); }
.fakta li:nth-child(2n){ border-right:0; padding-right:0; }
.fakta li:nth-child(2n+1){ padding-left:0; }
.fakta li:nth-child(2n){ padding-left:1.4rem; }
/* I fyra kolumner måste nth-child-reglerna från tvåkolumnsläget nollställas explicit.
   En media query höjer inte specificiteten, så :nth-child(2n+1) skulle annars äta
   vänstermarginalen på tredje cellen. */
@media (min-width:820px){
  .fakta li,
  .fakta li:nth-child(2n),
  .fakta li:nth-child(2n+1){
    padding:1.4rem 1.5rem;
    border-right:1px solid var(--linje);
  }
  .fakta li:first-child{ padding-left:0; }
  .fakta li:last-child{ border-right:0; padding-right:0; }
}
.fakta dt{
  font-family:var(--mono); font-size:.645rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--barr); margin-bottom:.42rem;
}
.fakta dd{ margin:0; font-family:var(--display); font-size:1.02rem; font-weight:500; line-height:1.3; letter-spacing:-.01em; }

/* ---------- sektioner ---------- */

section{ padding-block:var(--gap); }
.morkt{ background:var(--vatten); color:var(--papper); }
.morkt h2, .morkt h3{ color:var(--papper); }
.morkt p{ color:#C4D2CE; }
.ljust{ background:var(--papper); }

.rubrikrad{ max-width:56ch; margin-bottom:clamp(1.9rem,3.4vw,2.9rem); }
.rubrikrad h2{ margin-bottom:.8rem; text-wrap:balance; }

/* text + bild sida vid sida */
.par{ display:grid; gap:clamp(1.8rem,3.6vw,3.2rem); align-items:start; }
@media (min-width:860px){
  .par{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .par.smal-text{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); }
  .par.bild-forst > :first-child{ order:2; }
}

figure{ margin:0; }
figure img{ width:100%; }
/* en stående bild får inte diktera sektionens höjd */
.par figure img{ max-height:min(64vh, 520px); object-fit:cover; }
section > .inre > figure img{ max-height:min(72vh, 600px); object-fit:cover; }
figcaption{
  font-family:var(--mono); font-size:.655rem; letter-spacing:.09em;
  color:var(--barr); margin-top:.62rem; line-height:1.5;
}
.morkt figcaption{ color:#8FA5A1; }

/* rutnät av bildkort */
.rutnat{ display:grid; gap:clamp(1.1rem,2.2vw,1.7rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
/* auto-fit räknar fram kolumnantalet ur bredden och bryr sig inte om hur många kort
   som faktiskt finns. Med fyra kort blev det tre på raden och ett ensamt kvar. Antalet
   kort styr därför layouten explicit, så att en rad aldrig blir halvtom. */
@media (min-width:560px){
  .rutnat.tre, .rutnat.fyra{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:900px){
  .rutnat.tre{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .rutnat.fyra{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.kort figure img{ aspect-ratio:4/3; object-fit:cover; }
/* En bild som är mycket bredare än kortformatet klipps till en smal remsa av
   kortens 4:3-ram. Den ligger därför utanför rutnätet, i sina egna proportioner. */
.panorama{ margin-top:clamp(1.1rem,2.2vw,1.7rem); }
.panorama img{ width:100%; height:auto; }
.kort h3{ margin:.85rem 0 .3rem; }
.kort p{ font-size:.965rem; color:var(--barr); }
.morkt .kort p{ color:#B3C4C0; }

/* punktlista med hårfina linjer */
.rader{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linje); }
.morkt .rader{ border-top-color:var(--linje-m); }
.rader li{
  display:grid; gap:.35rem 1.5rem; padding:.95rem 0;
  border-bottom:1px solid var(--linje);
}
.morkt .rader li{ border-bottom-color:var(--linje-m); }
@media (min-width:640px){ .rader li{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); } }

/* samma radsystem som definitionslista, utan omslutande element */
dl.rader{ display:grid; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ dl.rader{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); } }
dl.rader dt{ padding:.95rem 1.5rem .3rem 0; }
dl.rader dd{ padding:0 0 .95rem; border-bottom:1px solid var(--linje); }
@media (min-width:640px){
  dl.rader dt{ padding:.95rem 1.5rem .95rem 0; border-bottom:1px solid var(--linje); }
}
.morkt dl.rader dd, .morkt dl.rader dt{ border-bottom-color:var(--linje-m); }
.rader dt, .rader .n{
  font-family:var(--mono); font-size:.71rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--barr); padding-top:.22rem;
}
.morkt .rader dt, .morkt .rader .n{ color:#93A8A4; }
.rader dd, .rader .v{ margin:0; }

/* kalendarium. Datumet är ankaret, arrangören är den som tar emot anmälan. */
.kal li{ align-items:baseline; }
.kal .n{ font-size:.78rem; letter-spacing:.06em; color:var(--tjara); text-transform:none; font-weight:500; }
.kal .v{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .85rem; }
.kal .v b{ font-family:var(--display); font-weight:500; font-size:1.02rem; letter-spacing:-.01em; }
/* Arrangörens logotyp får en egen kolumn längst till höger, inte en textetikett inne i raden.
   Robert 2026-09-02: "Gärna med logotyper och länkar så att vår hyresgäster får reklam."
   Båda logotyperna är staplade eller liggande i olika grad, så de balanseras mot en gemensam
   ruta i stället för mot en gemensam höjd. Höjd ensam skulle göra den liggande dubbelt så bred. */
.kal .arr{
  display:flex; align-items:center; justify-content:flex-start;
  text-decoration:none; opacity:.8; transition:opacity .18s;
}
.kal .arr img{ width:auto; height:auto; max-height:40px; max-width:124px; display:block; }
.kal .arr:hover{ opacity:1; }
@media (min-width:640px){
  .kal li{ grid-template-columns:minmax(0,11rem) minmax(0,1fr) 132px; align-items:center; }
  .kal .arr{ justify-content:flex-end; }
}
.kal .status{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lader); font-style:normal;
}

/* arrangörskort. Logotyperna finns bara i vit variant hos den ena parten,
   därför ligger sektionen på mörk botten så båda kan visas som de är. */
.arrangorer{ display:grid; gap:clamp(1.6rem,3vw,2.6rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.arrkort{
  display:block; text-decoration:none;
  border:1px solid var(--linje-m); padding:clamp(1.4rem,2.6vw,2rem);
  transition:border-color .18s;
}
.arrkort:hover{ border-color:var(--lader); }
/* logotyperna har olika proportioner. En gemensam optisk höjd, inte en gemensam bredd. */
.arrkort img{ width:auto; height:auto; max-width:min(100%,230px); display:block; }
.arrkort img[src*="vitalisera"]{ max-height:74px; }
.arrkort img[src*="zencoaching"]{ max-height:30px; }
.arrkort p{ margin:1.3rem 0 1rem; font-size:.965rem; color:#B3C4C0; }
.arrkort .lank{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--papper); border-bottom:1px solid var(--linje-m); padding-bottom:.15rem;
}
.arrkort:hover .lank{ border-bottom-color:var(--lader); }

/* stegvis lista. Numret bär ordningen, därför är det synligt och inte dekor. */
.steg{ list-style:none; margin:0; padding:0; counter-reset:steg; }
.steg li{
  counter-increment:steg; position:relative;
  padding:0 0 1.15rem 2.6rem; margin-bottom:1.15rem;
  border-bottom:1px solid var(--linje);
}
.steg li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.steg li::before{
  content:counter(steg); position:absolute; left:0; top:.1rem;
  font-family:var(--mono); font-size:.7rem; font-weight:500; color:var(--lader);
  border:1px solid var(--linje); width:1.75rem; height:1.75rem;
  display:flex; align-items:center; justify-content:center;
}
.steg li b{ font-family:var(--display); font-weight:500; letter-spacing:-.01em; }
.morkt .steg li{ border-bottom-color:var(--linje-m); }
.morkt .steg li::before{ border-color:var(--linje-m); }
@media (min-width:860px){ .steg.bred{ columns:2; column-gap:3rem; } .steg.bred li{ break-inside:avoid; } }

/* upplysningsruta */
.notis{
  border-left:2px solid var(--lader); padding:.15rem 0 .15rem 1.15rem;
  font-size:.965rem; color:var(--barr); max-width:60ch;
}
.morkt .notis{ color:#B3C4C0; }

/* ---------- sidfot ---------- */

footer{ background:var(--vatten); color:#C4D2CE; padding-block:clamp(2.8rem,5vw,4rem); }
footer h2{ color:var(--papper); font-size:1.35rem; margin-bottom:.8rem; }
footer a{ color:var(--papper); }
.fot-rutor{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.fot-slut{
  margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid var(--linje-m);
  font-family:var(--mono); font-size:.655rem; letter-spacing:.1em; text-transform:uppercase; color:#7E9490;
  display:flex; flex-wrap:wrap; gap:.8rem 1.8rem; justify-content:space-between;
}

/* ---------- sidhuvud på undersidor ---------- */

.sidtopp{ padding-block:clamp(2.6rem,5vw,4rem) clamp(1.8rem,3vw,2.6rem); }
.sidtopp h1{ max-width:20ch; margin-bottom:.9rem; text-wrap:balance; }
.sidtopp .ingress{ max-width:52ch; }

.hoppa{
  position:absolute; left:-9999px; top:0;
  background:var(--tjara); color:var(--dim); padding:.7rem 1.1rem;
  font-family:var(--mono); font-size:.72rem; z-index:100;
}
.hoppa:focus{ left:.5rem; top:.5rem; }

/* Prosa. Ett kort stycke utan rubrik eller etikett, i samma storlek som brödtexten.
   Det som skiljer det från ett avsnitt är luften runt omkring, inte typografin.
   Robert 2026-09-04: en avvikande storlek lästes som ett fel, inte som ett val. */
.prosa{ padding-block:clamp(3rem,5.6vw,5rem); }
.prosa p{
  max-width:33rem; margin:0; font-family:var(--brod); font-style:italic;
  font-size:inherit; line-height:1.62; color:var(--tjara);
}
.morkt .prosa p, .prosa.morkt p{ color:#E4E9E3; }

/* Språkval med flaggor. Den valda flaggan står i full styrka, de andra dämpade. */
.sprak{ display:inline-flex; gap:.5rem; margin-left:1.4rem; }
.sprak a{ font-size:1.08rem; line-height:1; text-decoration:none; opacity:.55; filter:saturate(.7); transition:opacity .18s, filter .18s; padding:.2rem .1rem; }
.sprak a:hover, .sprak a[aria-current="true"]{ opacity:1; filter:none; }
@media (max-width:640px){
  .marke{ flex:1 1 auto; }
  .sprak{ margin-left:auto; order:0; }
  .meny{ order:1; }
}

/* Röster. Riktiga omdömen med avsändare, och därför ett citattecken. Husets egen prosa
   får inget, den är ingen annans ord. */
.roster{ display:grid; gap:clamp(1.6rem,3vw,2.6rem); }
@media (min-width:820px){ .roster{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.roster blockquote{ margin:0; position:relative; padding-top:2.3rem; }
.roster blockquote::before{
  content:"\201D"; position:absolute; top:-.35rem; left:-.08em;
  font-family:var(--brod); font-size:4.2rem; line-height:1; color:var(--lader); opacity:.9;
}
.roster p{ font-family:var(--brod); font-style:italic; font-size:1.06rem; line-height:1.55; margin:0 0 .8rem; }
.roster cite{ font-family:var(--mono); font-style:normal; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--barr); }
.morkt .roster cite{ color:#B3C4C0; }