/* ============================================================
   stil-kirke-gudstjeneste.css — gudstjenestens oversikt
   ============================================================
   Hører til app-kirke-gudstjenesteflate.js. Egen fil, som all
   Church-lab-CSS (AGENTS.md § Church-lab): en ny fil merger alltid rent
   mot upstream.

   BEVISST LITEN. Kortene bruker Eventlabs egne .evo-grid/.evo-kort, så
   ramme, radius, skygge, mørk modus og innfalls-animasjonen følger med
   uten en eneste regel her. Det som står igjen er to ting Eventlab ikke
   har et navn for: bredden på de fire kortene, og radene inni dem.

   HVORFOR KLASSER OG IKKE style="grid-column: span 6"
   .evo-grid stables på ≤760 px med «.evo-grid > * { grid-column: span 12 }».
   En inline-stil ville vunnet over den media-spørringen, og kortene ville
   stått i tre kolonner på en telefon uten at noen så det på en stor skjerm.
   Bredden må derfor være en klasse.

   INGEN HARDKODEDE FARGER. Alt er tokens fra css/stil-kirke-tema.css.
   ============================================================ */

/* ── Bredder ────────────────────────────────────────────────────────────
   Mobil først: alt står i full bredde, og først fra 761 px deles rutenettet.
   Rekkefølgen er den en menighet spør i — når, hvem, hva, beskjeder. */
.kgt-naar,
.kgt-tjenester,
.kgt-kjoreplan,
.kgt-beskjeder { grid-column: span 12; }

@media (min-width: 761px) {
  .kgt-naar       { grid-column: span 5; }
  .kgt-tjenester  { grid-column: span 7; }
  .kgt-kjoreplan  { grid-column: span 7; }
  .kgt-beskjeder  { grid-column: span 5; }
}

/* ── Korthoder ─────────────────────────────────────────────────────────── */
.kgt-hdr { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kgt-hdr h3 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }
.kgt-tall { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── «Når» ─────────────────────────────────────────────────────────────── */
.kgt-dato { font-size: 22px; font-weight: 680; line-height: 1.2; color: var(--text); }
.kgt-kl { margin-top: 6px; font-size: 15px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kgt-navn { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

/* ── Lister (tjenester, kjøreplan, beskjeder) ──────────────────────────── */
.kgt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kgt-rad { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; }
.kgt-rad:first-child { border-top: 0; }
.kgt-rad-hva { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.kgt-rad-hvem { color: var(--text-muted); text-align: right; }
.kgt-kl-celle { flex-shrink: 0; width: 44px; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* Åpen tjeneste — ingen er satt opp ennå. Det er spørsmålet som avgjør om
   søndagen går rundt, så den skal være det øyet finner først. */
.kgt-apen .kgt-rad-hvem { color: var(--amber); font-weight: 600; }

/* ── Beskjeder ─────────────────────────────────────────────────────────────
   Beskjedene har to kilder: Eventlabs kunngjøringer (fritekst, alltid «info»)
   og Church-labs kirke_beskjed fra avviklingspulten, som har et nivå. Nivået
   bæres av en kantstrek til venstre, ikke av tekstfarge: teksten skal være
   like lesbar uansett, og en rød setning i en liste leses som en feilmelding. */
.kgt-rad-hva { display: flex; flex-direction: column; gap: 2px; }
.kgt-detalj { font-size: 12px; color: var(--text-muted); }

/* -adaptiv, ikke den faste varianten: streken ligger rett på kortflaten, ikke
   på en tintet pille. --st-feil-tekst står #B42318 i begge temaer og blir mudder
   mot et mørkt kort; -adaptiv bytter til #F87171 / #FCD34D der. Samme skille
   docs/DESIGN.md §2 beskriver, og som --amber på «Mangler» over følger. */
.kgt-niva-obs,
.kgt-niva-feil { padding-left: 10px; border-left: 3px solid transparent; margin-left: -13px; }
.kgt-niva-obs  { border-left-color: var(--st-obs-tekst-adaptiv); }
.kgt-niva-feil { border-left-color: var(--st-feil-tekst-adaptiv); }

/* ── Tomtilstander ─────────────────────────────────────────────────────── */
.kgt-tom { font-size: 13px; color: var(--text-muted); padding: 6px 0; }

/* ── Progressiv avdekking ──────────────────────────────────────────────────
   En kjøreplan kan ha tjue ledd og en menighet mange tjenester. Kortform
   betyr kortform: resten ligger bak en <details>, lukket som standard.
   Remi vil ha færre trykk til det han trenger, ikke lengre scroll. */
.kgt-mer { margin-top: 2px; }
.kgt-mer > summary { cursor: pointer; padding: 8px 0 2px; font-size: 12.5px; color: var(--primary); font-weight: 600; list-style: none; }
.kgt-mer > summary::-webkit-details-marker { display: none; }
.kgt-mer > summary::before { content: '+ '; }
.kgt-mer[open] > summary::before { content: '– '; }
.kgt-mer > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }