/* ============================================================
   LOS-STRIPE (felleskomponent, LosStripe.astro)
   Slank CTA-stripe med lister-losen: settes inn midt på sidene
   (kommunesider, forsiden) og gjentar konverteringen uten å
   konkurrere med innholdsseksjonene. Fra Claude Design
   («Los Stripe», forfinet 1A-runden).
   ============================================================ */

.ls-stripe {
  position: relative;
  background: var(--kv-mork, var(--surface-utility));
  padding: 0 clamp(20px, 4vw, 56px);
}
.ls-stripe__hairline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-aurora), rgba(125, 211, 192, 0.12));
}
/* Speilet linje i bunn: en strek på bare én side understreker skjøten mellom
 * to seksjoner. Med begge rammer den inn stripa som et eget element.
 * Ligger på .ls-stripe, ikke på hårlinja — den er selv bare 1 px høy. */
.ls-stripe::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(125, 211, 192, 0.12), var(--color-aurora));
  pointer-events: none;
}
.ls-stripe__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 32px);
  /* Naboseksjonene har 101 px vertikal luft; med 26 px leste stripa som et
   * farget mellomrom framfor et element. Fortsatt tydelig slankere enn en
   * seksjon, men nå med nok rom til at innholdet er noe. */
  padding: clamp(30px, 3.6vw, 46px) 0;
}
/* flex: 1 1 lar teksten brekke i stedet for å kreve full innholdsbredde og
 * dytte knappen ned på egen linje. min-width: 0 på begge ledd — uten den på
 * avsnittet krymper ikke flex-barnet under sin naturlige bredde. */
.ls-stripe__lede {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  flex: 1 1 320px;
  min-width: 0;
}
.ls-stripe__avatar {
  /* Ansiktet er det følelsesmessige ankeret her. På 72 px var det det minste
   * visuelle punktet mellom to seksjoner med bilder på 305 og 499 px. */
  width: clamp(84px, 8vw, 104px);
  height: clamp(84px, 8vw, 104px);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(125, 211, 192, 0.45);
}
.ls-stripe__text {
  margin: 0;
  font-family: var(--font-display);
  /* Sto på 23 px — mindre enn brødteksten (24 px) på begge sider, altså
   * typografisk underordnet avsnittene rundt. Nå samme trinn som
   * Kysten-sitatet rett over, på nettstedets skala. */
  font-size: var(--brod-loft);
  line-height: var(--linje-tittel);
  min-width: 0;
  color: var(--color-cream);
}
/* Ingen nowrap: den ble laget for korte «Snakk med en lister-los.» og
 * sprengte linja da uthevingen ble en hel setning. La teksten brekke
 * naturlig, så beholder knappen plassen sin ved siden av. */
.ls-stripe__text em { font-style: italic; color: var(--color-aurora); }
.ls-stripe__cta {
  display: inline-flex;
  align-items: center;
  /* Brytes teksten, skal linjene være like lange — ikke ett ord alene
     («Slik kommer du i / gang») på en smal telefon. */
  text-wrap: balance;
  gap: 10px;
  flex: 0 0 auto;
  background: var(--color-gold-mork);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-weight: 700;
  /* Var 15 px mot FINN-knappens 16 px lenger ned. Den tidligste
   * oppfordringen skal ikke være den svakeste. */
  font-size: var(--text-sm);
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
  /* Midtstiller knappen naar raden brytes og den staar alene paa sin linje
     (mobil, Tom 13. sep 2026). Ved siden av teksten tar teksten all ledig
     plass (flex 1 1), saa margen blir 0 og desktop er uendret. */
  margin-inline: auto;
}
.ls-stripe__cta:hover { background: #8A4038; color: var(--color-warm-white); }

/* ------------------------------------------------------------
   Lys variant — stedssidene. Der er stripa buffer mellom to mørke
   seksjoner (karriere og tjenester), og en tredje mørk flate på rad
   ble for mye (Toms innspill 2. sep). Samme oppbygging, invertert
   flate; knappen er uendret — den bærer kontrasten i begge varianter.
   ------------------------------------------------------------ */
.ls-stripe--lys {
  background: var(--surface-story);
}
.ls-stripe--lys .ls-stripe__text {
  color: var(--color-midnight);
}
.ls-stripe--lys .ls-stripe__text em {
  color: var(--aksent-tekst);
}
/* Ingen grønne hårlinjer på den lyse flaten: de er laget for den mørke
 * stripa, og på lys bunn leste de som en feil (Tom 7. okt 2026). Flaten
 * skiller seg fra sidegrunnen med farge og luft. */
.ls-stripe--lys .ls-stripe__hairline,
.ls-stripe--lys::after { display: none; }

/* Stedssidene: lys flate med luft over og under, så sidegrunnen skiller
   stripa ut som et pusterom. Furugrønn (fra 3. sep) passet ikke med resten
   av sidene (Marion 7. okt 2026); Tom valgte den lyse etter å ha sett den
   ved siden av den mørke (den mørke fløt sammen med «Beliggenhet» rett
   under). */
.ls-stripe--luft { margin: clamp(48px, 6vw, 88px) 0; }

/* Mobil: pusterommet rundt den lyse stripa krympes med resten av
   seksjonsluften; 48 px tom sidegrunn på hver side leste som et hull. */
@media (max-width: 767px) {
  .ls-stripe--luft { margin-block: var(--space-lg); }
}