/* ═══════════════════════════════════════════════════
   DIGITAL LIBRARY PAGE
═══════════════════════════════════════════════════ */

/* ── Hero banner — flat full-width artwork (library page only) ──
   banner-digital-library.png is 1440×411 and already carries its own
   dark gradient, so the component overlay from page-hero.css is
   disabled. aspect-ratio matches the image exactly so the banner
   renders edge-to-edge without cropping, and the component's curved
   bottom edge is removed. */
.mtic-page--library .mtic-page-hero {
    border-radius: 0;
    min-height: 0;
    aspect-ratio: 1440 / 411;
    background-position: center;
    /* The PNG's bottom corners are transparent (the curve is part of
       the artwork) — the component's dark fallback colour must not
       show through them. */
    background-color: transparent;
}

.mtic-page--library .mtic-page-hero::before {
    content: none;
}

/* Text sizing and padding mirror the Statistics hero (statistics.css);
   only the alignment (component default / centred on mobile) differs. */
.mtic-page--library .mtic-page-hero__inner {
    padding: 3.5rem var(--mtic-container-pad) 4.5rem;
}

.mtic-page--library .mtic-page-hero__title {
    font-size: clamp(1.75rem, 4vw, 42px);
    line-height: 1.0;
    margin-bottom: 1.25rem; /* statistics hero uses flex gap 1.25rem */
}

/* White subtitle (overrides the component's teal). */
.mtic-page--library .mtic-page-hero__subtitle {
    color: var(--mtic-white);
    font-size: clamp(1.1rem, 2.5vw, 30px);
    font-weight: 400;
    line-height: 1.3;
    max-width: 520px;
    margin-bottom: 1.25rem; /* statistics hero uses flex gap 1.25rem */
}

.mtic-page--library .mtic-page-hero__desc {
    font-size: 1.25rem;
    max-width: 420px;
    padding-top: 0.25rem;
}

/* ── Search bar — straddles the banner's flat bottom edge ──
   Narrower than the component default, soft-rounded rectangle
   instead of a pill. */
.mtic-page--library .mtic-page-search {
    margin-top: -32px;
}

.mtic-page--library .mtic-page-search__form {
    max-width: 430px;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(3, 47, 60, 0.18);
}

.mtic-page--library .mtic-page-search__btn {
    border-radius: 0 8px 8px 0;
    min-width: 56px;
}

/* "Digital Library" heading above the search bar — mobile only. */
.mtic-page--library .mtic-page-search__heading {
    display: none;
}

/* ── Category filter bar ── */
.mtic-library-filter {
    margin-bottom: var(--mtic-spacing-lg);
}

.mtic-library-filter__heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mtic-primary);
    margin-bottom: var(--mtic-spacing-sm);
}

.mtic-library-filter__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mtic-spacing-sm);
}

.mtic-library-filter__btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.3rem 1.1rem;
    border-radius: 20px;
    border: 1.5px solid var(--mtic-border);
    background: var(--mtic-white);
    color: var(--mtic-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--mtic-transition);
}

.mtic-library-filter__btn:hover {
    border-color: var(--mtic-primary);
    color: var(--mtic-primary);
}

.mtic-library-filter__btn--active {
    background: var(--mtic-primary);
    border-color: var(--mtic-primary);
    color: var(--mtic-white);
    font-weight: 600;
}

.mtic-library-filter__btn--active:hover {
    background: var(--mtic-dark);
    border-color: var(--mtic-dark);
    color: var(--mtic-white);
}

/* ── Library results wrapper ── */
.mtic-library-grid {
    padding-bottom: var(--mtic-spacing-xl);
}

.mtic-library-grid__empty {
    padding: var(--mtic-spacing-xl) 0;
    color: var(--mtic-text-light);
    text-align: center;
    font-size: 1rem;
    grid-column: 1 / -1; /* span the whole grid when shown as the empty state */
}

/* ── Live search loading state (see assets/js/live-search.js) ── */
.mtic-library-grid__items.mtic-listing--loading {
    opacity: 0.55;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* ── Library card grid — 4 columns desktop ── */
.mtic-library-grid__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mtic-spacing-md);
    margin-bottom: var(--mtic-spacing-lg);
}

