/* HUB — dynamisch scherm met de lopende WPS-acties en het laatste nieuwsbericht */

.slide.is-hub {
    --hub-dark: #2D2926;
    --hub-cream: #F2EDE0;
    --hub-green: #8A8C4A;
    --hub-orange: #FFAA00;
    --hub-white: #fff;
    --hub-gap: 1.05em;
    --hub-radius: .75em;
    --hub-pad: 2.1em;

    /* Volgt --fs, de schaal die per scherm wordt ingesteld (net als de WPS-slides). */
    font-size: calc(var(--fs, 16px) * 1.1);
    padding: 1.45em;
    row-gap: 0;
    color: var(--hub-dark);
    background-color: var(--hub-dark);
    background-image: repeating-linear-gradient(118deg, rgba(241, 235, 221, .05) 0 1px, rgba(241, 235, 221, 0) 1px 2.4em);
}

/* Het thema zet een font-size op elk element, dus overerving hier herstellen. */
.slide.is-hub * { font-size: 1em; line-height: 1.2; }

.is-hub .hub {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "action-one action-two brand"
        "action-one action-two news";
    gap: var(--hub-gap);
}

.is-hub .hub-action:nth-child(1) { grid-area: action-one; }
.is-hub .hub-action:nth-child(2) { grid-area: action-two; }
.is-hub .hub-brand { grid-area: brand; }
.is-hub .hub-news { grid-area: news; }

/* ACTIEKAART */
.is-hub .hub-action {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: var(--hub-pad);
    border-radius: var(--hub-radius);
    background-color: var(--hub-cream);
}

.is-hub .hub-action__head { position: relative; z-index: 2; }

.is-hub .hub-action__badge {
    display: inline-block;
    padding: .2em .4em;
    border-radius: .3em;
    background-color: var(--hub-orange);
    color: var(--hub-dark);
    font-size: .95em;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

.is-hub .hub-action__title {
    margin-top: .3em;
    font-size: 2.65em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.015em;
    overflow-wrap: break-word;
}

.is-hub .hub-action__items {
    margin-top: .65em;
    max-width: 85%;
    font-size: .85em;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(15, 15, 12, .78);
}

/* PRODUCTFOTO'S */
.is-hub .hub-action__media {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: .55em;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
}

.is-hub .hub-action__media[data-count="0"],
.is-hub .hub-action__media[data-count="1"] { grid-template-columns: 1fr; }

.is-hub .hub-action__media[data-count="3"] .hub-action__photo:first-child,
.is-hub .hub-action__media[data-count="5"] .hub-action__photo:first-child { grid-column: span 2; }

.is-hub .hub-action__photo {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: darken;
}

.is-hub .hub-action__photo.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: .12em dashed rgba(15, 15, 12, .18);
    border-radius: .7em;
    color: rgba(15, 15, 12, .35);
    font-size: 1em;
    font-weight: 600;
    mix-blend-mode: normal;
}

/* PRIJSSTICKER */
.is-hub .hub-action__sticker {
    position: absolute;
    right: 1.5em;
    bottom: 2.1em;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    filter: drop-shadow(0 .25em .7em rgba(15, 15, 12, .28));
    transform: rotate(3deg);
}

.is-hub .hub-action__sticker-label {
    padding: .18em .6em;
    border-radius: .3em .3em 0 0;
    background-color: var(--hub-orange);
    color: var(--hub-dark);
    font-size: 1.4em;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .03em;
    width: 100%;
    text-align: center;
}

.is-hub .hub-action__sticker-value {
    padding: .08em .3em .12em;
    border-radius: 0 0 .1em .1em;
    background-color: var(--hub-white);
    color: var(--hub-dark);
    font-size: 3.3em;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    white-space: nowrap;
}

.is-hub .hub-action.is-placeholder .hub-action__title,
.is-hub .hub-action.is-placeholder .hub-action__items { color: rgba(15, 15, 12, .4); }
.is-hub .hub-action.is-placeholder .hub-action__media { display: none; }

/* RECHTERKOLOM */
.is-hub .hub-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    padding: .9em var(--hub-pad);
    border-radius: var(--hub-radius);
    background-color: var(--hub-green);
}

.is-hub .hub-brand__logo {
    width: auto;
    max-width: 35%;
    height: 4.4em;
    object-fit: contain;
    object-position: left center;
}

.is-hub .hub-brand__logo--text {
    color: var(--hub-cream);
    font-size: 2em;
    font-weight: 700;
}

.is-hub .hub-brand__tagline {
    max-width: 48%;
    color: var(--hub-cream);
    font-size: 1.3em;
    font-style: italic;
    line-height: 1.3;
    text-align: right;
}

/* NIEUWSKAART */
.is-hub .hub-news {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--hub-radius);
    background-color: #24261a;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.is-hub .hub-news::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgba(15, 15, 12, .94) 0%, rgba(15, 15, 12, .72) 26%, rgba(15, 15, 12, 0) 62%);
}

.is-hub .hub-news__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8em;
    width: 100%;
    padding: var(--hub-pad);
}

.is-hub .hub-news__badge {
    padding: .32em .85em;
    border-radius: .4em;
    background-color: var(--hub-green);
    color: var(--hub-cream);
    font-size: .95em;
    font-weight: 700;
}

.is-hub .hub-news__title {
    color: var(--hub-white);
    font-size: 2.3em;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.01em;
}

.is-hub .hub-news__link {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    margin-top: .2em;
    padding: .55em 1.15em;
    border: .07em solid rgba(255, 255, 255, .55);
    border-radius: 2em;
    color: var(--hub-white);
    font-size: 1em;
    font-weight: 400;
}

.is-hub .hub-news__link strong { font-weight: 700; }

.is-hub .hub-news.is-placeholder { background-color: var(--hub-green); }
.is-hub .hub-news.is-placeholder::after { background-image: none; }

.is-hub .hub-news__icon {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* STAAND SCHERM */
.vertical .slide.is-hub { font-size: calc(var(--fs, 16px) * 1.28); --hub-pad: 1.6em; }

.vertical .is-hub .hub {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1.35fr;
    grid-template-areas:
        "brand      brand"
        "action-one action-two"
        "news       news";
}

.vertical .is-hub .hub-action__items { max-width: 100%; }
.vertical .is-hub .hub-action__title { font-size: 1.8em; }

/* Staande kaarten zijn smal en hoog: vierkante foto's onderaan i.p.v. uitgerekte cellen */
.vertical .is-hub .hub-action__media {
    flex: 0 1 auto;
    margin-top: auto;
    gap: .9em;
    padding-bottom: .3em;
    grid-auto-rows: auto;
}

.vertical .is-hub .hub-action__photo {
    height: auto;
    aspect-ratio: 1;
}