/*
 * Thoughts About God 2026 — shared Docs/Video resource-library foundation v2.1.0.
 * Loaded only for /docs/, /videos/ and MFM video-library routes.
 */

/* Shared containment and full-width isolation. */
.tag-video-library,
.tag-pdf-library,
.tagvl-library,
.tagvl-collection-nav,
.tag-video-modal,
.tag-pdf-modal,
.tagvl-modal,
.tag-video-library *,
.tag-pdf-library *,
.tagvl-library *,
.tagvl-collection-nav *,
.tag-video-modal *,
.tag-pdf-modal *,
.tagvl-modal * {
    box-sizing: border-box;
}

body.tag-library-page {
    overflow-x: clip;
}

body.tag-library-page #content,
body.tag-library-page .site-content,
body.tag-library-page .content-area,
body.tag-library-page #primary,
body.tag-library-page main.site-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.tag-library-page #secondary,
body.tag-library-page .widget-area,
body.tag-library-page .site-sidebar,
body.tag-library-page .tag-content-sidebar,
body.tag-library-page #primary + #secondary {
    display: none !important;
}

body.tag-library-page .tag-content-main,
body.tag-library-page .tag-content-primary {
    width: 100% !important;
    max-width: none !important;
}

html.tag-video-modal-open,
body.tag-video-modal-open,
html.tag-pdf-modal-open,
body.tag-pdf-modal-open,
html.tagvl-modal-open,
body.tagvl-modal-open {
    overflow: hidden;
}

.tag-video-modal[hidden],
.tag-pdf-modal[hidden],
.tagvl-modal[hidden],
.tag-pdf-card[hidden],
.tag-pdf-section[hidden],
.tag-video-library__card[hidden],
.tag-video-library__section[hidden],
.tagvl-card[hidden],
.tagvl-empty[hidden],
.tagvl-tools[hidden] {
    display: none !important;
}

/* Shared MFM collection navigation. It is used on /videos/ and collection pages. */
.tagvl-library,
.tagvl-collection-nav,
.tagvl-modal {
    --tagvl-burgundy: #7a2632;
    --tagvl-navy: #182b3c;
    --tagvl-blue: #315a7d;
    --tagvl-gold: #b78b32;
    --tagvl-brown: #3f3127;
    --tagvl-paper: #fffdf9;
    --tagvl-cream: #f8f5ef;
    --tagvl-border: #e3ddd3;
    --tagvl-muted: #6b716f;
    --tagvl-radius: 14px;
    --tagvl-shadow: 0 10px 28px rgba(38, 31, 27, .09);
}

.tagvl-library,
.tagvl-collection-nav {
    width: min(1320px, calc(100% - 40px));
    max-width: none;
    margin: 2.2rem auto;
    color: var(--tagvl-brown);
}

.tagvl-section-heading {
    margin: 0 0 1.1rem;
    padding-left: 14px;
    border-left: 4px solid var(--tagvl-burgundy);
}

