/* Erfgoed Klikplaat: afbeelding met hotspots, hover-labels en pop-ups */

.kp {
    --kp-size: clamp(30px, 5vw, 44px);
    --kp-border: 3px;
    --kp-info: #000;
    --kp-vlog: #000;
    --kp-doen: #c66fd8;
    --kp-leerkracht: #cfa8e4;
    --kp-custom: #333;
    --kp-label-bg: #fff;
    --kp-label-color: #111;
    position: relative;
}

.kp--size-small  { --kp-size: clamp(24px, 4vw, 32px); }
.kp--size-large  { --kp-size: clamp(36px, 6vw, 56px); }

.kp__stage {
    position: relative;
    display: block;
}

.kp__image {
    display: block;
    width: 100%;
    height: auto;
}

.kp__placeholder {
    padding: 4rem 1rem;
    background: #f0f0f0;
    color: #666;
    text-align: center;
    line-height: 1.4;
}

/* Standaard (breedte-gebaseerd): de overlay ligt gewoon "plat" over de afbeelding heen,
   .kp__stage blijft de positioneringscontext voor de hotspots (zoals voorheen). */
.kp__overlay {
    position: static;
}

/* ---- Volledige schermhoogte (geen scrollen) ---- */
/* Alleen vanaf tabletformaat: op een smalle telefoon zou de afbeelding anders
   te smal worden omdat ze dan op hoogte i.p.v. op breedte schaalt. */
@media (min-width: 640px) {
    .kp--fit {
        display: flex;
        justify-content: center;
        /* Val terug op 100vh; browsers die 100dvh kennen gebruiken de regel erna. */
        height: calc(100vh - var(--kp-fit-offset, 0px));
        height: calc(100dvh - var(--kp-fit-offset, 0px));
        /* Maakt van .kp een "container query"-context met een vaste, van buitenaf
           bepaalde afmeting. Daardoor kunnen .kp__stage en de afbeelding daarbinnen
           met cqw/cqh rekenen zonder het klassieke "kip-en-ei"-probleem van procenten
           in een grid-cel die zelf nog moet worden berekend. */
        container-type: size;
    }

    /* .kp__stage en .kp__overlay liggen boven op elkaar (CSS Grid, 1 cel).
       De afbeelding bepaalt hoe groot die cel wordt (nooit groter dan het scherm,
       verhouding blijft behouden: nooit bijgesneden, wel soms lege ruimte).
       De overlay-laag krijgt exact diezelfde afmeting, dus de hotspots (in %)
       blijven precies op de afbeelding staan. */
    .kp--fit .kp__stage {
        display: grid;
        /* max-content (i.p.v. auto): de cel krijgt niet automatisch de volledige
           beschikbare ruimte, maar krimpt mee met de afbeelding. Daardoor kan de
           cel gecentreerd worden in plaats van uitgerekt. */
        grid-template-columns: max-content;
        grid-template-rows: max-content;
        justify-content: center;
        align-content: center;
        width: 100cqw;
        height: 100cqh;
    }

    .kp--fit .kp__image,
    .kp--fit .kp__overlay {
        grid-area: 1 / 1;
        min-width: 0;
        min-height: 0;
    }

    .kp--fit .kp__image {
        display: block;
        width: auto;
        height: auto;
        max-width: 100cqw;
        max-height: 100cqh;
    }

    /* De overlay wordt (via de grid-cel) exact even groot als de afbeelding,
       zodat de hotspots (in %) altijd op de juiste plek op de foto blijven staan. */
    .kp--fit .kp__overlay {
        position: relative;
        width: 100%;
        height: 100%;
    }
}


/* ---- Hotspot ---- */

.kp__hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    line-height: 1;
}

.kp__hotspot:hover,
.kp__hotspot:focus-within {
    z-index: 5;
}

.kp__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--kp-size);
    height: var(--kp-size);
    padding: 0;
    border: var(--kp-border) solid #fff;
    border-radius: 50%;
    background: var(--kp-color, var(--kp-info));
    color: #fff;
    font: 700 calc(var(--kp-size) * .5) / 1 Georgia, 'Times New Roman', serif;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Grotere raakvlak voor touchschermen */
.kp__btn::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

