/* Temaminiatyren (tavle 24a/24b): et nedskalert gjestekort med temaets egne
   CSS-variabler inline (themes.picker). Brukes på temasiden og i /ny. */
.tm-mini { position: relative; display: block; aspect-ratio: 174 / 236; overflow: hidden; border-radius: 18px; background: var(--bg); color: var(--text); font-family: var(--body); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px -14px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.tm-pick:hover .tm-mini { transform: translateY(-2px); }
.tm-pick.is-sel .tm-mini { box-shadow: 0 0 0 3px var(--bg-page), 0 0 0 5px #5856d6; }
.tm4 { --bg-page: var(--bg); }
.tm-mini::before { content: ""; position: absolute; inset: 0; background-image: var(--tex); opacity: var(--tex-op); mix-blend-mode: overlay; pointer-events: none; z-index: 2; }
.tm-mini .h { position: relative; height: 54%; background: var(--hero-bg); background-size: cover; color: var(--hero-fg); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; gap: 3px; padding: 10px 10px 24px; overflow: hidden; }
.tm-mini[data-hero="typografi"] .h { align-items: flex-start; text-align: left; }
.tm-mini .h > * { position: relative; }
.tm-mini .k { font-size: 6px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: .8; }
.tm-mini .ti { font-family: var(--disp); font-weight: var(--dw); font-style: var(--dst); text-transform: var(--dtt); letter-spacing: var(--dls); font-stretch: var(--dstr); font-size: calc(19px * var(--dsz)); line-height: 1; text-wrap: balance; }
.tm-mini[data-hero="typografi"] .ti { font-size: calc(27px * var(--dsz)); }
.tm-mini .mono { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hero-fg2); display: grid; place-items: center; font-family: var(--disp); font-style: var(--dst); font-size: 12px; margin-bottom: 4px; }
.tm-mini .port { width: 30px; height: 38px; border-radius: 50%; background: var(--tint); color: var(--text2); display: grid; place-items: center; font-family: var(--disp); font-size: 11px; margin-bottom: 4px; }
.tm-mini .num { font-family: var(--disp); font-weight: var(--dw); font-stretch: var(--dstr); font-size: 40px; line-height: .85; letter-spacing: -.05em; background: linear-gradient(180deg, var(--acc), var(--sec)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tm-mini .arch { position: absolute !important; left: 50%; top: -150%; width: 280%; height: 200%; transform: translateX(-50%); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: color-mix(in srgb, var(--acc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--hero-fg) 35%, transparent); }
.tm-mini .c { position: relative; z-index: 1; margin: -16px 8px 0; background: var(--card); border: var(--card-border); box-shadow: var(--card-shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: calc(var(--r) * .55); padding: 8px 8px 9px; display: flex; flex-direction: column; gap: 6px; font-size: 7px; line-height: 1.35; text-align: center; }
.tm-mini[data-hero="typografi"] .c { text-align: left; }
.tm-mini .c b { font-weight: 600; font-size: 7.5px; }
.tm-mini .c .st { color: var(--text2); font-size: 7px; }
.tm-mini .cd { font-variant-numeric: tabular-nums; color: var(--text); }
.tm-mini .cd-tall { display: flex; justify-content: center; gap: 10px; font-family: var(--disp); font-weight: var(--dw); font-size: 14px; letter-spacing: -.03em; }
.tm-mini .cd-kapsel { align-self: center; background: var(--tint); color: var(--acc-text); border-radius: 980px; padding: 3px 8px; font-weight: 600; }
.tm-mini .cd-ord { font-family: var(--disp); font-style: var(--dst); font-size: 12px; color: var(--acc-text); }
.tm-mini .cd-ring { align-self: center; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--acc) 0 62%, var(--tint) 62% 100%); display: grid; place-items: center; }
.tm-mini .cd-ring span { width: 20px; height: 20px; border-radius: 50%; background: var(--card-solid); display: grid; place-items: center; font-family: var(--disp); font-size: 8px; }
.tm-mini .btn { display: block; padding: 5px; border-radius: var(--btn-r); background: var(--btn-bg); color: var(--btn-fg); border: var(--btn-border); font-weight: 600; font-size: 7px; text-align: center; }
.tm-pick:hover .tm-mini { transform: translateY(-2px); }
.tm-pick.is-sel .tm-mini, .tm-pick:has(input:checked) .tm-mini { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* Med bilde: regnet som gjestesidens fotohero (guest.css .t-hero.has-photo), skalert fra forhåndsvisningens
   344 px brede telefon til kortets bredde (cqw = 1 % av kortet). Bildehøyde = bredde / bildets format (--pr), utsnitt =
   vertens fokuspunkt (--pos). Overlinjen starter 56 px (16,3cqw) over bildets underkant. Bildet har to masker
   som på siden: nederste 42 % tones ut, og stripen i sidefargen bak overlinjen (.t-hero-in::before, 64 px
   fra 0 → 80 % → 100 %) dekker de siste 120 px – derfor `intersect`. Stående bilder kappes ved 1:1,05
   (_tema_mini) så kortet under fortsatt synes. */
.tm-mini.has-photo { container-type: inline-size; }
.tm-mini.has-photo .h { height: auto; min-height: 0; background: var(--bg); color: var(--text);
  padding-top: calc(100cqw / var(--pr, 1.5) - 16.3cqw); padding-bottom: 16.3cqw; }
.tm-mini.has-photo .h > .ph { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; aspect-ratio: var(--pr, 1.5);
  object-fit: cover; object-position: var(--pos, 50% 30%);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%),
    linear-gradient(180deg, #000 calc(100% - 34.9cqw), rgba(0,0,0,.2) calc(100% - 22.1cqw), transparent calc(100% - 16.3cqw));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%),
    linear-gradient(180deg, #000 calc(100% - 34.9cqw), rgba(0,0,0,.2) calc(100% - 22.1cqw), transparent calc(100% - 16.3cqw));
  mask-composite: intersect; }
.tm-mini.has-photo .k { color: var(--text2); opacity: 1; }
.tm-mini.has-photo .ti { text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 70%, transparent); }
.tm-mini img.port { object-fit: cover; padding: 0; }