/**
 * CONTENT PAGE STYLES
 * Shared styles for all content pages (non-homepage)
 * Handles layout overrides, tables, images, lists, deprecated elements, and content links
 */

/* ===== CRITICAL LAYOUT OVERRIDES =====
 * homepage.css sets .intro-section .container to max-width:900px + text-align:center
 * Content pages need wider containers and left-aligned text
 */
.intro-section .container.content-page {
    max-width: 1000px;
    text-align: left;
    animation: none;
}

/* Keep the decorative yellow bar on content pages (same as homepage/year pages) */

/* Fallback for browsers without :has() — hide on all intro-sections that contain .content-page */
/* Applied via a small JS snippet or just accept the bar on older browsers */

/* ===== CONTENT PAGE WRAPPER ===== */
.content-page {
    font-size: clamp(0.9375rem, 1vw + 0.75rem, 1.0625rem);
    line-height: 1.75;
    color: var(--hp-text, #2a2a2a);
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

/* Match the navbar's 1000px max-width with comfortable side padding */
.content-page .container {
    max-width: 1000px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.content-page h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--hp-black);
    line-height: var(--line-height-heading);
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Links inside page title */
.content-page h1 a {
    text-decoration: underline;
    color: var(--hp-black, #0a0a0a);
    border-bottom: none;
    padding-bottom: 0;
    transition: color 0.2s ease;
}

.content-page h1 a:hover {
    color: var(--color-accent-dark, #b8922a);
    border-bottom: none;
}

.content-page h2:not(.column-box__title) {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 600;
    color: var(--hp-black);
    line-height: var(--line-height-heading);
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--hp-yellow);
}

/* Nested <big><big> year dividers — boost to heading size */
.content-page big big {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-family: var(--font-display);
}

.content-page h3 {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.375rem);
    font-weight: 600;
    color: var(--hp-black);
    margin-bottom: 1rem;
    margin-top: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: none;
}

/* Short yellow accent line under h3 section headers — provides
   visual hierarchy below h2 (which uses a full-width 3px border). */
.content-page h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: var(--hp-yellow);
    margin-top: 0.375rem;
}

/* Suppress the accent line when h3 is misused as a quote/descriptive
   intro rather than a true section header (common legacy pattern
   where the h3 contains multi-line text and is followed by a .notes
   block, blockquote, or <q>). In those cases it reads as lead text,
   not a heading, so the accent looks out of place. */
.content-page h3:has(+ .notes)::after,
.content-page h3:has(+ p.notes)::after,
.content-page h3:has(+ q)::after,
.content-page h3:has(+ blockquote)::after,
.content-page h3:has(> br)::after,
/* Suppress on ref/ack headings — they get their own border from references.css */
.content-page a[name="ref"] + h3::after,
.content-page a[name="ack"] + h3::after {
    display: none;
}

/* Tighten spacing for these misused h3s so they read as lead-in
   text rather than a section break. */
.content-page h3:has(+ .notes),
.content-page h3:has(+ p.notes),
.content-page h3:has(+ q),
.content-page h3:has(+ blockquote),
.content-page h3:has(> br) {
    padding-bottom: 0;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.content-page h4 {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    font-weight: 600;
    color: var(--hp-black);
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    padding-bottom: 0.375rem;
}

/* Short yellow accent line under h4 (slightly smaller than h3)
   so sub-section headers like "Design Errors" get a visible
   accent consistent with h3 section headers. */
.content-page h4::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--hp-yellow);
    margin-top: 0.25rem;
}

/* Suppress the accent line when h4 is used as a quote/intro
   (mirrors the h3 exceptions). */
.content-page h4:has(+ .notes)::after,
.content-page h4:has(+ p.notes)::after,
.content-page h4:has(+ q)::after,
.content-page h4:has(+ blockquote)::after,
.content-page h4:has(> br)::after {
    display: none;
}

/* ===== TABLES ===== */
.content-page table {
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    width: auto; /* Reset base.css width:100% — respect legacy width attributes */
}

/* Smaller font only for bordered data tables, not all layout tables */
.content-page table[border="1"],
.content-page table.bordered,
.content-page table.stamp-details-card {
    font-size: 0.9375rem;
}

/* Plain inline image tables (no align/border/class/width) — tighten cell padding
   so stamp images sit close to their caption text below */