.kp__btn:hover,
.kp__btn:focus-visible {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

.kp__btn:focus-visible {
    outline: 3px solid #1e87f0;
    outline-offset: 3px;
}

.kp__btn--info       { --kp-color: var(--kp-info); font-style: italic; }
.kp__btn--vlog       { --kp-color: var(--kp-vlog); font-family: Arial, Helvetica, sans-serif; }
.kp__btn--doen       { --kp-color: var(--kp-doen); font-family: Arial, Helvetica, sans-serif; }
.kp__btn--leerkracht { --kp-color: var(--kp-leerkracht); font-family: Arial, Helvetica, sans-serif; }
.kp__btn--custom     { font-family: Arial, Helvetica, sans-serif; }

/* ---- Label (hover-state) ---- */

.kp__label {
    position: absolute;
    z-index: 1;
    padding: .3em .7em;
    background: var(--kp-label-bg);
    color: var(--kp-label-color);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}

.kp__label--right  { left: 100%; top: 50%; margin-left: .6em; transform: translateY(-50%); }
.kp__label--left   { right: 100%; top: 50%; margin-right: .6em; transform: translateY(-50%); }
.kp__label--top    { bottom: 100%; left: 50%; margin-bottom: .6em; transform: translateX(-50%); }
.kp__label--bottom { top: 100%; left: 50%; margin-top: .6em; transform: translateX(-50%); }

.kp__hotspot:hover .kp__label,
.kp__btn:focus-visible + .kp__label,
.kp--labels .kp__label {
    opacity: 1;
    visibility: visible;
}

/* Op smalle schermen zijn labels bij hover niet bruikbaar (geen hover): tekst staat dan in de pop-up */
@media (hover: none) {
    .kp:not(.kp--labels) .kp__label { display: none; }
}

/* ---- Pop-up ---- */
/* UIkit verplaatst de modal naar <body>, dus alle instellingen staan op de modal zelf.
   !important omdat het thema (YOOtheme/UIkit) breedte en achtergrond ook met hoge prioriteit zet. */

.kp-modal {
    /* Achtergrond achter de pop-up: lager getal = doorzichtiger. */
    --kp-overlay: rgba(0, 0, 0, .3);
}

.kp-modal--overlay-lighter { --kp-overlay: rgba(0, 0, 0, .12); }
.kp-modal--overlay-light   { --kp-overlay: rgba(0, 0, 0, .25); }
.kp-modal--overlay-medium  { --kp-overlay: rgba(0, 0, 0, .4); }
.kp-modal--overlay-dark    { --kp-overlay: rgba(0, 0, 0, .6); }

.kp-modal {
    background: var(--kp-overlay) !important;
}

.kp-modal .kp-modal__dialog {
    box-sizing: border-box;
    width: min(720px, calc(100% - 2rem)) !important;
}

.kp-modal--narrow .kp-modal__dialog { width: min(520px, calc(100% - 2rem)) !important; }
.kp-modal--wide   .kp-modal__dialog { width: min(960px, calc(100% - 2rem)) !important; }

/* Groot: bijna beeldvullend, maar nog steeds duidelijk een pop-up.
   De breedte is begrensd zodat een 16:9-video ook in de hoogte past. */
.kp-modal--large .kp-modal__dialog {
    width: min(1500px, calc(100% - 3rem), calc((100vh - 14rem) * 16 / 9 + 80px)) !important;
    min-width: min(720px, calc(100% - 2rem));
}

.kp-modal__title {
    margin-bottom: 1rem;
}

.kp-modal__video {
    position: relative;
    margin-bottom: 1rem;
    background: #000;
}

.kp-modal__video iframe,
.kp-modal__video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Afbeeldingen: één per plek, over de volle breedte van de pop-up. */
.kp-modal__figure {
    margin: 0 0 1rem;
}

.kp-modal__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.kp-modal__caption {
    margin-top: .4rem;
    font-size: .85rem;
    color: #666;
}

.kp-modal__text {
    margin-bottom: 1rem;
}

.kp-modal__text > :last-child {
    margin-bottom: 0;
}

.kp-modal__dialog > :last-child {
    margin-bottom: 0;
}

/* ---- PDF-blok (onderaan de pop-up) ---- */

.kp-modal__pdf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f7f7f7;
}

.kp-modal__pdf-info {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.kp-modal__pdf-icon {
    flex: none;
    padding: .25em .5em;
    border-radius: 3px;
    background: #c0392b;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.kp-modal__pdf-name {
    overflow: hidden;
    color: #333;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kp-modal__pdf-actions {
    display: flex;
    flex: none;
    gap: .5rem;
}

.kp-modal__pdf-btn {
    display: inline-block;
    padding: .45em 1em;
    border: 0;
    border-radius: 3px;
    background: #333;
    color: #fff !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease;
}

.kp-modal__pdf-btn:hover,
.kp-modal__pdf-btn:focus-visible {
    background: #111;
}

/* Download in het groen: duidelijk een andere actie dan "Bekijk". */
.kp-modal__pdf-btn--download {
    background: #4a7a3d;
}

.kp-modal__pdf-btn--download:hover,
.kp-modal__pdf-btn--download:focus-visible {
    background: #3a6230;
}

/* ---- PDF-viewer: losse pop-up bovenop de inhouds-pop-up ---- */
/* Eigen dialoogklasse (niet .kp-modal__dialog) zodat de breedte/hoogte hier
   onafhankelijk van de gewone pop-up-formaten (Smal/Normaal/Breed/Groot) is:
   een PDF-kijker werkt het prettigst zo groot als redelijkerwijs past. */

.kp-pdf-modal .kp-pdf-modal__dialog {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(1100px, calc(100% - 2rem)) !important;
    height: calc(100% - 4rem) !important;
    max-height: 900px;
    padding: 1rem !important;
}

.kp-pdf-modal__frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    /* Gangbare grijstint van PDF-viewers: voorkomt een witte flits terwijl de PDF laadt. */
    background: #525659;
}

.kp-pdf-modal__footer {
    display: flex;
    flex: none;
    justify-content: flex-end;
    margin-top: .75rem;
}

@media (max-width: 479px) {
    .kp-pdf-modal .kp-pdf-modal__dialog {
        height: calc(100% - 2rem) !important;
    }
}