/* =========================================================
   BRANDSTOFFEN + HOBBYWASH — pagina-specifieke stijlen
   In theme-stijl: Junicode/Catamaran, --rood, witte kaarten.
   Functionele kleuren (pompkleuren, was-knoppen) blijven exact.
   Alleen geladen op deze twee pagina's (zie functions.php).
   ========================================================= */

.pagina-brandstof,
.pagina-hobby {
    /* theme-afgeleide tokens */
    --vz-ink:        var(--zwart);
    --vz-ink2:       #4a443b;           /* broodtekst, iets warmer dan zwart */
    --vz-muted:      var(--grijs);
    --vz-rule:       rgba(28, 28, 28, 0.12);
    --vz-card:       #fff;
    --vz-card-br:    rgba(28, 28, 28, 0.14);
    --vz-alt:        var(--crème);

    /* functionele pompkleuren (matchen de fysieke pompen — niet wijzigen) */
    --pk-petrol:  #2f8a3e;
    --pk-e98:     #f2c418;
    --pk-diesel:  #1f1c19;
    --pk-adblue:  #1d5fae;
    --pk-mix:     #d9a800;

    /* hobbywash knopkleuren (= kleur van slang/borstel) */
    --hw-red:     #d8342b;
    --hw-yellow:  #f0b323;
    --hw-blue:    #3b8fd4;

    --vz-maxw:    1280px;   /* inhoudsbreedte; secties zijn full-bleed */

    width: 100%;
    margin: 0;
    background: var(--wit);
}

/* Full-bleed secties: achtergrond over de volle breedte, inhoud
   gecentreerd binnen --vz-maxw. */
.pagina-brandstof .vz-sec-head,
.pagina-brandstof .vz-fuel-groups,
.pagina-brandstof .vz-price-note,
.pagina-brandstof .vz-article,
.pagina-brandstof .vz-cross,
.pagina-hobby .vz-sec-head,
.pagina-hobby .vz-legend,
.pagina-hobby .vz-route,
.pagina-hobby .vz-pay,
.pagina-hobby .vz-cross {
    max-width: var(--vz-maxw);
    margin-left: auto;
    margin-right: auto;
}

/* Hero + sectietitels gecentreerd */
.pagina-brandstof .pagina-hero,
.pagina-hobby .pagina-hero {
    max-width: var(--vz-maxw);
    margin: 0 auto;
    text-align: center;
}

/* --- Hero CTA-rij (onder de .pagina-hero titel) --- */
.vz-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

/* --- Sectie-opbouw --- */
.vz-sectie {
    padding: 4rem 5vw;
}
.vz-sectie--alt {
    background: var(--vz-alt);
    border-top: 1px solid var(--vz-rule);
    border-bottom: 1px solid var(--vz-rule);
}
.vz-sec-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}
.vz-sec-head .sectie-titel { margin-bottom: 0; }
.vz-sec-sub {
    font-family: var(--font-cat);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    line-height: 1.6;
    color: var(--vz-ink2);
    max-width: 560px;
    margin: 0 auto;
}

/* =========================================================
   BRANDSTOFFEN — pompoverzicht
   ========================================================= */
.vz-fuel-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.vz-fuel-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.vz-fuel-grouplabel {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--vz-ink);
    border-bottom: 1px solid var(--zwart);
    padding-bottom: 0.5rem;
}

.vz-fuel {
    position: relative;
    background: var(--vz-card);
    border: 1px solid var(--vz-card-br);
    padding: 1.1rem 1.1rem 1rem;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.25rem 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vz-fuel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(28, 28, 28, 0.22);
}
.vz-fuel--upcoming { border-style: dashed; }

