/**
 * hm_flipbook_viewer — flipbook (turn.js + pdf.js) en archiefgrid.
 *
 * De maatvoering van het boek zelf staat in hm_flipbook_viewer.js: die
 * berekent één paginagrootte per layout en geeft die door aan turn.js.
 * Deze stylesheet levert alleen de stage, de chrome en de paginastijl.
 */

.awcf-hm-flipbook {
    display: block;
    max-width: min(1600px, 100%);
    margin: 2rem auto;
    padding: 1rem;
    font-family: inherit;

    /* --------------------------------------------------------------- stage */

    /* Hoogte komt uit hm_flipbook_viewer.js: die sluit de stage om het boek,
       zodat er geen loze ruimte ontstaat als de pagina in de breedte
       begrensd is (telefoon). Onderstaande hoogte geldt alleen zolang de JS
       nog niet gemeten heeft. */
    & .awcf-hm-flipbook__stage {
        position: relative;
        width: 100%;
        height: 60vh;
        background: var(--hm-color-paper-warm);
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    & .awcf-hm-flipbook__stage:focus-visible {
        outline: 3px solid var(--hm-color-gold);
        outline-offset: 2px;
    }

    /* Wrapper met exact de boekmaat (gezet vanuit JS). turn.js verschuift het
       boek daarbinnen met margin-left om een losse cover te centreren. */
    & .awcf-hm-flipbook__center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* -------------------------------------------------------------- pagina */

    & .awcf-hm-flipbook__page {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    }

    & .awcf-hm-flipbook__canvas {
        display: block;
        margin: 0;
        pointer-events: none;
    }

    & .awcf-hm-flipbook__spinner {
        width: 26px;
        height: 26px;
        border: 2px solid rgba(0, 0, 0, 0.12);
        border-top-color: var(--hm-color-navy);
        border-radius: 50%;
        animation: awcf-hm-flipbook-spin 0.9s linear infinite;
    }

    /* Koppeling naar een landingpage bij deze pagina (hm_mag_page_links). */
    & .awcf-hm-flipbook__hotspot {
        position: absolute;
        left: 50%;
        bottom: 0.75rem;
        transform: translateX(-50%);
        max-width: 90%;
        padding: 0.45rem 0.9rem;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        color: #fff;
        background: var(--hm-color-navy);
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }

    & .awcf-hm-flipbook__hotspot:hover,
    & .awcf-hm-flipbook__hotspot:focus-visible {
        background: var(--hm-color-gold);
    }

    /* -------------------------------------------------------------- chrome */

    & .awcf-hm-flipbook__loader {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 1rem;
        text-align: center;
        font-size: 0.95rem;
        color: var(--hm-color-navy);
        background: var(--hm-color-paper-warm);
    }

    /* Moet de display:flex hierboven kunnen overrulen. */
    & .awcf-hm-flipbook__loader[hidden] {
        display: none;
    }

    /* Pijlknoppen zijn er voor de muis; op touch bladert tikken. */
    & .awcf-hm-flipbook__nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: none;
        width: 48px;
        height: 64px;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        font-size: 2rem;
        line-height: 1;
        color: #fff;
        background: rgba(0, 0, 0, 0.35);
        border: 0;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
    }

    & .awcf-hm-flipbook__nav:hover {
        background: rgba(0, 0, 0, 0.6);
    }

    & .awcf-hm-flipbook__nav[disabled] {
        opacity: 0;
        pointer-events: none;
    }

    & .awcf-hm-flipbook__nav--prev {
        left: 0.5rem;
    }

    & .awcf-hm-flipbook__nav--next {
        right: 0.5rem;
    }

    & .awcf-hm-flipbook__hint {
        position: absolute;
        left: 50%;
        bottom: 1rem;
        z-index: 2;
        margin: 0;
        padding: 0.35rem 0.85rem;
        transform: translateX(-50%);
        font-size: 0.8rem;
        color: #fff;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 999px;
        opacity: 0;
        pointer-events: none;
    }

    &.is-ready.is-single .awcf-hm-flipbook__hint {
        animation: awcf-hm-flipbook-hint 5s ease-in-out forwards;
    }

    &.has-navigated .awcf-hm-flipbook__hint {
        display: none;
    }

    & .awcf-hm-flipbook__toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    & .awcf-hm-flipbook__tool {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--hm-color-navy);
        background: #fff;
        border: 1.5px solid var(--hm-color-navy);
        border-radius: 4px;
        cursor: pointer;
    }

    & .awcf-hm-flipbook__tool:hover:not([disabled]),
    & .awcf-hm-flipbook__tool:focus-visible {
        background: var(--hm-color-navy);
        color: #fff;
    }

    & .awcf-hm-flipbook__tool[disabled] {
        opacity: 0.4;
        cursor: default;
    }

    & .awcf-hm-flipbook__counter {
        min-width: 7ch;
        font-size: 0.9rem;
        font-variant-numeric: tabular-nums;
        text-align: center;
        color: #555;
    }

    &.is-failed .awcf-hm-flipbook__toolbar,
    &.is-failed .awcf-hm-flipbook__hint,
    &.is-failed .awcf-hm-flipbook__nav {
        display: none;
    }

    /* --------------------------------------------------------- fullscreen */

    &.is-fullscreen {
        max-width: none;
        margin: 0;
        padding: 0;
        background: var(--hm-color-paper-warm);
    }

    /* Hoogte zet de JS (TOOLBAR_H komt overeen met de 56px hieronder). */
    &.is-fullscreen .awcf-hm-flipbook__stage {
        border-radius: 0;
    }

    &.is-fullscreen .awcf-hm-flipbook__toolbar {
        height: 56px;
        margin: 0;
        background: var(--hm-color-paper-warm);
    }

    &.is-fullscreen .awcf-hm-flipbook__meta,
    &.is-fullscreen .awcf-hm-flipbook__actions {
        display: none;
    }

    /* ---------------------------------------------------- meta & fallback */

    & .awcf-hm-flipbook__cover {
        display: block;
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 0 auto;
        border-radius: 4px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    }

    & .awcf-hm-flipbook__meta {
        margin: 1rem 0;
        text-align: center;
    }

    & .awcf-hm-flipbook__title {
        margin: 0 0 0.25rem 0;
        font-size: 1.4rem;
        line-height: 1.3;
    }

    & .awcf-hm-flipbook__subtitle {
        margin: 0;
        font-size: 0.95rem;
        color: #555;
    }

    & .awcf-hm-flipbook__notice {
        margin: 1rem 0;
        padding: 0.75rem 1rem;
        background: var(--hm-color-paper-warm);
        border-left: 4px solid var(--hm-color-gold);
        color: var(--hm-color-navy);
        text-align: center;
    }

    & .awcf-hm-flipbook__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        margin: 1rem 0;
    }

    & .awcf-hm-flipbook__download {
        display: inline-block;
        padding: 0.65rem 1.25rem;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        color: var(--hm-color-navy);
        background: #fff;
        border: 1.5px solid var(--hm-color-navy);
        border-radius: 4px;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    }

    & .awcf-hm-flipbook__download:hover,
    & .awcf-hm-flipbook__download:focus-visible {
        background: var(--hm-color-navy);
        color: #fff;
    }

    & [hidden] {
        display: none;
    }
}

