/* =========================================================
   Malta Ads — Frontend Styles
   Scope: .malta-ad-placeholder and injected ad content
   =========================================================
   IAB Standard Ad Sizes (used for CLS prevention via min-height).
   Reference: https://www.iab.com/newadportfolio/

   Usage:
   <div class="malta-ad-placeholder" data-size="leaderboard" ...></div>

   Supported data-size values:
     leaderboard         → 728 × 90
     medium-rectangle    → 300 × 250
     half-page           → 300 × 600
     wide-skyscraper     → 160 × 600
     mobile-banner       → 320 × 50
     large-mobile-banner → 320 × 100
     billboard           → 970 × 250
   ========================================================= */

/* ---- Base placeholder ---- */
.malta-ad-placeholder {
    display: block;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    /* Horizontally center ads within their container. */
    margin-inline: auto;
}

/* ---- Loading state: reserve space with a neutral background ---- */
.malta-ad-placeholder.malta-ad-loading {
    background-color: #f0f0f0;
}

/* ---- Loaded state: remove background ---- */
.malta-ad-placeholder.malta-ad-loaded {
    background-color: transparent;
}

/* ---- Empty / collapsed state (Phase 5) ----
 *
 * Applied by collapsePlaceholder() in malta-loader.js when:
 *   - The API returns 404 (no active ad for this slot/device).
 *   - The ad is mobile_only but the visitor is on desktop.
 *   - The rendered field is empty.
 *   - A network error occurred.
 *
 * Using a CSS class (not inline style.display) lets themes override
 * this behaviour if needed (e.g. show a "house ad" fallback).
 *
 * The brief opacity fade prevents a jarring pop-out of reserved space;
 * display:none is applied via the animation fill-mode so the element
 * is fully removed from the layout after the transition completes.
 * This collapse IS a one-time CLS event, but it is unavoidable and
 * far less disruptive than leaving an empty grey box visible.
 * ------------------------------------------------------------------ */
@keyframes malta-collapse {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.malta-ad-placeholder.malta-ad-empty {
    animation: malta-collapse 0.15s ease forwards;
    /* After animation: remove from layout entirely. */
    pointer-events: none;
    /* Override the min-height so the space collapses after fade. */
    min-height: 0 !important;
    overflow: hidden;
    transition: min-height 0.15s ease, max-height 0.15s ease;
    max-height: 0 !important;
}

/* ================================================================
   CLS-prevention: min-height per IAB size
   The placeholder reserves vertical space before the fetch
   completes, preventing content below from jumping.
   ================================================================ */

/* Leaderboard — 728×90 */
.malta-ad-placeholder[data-size="leaderboard"] {
    min-height: 90px;
    max-width: 728px;
}

/* Medium Rectangle — 300×250 */
.malta-ad-placeholder[data-size="medium-rectangle"] {
    min-height: 250px;
    max-width: 300px;
}

/* Half Page — 300×600 */
.malta-ad-placeholder[data-size="half-page"] {
    min-height: 600px;
    max-width: 300px;
}

/* Wide Skyscraper — 160×600 */
.malta-ad-placeholder[data-size="wide-skyscraper"] {
    min-height: 600px;
    max-width: 160px;
}

/* Mobile Banner — 320×50 */
.malta-ad-placeholder[data-size="mobile-banner"] {
    min-height: 50px;
    max-width: 320px;
}

/* Large Mobile Banner — 320×100 */
.malta-ad-placeholder[data-size="large-mobile-banner"] {
    min-height: 100px;
    max-width: 320px;
}

/* Billboard — 970×250 */
.malta-ad-placeholder[data-size="billboard"] {
    min-height: 250px;
    max-width: 970px;
}

/* ================================================================
   Injected ad content
   ================================================================ */

/* Ad link wrapper */
.malta-ad-link {
    display: block;
    line-height: 0; /* Remove inline-block gap under images. */
}

/* Ad image */
.malta-ad-image {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
}

/* HTML / iframe ads */
.malta-ad-placeholder iframe {
    display: block;
    border: none;
    max-width: 100%;
}

/* ================================================================
   Responsive overrides
   On small screens, constrain wide formats (leaderboard, billboard)
   to viewport width.
   ================================================================ */

@media ( max-width: 767px ) {
    .malta-ad-placeholder[data-size="leaderboard"],
    .malta-ad-placeholder[data-size="billboard"] {
        max-width: 100%;
    }

    .malta-ad-placeholder[data-size="leaderboard"] {
        min-height: 50px; /* Graceful degradation to mobile-banner height. */
    }

    .malta-ad-placeholder[data-size="billboard"] {
        min-height: 100px;
    }

    /* Hide desktop-only sizes on mobile to avoid blank spaces. */
    .malta-ad-placeholder[data-size="wide-skyscraper"] {
        display: none;
    }
}

@media ( min-width: 768px ) {
    /* Hide mobile-only sizes on desktop. */
    .malta-ad-placeholder[data-size="mobile-banner"],
    .malta-ad-placeholder[data-size="large-mobile-banner"] {
        display: none;
    }
}