.tagvl-section-heading--library {
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(24, 43, 60, .1);
    border-left: 4px solid var(--tagvl-burgundy);
    border-radius: var(--tagvl-radius);
    background: linear-gradient(135deg, #fff, #fbf7ef);
    box-shadow: 0 4px 18px rgba(38, 31, 27, .045);
}

.tagvl-section-heading h2 {
    margin: 0 0 .45rem;
    color: var(--tagvl-navy);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    line-height: 1.2;
}

.tagvl-section-heading p:last-child {
    max-width: 800px;
    margin: 0;
    color: var(--tagvl-muted);
    line-height: 1.65;
}

.tagvl-eyebrow {
    margin: 0 0 .4rem;
    color: var(--tagvl-burgundy);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tagvl-collection-nav__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.tagvl-collection-nav__card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tagvl-border);
    border-radius: var(--tagvl-radius);
    background: #fff;
    box-shadow: 0 4px 16px rgba(38, 31, 27, .045);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tagvl-collection-nav__card:hover {
    transform: translateY(-2px);
    border-color: rgba(122, 38, 50, .30);
    box-shadow: var(--tagvl-shadow);
}

.tagvl-collection-nav__body {
    padding: 1.15rem 1.15rem .8rem;
}

.tagvl-collection-nav__body h3 {
    margin: 0 0 .45rem;
    color: var(--tagvl-navy);
    font-size: 1.08rem;
}

.tagvl-collection-nav__body p {
    margin: 0;
    color: var(--tagvl-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.tagvl-collection-nav__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: auto;
    padding: .85rem 1.15rem 1rem;
    border-top: 1px solid var(--tagvl-border);
    background: #fbfaf7;
}

.tagvl-collection-nav__count {
    color: var(--tagvl-muted);
    font-size: .8rem;
    font-weight: 800;
}

.tagvl-link,
.tagvl-card__direct {
    color: var(--tagvl-burgundy);
    font-weight: 800;
    text-decoration: none;
}

.tagvl-link:hover,
.tagvl-card__direct:hover {
    color: var(--tagvl-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Shared interaction hardening. */
.tag-video-library :where(a, button),
.tag-video-modal :where(a, button, video),
.tag-pdf-library :where(a, button, input),
.tag-pdf-modal :where(a, button, iframe),
.tagvl-library :where(a, button, input, video),
.tagvl-collection-nav :where(a, button),
.tagvl-modal :where(a, button, video) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tag-video-library :where(a, button):focus-visible,
.tag-video-modal :where(a, button, video):focus-visible,
.tag-pdf-library :where(a, button, input):focus-visible,
.tag-pdf-modal :where(a, button, iframe):focus-visible,
.tagvl-library :where(a, button, input, video):focus-visible,
.tagvl-collection-nav :where(a, button):focus-visible,
.tagvl-modal :where(a, button, video):focus-visible {
    outline: 3px solid rgba(183, 139, 50, .55);
    outline-offset: 3px;
}

@media (max-width: 920px) {
    .tagvl-library,
    .tagvl-collection-nav {
        width: min(100% - 28px, 1320px);
    }

    .tagvl-collection-nav__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tagvl-library,
    .tagvl-collection-nav {
        width: min(100% - 20px, 1320px);
    }

    .tagvl-collection-nav__grid {
        grid-template-columns: 1fr;
    }

    .tagvl-collection-nav__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tag-video-library *,
    .tag-video-modal *,
    .tag-pdf-library *,
    .tag-pdf-modal *,
    .tagvl-library *,
    .tagvl-collection-nav *,
    .tagvl-modal * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* v3 production breakout: library pages must not inherit article/sidebar widths. */
body.tag-library-page .site,
body.tag-library-page #page,
body.tag-library-page #content,
body.tag-library-page .site-content,
body.tag-library-page .content-area,
body.tag-library-page #primary,
body.tag-library-page main.site-main,
body.tag-library-page .tag-video-collection-page-main,
body.tag-library-page .tag-pdf-page-main,
body.tag-library-page .tag-video-page-main {
    width: 100% !important;
    max-width: none !important;
}
body.tag-library-page .content-area,
body.tag-library-page #primary,
body.tag-library-page main.site-main,
body.tag-library-page .tag-video-collection-page-main {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.tag-library-page #secondary,
body.tag-library-page aside.widget-area,
body.tag-library-page .site-sidebar,
body.tag-library-page .tag-content-sidebar {
    display: none !important;
}

/* ========================================================================== 
   v8 mobile viewport normalization for Docs / Videos / MFM libraries
   ========================================================================== */
@media (max-width: 767px) {
    html,
    body.tag-library-page {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body.tag-library-page #page,
    body.tag-library-page #content,
    body.tag-library-page .site-content,
    body.tag-library-page .content-area,
    body.tag-library-page #primary,
    body.tag-library-page main.site-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }

    .tag-video-library,
    .tag-pdf-library,
    .tagvl-library,
    .tagvl-collection-nav {
        min-width: 0;
    }

    .tagvl-library,
    .tagvl-collection-nav {
        width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
    }
}