/* =============================================================
   paginas/homepage.css — Heart Workx homepage
   Etalage Methode: zes lagen (L1–L6)
   Uitsluitend voor index.php — geen gedeelde stijlen hier.
   Knoppen: zie knoppen.css (hw-knop-*)
   Labels:  zie base.css   (hw-label)
   ============================================================= */

/* ── Gedeelde laag-wrapper ────────────────────────────────── */
.hw-laag { width: 100%; }

.hw-laag-inner {
    max-width: 680px;
    margin:    0 auto;
    padding:   var(--ruimte-7) var(--sectie-h);
}

/* ═══ LAAG 1 — ETALAGE (Pijn / Herkenning) ═══════════════════
   Eerste schermvulling. Donker. Geen productnaam.
   ═══════════════════════════════════════════════════════════ */
.hw-l1 {
    background: linear-gradient(160deg, var(--donker) 0%, var(--donker-diep) 100%);
    position:  relative;
    overflow:  hidden;
}

/* Subtiel decoratief licht rechtsboven */
.hw-l1::before {
    content:       '';
    position:      absolute;
    width:         360px;
    height:        360px;
    border-radius: 50%;
    background:    radial-gradient(circle, rgba(232,201,160,0.07) 0%, transparent 70%);
    top:           -80px;
    right:         -80px;
    pointer-events: none;
}

.hw-l1 .hw-label { color: var(--accentkleur); }

.hw-l1-titel {
    font-family: var(--display-font), serif;
    font-size:   clamp(1.75rem, 5vw, 2.6rem);
    font-weight: var(--gewicht-normaal);
    line-height: 1.3;
    color:       var(--achtergrond);
    margin-bottom: var(--ruimte-4);
}

.hw-l1-tekst {
    font-size:   var(--tekst-base);
    line-height: var(--regelafstand-tekst);
    color:       var(--donker-licht);
    margin-bottom: 0;
}

.hw-prijs-hint {
    font-size:  var(--tekst-xs);
    color:      rgba(232,201,160,0.6);
    margin-top: var(--ruimte-3);
    text-align: center;
}

/* Scheidingslijn L1→L2 */
.hw-scheiding-l1-l2 {
    height:     4px;
    background: linear-gradient(90deg, var(--hoofdkleur) 0%, var(--accentkleur) 100%);
}

/* ═══ LAAG 2 — WINKELRUIT (Voor wie / Relevantie) ════════════
   Lichte achtergrond. Expliciete erkenning.
   ═══════════════════════════════════════════════════════════ */
.hw-l2 { background: var(--zacht); }

.hw-l2-titel {
    font-family: var(--display-font), serif;
    font-size:   clamp(1.35rem, 4vw, 1.9rem);
    font-weight: var(--gewicht-normaal);
    line-height: 1.4;
    color:       var(--donker);
    margin-bottom: var(--ruimte-4);
}

.hw-l2-tekst {
    font-size:     var(--tekst-base);
    line-height:   var(--regelafstand-tekst);
    color:         #3a3a3a;
    margin-bottom: var(--ruimte-3);
}

/* ═══ LAAG 3 — CONTEXT (Drie blokken / Oorzaak) ══════════════
   Crème achtergrond. Drie scanbare blokken.
   ═══════════════════════════════════════════════════════════ */
.hw-l3-blokken { background: var(--achtergrond); }

.hw-l3-blokken .hw-laag-inner {
    display:        flex;
    flex-direction: column;
    gap:            var(--ruimte-4);
    max-width:      1100px;
}

/* Blok basis */
.hw-blok {
    border-radius: var(--radius-lg);
    padding:       var(--ruimte-6) var(--ruimte-5);
}

.hw-blok-nr {
    display:        block;
    font-size:      var(--tekst-xs);
    font-weight:    var(--gewicht-vet);
    letter-spacing: 2px;
    opacity:        0.55;
    margin-bottom:  var(--ruimte-3);
}

.hw-blok-titel {
    font-family:   var(--display-font), serif;
    font-size:     clamp(1.05rem, 2.5vw, 1.2rem);
    font-weight:   var(--gewicht-normaal);
    line-height:   1.35;
    margin-bottom: var(--ruimte-3);
}

.hw-blok-tekst {
    font-size:   var(--tekst-sm);
    line-height: var(--regelafstand-tekst);
    margin-bottom: 0;
}

/* Blok kleurvarianten */
.hw-blok-blauw { background: var(--donker); }
.hw-blok-blauw .hw-blok-nr    { color: var(--accentkleur); }
.hw-blok-blauw .hw-blok-titel { color: var(--achtergrond); }
.hw-blok-blauw .hw-blok-tekst { color: var(--donker-licht); }

