/* Lyngdal by (/steder/lyngdal-by/ og /en/places/lyngdal-by/): det som er
   eget for denne siden. Resten er de felles stedsklossene i
   village-editorial.css. */

/* Ronnys sitat i «Lekne Lyngdal»: lys motpart til sitatveggen med
   portrett (v-quote--wall__rad), som Silje har lenger ned. Hver person
   har bilde ett sted, og der er det et ordentlig sitat — ikke et
   portrett ved et vanlig avsnitt. Portrettet er bare 190 px i kilden,
   så sirkelen stopper på 160. */
.lb-sitat {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  max-width: 960px;
  /* Like mye luft under som over: sitatet avslutter kapitlet, og neste
     kapittel skal ikke henge i det. */
  margin: var(--space-3xl) auto var(--space-4xl);
}
.lb-sitat__portrett {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.lb-sitat__portrett img {
  display: block;
  width: clamp(120px, 6rem + 4vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--aksent-tekst);
}
.lb-sitat__kreditt {
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
}
.lb-sitat__sitat { margin: 0; }
.lb-sitat__tekst {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
  margin: 0;
}
.lb-sitat__hvem {
  display: block;
  margin-top: var(--space-md);
  font-style: normal;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--aksent-tekst);
}
@media (max-width: 700px) {
  .lb-sitat { flex-direction: column; text-align: center; }
}

/* Skoleboksen her har bare antall, ingen skolelister: tallene er
   poenget, så de står store i displayskriften, ikke som en liten
   trinn-etikett. */
#oppvekst .kv-darkcard__row { align-items: baseline; }
#oppvekst .kv-darkcard__row em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--text-2xl);
  line-height: var(--linje-tett);
  color: var(--aksent-tekst-mork);
}

/* Boligoversikten: kildens «BOKS» med to grupper. Den er oppslag for
   den spesielt interesserte, ikke en del av artikkelen man leser seg
   gjennom (3. okt 2026). Derfor egen flate med kant, etiketten
   «Faktaboks», gruppene side om side og en grad mindre skrift enn
   brødteksten rundt. */
.lb-bolig {
  max-width: 1060px;
  margin: var(--space-4xl) auto;
  padding: var(--space-2xl);
  background: var(--color-sand-lys);
  border: 1px solid var(--color-sand);
  border-radius: 18px;
}
.lb-bolig__topp {
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-sand);
}
/* Etiketten står på sandflaten, ikke på krem. Aksent-tokenet måler
   4,49:1 der (axe i deployen, 4. okt 2026) og faller under AA; dempet
   tekst måler 5,41. En etikett: grad + versaler + sperring. */
.lb-bolig__etikett {
  margin: 0 0 var(--space-xs);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  line-height: var(--linje-etikett);
  text-transform: uppercase;
  color: var(--tekst-dempet);
}
.lb-bolig__hode {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
}
.lb-bolig__note {
  margin: var(--space-xs) 0 0;
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet);
}
.lb-bolig__grupper {
  display: grid;
  gap: var(--space-2xl);
}
@media (min-width: 900px) {
  .lb-bolig__grupper { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
}
.lb-bolig__tittel {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
}
.lb-bolig__ingress {
  margin: 0 0 var(--space-md);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet);
}
/* Registeret: ett område per linje med hårstrek imellom, navnet uthevet
   foran beskrivelsen som i kilden. */
.lb-bolig__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lb-bolig__liste li {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-sand);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
}
.lb-bolig__liste strong { font-weight: 700; }
@media (max-width: 768px) {
  .lb-bolig { padding: var(--space-xl) var(--space-lg); margin-inline: var(--space-md); }
}

/* Lenken til Lyngdal Bys medlemsliste: kildens oppfordring som et valg.
   Hele kortet er lenken; pila sier at den går ut av siden. Lys flate med
   hårstrek, så den ikke konkurrerer med de mørke boksene på siden. */
.lb-utlenke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: 760px;
  margin: var(--space-xl) auto var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--surface-card-light);
  border: 1px solid var(--color-sand);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.lb-utlenke:hover { border-color: var(--aksent-tekst); transform: translateY(-2px); }
.lb-utlenke:focus-visible { outline: 2px solid var(--aksent-tekst); outline-offset: 3px; }
.lb-utlenke__tekst { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.lb-utlenke__etikett {
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--aksent-tekst);
}
.lb-utlenke__tittel {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
}
.lb-utlenke__meta {
  font-size: var(--etikett-stor);
  line-height: var(--linje-etikett);
  color: var(--tekst-dempet);
}
.lb-utlenke__pil {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-utility);
  color: var(--color-text-inverse);
  font-size: var(--text-lg);
  transition: background 0.2s ease;
}
.lb-utlenke:hover .lb-utlenke__pil { background: var(--aksent-tekst); }
@media (prefers-reduced-motion: reduce) {
  .lb-utlenke, .lb-utlenke__pil { transition: none; }
  .lb-utlenke:hover { transform: none; }
}

