/* Beeld (v2): echte schermen van de app in een toestel, en foto's van het vak.
   Helpers in tools/site/components.js (phoneShot, desktopShot, phoneSequence,
   photo, photoBand). Geen gloed rond een scherm: een zachte schaduw onder het
   toestel volstaat. */

/* ---------- Toestel ---------- */
.device { margin: 0; }
.device-screen { position: relative; overflow: hidden; background: var(--color-white); }
.device-img { display: block; width: 100%; height: auto; }

/* Gsm: een rond lichaam met een dunne rand, het scherm erin. */
.device--phone {
    --phone-w: 280px;
    width: var(--phone-w);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 7px;
    background: var(--color-white);
    border: 1px solid var(--color-border-strong);
    border-radius: 38px;
    box-shadow: var(--shadow-lg);
}
.device--phone .device-screen { border-radius: 31px; }

/* Enkel het bovenste deel van het scherm, voor in een kaart. */
.device--crop .device-screen { aspect-ratio: 780 / 1060; }
.device--crop .device-img { height: 100%; object-fit: cover; object-position: top; }

/* Ingezoomd op het midden van een scherm met veel witruimte (--zoom op de figure). */
.device--zoom .device-img { transform: scale(var(--zoom, 1.5)); transform-origin: var(--zoom-origin, 50% 50%); }

/* Desktop: een sober browservenster met drie bolletjes. */
.device--desktop {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border-strong);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.device-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
}
.device-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-border-strong);
}

/* Wisselende gsm: de schermen liggen op elkaar, enkel de doorzichtigheid wisselt. */
.device-sequence .device-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.device-sequence .device-frame.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .device-sequence .device-frame { display: none; }
}

/* ---------- Foto ---------- */
.photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
}
.photo--wide { aspect-ratio: 16 / 9; }
.photo--band { aspect-ratio: 3 / 2; }
@media (min-width: 720px) { .photo--band { aspect-ratio: 21 / 9; } }
@media (min-width: 1024px) { .photo--band { aspect-ratio: 3 / 1; } }
.photo--photo { aspect-ratio: 3 / 2; }
.photo--card { aspect-ratio: 4 / 3; }
.photo--portrait { aspect-ratio: 4 / 5; }

/* Fotostrook tussen twee secties. */
.section.section-band { padding-top: var(--space-6); padding-bottom: var(--space-6); }
@media (min-width: 880px) {
    .section.section-band { padding-top: var(--space-7); padding-bottom: var(--space-7); }
}
.section:not(.section-soft):not(.hw-hero) + .section-band:not(.section-soft) { padding-top: 0; }
.section-band:not(.section-soft) + .section:not(.section-soft) { padding-top: var(--space-7); }
.photo-band { margin: 0; }
.photo-band figcaption {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}
.shot-band .device--desktop { max-width: 880px; margin: 0 auto; }