.hw-blok-rood { background: var(--hoofdkleur); }
.hw-blok-rood .hw-blok-nr    { color: var(--accentkleur); }
.hw-blok-rood .hw-blok-titel { color: var(--achtergrond); }
.hw-blok-rood .hw-blok-tekst { color: rgba(250,247,242,0.85); }

.hw-blok-zand { background: var(--accentkleur); }
.hw-blok-zand .hw-blok-nr    { color: var(--donker); }
.hw-blok-zand .hw-blok-titel { color: var(--donker); }
.hw-blok-zand .hw-blok-tekst { color: #3a3a3a; }

/* ═══ LAAG 4 — AANBOD (Wat je krijgt / Oplossing) ═══════════
   Eerste plek met productnamen en prijzen.
   ═══════════════════════════════════════════════════════════ */
.hw-l4-producten {
    background: var(--achtergrond);
    border-top: 1px solid rgba(232,201,160,0.35);
}

.hw-l4-producten-titel {
    font-family:   var(--display-font), serif;
    font-size:     clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight:   var(--gewicht-normaal);
    line-height:   1.4;
    color:         var(--donker);
    margin-bottom: var(--ruimte-5);
}

.hw-product-lijst {
    display:        flex;
    flex-direction: column;
    gap:            var(--ruimte-4);
    margin-top:     var(--ruimte-2);
}

.hw-product {
    background:    var(--wit);
    border:        1px solid rgba(232,201,160,0.45);
    border-radius: var(--radius-lg);
    padding:       var(--ruimte-6) var(--ruimte-5);
}

.hw-product-uitgelicht {
    border-color: var(--hoofdkleur);
    border-width: 2px;
    box-shadow:   0 4px 20px rgba(163,37,8,0.10);
}

.hw-product-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--ruimte-2);
    margin-bottom:   var(--ruimte-3);
}

.hw-product-naam {
    font-size:      var(--tekst-xs);
    font-weight:    var(--gewicht-vet);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--hoofdkleur);
    margin:         0;
}

.hw-product-prijs {
    font-size:   var(--tekst-base);
    font-weight: var(--gewicht-vet);
    color:       var(--donker);
    white-space: nowrap;
    margin:      0;
}

.hw-product-tekst {
    font-size:     var(--tekst-sm);
    line-height:   var(--regelafstand-tekst);
    color:         #3a3a3a;
    margin-bottom: 0;
}

/* Review / klantervaring */
.hw-review {
    margin-top:    var(--ruimte-7);
    border-left:   3px solid var(--hoofdkleur);
    padding:       var(--ruimte-4) var(--ruimte-5);
    background:    var(--zacht);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.hw-review-tekst {
    font-family:   var(--display-font), serif;
    font-size:     var(--tekst-base);
    font-style:    italic;
    line-height:   var(--regelafstand-tekst);
    color:         var(--donker);
    margin-bottom: var(--ruimte-2);
}

.hw-review-naam {
    font-size: var(--tekst-sm);
    color:     var(--tekst-zacht);
}

/* ═══ LAAG 5 — DE WINKELIER (Vertrouwen / Relatie) ══════════
   Donkere achtergrond. Max 3 zinnen. Foto samen + apart.
   ═══════════════════════════════════════════════════════════ */
.hw-l5 { background: var(--donker); }
.hw-l5 .hw-label { color: var(--accentkleur); }

/* Foto samen (William + Natalie) */
.hw-l5-foto-samen {
    width:         100%;
    max-width:     420px;
    border-radius: var(--radius-lg);
    border:        2px solid rgba(232,201,160,0.3);
    margin-bottom: var(--ruimte-6);
    object-fit:    cover;
    aspect-ratio:  4/3;
}

/* Aparte portretten (fallback als geen samen-foto) */
.hw-team {
    display:   flex;
    gap:       var(--ruimte-6);
    flex-wrap: wrap;
    margin-bottom: var(--ruimte-6);
}

.hw-teamlid {
    display:     flex;
    align-items: center;
    gap:         var(--ruimte-3);
}

.hw-teamfoto {
    width:         52px;
    height:        52px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--accentkleur);
    flex-shrink:   0;
}

.hw-teamfoto-placeholder {
    width:         52px;
    height:        52px;
    border-radius: 50%;
    background:    var(--hoofdkleur);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--achtergrond);
    font-family:   var(--display-font), serif;
    font-size:     1.3rem;
    flex-shrink:   0;
    border:        2px solid var(--accentkleur);
}

.hw-teamnaam {
    font-size:   var(--tekst-base);
    font-weight: var(--gewicht-vet);
    color:       var(--achtergrond);
    margin:      0;
}

