body {
    font-size: 16px;
    line-height: 1.5;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI", /* native font on Windows */
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

.route-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 20px;
}

/* --- Global Typography Adjustments --- */
h1, h2, h3, h4 {
    font-weight: 700;             /* Bump weight to 700 for crisper text rendering */
    color: #0f2d59;               /* Official Deep Interstate Blue */
    letter-spacing: -0.02em;      /* Slight tightening for modern system fonts */
}

/* 1. Mobile-First Default Sizes (Up to 767px) */
h1 {
    font-size: 1.85rem; /* Down from 2.4rem so it fits on small screens */
    line-height: 1.2;   /* Ensures wrapped lines don't collide */
    margin: 0;
}

h2 {
    font-size: 1.4rem;
    margin-bottom: 0.875rem;    
}

h3 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;    
}

/* 2. Desktop Scaling (768px and up) */
@media (min-width: 768px) {
    h1 {
        font-size: 2.4rem;
    }
    
    h2 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
}

/* Hero Section */
.route-hero {
    position: relative;
    overflow: hidden;

    max-height: 500px;

    margin-bottom: 2rem;

    border-radius: 12px;
}

.route-hero-media {
    width: 100%;
    height: 500px;

    object-fit: cover; /* fills the available width, crops excess top/bottom, preserves composition */

    display: block;
}

.route-hero-overlay {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;

    color: #fff;

    text-shadow:
        2px 2px 4px rgba(0,0,0,.8);
}

.route-hero-overlay h1 {
    margin: 0;
    font-size: 2.8rem;
    color: #fff;
}

.route-hero-subtitle {
    margin-top: 0.75rem;
    max-width: 800px;

    font-size: 1.1rem;
    line-height: 1.5;
}

.route-hero-caption {
    position: absolute;
    right: 0;                 /* Pins the container block to the right edge */
    bottom: 12px;
    
    text-align: right;        /* Aligns the text to the right inside its block */
    padding: 0 20px;          /* Acts as your safety margin from the right edge */ 

    color: #fff;
    font-size: 1.0rem;
    font-weight: 500;         /* Slight weight boost helps legibility over dynamic photo backgrounds */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
@media (max-width: 768px) {

    .route-hero {
        max-height: 300px;
    }

    .route-hero-media {
        height: 300px;
    }

    .route-hero-overlay {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .route-hero-overlay h1 {
        font-size: 2rem;
    }

    .route-hero-subtitle {
        font-size: 0.95rem;
    }

    .route-hero-caption {
        display: none;
    }
}

@media (max-width: 480px) {

    .route-hero {
        max-height: 250px;
    }
}

/* Route Facts */
.route-facts {
    margin: 1rem 0 2rem;

    text-align: center;

    font-size: 0.95rem;
    color: #555;

    line-height: 1.6;
}

.route-facts a {
    color: #003366;
    text-decoration: none;
}

.route-facts a:hover {
    text-decoration: underline;
}

.fact-divider {
    margin: 0 0.75rem;
    color: #999;
}

.facts-arrow {
    margin: 0 0.4rem;
    color: #666;
}

/* Route Facts Mobile */
@media (max-width: 768px) {
    .route-facts {
        display: flex;
        flex-direction: column; /* Stacks items vertically */
        align-items: center;
        gap: 0.35rem;           /* Perfectly uniform spacing between lines */
        font-size: 0.9rem;
    }

    /* Completely hide the bullet points on mobile since they are stacked */
    .fact-divider {
        display: none; 
    }
    
    .facts-arrow {
        margin: 0 0.2rem;     /* Tighten up arrow spacing */
    }
}


/* Shield Gallery */
.shield-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    justify-content: center;

    margin: 0;
}

/* single shield styling */
.shield-gallery.is-single {
    justify-content: center;
}

.shield-gallery.is-single .shield-item {
    width: 110px;
}

/* constrain the shield gallery visual footprint in the grid column */
.route-header .shield-gallery {
    justify-content: center;
    align-content: flex-start;
}

.shield-item {
    width: 95px;
}

.shield-gallery.is-single .shield-item {
    width: 140px;
}

.shield-gallery.is-single .business-shield {
    width: 120px;
}

.shield-item img {
    width: 100%;
    height: auto;

    border-radius: 8px;

    transition: transform .2s ease;
}

.shield-item img:hover {
    transform: translateY(-4px);
}

/* ==========================================================================
   MILEAGE BY STATE BLOCK (BASE STYLE)
   ========================================================================== */
.mileage-by-state {
    max-width: 420px;         /* Compact for short routes */
    margin: 3rem auto;
    background: #f8fafc;      /* Soft off-white box background */
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: max-width 0.2s ease;
}

.mileage-by-state h2 {
    margin: 0 0 1rem 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: #0f2d59;           /* Deep Interstate Blue */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mileage-by-state table {
    width: 100%;
    border-collapse: collapse;
}

.mileage-by-state td {
    padding: 0.5rem 0;
    font-size: 0.925rem;
    color: #334155;           /* Slate body color */
    border-bottom: 1px dashed #e2e8f0; /* Map/ledger style dashed line */
}

.mileage-by-state td:last-child {
    text-align: right;
    font-weight: 600;
    color: #0f2d59;
    font-variant-numeric: tabular-nums; /* Keeps numbers lined up vertically */
}

.mileage-by-state tr:last-child td {
    border-bottom: none;      /* Clean cutoff for standard tables */
}

/* --- Mileage Sources Block --- */
.mileage-sources {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #cbd5e1;
    width: 100%;
}

.mileage-sources h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mileage-sources .source-item {
    margin: 0 0 0.35rem 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #64748b;
    font-style: italic;
}

.mileage-sources .source-item:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   LONG ROUTE INTERSTATE MODIFIER (SIDE-BY-SIDE COLUMNS)
   ========================================================================== */
.mileage-by-state.long-route {
    max-width: 768px;         /* Broadens to line up perfectly with hero images */
}

.mileage-by-state.long-route table tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4%;                /* Spacing between left and right columns */
}

