/**
 * YEAR PAGE STYLES
 * Shared styles for all year pages (1840-2026)
 * Extends the Museum Editorial Design system
 *
 * Component styles extracted to css/components/:
 *   - stamp-cards.css    → .stamps-grid, .stamp-entry, .stamp-entry__header/image
 *   - books-grid.css     → .year-books-grid, .year-book-card, .year-book-card__info
 *   - prev-next-nav.css  → .year-prev-next, .bottom-nav, .bottom-nav__center
 *   - callout-box.css    → .ack-section, .ack-box, .year-announcement, .year-announcement__box
 *   - content-section.css → .year-content-section, __title, __subtitle
 */

/* ===== YEAR HERO SECTION =====
 * Hero styles extracted to css/components/page-hero.css
 * .year-hero / .year-subtitle / .year-note are aliased there for backward compatibility.
 */

/* ===== YEAR NAVIGATION SECTION ===== */
/* Wrapper for the decades browser on year pages — visual styling is on .decades-browser itself */
.year-nav-section {
    margin-bottom: 1.5rem;
}

/* Remove the extra margin-bottom from decades-browser when inside year-nav-section
   since the section wrapper already handles spacing */
.year-nav-section .decades-browser {
    margin-bottom: 0;
}

/* ===== YEAR CONTENT LAYOUT (TOC on top, full-width main) ===== */
.year-content-layout {
    display: block;
    padding: var(--space-5) 0;
}

