/* ==========================================================================
   FAQ som kartotekskort (arbejdskopien /forside2, kladde)
   Emils handoff "faq-kartotek (1e)" (3.10.2026), sat ind i stedet for den
   gamle FAQ. Bygges af scripts/byg-forside2.js og køres af
   /nyt-site/faq-kartotek.js.

   Spørgsmålene står som faner til venstre. Det valgte svar ligger på et
   linjeret kort til højre med en lille stak papir bag sig, et stykke tape og
   en håndskrevet underskrift.

   Brand-regler fra handoffet: håndskrift (Caveat 700) i kuglepen-blå til
   numre og underskrift, beige tape, linjeret kort, orange kun til hover på
   linket. Sektionen står på sidens hvide som sektionerne omkring den;
   handoffets prikkede papir er ikke med.

   Størrelser kommer fra grundsættet. Kortets papir og linjer, tapen,
   kuglepen-farven og håndskriften findes ikke i grundsættet endnu og står
   som egne variabler øverst.
   ========================================================================== */

.kartotek {
  --kartotek-kort: #FFFDF8;                 /* kortets papir */
  --kartotek-linje: #E6DFD2;                /* de trykte linjer */
  --kartotek-hovedlinje: #E3A283;           /* stregen under kortets hoved */
  --kartotek-pen: #1B2A4A;                  /* håndskrift: kuglepen-blå */
  --kartotek-tape: rgba(232,220,196,.95);   /* beige malertape */
  --kartotek-haand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --kartotek-skrift: var(--text-2xl);                 /* svarets skrift: 19 -> 29 */
  --kartotek-hoejde: calc(var(--kartotek-skrift) * 1.5);   /* afstanden mellem linjerne */
  --kartotek-luft: var(--space-xl);                   /* kortets luft: 31 -> 48 */
  padding-block: var(--section-space); background: var(--bg); color: var(--text);
}
.kartotek__gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: center; }

/* --- Venstre: overskriften, fanerne og linket til booking ----------------------- */
.kartotek .kartotek__titel { margin: 0 0 var(--space-l); font-size: var(--type-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-h2); font-weight: var(--weight-semi); color: var(--text); }
.kartotek__faner { display: grid; gap: var(--space-2xs); }
.kartotek__fane { appearance: none; display: flex; align-items: center; gap: var(--space-s); width: 100%; margin: 0; padding: var(--space-s) var(--space-m); border: 1.5px solid transparent; border-radius: var(--radius-control); background: none; text-align: left; cursor: pointer;
  font: var(--weight-regular) var(--type-body)/1.35 var(--font); letter-spacing: -.015em; color: var(--text); transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.kartotek__fane:hover { background: var(--bg-alt); }
.kartotek__fane[aria-selected="true"] { background: var(--white); border-color: var(--text); font-weight: var(--weight-semi); }
.kartotek__nr { flex: none; width: var(--space-l); font: 700 var(--text-xl)/1 var(--kartotek-haand); letter-spacing: 0; color: var(--text-muted); }
.kartotek__fane[aria-selected="true"] .kartotek__nr { color: var(--kartotek-pen); }
.kartotek .kartotek__mere { margin: var(--space-m) 0 0; font-size: var(--type-body); color: var(--text-body); }
.kartotek__mere a { font-weight: var(--weight-semi); color: var(--text); text-decoration: underline; text-underline-offset: .28em; }
.kartotek__mere a:hover { color: var(--accent-strong); }
/* Svarene står i HTML'en ved hvert spørgsmål, så de også findes uden script; scriptet lægger det valgte på kortet. */
.kartotek__kilde { display: none; }

/* --- Højre: kortet med stakken bag sig ------------------------------------------ */
.kartotek__stak { position: relative; }
.kartotek__ark { position: absolute; background: var(--white); border: 1px solid var(--line-strong); }
.kartotek__ark--3 { inset: var(--space-m) 0 0 var(--space-m); transform: rotate(3deg); box-shadow: 0 10px 20px -16px rgb(10 11 13 / .3); }
.kartotek__ark--2 { inset: var(--space-xs); transform: rotate(1.5deg); }
.kartotek__kort { position: relative; display: flex; flex-direction: column; min-height: calc(var(--kartotek-hoejde) * 9 + var(--kartotek-luft) * 2); margin: 0 var(--space-m) var(--space-m) 0; padding: var(--kartotek-luft); background: var(--kartotek-kort); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -36px rgb(42 31 26 / .5); transform: rotate(-1deg); overflow: hidden; }
.kartotek__kort::before { content: ""; position: absolute; top: calc(var(--space-xs) * -1); left: var(--kartotek-luft); width: var(--space-3xl); height: var(--space-m); background: var(--kartotek-tape); transform: rotate(-4deg); }
.kartotek__indhold { flex: 1; display: flex; flex-direction: column; transition: opacity .2s var(--ease); }
.kartotek__indhold.er-ude { opacity: 0; }
.kartotek .kartotek__hoved { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-m); padding-bottom: var(--space-s); border-bottom: 2px solid var(--kartotek-hovedlinje); }
.kartotek__q { font-size: var(--type-lead); line-height: 1.3; letter-spacing: var(--tracking-h3); font-weight: var(--weight-semi); color: var(--text); }
.kartotek__knr { flex: none; font: 700 var(--text-2xl)/1 var(--kartotek-haand); color: var(--kartotek-pen); }
/* Svaret står på linjerne: hver tekstlinje er lige så høj som afstanden mellem linjerne, og linjerne er
   rykket lidt op, så de ligger lige under bogstaverne. Linjerne går helt ud til kortets kanter og ned til bunden. */
.kartotek__svar { flex: 1; margin: var(--space-m) calc(var(--kartotek-luft) * -1) calc(var(--kartotek-luft) * -1); padding: 0 var(--kartotek-luft) calc(var(--kartotek-luft) + var(--kartotek-hoejde));
  font-size: var(--kartotek-skrift); line-height: var(--kartotek-hoejde); letter-spacing: var(--tracking-h3); font-weight: var(--weight-medium); color: var(--text);
  background-image: repeating-linear-gradient(transparent 0 calc(var(--kartotek-hoejde) - 1px), var(--kartotek-linje) calc(var(--kartotek-hoejde) - 1px) var(--kartotek-hoejde));
  background-position: 0 calc(var(--kartotek-skrift) * -.21); }
.kartotek .kartotek__svar p { margin: 0; text-wrap: wrap; }
.kartotek .kartotek__underskrift { position: absolute; right: var(--kartotek-luft); bottom: var(--space-l); margin: 0; font: 700 var(--text-2xl)/1 var(--kartotek-haand); color: var(--kartotek-pen); }

/* Smalle skærme: fanerne først, kortet under. Under 860 px har .wrap ingen luft i siderne, så sektionen giver den selv. */
@media (max-width: 860px) {
  .kartotek { padding-inline: var(--space-l); }
  .kartotek__gitter { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}