.mileage-by-state.long-route tr {
    flex: 0 0 48%;            /* Splits rows into two equal halves */
    display: flex;
    justify-content: space-between;
}

.mileage-by-state.long-route td {
    border-bottom: 1px dashed #e2e8f0; /* Forces row lines back onto the flex-clones */
    width: auto;
}

/* --- Styled Mileage Sources Block --- */
.mileage-sources {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #cbd5e1;
    width: 100%;              /* Ensures it spans full width below the split rows */
}

.mileage-sources h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;           /* Muted slate gray */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mileage-sources .source-item {
    margin: 0 0 0.35rem 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #64748b;           /* Keeps references quietly in the background */
    font-style: italic;       /* Classic citation feel */
}

.mileage-sources .source-item:last-child {
    margin-bottom: 0;
}

/* Sections */
.route-section {
    margin-bottom:3rem;
}

.route-section h2 {
    border-bottom:3px solid #0d5aa7;

    padding-bottom:.5rem;

    margin-bottom:1rem;
}

/* --- Endpoint Section Block --- */
.endpoint {
    margin: 1rem 0 1rem;          /* Generous breathing room above a new endpoint section */
    padding-bottom: 2rem;
    border-bottom: 2px solid #f1f5f9;
}

.endpoint:last-child {
    border-bottom: none;
}

.endpoint h2 {
    margin: 0 0 1.0rem 0;
    font-size: 1.8rem;
    color: #0f2d59;               /* Clear Deep Blue focal point */
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Optional CSS accent to frame the shield graphics and terminus headers cleanly */
.endpoint h2::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 1.8rem;
    background-color: #005a36;    /* Interstate Green accent strip */
    border-radius: 2px;
}

/* Shading for former, temporary, and old configuration blocks */
.endpoint.is-historic {
    background-color: #eae9e9; /* Slightly deeper gray than f8f9fa for better contrast against white backgrounds */
    padding: 1.5rem 0;          /* Zeroed out the left/right padding so content aligns with current views */
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
}

.endpoint.is-historic h2 {
    color: #495057;
    font-size: 1.35rem;
    margin-top: 0;
}

/* Future alignment layout track (matches normal look, but allows custom spacing if needed) */
.endpoint.is-future {
    margin-top: 2rem;
}

.endpoint-placeholder-anchor {
    display: block;
    position: relative;
    visibility: hidden;
    pointer-events: none;
    /* Optional: If you use a fixed header, match its height here to offset the scroll scroll-margin-top */
    scroll-margin-top: 2rem; 
}