/* Two-column layout when FB promo sits beside the TOC */
/* Contents 2/3, FB-Promo 1/3 */
.year-content-layout:has(> .year-fb-promo) {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.year-content-layout:has(> .year-fb-promo) .year-sidebar {
    margin-bottom: 0;
}

.year-sidebar {
    margin-bottom: 1.5rem;
}

.year-main {
    min-width: 0;
    grid-column: 1 / -1;
    font-size: 0.875rem;
    padding: 0 1rem;
}

/* Section headings: full-width yellow underline */
.year-main > h2 {
    width: 100%;
    display: block;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--hp-yellow, #d4a72c);
}

.year-main > .stamps-grid:first-child {
    margin-bottom: 1.5rem;
}

/* Inner containers inside year-main don't need their own max-width */
.year-main .container {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Consistent bottom spacing on paragraphs in year-main */
.year-main .container p {
    margin-bottom: 0.5rem;
}

/* ===== TABLE OF CONTENTS =====
 * Base TOC styles in css/components/toc.css
 * Floating TOC FAB + popup in css/components/toc-fab.css
 */

/* ===== NOTES / FOOTNOTES ===== */
.year-notes {
    padding: 2rem 0;
    background: var(--hp-warm-white);
}

.year-notes__box {
    background: var(--hp-white);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    border: 1px solid var(--hp-gray);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--hp-text-light);
}

/* ===== ANCHOR SCROLL OFFSET ===== */
.year-main [id] {
    scroll-margin-top: var(--scroll-offset, 180px);
}

/* ===== FACEBOOK PROMO =====
 * Base FB promo styles now in css/components/fb-promo.css
 * Only page-specific overrides remain here.
 */

@media (max-width: 768px) {
    .year-content-layout:has(> .year-fb-promo) {
        grid-template-columns: 1fr;
    }
}

/* ===== AD BANNER ===== */
.year-ad-banner {
    padding: 1.5rem 0;
    background: var(--hp-white);
    text-align: center;
}

.year-ad-banner .container {
    max-width: 728px;
}

.year-ad-banner amp-ad,
.year-ad-banner .adsbygoogle {
    display: none;
}

.year-ad-banner .adsbygoogle[data-ad-status="filled"] {
    display: inline-block;
}

.year-ad-banner:not(:has(.adsbygoogle[data-ad-status="filled"])) {
    display: none;
}

/* ===== AWARDS / PROMO BANNER ===== */
.year-awards-banner {
    padding: 2.5rem 0;
    background: var(--hp-black);
    color: var(--hp-white);
    text-align: center;
}

.year-awards-banner a {
    color: var(--hp-yellow);
    text-decoration: underline;
    text-decoration-color: var(--hp-yellow);
    transition: all 0.2s ease;
}

.year-awards-banner a:hover {
    color: var(--hp-yellow-light);
}

.year-awards-banner img {
    max-width: 120px;
    height: auto;
    border-radius: 6px;
    margin: 0.5rem;
    transition: transform 0.3s ease;
}

.year-awards-banner img:hover {
    transform: scale(1.05);
}

/* ===== AWARDS BLACK BOX (legacy inline style) ===== */
.year-main div[style*="background-color: black"] {
    padding: 1.5rem 2rem;
    border-radius: 8px;
}

/* ===== BOOK TABLE OVERRIDES =====
 * Book images use img.slist but should match the .year-books-grid card style
 * from books-grid.css. Books sections use h3 headings, so h3 + table targets
 * only book tables.
 */
.year-main h3 + table {
    border-collapse: separate;
    border-spacing: 0.5rem 0;
}

.year-main h3 + table td {
    border-bottom: none;
    vertical-align: top;
}

/* Image row cells: card with black bg, uniform height */
.year-main h3 + table tr:first-child td {
    background: #000;
    border-radius: 8px 8px 0 0;
    padding: 0;
    text-align: center;
}

.year-main h3 + table img.slist {
    width: 100%;
    height: 280px;
    object-fit: contain;
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.year-main h3 + table img.slist:hover {
    box-shadow: none;
    transform: none;
}

/* Text row cells: card bottom with yellow top border */
.year-main h3 + table tr:nth-child(2) td {
    background: var(--hp-white, #fff);
    border-top: 3px solid var(--hp-yellow, #d4a72c);
    border-radius: 0 0 8px 8px;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--hp-text-light, #555);
}

/* Book description: add space before the Amazon links line */
.year-main h3 + table tr:nth-child(2) td small em br {
    display: block;
    content: "";
    margin-top: 0.75rem;
}

/* ===== STAMP GRID TABLE CARD STYLING (matches country.css) =====
 * Card-box styling for stamp/postmark grid tables in year pages.
 * Same pattern as country pages: header row → image row → spacer row.
 */

/* Grid table base — only tables containing img.slist get card grid styling.
   Tables without img.slist (e.g. content display tables in 194x-18xx) are left alone. */
.year-main > table:not([align]):has(img.slist) {
    table-layout: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5rem 0;
}

/* Default TD styling */
.year-main > table:not([align]):has(img.slist) td {
    padding: 0.25rem 0.375rem;
    vertical-align: top;
    background: transparent;
    border: none;
    border-bottom: none;
    text-align: center;
}

/* Spacer rows — create gap between card groups */
.year-main > table:not([align]):has(img.slist) td[style*="height"] {
    height: 2.5rem !important;
}

/* Section headers — colspan cells as full-width section dividers (only if they have content).
   Exclude cells whose only content is an ad image (a > img pattern). */
.year-main > table:not([align]):has(img.slist) td[colspan]:has(a, strong, b, img):not(:has(> a > img)) {
    padding: 0.625rem 0.75rem;
    background: var(--hp-warm-white, #faf8f5);
    border-bottom: 3px solid var(--hp-yellow, #d4a72c);
    font-weight: 600;
    text-align: left;
}

/* CARD HEADER: title cells in rows immediately before image rows */
.year-main > table:not([align]):has(img.slist) tr:has(+ tr > td > a > img.slist) > td:not([colspan]):not(:empty) {
    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.625rem;
    font-weight: 500;
    font-size: 0.9375rem;
}

/* CARD HEADER: colspan cells spanning multiple image columns — center text
   (overrides section-header text-align:left for card headers like "15.11.2022 Hong Kong") */
.year-main > table:not([align]):has(img.slist) tr:has(+ tr > td > a > img.slist) > td[colspan] {
    text-align: center;
}

/* CARD BODY: image cells — connects to header above */
.year-main > table:not([align]):has(img.slist) td:has(> a > img.slist) {
    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;
    /* Enforce a minimum column width so the card (and its 300x300 image)
       is never squeezed below its natural size by table-layout:auto. */
    min-width: 312px; /* 300px image + 0.375rem padding each side */
}

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

/* Remove redundant card styling from img.slist inside card body */
.year-main > table:not([align]):has(img.slist) td:has(> a > img.slist) img.slist {
    border: none;
    background: transparent;
    padding: 0;
}

/* Colspan cells: let img.slist fill the wider cell */
.year-main > table:not([align]):has(img.slist) td[colspan] img.slist {
    width: 100%;
    height: auto;
}

/* Google Ads inside stamp grid tables: visible, constrained to cell.
   Override section-header styling so ad cells stay clean.
   width:100% on ad elements prevents inline width:650px from
   inflating column widths and distorting surrounding stamp images. */
.year-main > table:not([align]):has(img.slist) td:has(amp-ad),
.year-main > table:not([align]):has(img.slist) td:has(.adsbygoogle) {
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    border: none !important;
    background: transparent !important;
}

.year-main > table:not([align]):has(img.slist) td ins.adsbygoogle,
.year-main > table:not([align]):has(img.slist) td amp-ad {
    max-width: 100%;
    width: 100% !important;
}

/* ===== NON-SLIST FULL-WIDTH TABLES =====
 * Tables like the intro stamp images (Beaver, Lama, Locomotive) use inline
 * height on images but no img.slist class.  base.css caps img max-width:100%
 * which prevents images from expanding to natural width at the given height.
 * Same fix as country.css / content.css. */
.year-main > table[width="100%"]:not(:has(img.slist)) td {
    padding: 0.125rem 0.25rem;
    border-bottom: none;
    vertical-align: top;
}

.year-main > table[width="100%"]:not(:has(img.slist)) td > a > img,
.year-main > table[width="100%"]:not(:has(img.slist)) td > img {
    max-width: none;
    width: auto;
}

/* ===== YEAR-SPECIFIC OVERRIDES =====
 * Base overrides, link styling, float tables, centered images, br collapse,
 * and float clearing are now in common-style.css (scoped to .legacy-content).
 * Only year-specific refinements remain here.
 */

/* Override any inline height on spacer cells */
.year-main table[align="right"] td[style*="height"],
.year-main table[align="left"] td[style*="height"] {
    height: 4px !important;
}

/* Year pages use wider float tables than common default (55% vs 50%) */
.year-main table[align="right"],
.year-main table[align="left"] {
    max-width: 55%;
}

/* Paired images with explicit height: fixed height + object-fit for equal sizing */
.year-main table[align="right"] td img[height],
.year-main table[align="left"] td img[height] {
    height: 280px;
    width: auto;
    object-fit: contain;
}

/* Full-width banner images (colspan) should remain auto height */
.year-main table[align="right"] td[colspan] img,
.year-main table[align="left"] td[colspan] img {
    height: auto;
    width: 100%;
}

/* ===== BLOCKQUOTE (<q>) ===== */
.year-main q {
    display: block;
    overflow: hidden;
    border-left: 3px solid var(--hp-yellow, #d4a72c);
    padding: 0.75rem 1rem 0.75rem 2.25rem;
    margin: 0.75rem 0;
    background: #fdfaf3;
    border-radius: 0 4px 4px 0;
    line-height: 1.65;
    font-style: italic;
    quotes: none;
    position: relative;
}

.year-main q::before {
    content: '\201C';
    position: absolute;
    left: 0.6rem;
    top: 0.4rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--hp-yellow, #d4a72c);
    font-style: normal;
    font-family: Georgia, serif;
}

.year-main q em {
    font-style: italic;
}

/* ===== NOTES PARAGRAPH (<p class="notes">) ===== */
.year-main .notes {
    background: #f4f6f7;
    border-left: 3px solid #90a4ae;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    border-radius: 0 4px 4px 0;
    margin: 0.75rem 0;
    overflow: hidden;
    position: relative;
}

.year-main .notes::before {
    content: '\2139';
    position: absolute;
    left: 0.65rem;
    top: 0.45rem;
    font-size: 0.875rem;
    line-height: 1;
    color: #607d8b;
    font-weight: 700;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .year-hero,
    .stamps-section {
        padding: var(--space-5) 0;
    }

    /* Plain stamp grid tables: horizontal scroll on small screens */
    .year-main > table:not([align]),
    .year-main table[width] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .year-main > table:not([align]) tbody,
    .year-main table[width] tbody {
        display: table;
        width: 100%;
        min-width: 500px;
    }
}

@media (max-width: 480px) {
    .year-hero h1 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .year-hero,
    .stamps-section {
        padding: var(--space-4) 0;
    }

    .year-fb-promo__box {
        gap: 1rem;
    }
}


ol li::marker {
  font-weight: bold;
}