/* Muis/desktop: spread-modus. Dezelfde conditie als SPREAD_QUERY in
   hm_flipbook_viewer.js — een liggende telefoon of tablet valt hier bewust
   buiten en blijft pagina-voor-pagina. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .awcf-hm-flipbook .awcf-hm-flipbook__nav {
        display: flex;
    }
}

/* Liggende telefoon: elke pixel telt, dus minder lucht rond de stage. */
@media (max-height: 500px) and (orientation: landscape) {
    .awcf-hm-flipbook {
        padding: 0.5rem;
    }
}

@keyframes awcf-hm-flipbook-spin {
    to { transform: rotate(360deg); }
}

@keyframes awcf-hm-flipbook-hint {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

.awcf-hm-archive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;

    & .awcf-hm-archive__item {
        display: block;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    & .awcf-hm-archive__item:hover,
    & .awcf-hm-archive__item:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    }

    & .awcf-hm-archive__link {
        display: block;
        color: inherit;
        text-decoration: none;
    }

    & .awcf-hm-archive__cover {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        background: #f4f4f4;
    }

    & .awcf-hm-archive__cover--empty {
        display: block;
        width: 100%;
        aspect-ratio: 3 / 4;
        background: repeating-linear-gradient(
            45deg,
            #f4f4f4,
            #f4f4f4 10px,
            #ececec 10px,
            #ececec 20px
        );
    }

    & .awcf-hm-archive__meta {
        padding: 0.75rem 1rem 1rem 1rem;
    }

    & .awcf-hm-archive__title {
        margin: 0 0 0.2rem 0;
        font-size: 1rem;
        line-height: 1.3;
    }

    & .awcf-hm-archive__subtitle {
        margin: 0;
        font-size: 0.85rem;
        color: #666;
    }

    & .awcf-hm-archive__notice {
        grid-column: 1 / -1;
        padding: 1rem;
        text-align: center;
        color: #666;
    }
}