/* ==========================================================================
   Ugeplanen: "Nye statics hver mandag på autopilot" (arbejdskopien /forside2)
   Emils handoff "mandag-ugeplan (1e)" (3.10.2026), sat ind i stedet for den
   gamle ugen-sektion. Bygges af scripts/byg-forside2.js og køres af
   /nyt-site/ugeplan.js.

   Fire faner med håndskrift (Mandag, Tirsdag, Onsdag, Tor–fre) skifter selv.
   Den valgte fane får en orange streg, der fyldes, mens dagen vises. Under
   fanerne står dagens overskrift, tekst og en håndskrevet note til venstre og
   otte statics til højre. De er dæmpede og står klart på mandag, som er
   leveringsdagen. Brødteksten ved overskriften er taget ud (Emil).

   Brand-regler fra handoffet: orange kun til stregen i den valgte fane,
   fanerne i håndskrift (Caveat 700), noten i kuglepen-blå. Sektionen står på
   sidens hvide (Emil, 3.10.2026): handoffets prikkede papir og de revne
   kanter er taget af, så der ikke står to revne kanter lige efter hinanden
   under anmeldelserne.

   Størrelser kommer fra grundsættet. Kuglepen-farven, håndskriften og stregen
   under fanerne findes ikke i grundsættet endnu og står som egne variabler.
   ========================================================================== */

.ugeplan {
  --ugeplan-pen: #1B2A4A;                 /* håndskrevet note: kuglepen-blå */
  --ugeplan-haand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --ugeplan-linje: rgb(42 31 26 / .16);   /* stregen under fanerne */
  --ugeplan-tyk: var(--space-3xs);        /* stregens tykkelse: 3 -> 4 */
  position: relative; background: var(--bg); color: var(--text); padding-block: var(--section-space);
}
.ugeplan .ugeplan__titel { margin: 0 0 var(--stack-block); font-size: var(--type-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-h2); font-weight: var(--weight-semi); color: var(--text); }

/* --- Fanerne ------------------------------------------------------------------- */
.ugeplan__faner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.ugeplan__fane { appearance: none; position: relative; margin: 0; padding: 0 0 var(--space-s); border: 0; border-bottom: var(--ugeplan-tyk) solid var(--ugeplan-linje); border-radius: 0; background: none; text-align: left; cursor: pointer;
  font: 700 var(--text-3xl)/1.1 var(--ugeplan-haand); color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.ugeplan__fane:hover, .ugeplan__fane[aria-selected="true"] { color: var(--text); }
/* Den orange streg fyldes, mens dagen er valgt. Står sektionen stille, er den fyldt. */
.ugeplan__streg { position: absolute; left: 0; bottom: calc(var(--ugeplan-tyk) * -1); width: 0; height: var(--ugeplan-tyk); background: var(--accent); }
.ugeplan__fane[aria-selected="true"] .ugeplan__streg { animation: ugeplan-fyld var(--ugeplan-dur, 3200ms) linear forwards; }
.ugeplan.er-stille .ugeplan__fane[aria-selected="true"] .ugeplan__streg { animation: none; width: 100%; }
@keyframes ugeplan-fyld { to { width: 100%; } }

/* --- Dagen: teksten til venstre, de otte statics til højre ---------------------- */
.ugeplan__krop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; margin-top: var(--space-xl); }
.ugeplan__tekst { display: grid; gap: var(--space-s); align-content: center; justify-items: start; transition: opacity .28s var(--ease); }
.ugeplan__tekst.er-ude { opacity: 0; }
.ugeplan .ugeplan__dag { margin: 0; font-size: var(--type-stat); line-height: 1.1; letter-spacing: var(--tracking-h2); font-weight: var(--weight-semi); color: var(--text); }
.ugeplan .ugeplan__om { margin: 0; max-width: 32rem; font-size: var(--type-lead); line-height: var(--leading-body); color: var(--text-body); }
.ugeplan .ugeplan__note { margin: var(--space-2xs) 0 0; font: 700 var(--text-2xl)/1.1 var(--ugeplan-haand); color: var(--ugeplan-pen); transform: rotate(-1.5deg); transform-origin: left center; }
.ugeplan__statics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); opacity: .35; transition: opacity .4s var(--ease); }
.ugeplan__statics.er-klar { opacity: 1; }
.ugeplan .ugeplan__statics img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-control); background: var(--line); }

/* Smalle skærme: alt i én spalte. Under 860 px har .wrap ingen luft i siderne, så sektionen giver den selv. */
@media (max-width: 860px) {
  .ugeplan { padding-inline: var(--space-l); }
  .ugeplan__krop { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .ugeplan__fane { font-size: var(--text-2xl); }
}