/* --- Header Group Block --- */
.header-group {
    margin: 1.0rem 0 1.5rem;
}

.header-group h3 {
    margin-bottom: 1.0rem;
    font-size: 1.4rem;
    color: #005a36;               /* Highway Green */
    font-weight: 600;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 0.5rem;

    /* --- Alignment Fix --- */
    display: inline-flex;         /* Keeps the block behavior inline with the contents */
    align-items: center;          /* Aligns everything dead center vertically */
    gap: 0.5rem;                  /* Clean spacing between the shield image and the text */
    width: 100%;                  /* Ensures the dashed bottom border spans full width */
}

/* Optional: If you have multiple shields next to each other, ensure they look even */
.header-group h3 img {
    display: block;
    height: auto;
    max-height: 2.5rem;           /* Prevents oversized shield graphics from throwing off the text scale */
}

/* --- Endpoint Hero Container Core Style --- */
.endpoint-hero {
    display: flex;
    flex-direction: column; /* Stacks the hero image above its caption string */
    align-items: center;    /* Horizontally centers both the <a> element block and the <p> text track */
    text-align: center;     /* Centers inline text lines inside the paragraph */
    margin: 1.5rem auto 2rem; /* Centers the whole container block itself and sets outer breathing room */
    max-width: 100%;        /* Keeps layouts completely fluid */
}

/* --- Hero Image Explicit Layout Rule --- */
.endpoint-hero img {
    display: block;         /* Removes the browser inline baseline whitespace gap below images */
    margin: 0 auto;         /* Clean backup safety centering logic */
    max-width: 100%;        /* Prevents huge landscape files from breaking layout boundaries on smaller viewports */
    height: auto;           /* Maintains pristine image aspect ratio calculation grids */
    border-radius: 6px;     /* Subtle curve matches your updated thumbnail style look */
}

/* --- Hero Caption Polish Rule --- */
.endpoint-hero .hero-caption {
    margin-top: 1rem;
    padding: 0.75rem 0 0 0;
    border-top: 1px solid #e2e8f0;
    max-width: 768px;       /* Constrains text row length to match the physical image box bounds for premium readability */
    font-size: 0.875rem;
    line-height: 1.6;
    color: #334155;
    font-style: normal;
}

/* Container for the thumbnail group */
.endpoint-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers trailing items on the bottom row */
    gap: 0.75rem;            /* Clean spacing between road photos */
    margin-top: 1rem;
}

.endpoint-gallery-grid a {
    flex-grow: 0;            /* Stop them from forcefully expanding to fill the row width */
    display: block;
}

.endpoint-gallery-grid img {
    height: 140px;           /* Enforces a consistent line height across the grid */
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    vertical-align: bottom;
}

/* Optional high-DPI desktop view scaling tweak */
@media (min-width: 1024px) {
    .endpoint-gallery-grid img {
        height: 150px; /* Slightly taller row profile for large monitors */
    }
}
/* ==========================================================================
   MOBILE & TABLET RESPONSIVE ENGINE
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Fluidly scale the main content container padding */
    .route-page {
        padding: 0 12px 30px;
    }

    /* 2. Soften section spacing so users don't have to scroll through endless void */
    .endpoint {
        margin: 3rem 0 2rem;
        padding-bottom: 1.5rem;
    }
    
    .header-group {
        margin: 2rem 0 1rem;
    }

    /* 3. Drop down font scales cleanly for readability */
    .endpoint h2 {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    
    .endpoint h2::before {
        height: 1.4rem; /* Keep the green accent strip sized to the text */
    }

    .header-group h3 {
        font-size: 1.15rem;
    }

    /* 4. Force the 768px Hero box to scale down perfectly to screen width */
    .endpoint-hero {
        margin: 1rem 0;
    }
    
    .endpoint-hero img {
        width: 100% !important; /* Overrides the explicit width="768" attribute */
        height: auto !important;
        border-radius: 4px;
    }

    /* 5. Scale down thumbnail row height so they form elegant, balanced rows on mobile */
    .endpoint-gallery-grid {
        gap: 0.35rem; /* Tighter gaps for smaller screens */
    }

    .endpoint-gallery-grid img {
        height: 90px; /* Shorter horizon profile preserves aspect-ratio balances on mobile devices */
    }
}

