/* GS -- "Hoogte opgetrokken jaloezie" als kaart (huisstijl)
   Markup van WAPF (views/frontend/field-group.php + fields/calc.php):

     .wapf-field-container.wapf-field-calc.field-<id>.gs-pakkethoogte-card   <- style="width:100%" INLINE
        .wapf-field-label > label > span      <- het veldlabel
        .wapf-field-input > .wapf-calc-wrapper > span.wapf-calc-text   <- "ca. 25,5 cm"

   De twee kaarten (zonder/met ladderband) staan direct naast elkaar in de DOM,
   zonder witruimte ertussen, als broers binnen .wapf-field-group. Daarom:
   inline-grid + width 50% -> naast elkaar op desktop, zonder wrapper-element.

   Huisstijl: achtergrond #F7F6F3, inkt #161A45, accent #EC8B5D.
   Alleen opmaak: geen enkele regel raakt prijs, formule of conditionals aan. */

.wapf .wapf-field-container.gs-pakkethoogte-card {
    display: inline-grid;
    vertical-align: top;
    /* WAPF zet style="width:100%" inline op elke veldcontainer -> !important is
       de enige manier om er onderuit te komen zonder de generator aan te raken.
       50% - 10px + 16px marge tussen de twee = 100% - 4px, dus altijd 1 regel. */
    width: calc(50% - 10px) !important;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 14px 0;
    padding: 18px;
    background: #F7F6F3;
    border: 1px solid #E4E2DC;
    border-radius: 12px;
    color: #161A45;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}

/* de tweede kaart van het paar: enige ruimte ertussen */
.wapf .wapf-field-container.gs-pakkethoogte-card + .wapf-field-container.gs-pakkethoogte-card {
    margin-left: 16px;
}

/* WAPF verbergt conditionele velden met .wapf-hide{display:none!important};
   die !important wint al van display:inline-grid, maar we maken het expliciet. */
.wapf .wapf-field-container.gs-pakkethoogte-card.wapf-hide { display: none; }

/* de illustratie -- eigen vlak vectorbeeld, att. 56639 (340x306) */
.wapf .wapf-field-container.gs-pakkethoogte-card::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 72px;
    height: 65px;
    background: url("https://gordijnstunt.nl/wp-content/uploads/2026/09/pakkethoogte-opgetrokken-jaloezie.png") center / contain no-repeat;
}

/* Het thema zet op .wapf-field-label een WITTE achtergrond (met !important),
   een grijze onderlijn en eigen padding -- dat gaf de losse witte stroken in de
   kaart. Binnen de kaart moet alles een doorlopend #F7F6F3-vlak zijn. */
.wapf .gs-pakkethoogte-card .wapf-field-label,
.wapf .gs-pakkethoogte-card .wapf-field-label label,
.wapf .gs-pakkethoogte-card .wapf-field-description,
.wapf .gs-pakkethoogte-card .wapf-field-input,
.wapf .gs-pakkethoogte-card .wapf-calc-wrapper {
    background: transparent !important;   /* thema: background:white!important */
    border: 0;
    box-shadow: none;
}

.wapf .gs-pakkethoogte-card .wapf-field-label {
    display: block;          /* WAPF zet hier display:flex -- de uitleg moet eronder */
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.wapf .gs-pakkethoogte-card .wapf-field-label label {
    display: block;
    margin: 0;
    padding: 0;
    color: #161A45;
    font-size: 15px;
    font-weight: 700;   /* gelijk aan de andere veldlabels */
    line-height: 1.3;
}

/* korte toelichting onder het label */
.wapf .gs-pakkethoogte-card .wapf-field-label::after,
.wapf .gs-pakkethoogte-card .wapf-field-description {
    content: "Zoveel ruimte neemt het pakket lamellen bovenin in als de jaloezie helemaal omhoog staat.";
    display: block;
    margin: 6px 0 0;
    padding: 0;
    color: #5B5F72;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
}

.wapf .gs-pakkethoogte-card .wapf-field-input {
    grid-column: 2;
    grid-row: 2;
    margin: 12px 0 0;
    padding: 0;               /* thema zet padding-left:15px */
}

.wapf .gs-pakkethoogte-card .wapf-calc-wrapper { display: block; margin: 0; padding: 0; }

/* de waarde als navy pil -- NIET rood */
.wapf .gs-pakkethoogte-card .wapf-calc-text {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 999px;
    background: #161A45;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

/* zolang breedte/hoogte leeg zijn is de span leeg: geen kale navy stip tonen */
.wapf .gs-pakkethoogte-card .wapf-calc-text:empty { display: none; }

/* Mobiel + tablet: kaarten onder elkaar, weer volle breedte.
   Grens op 1023px: onder ~1024px is de formulierkolom zo smal dat een halve
   kaart (~220px) een 4-regelige titel geeft; gestapeld leest dat veel rustiger. */
@media (max-width: 1023px) {
    .wapf .wapf-field-container.gs-pakkethoogte-card {
        width: 100% !important;
        margin: 12px 0;
    }
    .wapf .wapf-field-container.gs-pakkethoogte-card + .wapf-field-container.gs-pakkethoogte-card {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .wapf .wapf-field-container.gs-pakkethoogte-card {
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 12px;
        padding: 14px;
    }
    .wapf .wapf-field-container.gs-pakkethoogte-card::before {
        width: 64px;
        height: 58px;
    }
    .wapf .gs-pakkethoogte-card .wapf-field-label label { font-size: 14px; }
    .wapf .gs-pakkethoogte-card .wapf-field-label::after,
    .wapf .gs-pakkethoogte-card .wapf-field-description { font-size: 12px; }
}