/* ── Library card ── */
/* Card is static — only the E-book/PDF buttons are interactive. */
.mtic-library-card {
    background: var(--mtic-white);
    border: 1px solid var(--mtic-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Cover image — portrait/book-cover aspect (3:4) */
.mtic-library-card__cover {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--mtic-light);
    position: relative;
}

.mtic-library-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* No-image placeholder */
.mtic-library-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--mtic-dark) 0%, var(--mtic-primary) 100%);
    text-decoration: none;
}

/* Card body */
.mtic-library-card__body {
    padding: var(--mtic-spacing-sm) var(--mtic-spacing-sm) var(--mtic-spacing-xs);
    display: flex;
    flex-direction: column;
    gap: var(--mtic-spacing-xs);
    flex: 1;
}

.mtic-library-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mtic-dark);
    line-height: 1.4;
    margin: 0;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mtic-library-card__meta {
    display: flex;
    align-items: center;
    gap: var(--mtic-spacing-xs);
    flex-wrap: wrap;
    margin-top: auto;
}

.mtic-library-card__year {
    font-size: 0.78rem;
    color: var(--mtic-text-light);
}

/* Excerpt — mobile only (shown in the 767px media query below) */
.mtic-library-card__excerpt {
    display: none;
}

/* ── Card actions: E-book / PDF viewer buttons ── */
.mtic-library-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mtic-spacing-xs);
    padding: 0 var(--mtic-spacing-sm) var(--mtic-spacing-md);
}

/* Doubled-up selectors (0,2,0): the E-book button is a dFlip trigger and
   the plugin's runtime adds its own `df-popup-button` class, whose CSS
   (grey background, own padding/margin/radius, grey hover) would otherwise
   tie with these rules and win or lose on load order alone. */
.mtic-library-card__actions .mtic-library-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 0.4rem 1.3rem;
    border-radius: 4px;
    font-size: 0.8rem;
    text-decoration: none;
}

/* E-book → matches the listing search button (teal). Stays teal on
   hover (explicit rule so dFlip's grey `.df-popup-button:hover` never
   applies); the shared .mtic-btn lift/shadow still gives feedback. */
.mtic-library-card__actions .mtic-library-card__btn--ebook,
.mtic-library-card__actions .mtic-library-card__btn--ebook:hover,
.mtic-library-card__actions .mtic-library-card__btn--ebook:focus-visible {
    background: var(--mtic-primary);
    border-color: var(--mtic-primary);
    color: var(--mtic-white);
}

/* PDF → matches the listing search button's hover state (navy) */
.mtic-library-card__actions .mtic-library-card__btn--pdf {
    background: var(--mtic-dark);
    border-color: var(--mtic-dark);
    color: var(--mtic-white);
}

.mtic-library-card__actions .mtic-library-card__btn--pdf:hover,
.mtic-library-card__actions .mtic-library-card__btn--pdf:focus-visible {
    background: #0a4a5e;
    border-color: #0a4a5e;
    color: var(--mtic-white);
}

/* ── Poster card — image-only variant (former Posters CPT) ──
   The whole card is one lightbox trigger: no title, no year, no
   E-book/PDF buttons. The cover keeps the library 3:4 ratio when the
   row is all posters, and stretches to match taller standard cards in
   the mixed "All" view (height:100% wins over aspect-ratio once the
   flexed trigger gives it a definite height). */
.mtic-library-card--poster {
    display: flex;
    flex-direction: column;
}

.mtic-library-card__poster-trigger {
    display: block;
    flex: 1;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.mtic-library-card__poster-trigger:focus-visible {
    outline: 2px solid var(--mtic-primary);
    outline-offset: 2px;
}

.mtic-library-card--poster .mtic-library-card__cover {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
}

.mtic-library-card--poster .mtic-library-card__img {
    transition: transform 0.3s ease;
}

.mtic-library-card__poster-trigger:hover .mtic-library-card__img {
    transform: scale(1.03);
}

/* ── Poster lightbox (template-parts/library/poster-lightbox.php) ── */
body.mtic-poster-lightbox-open {
    overflow: hidden;
}

.mtic-poster-lightbox {
    position: fixed;
    inset: 0;
    /* Above site header (z-index: 99999) */
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtic-poster-lightbox[hidden] {
    display: none;
}

.mtic-poster-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 47, 60, 0.88);
    cursor: pointer;
}

.mtic-poster-lightbox__chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    pointer-events: none;
}