.hw-teamrol {
    font-size: var(--tekst-xs);
    color:     var(--accentkleur);
    margin:    2px 0 0;
}

.hw-l5-tekst {
    font-size:     var(--tekst-base);
    line-height:   var(--regelafstand-tekst);
    color:         var(--donker-licht);
    margin-bottom: var(--ruimte-2);
}

.hw-l5-slogan {
    font-family: var(--display-font), serif;
    font-style:  italic;
    font-size:   var(--tekst-md);
    color:       var(--accentkleur);
    margin-top:  var(--ruimte-1);
}

/* ═══ LAAG 6 — DE KASSA (Hoe het voelt / Actie) ═════════════
   Rood. Één zin. Één knop. Geen foto. Geen afleiding.
   ═══════════════════════════════════════════════════════════ */
.hw-l6 { background: var(--hoofdkleur); }
.hw-l6 .hw-laag-inner { text-align: center; }

.hw-l6-titel {
    font-family:   var(--display-font), serif;
    font-size:     clamp(1.35rem, 4vw, 1.9rem);
    font-weight:   var(--gewicht-normaal);
    line-height:   1.35;
    color:         var(--achtergrond);
    margin-bottom: var(--ruimte-3);
}

.hw-l6-tekst {
    font-size:   var(--tekst-base);
    line-height: var(--regelafstand-tekst);
    color:       rgba(250,247,242,0.85);
    margin-bottom: 0;
}

/* Knop op rode achtergrond: crème met rode tekst */
.hw-l6 .hw-knop-primair {
    background:  var(--achtergrond);
    color:       var(--hoofdkleur);
    border-color: var(--achtergrond);
    margin-top:  var(--ruimte-6);
}
.hw-l6 .hw-knop-primair:hover {
    background:  var(--zacht);
    border-color: var(--zacht);
    color:       var(--hoofdkleur);
    box-shadow:  0 6px 20px rgba(0,0,0,0.15);
}

.hw-l6-zekerheid {
    font-size:  var(--tekst-xs);
    color:      rgba(250,247,242,0.55);
    margin-top: var(--ruimte-3);
}

/* ══════════════════════════════════════════════════════════
   TABLET (768px+)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .hw-laag-inner { padding: var(--ruimte-8) var(--sectie-h); }

    .hw-l5-foto-samen { max-width: 520px; }

    .hw-teamfoto,
    .hw-teamfoto-placeholder {
        width:  64px;
        height: 64px;
    }
}

/* ══════════════════════════════════════════════════════════
   LAPTOP (1024px+)
   Twee-kolom layouts voor L1 en L5
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .hw-laag-inner { padding: var(--sectie-v) var(--sectie-h); }

    /* L1: tekst links, toekomstige foto/grafiek rechts */
    .hw-l1 .hw-laag-inner {
        max-width:           1100px;
        display:             grid;
        grid-template-columns: 1fr 380px;
        gap:                 var(--ruimte-10);
        align-items:         center;
    }

    /* L1 knop en prijs-hint — breedte niet meer 100% */
    .hw-l1 .hw-knop-primair { width: auto; display: inline-flex; }
    .hw-prijs-hint           { text-align: left; }

    /* L3 blokken naast elkaar */
    .hw-l3-blokken .hw-laag-inner {
        flex-direction: row;
        align-items:    stretch;
    }
    .hw-blok { flex: 1; }

    /* L4 producten naast elkaar */
    .hw-l4-producten .hw-laag-inner,
    .hw-l5 .hw-laag-inner { max-width: 1100px; }

    .hw-product-lijst { flex-direction: row; }
    .hw-product       { flex: 1; }

    /* L5: foto samen links, tekst rechts */
    .hw-l5 .hw-laag-inner {
        display:             grid;
        grid-template-columns: 340px 1fr;
        gap:                 var(--ruimte-10);
        align-items:         center;
    }

    .hw-l5-foto-samen {
        margin-bottom: 0;
        max-width:     100%;
        aspect-ratio:  3/4;
    }

    /* Knoppen niet meer full-width op laptop */
    .hw-knop--vol { width: auto; }
}

/* ══════════════════════════════════════════════════════════
   BREED DESKTOP (1280px+)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

    .hw-laag-inner { padding: var(--sectie-v) var(--sectie-h); }

    .hw-l1 .hw-laag-inner {
        grid-template-columns: 1fr 440px;
        gap:                   var(--ruimte-10);
    }

    .hw-l5 .hw-laag-inner {
        grid-template-columns: 380px 1fr;
    }

    .hw-blok { padding: var(--ruimte-7) var(--ruimte-6); }
}