/* =============================================================
   Produktsidans toppsektion — "02B: bild först, specstapel bredvid"
   (Claude Design, Produktsida.dc.html, 2026-09-10).

   Strukturen är Bricks-element (sektion → container → block), så
   bredd, gap, ram och bakgrund ligger i byggaren. Här bor bara det
   som Bricks-inställningarna inte når: bildens storlek i ramen och
   knapparnas fulla bredd i staplen.
   ============================================================= */

/* Plattan är ett Bricks-block (ljusgrå bakgrund, ingen padding, ingen
   ram, minhöjd 52rem). Höjden styrs av specstapeln bredvid, aldrig av
   bilden: figuren läggs absolut över hela plattan och bilden fyller den
   med object-fit: contain. Den frilagda, beskurna bilden upplevs då så
   stor som plattan tillåter. */
.brk-pt__media {
    position: relative;
}

.brk-pt__media > figure,
.brk-pt__media > .brxe-image {
    position: absolute;
    inset:    0;
    /* Uttryckliga mått: med bara inset låter Chrome bildens intrinsic
       höjd vinna över plattans, och plattan växer med bilden. */
    width:    100%;
    height:   100%;
    margin:   0;
}

.brk-pt__media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
}

/* En kolumn under tablet_portrait: minhöjden är 0 i Bricks där, så plattan
   får sin höjd av en kvadrat i stället för att kollapsa. */
@media (max-width: 478px) {
    .brk-pt__media { aspect-ratio: 1 / 1; }
}

/* 360-snurran i plattan (produkter med serie): shortcode-elementet och
   snurran fyller plattan precis som figuren, utan eget sidförhållande.
   Canvasen är genomskinlig, så plattans grå syns bakom maskinen. */
.brk-pt__media > .brxe-shortcode {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
}
.brk-pt__media [data-viewer360] {
    aspect-ratio: auto;
    width:        100%;
    height:       100%;
}

/* Knapparna staplas i spec-kolumnens fulla bredd, vänsterställda
   som i produktbladet. Pill-knappen behåller sin ikonyta till höger. */
.brk-pt__btns .brxe-button,
.brk-pt__btns .bricks-button {
    width:           100%;
    justify-content: space-between;
    text-align:      left;
}

/* Under tablet_portrait blir rutnätet en kolumn: stapeln ska då inte
   trycka ner knapparna med margin-top:auto i ett tomrum. */
@media (max-width: 767px) {
    .brk-pt__btns { margin-top: var(--space-m); }
}

/* ── SmartPower+-stämpeln ──────────────────────────────────────
   Stämpeln (.brk-pt__stamp, 8rem) står högerställd först i specstapeln och
   rubriken dras upp bredvid den med negativ marginal. Två saker den gamla
   lösningen inte klarade (2026-09-16):

   1. Marginalen satt som Bricks-inställning på rubriken och gällde även när
      stämpeln inte fanns. Stämpeln visas nu bara på plusmodellerna (Bricks-
      villkor på produktfunktionen brokk-smart-power-plus), så marginalen bor
      här, bakom `.brk-pt__stamp +` — ingen stämpel, ingen uppdragning.

   2. På mobil är rubriken en rad (~32px) men stämpeln 80px hög, så ingressen
      under rubriken hamnade bredvid stämpeln och sprang in under den.
      min-height håller rubrikraden minst lika hög som stämpeln (minus
      stapelns radavstånd, som redan ligger mellan dem), så ingressen alltid
      börjar under stämpeln. På desktop är rubriken redan så hög — ingen
      skillnad där. padding-right hindrar en längre rubrik från att löpa in
      under stämpeln i sidled. */
.brk-pt__spec {
    --brk-pt-stamp: 8rem;
}

.brk-pt__stamp + .brxe-heading {
    margin-top:    calc(-1 * var(--brk-pt-stamp));
    min-height:    calc(var(--brk-pt-stamp) - var(--space-s));
    padding-right: calc(var(--brk-pt-stamp) + var(--space-xs));
}