/* Tidslinje-karrusel. Vandret scroll-snap frem for et 22-punkts vertikalt
 * forløb, så sektionen fylder det samme på mobil som på desktop.
 * Ingen autoplay. Sporet er selv fokuserbart, så piletasterne scroller det
 * uden JavaScript; pilene er en tilføjelse, ikke en forudsætning.
 */
.timeline{background:var(--surface-deep);color:#EAF3EC}
/* Samme indholdsbredde som resten af siden: max-width + margin:auto centrerer,
 * og gutteren er en almindelig padding. Rettet ved implementeringen — se
 * kommentaren ved breakpointet nedenfor. */
.timeline__inner{max-width:var(--content-max);margin:0 auto;padding:var(--space-12) var(--space-4)}
.timeline__head{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--measure);padding-right:var(--space-4);margin-bottom:var(--space-6)}
.timeline__head h2{margin:0;font-family:var(--font-heading);font-size:var(--text-h2);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--heading-tracking,0)}
.timeline__head p{margin:0;color:var(--text-on-light)}
.timeline__track{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--space-4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:0;padding:var(--space-1) 0 var(--space-4) 0}
.timeline__track:focus-visible{outline:2px solid var(--focus-on-light);outline-offset:4px}
.tl-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--ink-0);border:1px solid transparent;border-top:4px solid var(--sun-500);border-radius:20px;overflow:hidden}
.tl-card--todo{border:1px dashed var(--border-strong);border-top:4px solid var(--sun-500)}
.tl-card__img{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,#EDE7DC 0 12px,#E2DACB 12px 24px);position:relative}
.tl-card__img::after{content:attr(data-label);position:absolute;left:12px;bottom:12px;right:12px;font:400 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;color:#4E574F}
.tl-card__body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) var(--space-6) var(--space-6)}
.tl-card p.tl-card__date{font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--sun-700)}
.tl-card h3{margin:0;color:var(--green-900);font-family:var(--font-heading);font-size:21px;font-weight:var(--weight-bold);line-height:1.2;letter-spacing:var(--heading-tracking,0)}
.tl-card p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--text-on-light)}
.timeline h2{color:#EAF3EC}
.tl-card__todo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#4E574F}
.timeline__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding-right:var(--space-4);margin-top:var(--space-4)}
.tl-nav{display:flex;gap:var(--space-3)}
.tl-nav button{width:48px;height:48px;border-radius:50%;border:2px solid var(--cta-text);background:transparent;color:var(--cta-text);font-size:18px;line-height:1;cursor:pointer}
.tl-nav button:hover{background:var(--cta-text);color:var(--cta-fg)}
.timeline__hint{margin:0;font-size:var(--text-sm);color:#A9C2B2}
.timeline__note{margin:var(--space-6) var(--space-4) 0 0;font-size:var(--text-sm);color:#A9C2B2;max-width:var(--measure)}
@media (min-width:768px){
  /* Var: padding-left:max(var(--space-6), calc((100% - var(--content-max)) / 2)).
   * Procentpadding regner mod forældrens bredde, altså viewporten — og sammen
   * med max-width + margin:auto blev sektionen indrykket to gange og dermed
   * smallere, jo bredere skærmen var. Prototypen satte 24px inline for at
   * omgå det; her er det rettet i kilden. */
  .timeline__inner{padding:var(--space-24) var(--space-6)}
  .timeline__head{margin-bottom:var(--space-8)}
  .timeline__track{grid-auto-columns:calc((100% - var(--space-8)) / 3.2);padding-right:0}
  }