/* ================= PelleTech-hjälten på IDRO, AERO och BU (kunden 2026-10-17: "samma idé på första sektionen på alla
   PelleTech-produkter som på Multiauto") =================
   Multiautos hjälte (förslag 01 Omslaget, multiauto.css .mv-01) som gemensam mall: namnet i omslagets tunna vikt och skala,
   produkten på golvlinjen till höger framför sitt eget förrenderade värmeflöde, effektområdet nere till vänster och
   PelleTech/BWT nere till höger. Bilderna görs av kalla/pt_hjaltar_bilder.py, markupen av kalla/pt_hjaltar.py.
   Per produkt (längst ned): figurens bredd och proportioner (--b, --ar), var foten står (--fot) och flödets läge.
   Inga backdrop-filter, inga blend modes; rörelse bara opacity/transform. */

/* som Multiautos .ma-hero: plats för sidhuvudet, inget som sticker ut */
.pth { position: relative; overflow: hidden; isolation: isolate; padding-top: 112px; display: flex; flex-direction: column; min-height: max(640px, calc(var(--vh) * 100)); padding-bottom: clamp(22px, calc(var(--vh) * 3.6), 46px);
  background: radial-gradient(36% 32% at 12% 0%, rgba(30, 62, 124, .24), rgba(30, 62, 124, 0) 100%) no-repeat,
    linear-gradient(180deg, #030a17 calc(100% - 64px), var(--natt)) #030a17; }
.pth-in { position: relative; flex: 1; display: flex; flex-direction: column; }
.pth .smulor { margin-bottom: 0; }

/* namnet: omslagets 220-vikt, samma skala som Multiauto */
.pth-titel { position: relative; z-index: 2; margin-top: clamp(18px, calc(var(--vh) * 4), 52px); }
.pth-etikett b { color: var(--bla); font-weight: 600; }
.pth-h1 { margin-top: clamp(10px, calc(var(--vh) * 1.6), 22px); margin-left: -.055em; font-size: min(16.4vw, calc(var(--vh) * 28), 21rem); line-height: .9; font-weight: 220;
  font-variation-settings: "opsz" 96; letter-spacing: -.046em; color: var(--is); white-space: nowrap; }
.pth-h1 .rad { padding-bottom: .06em; margin-bottom: -.06em; }

/* scenen: texten till vänster, produkten på golvlinjen till höger */
.pth-scen { position: relative; flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); min-height: 0; }
.pth-text { grid-column: 1 / span 5; padding-top: clamp(18px, calc(var(--vh) * 3.6), 46px); padding-bottom: clamp(24px, calc(var(--vh) * 6), 72px); position: relative; z-index: 2; }
.pth-text .t-ingress { max-width: 31ch; }
.pth-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: clamp(24px, calc(var(--vh) * 4.4), 48px); }

.pth-bild { position: absolute; z-index: 1; right: calc(var(--marg) * -.35); bottom: 0; margin: 0; width: var(--b); aspect-ratio: var(--ar);
  transform: translateY(calc((1 - var(--fot)) * 100%)); pointer-events: none; }
.pth-bild img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* produktens eget värmeflöde bakom den, genomskinligt (ingen egen bakgrund), klippt vid golvlinjen */
.pth-flode { position: absolute; z-index: 0; left: var(--fx); top: var(--fy); width: var(--fw); aspect-ratio: var(--far); background: var(--fbild) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 0 var(--fklipp, 0) 0); opacity: .8; }
/* ljuset på golvet vid produktens fot */
.pth-bild::after { content: ""; position: absolute; z-index: 0; left: 2%; right: 6%; top: calc(var(--fot) * 100% - 12%); height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 154, 60, .16), rgba(242, 154, 60, .05) 55%, rgba(242, 154, 60, 0)); }

/* golvlinjen: bas, flödets färger, en tick vid noll */
.pth-golv { position: relative; z-index: 2; height: 2px; }
.pth-golv::before { content: ""; position: absolute; left: 0; right: 0; top: .5px; height: 1px; background: var(--linje-2); }
.pth-golv-fyll { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--flode); }
.pth-golv-tick { position: absolute; left: 0; top: -6px; width: 1px; height: 14px; background: rgba(212, 226, 243, .7); }

