/**
 * MEDIA & GALLERY PAGE STYLES
 * Combined styles for exhibitions, gallery, and media pages
 *
 * Sections:
 *   1. Gallery Pages (.gallery-page-section) — images/fdc.html, images/pm.html
 *   2. Media Pages (.content-page.media-page) — media/books.html, videos.html, paleoart.html
 *   3. Exhibitions (.exhibitions-index) — exhibitions/index.html
 *
 * Shared patterns (links, br collapse, float clearing, selection)
 * are in common-style.css via .legacy-content class.
 */

/* =====================================================================
   SECTION 1: GALLERY PAGE STYLES
   Scoped to .gallery-page-section
   ===================================================================== */

/* ===== BASE STYLES =====
 * Section padding, h1 + yellow accent, big labels, and list styling
 * are now in css/components/section-page-base.css
 */

/* ===== TYPOGRAPHY ===== */
.gallery-page-section h2 {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 400;
    color: var(--hp-text-light, #4a4a4a);
    margin-bottom: 1.5rem;
    line-height: 1.7;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.gallery-page-section h3 {
    font-family: var(--font-display, 'Crimson Pro', Georgia, serif);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--hp-black, #0a0a0a);
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 3px solid var(--hp-yellow, #d4a72c);
    display: inline-block;
}

/* ===== BODY TEXT ===== */
.gallery-page-section p,
.gallery-page-section > .container > br + * {
    font-size: clamp(0.9375rem, 1vw + 0.75rem, 1.0625rem);
    line-height: 1.75;
    color: var(--hp-text, #2a2a2a);
}

/* Lists and big labels now in css/components/section-page-base.css */

/* ===== FLOAT TABLES ===== */
/* Base float rules (width:min-content, float, td reset, img) in common-style.css */
.gallery-page-section table[align="right"] {
    margin: 0 0 1.5rem 2rem;
    border: none;
}

.gallery-page-section table[align="right"] img {
    display: inline-block;
    border-radius: 4px;
}

.gallery-page-section table {
    width: auto;
    max-width: 100%;
    border: none;
}

.gallery-page-section td {
    border-bottom: none;
    padding: 0.25rem;
}

/* ===== INLINE FLOAT IMAGES ===== */
.gallery-page-section img[align="right"] {
    float: right;
    margin: 0 0 1rem 1.5rem;
    max-width: 350px;
    border-radius: 4px;
}

/* ===== LAST UPDATE LINE ===== */
.gallery-page-section div[align="right"] {
    text-align: right;
    font-size: 0.875rem;
    color: var(--hp-gray-dark, #5a5a5a);
    margin-bottom: 1.5rem;
}

.gallery-page-section div[align="right"] big {
    font-size: 0.9375rem;
    font-weight: 500;
}

/* ===== ACKNOWLEDGEMENTS / REFERENCES ===== */
.gallery-page-section u {
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--hp-yellow, #d4a72c);
}

/* ===== CLICK TO ENLARGE NOTICE ===== */
.gallery-page-section center big em {
    font-size: 1rem;
    color: var(--hp-text-light, #4a4a4a);
}

/* ===== GOOGLE ADS ===== */
.gallery-page-section .adsbygoogle {
    margin: 1.5rem 0;
}

/* ===== SLIDESHOW OVERRIDES ===== */
.gallery-page-section .slideshow-container {
    margin: 2rem 0;
}

.gallery-page-section .preview-caption {
    font-family: var(--font-body, 'DM Sans', sans-serif);
}

/* ===== GALLERY RESPONSIVE ===== */
/* Section padding + h1 responsive in css/components/section-page-base.css */
@media (max-width: 768px) {
    .gallery-page-section table[align="right"] {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1rem 0;
    }

    .gallery-page-section img[align="right"] {
        float: none;
        display: block;
        margin: 1rem auto;
        max-width: 100%;
    }
}

/* =====================================================================
   SECTION 2: MEDIA PAGE STYLES
   Scoped to .content-page.media-page
   ===================================================================== */

/* ===== SECTION HEADINGS ===== */
.content-page.media-page h2 {
    position: relative;
    padding-bottom: 0.75rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    border-bottom: none;
}

.content-page.media-page h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--hp-yellow, #d4a72c);
    border-radius: 2px;
}

/* Centered h2 (inside <center>) — center the accent bar too */
.content-page.media-page center + h2::after,
.content-page.media-page center h2::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ===== TABLE OF CONTENTS ===== */
.content-page.media-page > table:first-of-type {
    background: var(--hp-white, #fff);
    border-radius: 10px;
    border: 1px solid var(--hp-gray, #e5e4e1);
    border-left: 4px solid var(--hp-yellow, #d4a72c);
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.content-page.media-page > table:first-of-type td {
    border-bottom: none;
    padding: 1.25rem 1.5rem;
    vertical-align: top;
}

.content-page.media-page > table:first-of-type ul {
    margin-bottom: 0;
}

.content-page.media-page > table:first-of-type li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Standalone TOC (videos page) */
.content-page.media-page > big + ul,
.content-page.media-page > center + big + ul {
    background: var(--hp-white, #fff);
    padding: 1.25rem 1.5rem 1.25rem 2.75rem;
    border-radius: 10px;
    border: 1px solid var(--hp-gray, #e5e4e1);
    border-left: 4px solid var(--hp-yellow, #d4a72c);
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* "Contents:" label */
.content-page.media-page > big:first-of-type {
    display: block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hp-gray-dark, #5a5a5a);
    margin-bottom: 0.75rem;
    margin-top: 1rem;
}

/* ===== INTRO TEXT ===== */
.content-page.media-page > center + big,
.content-page.media-page h1 + big,
.content-page.media-page center + big {
    display: block;
    font-family: var(--font-display, 'Crimson Pro', Georgia, serif);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: 400;
    line-height: 1.75;
    color: var(--hp-text-light, #4a4a4a);
    max-width: 72ch;
    margin: 0 auto 2rem;
    text-align: center;
}

/* ===== RESPONSIVE IFRAMES ===== */
.content-page.media-page iframe {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    max-width: 100%;
    border: none;
    transition: box-shadow 0.3s ease;
}

.content-page.media-page iframe:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Full-width single videos in <center> */
.content-page.media-page center iframe,
.content-page.media-page center video {
    width: 100% !important;
    max-width: 950px;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

.content-page.media-page video {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    max-width: 100%;
}

/* ===== VIDEO GRID TABLES ===== */
.content-page.media-page table[cellpadding="5"],
.content-page.media-page table[style*="text-align: center"] {
    width: 100% !important;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1rem;
}

.content-page.media-page table[cellpadding="5"] td,
.content-page.media-page table[style*="text-align: center"] td {
    vertical-align: top;
    padding: 0.5rem;
    border-bottom: none;
    width: 50%;
}

.content-page.media-page table[cellpadding="5"] iframe,
.content-page.media-page table[style*="text-align: center"] iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* ===== BOOK GRID TABLES ===== */
.content-page.media-page table[cellpadding="10px"],
.content-page.media-page table[cellpadding="10"] {
    width: 100% !important;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0.5rem;
}

.content-page.media-page table[cellpadding="10px"] td,
.content-page.media-page table[cellpadding="10"] td {
    vertical-align: top;
    padding: 0.75rem;
    border-bottom: none;
}

/* Image cells: center images */
.content-page.media-page table[cellpadding="10px"] tr[style*="text-align: center"] td,
.content-page.media-page table[cellpadding="10px"] > tbody > tr:first-child td,
.content-page.media-page table[cellpadding="10px"] > tr:first-child td {
    text-align: center;
}

/* Book cover images */
.content-page.media-page table[cellpadding="10px"] img,
.content-page.media-page table[cellpadding="10"] img {
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 100%;
    height: auto !important;
    max-height: 280px;
    object-fit: contain;
    display: inline-block;
}

.content-page.media-page table[cellpadding="10px"] a:hover img,
.content-page.media-page table[cellpadding="10"] a:hover img {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Book description text */
.content-page.media-page table[cellpadding="10px"] small,
.content-page.media-page table[cellpadding="10"] small {
    display: block;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--hp-text-light, #4a4a4a);
    margin-top: 0.25rem;
}

/* ===== PALEOART BOOK SHOWCASE ===== */
.content-page.media-page > table[width="950px"]:not([cellpadding]) {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 1rem;
}

.content-page.media-page > table[width="950px"]:not([cellpadding]) td {
    vertical-align: top;
    padding: 0.75rem;
    border-bottom: none;
}

.content-page.media-page > table[width="950px"]:not([cellpadding]) img {
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 100%;
    height: auto !important;
}

.content-page.media-page > table[width="950px"]:not([cellpadding]) a:hover img {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.content-page.media-page > table[width="950px"]:not([cellpadding]) iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* Spacer rows */
.content-page.media-page > table[width="950px"] td[style*="height: 40px"],
.content-page.media-page > table[width="950px"] td[style*="height:40px"] {
    height: 1.5rem !important;
}

/* ===== VIDEO TABLE (1000px width) ===== */
.content-page.media-page table[width="1000px"] {
    width: 100% !important;
    max-width: 100%;
}

.content-page.media-page table[width="1000px"] td {
    vertical-align: top;
    padding: 0.5rem;
    border-bottom: none;
    width: 50%;
}

.content-page.media-page table[width="1000px"] iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* ===== REFERENCES SECTION ===== */
.content-page.media-page big + ul[style*="margin-top: 0"],
.content-page.media-page a[name="ref"] ~ big + ul {
    background: var(--hp-gray-light, #f0efec);
    padding: 1.25rem 1.5rem 1.25rem 2.75rem;
    border-radius: 8px;
    border-left: 3px solid var(--hp-gray-medium, #9a9a9a);
}

/* ===== SECTION DIVIDERS ===== */
.content-page.media-page h2 {
    border-top: 1px solid var(--hp-gray, #e5e4e1);
    padding-top: 2.5rem;
}

/* First h2 doesn't need top border */
.content-page.media-page > center + h2:first-of-type,
.content-page.media-page > table:first-of-type + br + br + br + h2 {
    border-top: none;
    padding-top: 0;
}

/* Amazon links styling */
.content-page.media-page small a,
.content-page.media-page em a {
    font-weight: 500;
}

/* YouTube red text links */
.content-page.media-page font[color="red"] {
    color: #cc0000 !important;
}

/* ===== INTRO DESCRIPTION TEXT ===== */
.content-page.media-page > p,
.content-page.media-page > br + p {
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    line-height: 1.75;
    color: var(--hp-text, #2a2a2a);
    max-width: 72ch;
}

/* ===== SECTION LABELS ===== */
.content-page.media-page > big {
    display: block;
    font-family: var(--font-display, 'Crimson Pro', Georgia, serif);
    font-size: 1.1em;
    font-weight: 500;
    color: var(--hp-text, #2a2a2a);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

/* ===== CONSECUTIVE BR COLLAPSE (media-specific: hide 3+ consecutive brs) ===== */
.content-page.media-page br + br + br {
    display: none;
}

/* ===== MEDIA RESPONSIVE — Tablet ===== */
@media (max-width: 1024px) {
    .content-page.media-page table[cellpadding="5"],
    .content-page.media-page table[width="1000px"],
    .content-page.media-page table[style*="text-align: center"] {
        display: block;
    }

    .content-page.media-page table[cellpadding="5"] tbody,
    .content-page.media-page table[cellpadding="5"] tr,
    .content-page.media-page table[width="1000px"] tbody,
    .content-page.media-page table[width="1000px"] tr,
    .content-page.media-page table[style*="text-align: center"] tbody,
    .content-page.media-page table[style*="text-align: center"] tr {
        display: block;
    }

    .content-page.media-page table[cellpadding="5"] td,
    .content-page.media-page table[width="1000px"] td,
    .content-page.media-page table[style*="text-align: center"] td {
        display: block;
        width: 100% !important;
        padding: 0.5rem 0;
    }
}

/* ===== MEDIA RESPONSIVE — Mobile ===== */
@media (max-width: 768px) {
    .content-page.media-page h1 {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .content-page.media-page h2 {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
        margin-top: 2rem;
        padding-top: 2rem;
    }

    /* Book tables — 2 columns on mobile */
    .content-page.media-page table[cellpadding="10px"],
    .content-page.media-page table[cellpadding="10"] {
        display: block;
    }

    .content-page.media-page table[cellpadding="10px"] tbody,
    .content-page.media-page table[cellpadding="10"] tbody {
        display: block;
    }

    .content-page.media-page table[cellpadding="10px"] tr,
    .content-page.media-page table[cellpadding="10"] tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .content-page.media-page table[cellpadding="10px"] td,
    .content-page.media-page table[cellpadding="10"] td {
        flex: 1 1 calc(50% - 0.75rem);
        min-width: 130px;
        width: auto !important;
        padding: 0.5rem;
    }

    .content-page.media-page table[cellpadding="10px"] img,
    .content-page.media-page table[cellpadding="10"] img {
        max-height: 200px;
    }

    /* Featured book tables (paleoart) */
    .content-page.media-page > table[width="950px"]:not([cellpadding]) {
        display: block;
    }

    .content-page.media-page > table[width="950px"]:not([cellpadding]) tbody,
    .content-page.media-page > table[width="950px"]:not([cellpadding]) tr {
        display: block;
    }

    .content-page.media-page > table[width="950px"]:not([cellpadding]) td {
        display: block;
        width: 100% !important;
        padding: 0.5rem 0;
    }

    /* TOC table */
    .content-page.media-page > table:first-of-type {
        display: block;
    }

    .content-page.media-page > table:first-of-type tbody,
    .content-page.media-page > table:first-of-type tr {
        display: block;
    }

    .content-page.media-page > table:first-of-type td {
        display: block;
        width: 100% !important;
    }
}

/* ===== MEDIA RESPONSIVE — Small mobile ===== */
@media (max-width: 480px) {
    .content-page.media-page table[cellpadding="10px"] td,
    .content-page.media-page table[cellpadding="10"] td {
        flex: 1 1 100%;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .content-page.media-page iframe,
    .content-page.media-page img,
    .content-page.media-page video {
        transition: none !important;
    }

    .content-page.media-page a:hover img {
        transform: none !important;
    }
}

/* ===== MEDIA PRINT ===== */
@media print {
    .content-page.media-page iframe,
    .content-page.media-page video {
        display: none;
    }

    .content-page.media-page table[cellpadding="10px"] img,
    .content-page.media-page table[cellpadding="10"] img {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* =====================================================================
   SECTION 3: EXHIBITIONS INDEX PAGE STYLES
   Scoped to .exhibitions-index
   ===================================================================== */

.exhibitions-index .content-page > table:not([align]) {
    border-collapse: separate;
    border-spacing: 0.5rem;
    width: 100%;
    border: none;
    margin-bottom: 1rem;
}

.exhibitions-index .content-page > table:not([align]) tr {
    background: transparent !important;
}

/* ===== TITLE ROW — row before the image row ===== */
.exhibitions-index .content-page > table:not([align]) tr:has(+ tr > td > a > img) > td {
    background: var(--hp-warm-white, #faf8f5);
    border: 1px solid var(--hp-gray, #e5e4e1);
    border-bottom: 3px solid var(--hp-yellow, #d4a72c);
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hp-black, #0a0a0a);
    text-align: center;
}

.exhibitions-index .content-page > table:not([align]) tr:has(+ tr > td > a > img) > td a {
    text-decoration: none !important;
    color: var(--hp-black, #0a0a0a) !important;
}

.exhibitions-index .content-page > table:not([align]) tr:has(+ tr > td > a > img) > td a:hover {
    color: var(--color-accent-dark, #d4a72c) !important;
}

/* ===== IMAGE CELLS — card body ===== */
.exhibitions-index .content-page > table:not([align]) td:has(> a > img) {
    background: var(--hp-cream, #f8f6f0);
    border: 1px solid var(--hp-gray, #e5e4e1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.375rem;
    transition: all 0.25s ease;
    text-align: center;
}

.exhibitions-index .content-page > table:not([align]) td:has(> a > img):hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--hp-yellow, #d4a72c);
}

/* Image links inside cards */
.exhibitions-index .content-page > table:not([align]) td:has(> a > img) a {
    display: inline;
    line-height: 0;
    text-decoration: none !important;
}

/* Images — respect HTML height attribute, remove redundant card styling */
.exhibitions-index .content-page > table:not([align]) td:has(> a > img) img {
    max-width: none;
    display: inline-block;
    vertical-align: middle;
    border: none;
    background: transparent;
    padding: 0;
    transition: transform 0.3s ease;
}

.exhibitions-index .content-page > table:not([align]) td:has(> a > img) a:hover img {
    transform: scale(1.03);
}

/* ===== ATTRIBUTION ROW ===== */
.exhibitions-index .content-page > table:not([align]) tr + tr + tr > td:not(:has(> a > img)) {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #57534e);
    padding: 0.5rem 0.75rem;
    line-height: 1.5;
}

/* ===== SPACER ROWS ===== */
.exhibitions-index .content-page > table:not([align]) td[style*="height"] {
    height: 0.5rem !important;
    background: transparent !important;
    border: none !important;
}

/* ===== EXHIBITIONS RESPONSIVE ===== */
@media (max-width: 768px) {
    .exhibitions-index .content-page > table:not([align]) {
        border-spacing: 0.375rem;
    }

    .exhibitions-index .content-page > table:not([align]) td {
        display: block;
        width: 100% !important;
    }

    .exhibitions-index .content-page > table:not([align]) td[colspan] {
        width: 100% !important;
    }

    .exhibitions-index .content-page > table:not([align]) td:has(> a > img) {
        max-width: 320px;
        margin: 0 auto;
    }
}