/* lanekalkulator.css — annonseflaten med lånekalkulator.
 *
 * Markupen skrives av js/lanekalkulatorkort.js, dataene ligger i
 * data/annonselenker.json, og js/lanekalkulator.js kobler på kontrollene.
 * Lastes bare av sider som faktisk har kalkulatoren, som annonsekort.css.
 *
 * ============================================================
 * SAMME FLATE SOM ANNONSEKORTET, MED VILJE
 * ============================================================
 * Fylt marineblått, hvit logoboks, gull knapp. Det er den ene flaten
 * redaksjonelt innhold aldri deler (dokumentasjon/artikkelmal.md), og en
 * leser som har sett annonsekortet på lånesidene skal kjenne igjen denne
 * som samme type ting. Prototypen kom med oransje og Poppins; det ble
 * ikke tatt inn, fordi paletten er nettstedets og skript/palett.mjs
 * stopper bygget på farger utenfor den.
 *
 * Skyvekontrollen er den fra .kalk på lånesidene, snudd for mørk flate:
 * fyllet og tommelens ring i gull, tommelen hvit. Samme geometri (36 px
 * tommel i et 44 px høyt trykkfelt), samme grunner, se side-forbrukslan.css.
 */

.lkal{margin-block:var(--luft-blokk);min-width:0;
  container-type:inline-size;container-name:lkal}
/* «Annonse» over flaten. Liten, versaler, dempet — som .amerk under
   knappen, men på lys grunn, så den bruker --muted. */
.lkal-merk{display:block;font-size:var(--tekst-xs);color:var(--muted);
  letter-spacing:.07em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 560;margin:0 0 .375rem}
.lkal-kort{background:var(--spruce);color:var(--on-spruce);
  border-radius:10px;padding:1.25rem 1.25rem 1.125rem;
  display:grid;gap:1rem;min-width:0}