/* Tiny mobile optimization safety layer */
@media (max-width: 480px) {
    .endpoint h2 {
        font-size: 1.25rem;
    }
    
    .endpoint h2::before {
        height: 1.25rem;
    }

    .endpoint-gallery-grid img {
        height: 75px; /* Ultra compact row height for narrow viewports */
    }
}

/* References */

.footnote-list {
    margin-left: 1.5rem;
    padding-left: 1rem;
}

.footnote-list li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.apa-list {
    margin-top: 1rem;
}

.reference-entry {
    margin-bottom: 1rem;

    padding-left: 2rem;
    text-indent: -2rem;

    line-height: 1.7;

    font-size: 0.95rem;
}

.reference-entry:last-child {
    margin-bottom: 0;
}

/* page updated */
.page-updated {
    margin: 0.35rem 0 1.5rem;

    color: #666;

    font-size: 1rem;

    font-style: italic;
}

/* Mobile Behavior */
.route-info-wrapper {
    overflow-x:auto;
}

/* ==========================================================================
   DOCUMENT QUOTATIONS (BLOCKQUOTE)
   ========================================================================== */
blockquote {
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    
    background-color: #f8fafc;        /* Matches your mileage-by-state box background */
    border-left: 4px solid #0d5aa7;   /* Clean Interstate Blue accent anchor line */
    border-radius: 0 6px 6px 0;       /* Smooths off the right-side corners */
    
    font-size: 0.95rem;               /* Subtly drops scale below standard body copy */
    line-height: 1.6;
    color: #334155;                   /* Slate body color for crisp reading */
    font-style: italic;               /* Classic presentation for archival material */
}