/* ---------- Tegel met foto ---------- */
.tile.tile--photo { padding: 0; overflow: hidden; }
.tile--photo .photo { border-radius: 0; }
.tile--photo .tile-body { padding: var(--space-5) var(--space-6) var(--space-6); }
@media (max-width: 719px) {
    .tile--photo .tile-body { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* ---------- Hero met een scherm ---------- */
/* Op een breed scherm past de hele gsm in het eerste scherm. */
.hw-hero-visual .device--phone,
.hero-shot .device--phone {
    --phone-w: clamp(230px, calc((100svh - var(--header-h) - 150px) / 2.2), 300px);
}
.hw-hero-visual .device--desktop { max-width: 640px; margin: 0 auto; }

/* Home: de wisselende gsm naast de boodschap (zelfde plaats als de oude nagebootste app). */
@media (max-width: 959px) {
    .hero-split .hero-shot { margin-top: var(--space-8); }
}
@media (min-width: 960px) {
    .hero-split .hero-shot { flex: 0 0 320px; display: flex; justify-content: center; }
}

/* ---------- Scherm in een kaart of stap ---------- */
/* Home, "Ingepland, geregistreerd, doorgestuurd": bovenaan elke kaart een scherm. */
.pillar-shot {
    margin: calc(var(--space-2) * -1) 0 var(--space-5);
    height: 220px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    padding: var(--space-4) var(--space-4) 0;
}
.pillar-shot .device--desktop { box-shadow: var(--shadow-md); }
.pillar-shot .device--phone { --phone-w: 190px; box-shadow: var(--shadow-md); }

/* Functie: de stappen naast een scherm. */
.beeld-split { display: grid; gap: var(--space-7); max-width: 1080px; margin: 0 auto; align-items: center; }
.beeld-split .fx-steps { margin-top: var(--space-6); }
@media (min-width: 1080px) {
    .beeld-split { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-8); }
    .beeld-split .fx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .beeld-split--desktop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.beeld-split .device--phone { --phone-w: 260px; }

/* Stap-rij (hoe-werkt-het, sectoren): een scherm in de plaats van de nagetekende kaart. */
.hw-visual .device--phone { --phone-w: 240px; }
.hw-visual .device--desktop { max-width: 560px; margin: 0 auto; }

/* ---------- Sector-hero: foto met de werkbon over een hoek ---------- */
/* Gsm: de foto, de werkbon schuift er onderaan een stukje over. Breed scherm:
   de foto vult de kolom, de werkbon ligt over de hoek linksonder. */
.sector-hero-media { position: relative; }
.sector-hero-media .photo { aspect-ratio: 4 / 3; }
.sector-hero-card { position: relative; margin: calc(var(--space-7) * -1) var(--space-4) 0; }
@media (min-width: 880px) {
    .hw-hero-grid:has(.sector-hero-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
    .sector-hero-media { padding: 0 0 var(--space-7) var(--space-8); }
    .sector-hero-media .photo {
        aspect-ratio: auto;
        height: clamp(380px, calc(100svh - var(--header-h) - 2 * var(--space-8) - var(--space-7)), 620px);
    }
    .sector-hero-card { position: absolute; left: 0; bottom: 0; width: min(270px, 58%); margin: 0; }
    .sector-hero-media--wide-card .sector-hero-card { width: min(340px, 72%); }
}
/* Een zwakkere foto (chauffagist, verhuizers): kleiner, de werkbon blijft de hoofdzaak. */
@media (min-width: 880px) {
    .sector-hero-media--small { padding: 0; display: flex; flex-direction: column; align-items: flex-end; }
    .sector-hero-media--small .photo { width: 58%; height: auto; aspect-ratio: 1 / 1; }
    .sector-hero-media--small .sector-hero-card { position: relative; width: min(320px, 72%); margin: calc(var(--space-9) * -1) auto 0 0; }
}

/* ---------- Artikel: foto onder de hero ---------- */
.article-photo { max-width: var(--content-medium); margin: 0 auto var(--space-6); }

/* ---------- Vergelijking: de intro naast een scherm ---------- */
.vs-intro { display: grid; gap: var(--space-7); align-items: center; }
.vs-intro .roles { margin-top: 0; }
@media (min-width: 960px) {
    .vs-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
    .vs-intro .roles { grid-template-columns: 1fr; }
    .vs-intro--phone { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
}
.vs-intro .device--phone { --phone-w: 260px; }

/* Gsm: het beeld van een split-hero begint pas onder het eerste scherm (de tekst
   met de knoppen vult dat scherm alleen). */
@media (max-width: 879px) {
    .hw-hero:has(.hw-hero-grid) .hw-hero-visual { margin-top: var(--space-5); }
}

/* Prijzen, "In elk plan": de lijst naast een gsm die van scherm wisselt. */
.beeld-allin { display: grid; gap: var(--space-7); align-items: center; }
.beeld-allin .device--phone { --phone-w: 240px; }
@media (min-width: 880px) {
    .beeld-allin { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-8); max-width: 980px; margin: 0 auto; }
    .beeld-allin .hw-allin { margin: 0; }
}