/* ---------- hodet: logo og overskrift ---------- */
.lkal-hode{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;min-width:0}
/* Samme logoboks som annonsekortet: fast, hvit, object-fit:contain. */
.lkal-logo{display:block;box-sizing:border-box;flex:0 0 auto;
  inline-size:6.5rem;block-size:2.75rem;object-fit:contain;object-position:center;
  background:#fff;border-radius:6px;padding:.3125rem .5rem}
.lkal-logo--tekst{position:relative;display:flex;align-items:center;justify-content:center;
  color:var(--spruce);font-size:var(--tekst-sm);
  font-variation-settings:"wdth" 84,"wght" 700;overflow:hidden;text-align:center;line-height:1.1}
/* .brod h3 har margin og maks-bredde for løpende tekst. Her er h3 en
   korttittel og skal ikke arve dem. */
.brod .lkal-h,.lkal-h{margin:0;max-width:none;flex:1 1 12rem;min-width:0;
  font-size:var(--tekst-lg);color:var(--on-spruce);
  font-variation-settings:"wdth" 84,"wght" 720;overflow-wrap:anywhere;line-height:1.2}

/* ---------- det faste eksempelet, uten skript ---------- */
.brod .lkal-fast,.lkal-fast{margin:0;font-size:var(--tekst-sm);line-height:1.5;
  color:var(--on-spruce-dim)}
.brod .lkal-fast b,.lkal-fast b{color:var(--on-spruce);font-variation-settings:"wdth" 100,"wght" 650}
.lkal[data-js] .lkal-fast{display:none}

/* ---------- kontrollene, med skript ---------- */
.lkal-styr{display:none;gap:.5rem;min-width:0}
.lkal[data-js] .lkal-styr{display:grid}
.lkal-etikett{display:block;font-size:var(--tekst-xs);color:var(--on-spruce-dim);
  letter-spacing:.07em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 520}
/* Beløpsfeltet: hvit flate på det marineblå, som logoboksen, så det leses
   som noe man kan skrive i. */
.lkal-felt{display:flex;align-items:center;gap:.5rem;background:#fff;
  border-radius:8px;padding:.375rem 1rem;min-block-size:3.25rem;min-width:0}
.lkal-felt:focus-within{box-shadow:0 0 0 3px var(--rust-dim)}
.lkal-inn{width:100%;min-width:0;background:transparent;border:0;color:var(--ink);
  font:inherit;font-size:var(--tekst-xl);font-variation-settings:"wdth" 92,"wght" 640;
  padding:0;font-variant-numeric:tabular-nums}
.lkal-inn:focus{outline:0}
.lkal-enhet{color:var(--muted);font-size:var(--tekst-base);
  font-variation-settings:"wdth" 92,"wght" 620;flex:0 0 auto}

/* Skyvekontrollen. Se side-forbrukslan.css for hvorfor hver linje står
   her: appearance:none på selve elementet, gradient med --fyll fra
   skriptet, 36 px tommel i 44 px trykkfelt, touch-action:none. */
.lkal-skyver{appearance:none;-webkit-appearance:none;width:100%;margin:.375rem 0 0;
  background:transparent;block-size:2.75rem;cursor:pointer;touch-action:none}
.lkal-skyver::-webkit-slider-runnable-track{block-size:.75rem;border-radius:999px;
  background:linear-gradient(90deg,var(--rust-dim) var(--fyll,25%),var(--spruce-3) var(--fyll,25%))}
.lkal-skyver::-moz-range-track{block-size:.75rem;border-radius:999px;background:var(--spruce-3)}
.lkal-skyver::-moz-range-progress{block-size:.75rem;border-radius:999px;background:var(--rust-dim)}
.lkal-skyver::-webkit-slider-thumb{appearance:none;box-sizing:border-box;
  inline-size:2.25rem;block-size:2.25rem;border-radius:50%;
  background:#fff;border:5px solid var(--rust-dim);
  box-shadow:0 2px 8px rgba(0,0,0,.35);margin-top:-.75rem;transition:transform .12s ease}
.lkal-skyver::-moz-range-thumb{box-sizing:border-box;
  inline-size:2.25rem;block-size:2.25rem;border-radius:50%;
  background:#fff;border:5px solid var(--rust-dim);
  box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .12s ease}
.lkal-skyver:active::-webkit-slider-thumb{transform:scale(1.12)}
.lkal-skyver:active::-moz-range-thumb{transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){
  .lkal-skyver::-webkit-slider-thumb,.lkal-skyver::-moz-range-thumb{transition:none}
  .lkal-skyver:active::-webkit-slider-thumb,.lkal-skyver:active::-moz-range-thumb{transform:none}
}
/* Fokusringen på mørk flate: gull, ikke marineblå. */
.lkal-skyver:focus-visible{outline:2px solid var(--rust-dim);outline-offset:4px}
.lkal .cta:focus-visible,.lkal-inn:focus-visible{outline-color:var(--rust-dim)}
.lkal-ende{display:flex;justify-content:space-between;gap:1rem;
  font-size:var(--tekst-xs);color:var(--on-spruce-dim);margin-top:-.25rem;
  font-variant-numeric:tabular-nums}

/* Svaret og knappen. Svaret vises bare med skript — uten står setningen
   i .lkal-fast med samme tall. Tallet er det ene flaten finnes for, og
   skal være det største på kortet. */
.lkal-side{display:grid;gap:1rem;min-width:0}
.lkal-svar{display:none;gap:.125rem;min-width:0}
.lkal[data-js] .lkal-svar{display:grid}
.lkal-mnd{display:block;font-size:var(--tekst-2xl);line-height:1.1;color:var(--on-spruce);
  font-variation-settings:"wdth" 84,"wght" 760;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

/* ---------- knappen ---------- */
.lkal-knapp{display:flex;flex-direction:column;gap:.375rem;align-items:stretch;min-width:0}
/* Gull knapp med mørk tekst, som annonsekortet. Etiketten får brekke. */
.lkal .cta{background:var(--rust-dim);color:var(--ink);width:100%;
  min-block-size:3.25rem;font-size:var(--tekst-base);
  white-space:normal;text-wrap:balance}
.lkal .cta:hover,.lkal .cta:focus-visible{background:var(--on-spruce);color:var(--spruce)}
.lkal-lenkemerk{font-size:var(--tekst-xs);color:var(--on-spruce-dim);
  letter-spacing:.05em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 520;text-align:center}

/* ---------- priseksempelet ---------- */
/* Streken over skiller annonsørens siterte opplysning fra vår ramme, som
   på annonsekortet. Samme størrelse som .eks der. */
.brod .lkal-vilkar,/* Priseksempelet: samme størrelse og farge som resten av teksten i kortet,
   ikke mindre. Var --tekst-xs og dempet til 18. august 2026; standard-
   opplysningene skal ikke være mindre synlige enn månedsbeløpet de står
   under. */
.lkal-vilkar{margin:0;padding-top:.75rem;border-top:1px solid var(--linje);
  color:var(--on-spruce);font-size:var(--tekst-sm);line-height:1.5;text-wrap:pretty}


/* ============================================================
   BRED FLATE: kontrollene til venstre, svar og knapp til høyre
   ============================================================
   Bare med skript: uten står det ingen kontroller å sette til venstre.
   Terskelen er content-box-bredden der to spalter på minst 16rem hver
   får plass med 1.5rem mellom: 33.5rem. Lesespalten er 42rem, så på
   desktop slår den inn; i et sidefelt eller på telefon står alt stablet. */
@container lkal (min-width:33.5rem){
  .lkal[data-js] .lkal-kort{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    grid-template-areas:"hode hode" "styr side" "vilkar vilkar";column-gap:1.5rem;align-items:start}
  .lkal[data-js] .lkal-hode{grid-area:hode}
  .lkal[data-js] .lkal-styr{grid-area:styr}
  .lkal[data-js] .lkal-side{grid-area:side;align-self:stretch;align-content:space-between}
  .lkal[data-js] .lkal-vilkar{grid-area:vilkar}
}