/* Optional inline styling rules for clean nested structural tags */
blockquote p {
    margin: 0 0 0.75rem 0;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Quote Source Citations */
blockquote cite {
    display: block;
    margin-top: 0.5rem;
    
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;                   /* Muted slate gray matching your source styles */
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    blockquote {
        margin: 1rem 0;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* =========================================================================
   MASTER COLLAPSIBLE ACCORDION FOR ENTIRE SECTIONS
   ========================================================================= */
.master-history-wrapper {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin: 20px 0;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Master Accordion Click Handle Bar */
.history-section-trigger {
    background: #0f2d59;
    color: white;
    padding: 12px 16px;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.history-section-trigger:hover {
    background: #1e3a8a;
}

.history-trigger-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.history-toggle-badge {
    font-size: 0.8rem;
    opacity: 0.85;
    font-weight: normal;
}

/* Internal body padding when the section is toggled open */
.collapsible-body-content {
    padding: 18px;
    background: #ffffff;
}

/* =========================================================================
   HEADING LAYOUT & DESKTOP STACK FIXES
   ========================================================================= */
.group-heading-row {
    display: block;
    width: 100%;
    clear: both;
    margin-bottom: 12px;
}

/* Fixes the layout engine from squeezing typography into tight narrow columns */
.group-heading-row h3 {
    margin: 0;
    font-size: 1.35rem;
    color: #0f2d59;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* Allows embedded dynamic shields inside the heading to wrap cleanly */
}

.group-heading-row h3 img {
    height: 22px;
    width: auto;
    vertical-align: middle;
}

/* =========================================================================
   RESPONSIVE MOBILE VIEWPORT CONTROLS (Max-Width: 768px)
   ========================================================================= */
@media screen and (max-width: 768px) {
    .history-section-trigger {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 10px;
    }
    
    .history-trigger-title {
        font-size: 1rem;
    }
    
    .history-toggle-badge {
        font-size: 0.75rem;
    }

    /* Target headers inside galleries and reduce sizing on smaller mobile screens */
    .group-heading-row h3 {
        font-size: 1.1rem;
    }
    
    .group-heading-row h3 img {
        height: 18px;
    }
    
    .collapsible-body-content {
        padding: 10px 6px;
    }
}

/* =========================================================================
   AAROADS DIRECTORY SHIELD PHOTO GRID LAYOUT
   ========================================================================= */
.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px;
    justify-items: center; /* Centers cards inside the grid tracks cleanly */
}

.area-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    width: 150px;
    display: flex;
    flex-direction: column;
}

.area-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(15, 45, 89, 0.1);
    border-color: #cbd5e1;
}

.area-link {
    text-decoration: none;
    color: #334155;
    display: block;
    text-align: center;
    padding: 12px 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Image alignment area */
.area-image-wrapper {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.area-preview {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 4px;
}

/* Typography elements */
.area-card h3 {
    margin: 6px 0 4px;
    font-size: 0.95rem;
    color: #0f2d59;
    font-weight: 700;
    line-height: 1.2;
}

/* Specific endpoint string wrapping controls to keep the cards even */
.area-card-endpoints {
    margin: 0 0 6px 0 !important;
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
    width: 100%;
    
    /* Allow text to wrap naturally across multiple lines */
    white-space: normal; 
    
    /* Modern standard multi-line truncation (capping at 2 lines max) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Optional: sets a fixed height equivalent to 2 lines of text (1.3 line-height * 11px font * 2 lines) 
       to guarantee all grid cards retain perfectly uniform heights regardless of word count */
    height: 28.6px; 
}

.area-card-count {
    margin: auto 0 0 0 !important; /* Forces count indicators down to the card footer base line */
    font-size: 11px;
    color: #1e3a8a;
    font-weight: 600;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
}

/* Alternate theme treatment for specific territories */
.special-system-card {
    border-top: 3px solid #0f2d59;
}

/* =========================================================================
   MOBILE LAYOUT SCALING OVERRIDES (Max-Width: 768px)
   ========================================================================= */
@media (max-width: 768px) {
    .area-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        padding: 10px;
    }
    
    .area-card {
        width: 140px;
    }
    
    .area-image-wrapper {
        width: 90px;
        height: 90px;
    }
    
    .area-card h3 {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   MOBILE & COSMETIC OPTIMIZATIONS (Max-Width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Fix H1 sizing on standard content layouts so text doesn't collision-wrap */
    h1 {
        font-size: 1.65rem !important; /* Scaled down slightly from 1.85rem for narrow mobile frames */
        line-height: 1.25;
    }

    /* 2. Fix H1 text inside Hero Section overlay titles */
    .route-hero-overlay h1 {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }

    /* 3. Revert Route Facts from a rigid vertical block back to fluid inline text */
    .route-facts {
        display: block !important;       /* Removes the vertical column layout engine */
        text-align: center;
        line-height: 1.7;               /* Adds breathing room between naturally wrapped rows */
        padding: 0 10px;                /* Keeps long strings away from edge glass */
    }

    /* 4. Restore and display the dividers as natural inline inline markers */
    .fact-divider {
        display: inline !important;      /* Unhides the bullets */
        margin: 0 0.5rem;               /* Slightly tighter horizontal space for mobile views */
        color: #b3b3b3;                 /* Soft contrast */
    }

    /* 5. Keep items and links clustered as unified blocks during line wrapping */
    .route-facts a,
    .fact-item {
        display: inline-block;          /* Prevents a city name or count from breaking mid-word */
        white-space: nowrap;            /* Ensures text like "4 Branch Routes" stays together */
    }

    .facts-arrow {
        display: inline-block;
        margin: 0 0.3rem;
    }
}

/* ==========================================================================
   FANCYBOX V5 PORTRAIT MOBILE CORRECTIONS (Max-Width: 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
    /* 1. Prevent the caption layer from being hidden or flattened by Fancybox core rules */
    .fancybox__caption {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.85rem !important;
        padding: 10px 15px !important;
        max-height: 25vh !important; /* Cap height to 25% of viewport so it doesn't mask the photo */
        overflow-y: auto !important;  /* Add scrolling in case caption references are long */
        background: rgba(0, 0, 0, 0.75) !important;
    }

    /* 2. Ensure the top toolbar containing the close action remains locked in position */
    .fancybox__toolbar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)) !important;
        z-index: 99999 !important;
    }

    /* 3. Scale up control buttons so they match physical touch targets on narrow viewports */
    .fancybox__toolbar button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* 4. Force override the main container wrapper to give elements structural space */
    .fancybox__slide {
        padding: 48px 8px 64px 8px !important; /* Allocates top padding for menu and bottom for caption */
    }
}

.ad-container {
    margin: 1.75rem auto;
    text-align: center;
    min-height: 280px; /* Pre-allocates space for desktop medium rectangles / horizontal banners */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .ad-container {
        min-height: 250px; /* Reserves mobile banner / rectangle space */
    }
}