/* pomp-badge */
.vz-badge {
    grid-row: 1 / 4;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 2px solid var(--zwart);
    background: #fff;
    color: var(--vz-ink);
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.05;
}
.vz-badge--circle { border-radius: 50%; }
.vz-badge--diamond {
    width: 38px; height: 38px; margin: 7px;
    transform: rotate(45deg);
}
.vz-badge--diamond span { transform: rotate(-45deg); }
.vz-badge--petrol { background: var(--pk-petrol); border-color: var(--pk-petrol); color: #fff; }
.vz-badge--e98    { background: var(--pk-e98); border-color: var(--pk-e98); color: var(--pk-petrol); }
.vz-badge--diesel { background: var(--pk-diesel); border-color: var(--pk-diesel); color: #fff; }
.vz-badge--hvo    { background: #fff; border-color: var(--pk-diesel); color: var(--pk-diesel); }
.vz-badge--lpg    { background: #fff; border-color: var(--pk-diesel); color: var(--pk-diesel); }
.vz-badge--mix    { background: #fff; border: 2px dashed var(--pk-mix); color: var(--pk-diesel); }
.vz-badge--adblue { background: var(--pk-adblue); border-color: var(--pk-adblue); color: #fff; border-radius: 6px; font-size: 10px; }

.vz-fuel-tag {
    font-family: var(--font-cat);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rood);
}
.vz-fuel-name {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--vz-ink);
}
.vz-fuel-desc {
    font-family: var(--font-cat);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--vz-ink2);
    margin: 0;
    min-height: calc(1.5em * 3); /* 3 regels zodat kaarten uitlijnen */
}
.vz-fuel-foot {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--vz-rule);
}
.vz-fuel-price {
    font-family: var(--font-jun);
    font-size: 1.4rem;
    color: var(--vz-ink);
}
.vz-fuel-price small {
    font-family: var(--font-cat);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--vz-muted);
    margin-left: 0.25rem;
}
.vz-fuel-where {
    font-family: var(--font-cat);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vz-muted);
}
.vz-fuel-status {
    position: absolute;
    top: -1px; right: -1px;
    background: var(--rood);
    color: #fff;
    font-family: var(--font-cat);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.18em;
    padding: 4px 8px;
}
.vz-price-note {
    margin: 1.2rem 0 0;
    font-family: var(--font-cat);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vz-muted);
    text-align: center;
}
/* prijzen verborgen tot de beheerder ze via een integratie bijwerkt */
.vz-hide-prices .vz-fuel-price,
.vz-hide-prices .vz-price-note { display: none; }

/* =========================================================
   BRANDSTOFFEN — bio-ethanol artikel
   ========================================================= */
.vz-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 3.5rem;
    align-items: start;
}
.vz-art-side {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.vz-art-lede {
    font-family: var(--font-jun);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--vz-ink2);
    margin: 0;
}
.vz-art-body { max-width: 640px; }
.vz-art-body h3 {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--vz-ink);
    margin: 2rem 0 0.6rem;
}
.vz-art-body h3:first-child { margin-top: 0; }
.vz-art-body p {
    font-family: var(--font-cat);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--vz-ink2);
    margin: 0 0 0.9rem;
}
.vz-art-list {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: vzart;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.vz-art-list li {
    counter-increment: vzart;
    position: relative;
    padding-left: 2.2rem;
    font-family: var(--font-cat);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vz-ink2);
}
.vz-art-list li::before {
    content: counter(vzart, decimal-leading-zero);
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--rood);
    position: absolute;
    left: 0; top: 0.3rem;
}
.vz-art-list strong { color: var(--vz-ink); font-weight: 700; }
.vz-art-advice {
    margin: 2rem 0 0;
    background: var(--vz-card);
    border: 1px solid var(--vz-card-br);
    border-top: 3px solid var(--rood);
    padding: 1.3rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.vz-art-advice p {
    margin: 0;
    font-family: var(--font-cat);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--vz-ink2);
}
.vz-art-advice b { color: var(--rood); font-weight: 700; }
.vz-art-sources {
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vz-rule);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-family: var(--font-cat);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vz-muted);
}
.vz-art-sources > span { color: var(--vz-ink); font-weight: 700; }
.vz-art-sources a {
    color: var(--vz-ink2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vz-art-sources a:hover { color: var(--rood); }

/* =========================================================
   CROSS-LINK band (beide pagina's)
   ========================================================= */
.vz-cross {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 1.8rem;
    background: var(--vz-card);
    border: 1px solid var(--vz-card-br);
}
.vz-cross h3 {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-top: 0.3rem;
    color: var(--vz-ink);
}
.vz-cross h3 strong { font-weight: 700; }

/* =========================================================
   HOBBYWASH — route
   ========================================================= */
.vz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2.2rem;
    margin-bottom: 1.5rem;
}
.vz-legend span {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-cat);
    font-size: 0.9rem;
    color: var(--vz-ink2);
}
.vz-legend b { font-weight: 700; color: var(--vz-ink); }
.vz-legend i {
    width: 28px; height: 6px;
    border-radius: 3px;
    display: block;
}