.mtic-poster-lightbox__counter,
.mtic-poster-lightbox__close {
    pointer-events: auto;
}

.mtic-poster-lightbox__counter {
    margin: 0;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.mtic-poster-lightbox__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
    transition: opacity 0.2s ease;
}

.mtic-poster-lightbox__close:hover {
    opacity: 0.75;
}

.mtic-poster-lightbox__stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(520px, 78vw);
    max-height: min(85vh, 900px);
    margin: 0 4.5rem;
}

.mtic-poster-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: min(85vh, 900px);
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

.mtic-poster-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mtic-white);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.mtic-poster-lightbox__nav:hover {
    opacity: 0.75;
}

.mtic-poster-lightbox__nav--prev {
    left: 1.25rem;
}

.mtic-poster-lightbox__nav--next {
    right: 1.25rem;
}

/* ── Responsive: 3-col tablet, 2-col mobile ── */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .mtic-library-grid__items {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767px) {
    /* Banner keeps its natural 1440/411 ratio on mobile too, so the
       artwork's baked-in curved edge always shows uncropped — same
       look as the About-page hero. Text is compacted to fit inside
       the shorter banner; readability comes from text-shadow (an
       overlay would tint the transparent curve corners). */
    /* Mobile banner text mirrors the Statistics hero (statistics.css);
       alignment stays centred (component mobile default). */
    .mtic-page--library .mtic-page-hero__inner {
        padding: 3rem var(--mtic-container-pad) 2.5rem;
    }

    .mtic-page--library .mtic-page-hero__title {
        font-size: 1.25rem;
        line-height: 0.71;
        margin-bottom: 0.75rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .mtic-page--library .mtic-page-hero__subtitle {
        font-size: 0.85rem;
        line-height: 0;
        margin-bottom: 0.85rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .mtic-page--library .mtic-page-hero__desc {
        font-size: 0.72rem;
        line-height: 1.4;
        /* Wraps slightly past the headline's rendered width */
        max-width: 19rem;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    }

    /* Search bar sits below the banner in normal flow, with the
       "Digital Library" heading above it. */
    .mtic-page--library .mtic-page-search {
        margin-top: var(--mtic-spacing-md);
    }

    .mtic-page--library .mtic-page-search__heading {
        display: block;
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--mtic-primary);
        margin: 0 0 0.75rem;
    }

    /* Full-width rounded bar with an inset teal button. */
    .mtic-page--library .mtic-page-search__form {
        max-width: 100%;
        padding: 5px;
        border-radius: 10px;
    }

    .mtic-page--library .mtic-page-search__btn {
        border-radius: 8px;
    }

    /*---Styling apply to mtic large-text (large text-accessbility mode only)---*/
    .mtic-text-large .mtic-page-search__form {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .mtic-text-large .mtic-page-search__input {
        flex: 1;
        min-width: 0; 
        width: 100%;
        box-sizing: border-box;
    }

    .mtic-text-large .mtic-page-search__btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Two-column grid: standard cards span both columns (single-column
       horizontal cards, as before); poster cards sit two-up like the
       old Posters page. */
    .mtic-library-grid__items {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mtic-spacing-md);
    }

    /* Card: cover left, text right, actions row spanning below */
    .mtic-library-card {
        display: grid;
        grid-template-columns: 40% 1fr;
        column-gap: var(--mtic-spacing-sm);
        padding: var(--mtic-spacing-sm);
    }

    .mtic-library-card:not(.mtic-library-card--poster) {
        grid-column: 1 / -1;
    }

    /* Poster card: image-only, no inner padding. */
    .mtic-library-card--poster {
        display: flex;
        padding: 0;
    }

    .mtic-library-card__cover {
        grid-column: 1;
        grid-row: 1;
        border-radius: 4px;
    }

    .mtic-library-card__body {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
    }

    .mtic-library-card__title {
        -webkit-line-clamp: 4;
    }

    .mtic-library-card__excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.55;
        color: var(--mtic-text-light);
    }

    .mtic-library-card__meta {
        display: none;
    }

    .mtic-library-card__actions {
        grid-column: 1 / -1;
        margin-top: var(--mtic-spacing-md);
        padding: 0;
        gap: var(--mtic-spacing-sm);
    }

    .mtic-library-card__actions .mtic-library-card__btn {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0.4rem 1.5rem;
    }
}