.pth-fot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: clamp(14px, calc(var(--vh) * 2.2), 26px); }
.pth-data { display: flex; flex-direction: column; gap: 10px; }
.pth-tal { font-size: clamp(2.5rem, 1.2rem + 2.6vw, 4.25rem); line-height: .9; font-weight: 240; font-variation-settings: "opsz" 96; letter-spacing: -.035em;
  font-variant-numeric: lining-nums; white-space: nowrap; color: var(--is); }
.pth-tal b { font-weight: 240; color: var(--glod); }
.pth-tal small { font-size: .46em; font-weight: 340; letter-spacing: 0; color: var(--is-2); margin-left: .28em; margin-right: .12em; }
.pth-agent { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; padding-bottom: 2px; }
.pth-agent b { color: var(--is); font-weight: 600; }
.pth-gen { margin: 0; }
.pth-bwt { display: inline-flex; align-items: center; gap: 12px; color: var(--is-2); text-decoration: none; }
.pth-bwt img { height: 22px; width: auto; display: block; }
.pth-bwt .t-etikett { transition: color .25s; }
.pth-bwt:hover .t-etikett, .pth-bwt:focus-visible .t-etikett { color: var(--is); }

/* ---------- per produkt (mått ur pt_hjaltar_bilder.py) ---------- */
/* IDRO 500 framifrån höger, foten på 91,4 %; omslagets plym stiger i glappet mellan texten och pannan */
.pth-idro { --ar: 1800 / 1327; --fot: .914; --b: min(calc(var(--vh) * 60 * 1.3565), 54vw, 920px);
  --fbild: url(../bild/produktsidor/idro-pt-flode.webp); --far: 1402 / 2700; --fw: 49.7%; --fx: -28%; --fy: -22.4%; --fklipp: 12.5%; }
/* AERO 500, foten på 99,2 %; luftflödet (spegelvänt) har sitt huvud bakom aggregatet och breder ut sig in mot mitten */
.pth-aero { --ar: 1508 / 1500; --fot: .992; --b: min(calc(var(--vh) * 60), 47vw, 720px);
  --fbild: url(../bild/produktsidor/aero-pt-flode.webp); --far: 1970 / 1080; --fw: 150%; --fx: -85.5%; --fy: 13%; }
/* BU 300, foten på 98,9 %; värmebandet strömmar ut ur brännarhalsen (vänster) in mot mitten */
.pth-bu { --ar: 1900 / 1148; --fot: .989; --b: min(calc(var(--vh) * 60 * 1.3), 54vw, 920px);
  --fbild: url(../bild/produktsidor/bu-pt-flode.webp); --far: 1480 / 1000; --fw: 80%; --fx: -62%; --fy: -7%; }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .pth-text { grid-column: 1 / span 6; }
  .pth-aero { --b: min(calc(var(--vh) * 48), 52vw); }
  .pth-idro, .pth-bu { --b: min(calc(var(--vh) * 48 * 1.3), 60vw); }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .pth { min-height: 0; padding-top: 92px; padding-bottom: 40px; }
  .pth-titel { margin-top: 26px; }
  .pth-h1 { font-size: 26.4vw; margin-top: 12px; }
  .pth-scen, .pth-text { display: contents; }
  .pth-text .t-ingress { order: 1; margin-top: 18px; font-size: 1.1875rem; }
  .pth-bild { order: 2; position: relative; right: auto; align-self: center; width: min(var(--bm, 88%), 420px); margin-top: 10px; }
  .pth-idro, .pth-bu { --bm: 100%; }
  .pth-golv { order: 3; }
  .pth-fot { order: 4; padding-top: 16px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .pth-knappar { order: 5; margin-top: 30px; flex-direction: column; align-items: stretch; gap: 18px; }
  .pth-knappar .lank { justify-content: center; }
  .pth-agent { align-items: flex-start; text-align: left; }
  .pth-gen { display: none; }
  .pth-flode { opacity: .62; }
}