.vz-route {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--vz-rule);
}
.vz-step {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--vz-rule);
}
.vz-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    background: var(--vz-card);
    border: 1px solid var(--vz-rule);
    border-radius: 0 26px 26px 0;
    overflow: hidden;
}
.vz-pill .vz-pill-nm {
    padding: 0 1.1rem;
    font-family: var(--font-cat);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vz-ink);
    line-height: 1.15;
}
.vz-pill .vz-pill-cap {
    height: 100%;
    width: 76px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.vz-pill .vz-pill-cap b {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #f4f4f2, #a9a9a6);
    border: 3px solid #3a3a3a;
    display: block;
}
.vz-step--yellow .vz-pill-cap { background: var(--hw-yellow); }
.vz-step--red .vz-pill-cap    { background: var(--hw-red); }
.vz-step--blue .vz-pill-cap   { background: var(--hw-blue); }
/* Stop-stap: hele pill rood */
.vz-step--stop .vz-pill { background: var(--hw-red); border-color: var(--hw-red); }
.vz-step--stop .vz-pill-nm { color: #fff; font-weight: 700; font-size: 1.05rem; }
.vz-step--stop .vz-pill-cap { background: var(--hw-red); }
.vz-step--stop .vz-pill-cap b { border-color: #ff6b7a; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }

.vz-step-desc {
    font-family: var(--font-cat);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--vz-ink2);
    margin: 0;
}

/* =========================================================
   HOBBYWASH — betalen
   ========================================================= */
.vz-pay {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.2rem;
}
.vz-pay-card {
    background: var(--vz-card);
    border: 1px solid var(--vz-card-br);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.vz-pay-card h3 {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--vz-ink);
}
.vz-pay-card ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: vzpay;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.vz-pay-card ol li {
    counter-increment: vzpay;
    position: relative;
    padding-left: 2rem;
    font-family: var(--font-cat);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--vz-ink2);
}
.vz-pay-card ol li::before {
    content: counter(vzpay, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0.15rem;
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--rood);
}
.vz-pay-card > p {
    margin: 0;
    font-family: var(--font-cat);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--vz-ink2);
}
.vz-coins {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.4rem 0;
}
.vz-coin { display: block; object-fit: contain; height: auto; }
.vz-coin--50 { width: 84px; mix-blend-mode: multiply; border-radius: 50%; }
.vz-coin--1  { width: 80px; }
.vz-coin--2  { width: 90px; }
.vz-pay-foot {
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--vz-rule);
    font-family: var(--font-cat);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vz-muted);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
    .vz-fuel-groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .vz-article { grid-template-columns: 1fr; gap: 2rem; }
    .vz-art-side { position: static; }
}
@media (max-width: 800px) {
    .vz-pay { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .vz-step { grid-template-columns: 1fr; gap: 0.7rem; }
}
@media (max-width: 700px) {
    .vz-cross { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .vz-fuel-groups { grid-template-columns: 1fr; }
    .vz-sectie { padding: 3rem 5vw; }
}