.content-page table:not([align]):not([border]):not([class]):not([width]):has(td > a > img) td {
    padding: 0.25rem 0.375rem;
}

/* Only force full-width on bordered data tables */
.content-page table[border="1"],
.content-page table.bordered {
    width: 100%;
    border: 1px solid var(--hp-gray, #e5e4e1);
}

.content-page table[border="1"] td,
.content-page table[border="1"] th,
.content-page table.bordered td,
.content-page table.bordered th {
    border: 1px solid var(--hp-gray, #e5e4e1);
    padding: 0.625rem 0.75rem;
    vertical-align: top;
}

.content-page th {
    background: var(--hp-warm-white, #f7f6f3);
    font-weight: 600;
    color: var(--hp-black, #0a0a0a);
    text-align: left;
}

.content-page td {
    vertical-align: top;
}

/* Only add hover on bordered/data tables, not layout tables */
.content-page table[border="1"] tr:hover,
.content-page table.bordered tr:hover {
    background: var(--hp-gray-light, #f0efec);
}

/* Technical details table — label column styling */
.content-page table[border="1"] td:first-child {
    font-weight: 500;
    color: var(--hp-black, #0a0a0a);
    white-space: nowrap;
    background: var(--color-background-alt, #f5f5f5);
    width: 35%;
}

/* Alternating rows for bordered tables */
.content-page table[border="1"] tr:nth-child(even),
.content-page table.bordered tr:nth-child(even) {
    background: var(--color-off-white, #fdfcfb);
}

/* Boost readability — <small> inside bordered tables shouldn't shrink as much */
.content-page table[border="1"] small {
    font-size: 0.9375em;
    color: var(--color-text-primary, #1c1917);
}

.content-page table[border="1"] td:first-child small {
    font-weight: 500;
}

/* ===== IMAGES ===== */
.content-page img {
    max-width: 100%;
    border-radius: 0;
    display: inline;  /* Override base.css display:block — many legacy images are inline */
}

/* Homepage gallery components reused inside content-page: restore block display */
.content-page .gallery-item img {
    display: block;
}

/* Images without height attribute scale proportionally */
.content-page img:not([height]) {
    height: auto;
}

/* Images with height attribute in table cells: remove max-width so they
   display at natural width for specified height. No deformation, no cropping.
   Exclude images inside figure captions — those must stay constrained. */
.content-page td img[height] {
    max-width: none;
}
.content-page figure.inline-image-caption td img[height] {
    max-width: 100%;
    height: auto;
}

/* Legacy float attributes support */
.content-page img[align="right"] {
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
    max-width: 50%;
    display: block;
}

.content-page img[align="left"] {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
    max-width: 50%;
    display: block;
}

.content-page img[align="center"] {
    display: block;
    margin: 1rem auto;
}

/* Float table base: width:min-content, float, margin, td reset, img max-width:none
   are now all in common-style.css via .legacy-content. Only overrides here. */


.content-page table[align="center"] {
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

/* ===== LISTS ===== */
.content-page ul,
.content-page ol {
    margin-bottom: 1.25rem;
    padding-left: 1.75rem;
}

/* TOC parent list — remove bullets when children are styled .toc boxes */
.content-page ul:has(> li.toc) {
    list-style: none;
    padding-left: 0;
}

/* TOC layout table — restore comfortable cell padding (overrides table[width="100%"] td rule) */
.content-page table:has(li.toc) td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    border-bottom: none;
}

/* TOC diamond markers on li.toc links */
.content-page li.toc > a::before {
    content: "\25C6";
    display: inline-block;
    font-size: 0.45em;
    color: var(--hp-yellow, #d4a72c);
    margin-right: 0.625em;
    vertical-align: middle;
}

/* Sub-items: outlined diamond */
.content-page li.toc ul li.toc > a::before {
    content: "\25C7";
}

/* ===== TOC INSIDE CONTENT-PAGE — specificity override =====
 * toc.css defines .root-toc__box li (0-1-1) but content-page li (0-1-1)
 * loads later and wins. These 0-2-1 selectors restore toc.css intent. */
.content-page .root-toc__box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-page .root-toc__box ul ul {
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}

.content-page .root-toc__box li {
    margin-bottom: 0;
    line-height: 1.5;
}

.content-page .root-toc__box table {
    margin-bottom: 0;
}

.content-page li {
    margin-bottom: 0.5rem;
    line-height: 1.65;
}

.content-page li ul,
.content-page li ol {
    margin-bottom: 0.5rem;
    margin-top: 0.25rem;
}

/* ===== PARAGRAPHS ===== */
.content-page p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

/* ===== CONTENT LINKS =====
 * Text link styles (color, underline) handled by common-style.css (.legacy-content a).
 * Only image-in-link overrides remain here.
 */
.content-page a img {
    border: none;
    text-decoration: none;
    transition: none;
}

.content-page a:hover img {
    transform: none;
    box-shadow: none;
}

/* ===== DEPRECATED ELEMENT FALLBACKS ===== */

/* <center> → centered text */
.content-page center {
    text-align: center;
    display: block;
    margin-bottom: 0.25rem;
}

/* Prevent double margin when <center> wraps a heading */
.content-page center h1,
.content-page center h2,
.content-page center h3 {
    margin-bottom: 0;
}
.content-page center:has(h1),
.content-page center:has(h2) {
    margin-bottom: 0;
}

/* <big> → slightly larger text */
.content-page big {
    font-size: 1.15em;
    font-weight: 600;
    font-family: var(--font-display, Georgia, serif);
    color: var(--hp-black, #0a0a0a);
}

/* <font> → inherit styles but respect color/size attributes */
.content-page font {
    font-family: inherit;
}

/* <u> → standard underline */
.content-page u {
    text-decoration: underline;
    text-decoration-color: auto;
    text-underline-offset: auto;
}

/* <small> styling */
.content-page small {
    font-size: 0.875em;
    color: inherit;
}

/* <em> within content */
.content-page em {
    font-style: italic;
    color: inherit;
}

/* ===== IMAGE CAPTIONS IN LAYOUT TABLES ===== */
/* Pattern: table with an image in first row, caption <small> in second row.
   Covers both aligned (float) tables and plain layout tables, including
   full-width tables (e.g. <table width="100%">) that use the same
   image + caption pattern. Kept consistent with <figure
   class="inline-image-caption"> figcaption styling. */
.content-page table[align="right"] small,
.content-page table[align="left"] small,
.content-page table:not([align]):not([border]):not([class]):has(td > a > img) small {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #57534e);
    padding-top: 0.25rem;
    border-top: none;
    margin-top: 0;
}

/* ===== PRODUCT GALLERY TABLES ===== */
/* Full-width tables need explicit 100% to override auto default */
.content-page table[width="100%"] {
    width: 100%;
}

/* Tighten padding in full-width layout tables so captions sit close to images
   but respect HTML cellpadding when explicitly set */
.content-page table[width="100%"]:not(.products-gallery):not([cellpadding]) td {
    padding: 0.125rem 0.25rem;
    border-bottom: none;
}

/* Full-width tables with cellpadding: padding comes from base.css
   cellpadding rules; only override border here */
.content-page table[width="100%"][cellpadding]:not(.products-gallery) td {
    border-bottom: none;
}

/* Images in full-width tables: same treatment — natural width for
   specified height. Images without height still scale proportionally. */
.content-page table[width="100%"] img[height] {
    max-width: none;
}

/* Images with explicit HTML width attribute — let them size the column
   rather than shrinking to fit. Parallel to the img[height] rule above. */
.content-page table[width="100%"] img[width]:not([height]) {
    max-width: none;
    height: auto;
}

.content-page table[width="100%"] img:not([height]):not([width]) {
    max-width: 100%;
    height: auto;
}

/* ===== BLOCKQUOTES ===== */
.content-page blockquote {
    border-left: 3px solid var(--hp-yellow, #d4a72c);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    background: #fdfaf3;
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    font-style: italic;
    color: var(--hp-text-light, #4a4a4a);
}

/* ===== HORIZONTAL RULES =====
 * Decorative divider: thin line with centered gold diamond marker,
 * matching the diamond motif used in TOC and navigation throughout the site.
 */
.content-page hr {
    border: none;
    height: 0;
    border-top: 2px solid var(--hp-yellow, #d4a72c);
    margin: 2.5rem auto;
    max-width: 100%;
    position: relative;
    overflow: visible;
}

.content-page hr::before {
    content: "◆";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--hp-cream, #faf9f7);
    padding: 0 0.75rem;
    color: var(--hp-yellow, #d4a72c);
    font-size: 0.75rem;
    line-height: 1;
}

/* ===== AWARDS PAGE: YEAR CIRCLES =====
 * Year headings on awards.html: <a name="y2025"></a><center><big><big><strong><a>2025</a>...
 * Styled as filled yellow circles with white year text, timeline-marker style.
 */
a[name^="y20"] + center {
    margin: 2.5rem 0 1.5rem;
}

a[name^="y20"] + center > big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--hp-yellow, #d4a72c);
    box-shadow: 0 2px 8px rgba(212, 167, 44, 0.35);
    font-size: inherit;
}

a[name^="y20"] + center > big > big {
    font-size: inherit;
}

a[name^="y20"] + center strong a {
    color: var(--hp-white, #ffffff) !important;
    text-decoration: none !important;
    font-family: var(--font-display, 'Crimson Pro', serif);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

a[name^="y20"] + center strong a:hover {
    color: var(--hp-white, #ffffff) !important;
    opacity: 0.85;
}

/* ===== BREADCRUMBS ===== */
/* Breadcrumb nav sits outside .content-page so it inherits
   the base breadcrumb styles from main.css / country.css
   without any content-page link or padding overrides. */

/* br collapse and float clearing now in common-style.css via .legacy-content */
/* Keep .clearfix fallback for pages that use it */
.content-page .clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* ===== LEGEND TABLE (legend.html) ===== */
.content-page > table[align="center"] {
    table-layout: fixed;
}

.content-page > table[align="center"] td:first-child {
    width: 3.5rem;
    text-align: center;
}

/* Legend table — upsize header row titles */
.content-page > table[align="center"] tr:first-child td big {
    font-size: 1.5em;
    letter-spacing: -0.01em;
}

/* Legend table — Undesired section images displayed horizontally */
.content-page > table[align="center"] tr:last-child td:last-child img[align="left"] {
    float: none;
    display: inline-block;
    margin: 0.5rem 0.5rem 0.5rem 0;
    max-width: 48%;
    vertical-align: top;
}

/* ===== NESTED TABLES — RESPONSIVE IMAGES (milestones.html etc.) ===== */
/* Override inline pixel widths on images inside nested tables so they scale */
.content-page table table img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Clear floats on nested table cells so images don't overflow */
.content-page table table td::after {
    content: '';
    display: table;
    clear: both;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .intro-section .container.content-page {
        max-width: 100%;
    }

    .content-page {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }

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

    .content-page table[align="right"],
    .content-page table[align="left"] {
        float: none;
        margin: 1rem 0;
        width: 100%;
        max-width: 100%;
    }

    .content-page table[border="1"],
    .content-page table.bordered,
    .content-page table.stamp-details-card {
        font-size: 0.875rem;
    }

    .content-page table[border="1"] td,
    .content-page table[border="1"] th {
        padding: 0.5rem;
    }

    .content-page table[border="1"] td:first-child {
        white-space: normal;
    }

    .content-page h2:not(.column-box__title) {
        margin-top: 2rem;
    }

    /* Product gallery — stack images on mobile */
    .content-page table[width="100%"] td {
        display: block;
        width: 100% !important;
        text-align: center;
    }

    .content-page table[width="100%"] td img,
    .content-page table[width="100%"] img[width]:not([height]) {
        max-width: 100%;
        width: auto;
    }

    /* Image caption tables stack nicely */
    .content-page table[align="right"] small,
    .content-page table[align="left"] small,
    .content-page table:not([align]):not([border]):not([class]):has(td > a > img) small {
        text-align: center;
    }
}

/* ===== TABLE OVERFLOW FOR MOBILE ===== */
@media (max-width: 640px) {
    .content-page table[border="1"],
    .content-page table.bordered {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== PRINT ===== */
@media print {
    .intro-section .container.content-page {
        max-width: 100%;
    }

    .content-page a {
        text-decoration: none;
        color: var(--hp-black, #0a0a0a);
    }

    .content-page a::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: var(--hp-gray-dark, #5a5a5a);
    }

    .content-page a:has(img)::after {
        content: none;
    }
}

/* ===== STAMP DESCRIPTION PAGE STYLES ===== */

/* --- Navigation (reuses shared prev-next-nav.css components) ---
 * Override .legacy-content a styles so nav buttons keep their own look */
.content-page .year-prev-next a,
.content-page .bottom-nav a {
    text-decoration: none;
    color: var(--hp-black, #0a0a0a);
}

.content-page .year-prev-next a:hover,
.content-page .bottom-nav a:hover {
    color: var(--hp-black, #0a0a0a);
    text-decoration: none;
}

.content-page .bottom-nav__center a {
    color: var(--hp-white, #fff);
}

.content-page .bottom-nav__center a:hover {
    color: var(--hp-black, #0a0a0a);
}

/* Container width + padding now in prev-next-nav.css component */
.content-page .bottom-nav-section {
    border-top: none;
    padding: 1rem 0 0;
}

/* --- Stamp Details Card --- */
.content-page table.stamp-details-card {
    border-collapse: separate;
    border-spacing: 2px;
    width: 50%;
    float: right;
    margin: 0 0 0.75rem 1rem;
    border: 1px solid #999;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    background: var(--color-white, #fff);
}

.content-page table.stamp-details-card tr {
    background: transparent;
}

.content-page table.stamp-details-card tr:nth-child(even) {
    background: transparent;
}

.content-page table.stamp-details-card tr:hover {
    background: transparent;
}

.content-page table.stamp-details-card td {
    padding: 3px 4px;
    border: 1px solid #bbb;
    vertical-align: top;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-primary, #1c1917);
}

.content-page table.stamp-details-card tr:last-child td {
    border-bottom: 1px solid #bbb;
}

.content-page table.stamp-details-card td:first-child {
    font-weight: 500;
    color: var(--color-text-primary, #1c1917);
    background: transparent;
    white-space: nowrap;
    width: auto;
    border-right: 1px solid #bbb;
}

.content-page table.stamp-details-card small {
    font-size: 1em;
    color: inherit;
    /* Reset caption styles from table[align="right"] small */
    display: inline;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.content-page table.stamp-details-card td:first-child small {
    font-weight: 500;
}

/* The main stamp set image (in <center> beside the floated details card)
   fills the available space left by the 55% table.
   Remove center's default margin so image top-aligns with table. */
.content-page table.stamp-details-card ~ center {
    text-align: left;
    margin-bottom: 0;
}

.content-page table.stamp-details-card ~ center img {
    width: calc(50% - 2rem);
    height: auto;
    max-width: calc(50% - 2rem);
}

/* --- Stamp Hero: image + details card side by side, equal height --- */
.content-page .stamp-hero {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.content-page .stamp-hero > a {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-page .stamp-hero > a > img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.content-page .stamp-hero > .stamp-details-card {
    float: none !important;
    width: 50%;
    flex-shrink: 0;
    margin: 0 !important;
}

/* --- Products & Philatelic Items Gallery --- */
.content-page table.products-gallery {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5rem;
    margin: 1rem 0 1.5rem;
    border: none;
    background: transparent;
}

.content-page table.products-gallery tr {
    background: transparent !important;
}

.content-page table.products-gallery td {
    vertical-align: middle !important;
    text-align: center;
    padding: 0.25rem;
    border: none !important;
    background: transparent !important;
}

/* Caption-only rows: respect inline text-align from HTML */
.content-page table.products-gallery tr[style*="text-align"] td {
    text-align: inherit;
}

/* Section headers — colspan cells and their sibling cells.
   Excludes caption/description cells containing <small>. */
.content-page table.products-gallery td[colspan]:not(:has(small)),
.content-page table.products-gallery tr:has(td[colspan]:not(:has(small))) td:not(:empty):not(:has(small)) {
    padding: 0.625rem 0.75rem !important;
    background: transparent !important;
    border: none !important;
    font-weight: 600;
    font-size: 1rem;
    color: var(--hp-black, #1a1a1a);
    text-align: center;
}

/* Item name/title cells — rows immediately before image rows, excluding section headers.
   Uses adjacent-sibling detection: a row directly followed by an image row is a product name row. */
.content-page table.products-gallery tr:not(:has(td[colspan])):not(:has(strong)):not(:has(a > img)):has(+ tr:has(a > img)) td:not(:empty) {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--hp-black, #1a1a1a);
}

/* Spacer rows between product groups — respect inline height, zero padding */
.content-page table.products-gallery td[style*="height"] {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Image cells as stamp-entry style card boxes */
.content-page table.products-gallery td:has(> a > img) {
    background: var(--hp-cream, #f8f6f0) !important;
    border: 1px solid var(--hp-gray, #e5e4e1) !important;
    border-radius: 8px;
    padding: 0.375rem !important;
    vertical-align: top !important;
    transition: all 0.25s ease;
}

.content-page table.products-gallery td:has(> a > img):hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: var(--hp-yellow, #d4a72c) !important;
}

/* Image links inside cards */
.content-page table.products-gallery a:has(img) {
    display: inline;
    line-height: 0;
    transition: none;
}

.content-page table.products-gallery a:has(img):hover {
    box-shadow: none;
    transform: none;
}

/* Images: consistent sizing — card styling is on the td */
.content-page table.products-gallery img {
    width: 300px;
    max-width: 100%;
    height: 300px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    background: var(--hp-cream, #f8f6f0);
    padding: 0.375rem;
    border: 1px solid var(--hp-gray, #e5e4e1);
    border-radius: 6px;
    transition: transform 0.3s ease;
}

/* Inside card cells, remove redundant border/bg from img */
.content-page table.products-gallery td:has(> a > img) img {
    border: none;
    background: transparent;
    padding: 0;
}

.content-page table.products-gallery a:hover img {
    transform: scale(1.03);
}

/* Caption text — centered under card boxes */
.content-page table.products-gallery small {
    display: block;
    margin-top: 2px;
    text-align: center;
}

/* Long captions: respect inline text-align on row or cell (e.g. text-align: left) */
.content-page table.products-gallery tr[style*="text-align"] small,
.content-page table.products-gallery td[style*="text-align"] small {
    text-align: inherit;
}

/* Google Ads: hide ads and collapse their cells */
.content-page table.products-gallery ins,
.content-page table.products-gallery .adsbygoogle,
.content-page table.products-gallery amp-ad {
    display: none !important;
}

/* Collapse ad cells to zero width but keep them in table layout
   so sibling cells stay aligned with their headers. Using
   display:none shifts later cells left — see monaco_2010.
   Ad content is already display:none from the rule above. */
.content-page table.products-gallery td:has(amp-ad),
.content-page table.products-gallery td:has(.adsbygoogle) {
    padding: 0 !important;
    border: none !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

/* --- References & Acknowledgements ---
 * Shared styles now in css/components/references.css (loaded via main.css).
 */

/* --- Inline Image with Caption (figure wrapping image + figcaption) --- */
.content-page figure.inline-image-caption {
    margin: 1rem auto;
    padding: 0;
    text-align: center;
}

.content-page figure.inline-image-caption img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.content-page figure.inline-image-caption img[align="center"] {
    margin: 0;
}

.content-page figure.inline-image-caption figcaption {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #57534e);
}

/* Prevent <small> from double-shrinking inside figcaption —
   figcaption already sets 0.8125rem, matching table caption size */
.content-page figure.inline-image-caption figcaption small {
    font-size: 1em;
}

/* --- Inline Quotes --- */
.content-page 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;
}

.content-page 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;
}

/* Avoid double-italic when <em> is inside <q> */
.content-page q em {
    font-style: italic;
}

/* --- Notes Aside --- */
.content-page .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;
}

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

/* Notes with explicit heading — hide redundant info icon, reduce left indent */
.content-page .notes:has(> u) {
    padding-left: 1rem;
}

.content-page .notes:has(> u)::before {
    content: none;
}

/* --- Responsive iframe --- */
.content-page iframe {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* --- Stamp Page Responsive --- */
@media (max-width: 768px) {
    .content-page .stamp-hero {
        flex-direction: column;
    }

    .content-page .stamp-hero > .stamp-details-card {
        width: 100% !important;
    }

    .content-page table.stamp-details-card {
        float: none;
        width: 100%;
        margin: 0 0 1.5rem;
    }

    .content-page table.stamp-details-card td:first-child {
        white-space: normal;
    }

    .content-page table.products-gallery {
        border-spacing: 0.375rem;
    }

    .content-page table.products-gallery td {
        display: block;
        width: 100% !important;
    }

    .content-page table.products-gallery td:has(> a > img) {
        max-width: 320px;
        margin: 0 auto;
    }

}

@media (max-width: 480px) {
    .content-page {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .content-page h2:not(.column-box__title) {
        font-size: 1.125rem;
        line-height: 1.3;
    }

    /* Stack nav vertically on very small screens */
    .content-page .year-prev-next {
        flex-direction: column;
        gap: 0.5rem;
    }

    .content-page .bottom-nav-section .bottom-nav {
        flex-direction: column;
        gap: 0.5rem;
    }
}



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

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

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

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

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