/* De to sticky-scenene (Sørlandsbadet og Svenevik): boksen som glir opp
   over bildet har egen flate, og bildet skal synes rundt den. Derfor ingen
   bakgrunn her, bare luft over og under boksen. */
.lb-over {
  /* Mer luft under enn over: bildet skal synes en stund etter at boksen
     har passert, før neste kapittel tar over. Kapitlet etter scenen får
     husets luft (v-chapter--etter-mork, 128 px). */
  padding: var(--space-3xl) var(--space-xl) var(--space-5xl);
}
.lb-over > .v-feature-box,
.lb-over > .lb-bolig { margin-top: 0; margin-bottom: 0; }
/* Boksen er smalere enn skjermen, så bildet bak må fylle hele høyden.
   Med den vanlige 80vh-høyden ble det en stripe av sidebunnen under
   bildet mens boksen gled over. To klasser, så den slår
   .v-spread--cinematic i village-editorial.css. */
.v-spread--cinematic.lb-scenebilde { height: 100vh; max-height: none; }
/* Bildeteksten i scenene: en stripe nederst på bildet når scenen begynner,
   i sidens flyt, ikke i det faste laget, så den scroller vekk foran boksen
   (4. okt 2026). Ingen slør og ingen hvit tekst på fotoet (Marion, 7. okt:
   «aldri mørke filter»): samme stripe som .v-spread--cinematic. */
.lb-scenetekst {
  position: absolute;
  z-index: 1;
  top: 100vh;
  transform: translateY(-100%);
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-cream);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm);
  font-size: var(--etikett);
  color: var(--color-text-muted);
}
.lb-scenetekst__tittel {
  font-size: var(--etikett-stor);
  color: var(--color-midnight);
}
.lb-scenetekst__kreditt { font-size: var(--etikett); }
@media (max-width: 700px) {
  .lb-scenetekst { padding-inline: var(--space-lg); }
}

@media (max-width: 768px) {
  .lb-over { padding: var(--space-2xl) 0; }
}

/* De store arrangementene: kildens tre navn, løftet til et panel med
   bilde fra Byfesten, måned, én linje om hva det er og lenke. Mørk flate
   som sidens andre bokser; bildet fyller venstre spalte. */
.lb-arr {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  max-width: 1060px;
  margin: var(--space-4xl) auto;
  background: var(--surface-utility);
  border-radius: 18px;
  overflow: hidden;
}
.lb-arr__bilde { position: relative; margin: 0; min-height: 100%; }
.lb-arr__bilde img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.lb-arr__kreditt {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-sm);
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  color: var(--color-warm-white);
  /* Egen bunn: bildet er lyst nederst (festteltet), og skyggen alene gav
     1,6:1. Med bunnen holder kreditten uansett hvordan bildet beskjaeres. */
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-midnight) 72%, transparent);
}
.lb-arr__innhold { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
.lb-arr__etikett {
  margin: 0 0 var(--space-xs);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  line-height: var(--linje-etikett);
  text-transform: uppercase;
  color: var(--aksent-tekst-mork);
}
.lb-arr__tittel {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-inverse);
}
.lb-arr__liste { list-style: none; margin: 0; padding: 0; }
.lb-arr__liste li + li { border-top: 1px solid rgba(250, 248, 245, 0.14); }
/* Hver rad er lenken: måned over navnet, beskrivelsen under, pila til
   høyre. Hele raden er klikkflaten. */
.lb-arr__rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-lg);
  padding: var(--space-md) 0;
  color: inherit;
  text-decoration: none;
}
.lb-arr__maaned {
  grid-column: 1;
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-md);
  line-height: var(--linje-etikett);
  text-transform: uppercase;
  color: var(--tekst-dempet-mork);
}
.lb-arr__navn {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-inverse);
}
.lb-arr__tekst {
  grid-column: 1;
  margin-top: var(--space-xs);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet-mork);
}
.lb-arr__pil {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(250, 248, 245, 0.3);
  color: var(--color-text-inverse);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lb-arr__rad:hover .lb-arr__navn { text-decoration: underline; text-underline-offset: 4px; }
.lb-arr__rad:hover .lb-arr__pil { background: var(--aksent-tekst-mork); border-color: var(--aksent-tekst-mork); color: var(--surface-utility); }
.lb-arr__rad:focus-visible { outline: 2px solid var(--aksent-tekst-mork); outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .lb-arr__pil { transition: none; } }
@media (max-width: 800px) {
  .lb-arr { grid-template-columns: 1fr; margin-inline: var(--space-md); }
  .lb-arr__bilde { aspect-ratio: 4 / 3; }
  .lb-arr__innhold { padding: var(--space-xl) var(--space-lg) var(--space-lg); }
}


/* Mobil: blokkene i kapitlene får samme luft som panelene i
   village-editorial.css (48 px i stedet for 64–96). */
@media (max-width: 767px) {
  .lb-sitat,
  .lb-bolig,
  .lb-arr { margin-block: var(--space-2xl); }
}