/* Ad Component Styles - CLS Protection */

/* Base Wrapper */
.vf-ad-slot {
    display: block;
    margin: 2rem auto;
    text-align: center;
    clear: both;
    background-color: #f9f9f9;
    /* Neutral background while loading */
    border: 1px dashed #eee;
    /* Outline for debugging visibility, remove or lighten in prod */
    position: relative;
    overflow: hidden;
}

/* Hide in Print */
@media print {
    .vf-ad-slot {
        display: none !important;
    }
}

/* Debug Label */
.vf-ad-label {
    display: inline-block;
    background: #eee;
    color: #666;
    padding: 2px 6px;
    font-size: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

/* PRESETS - Aspect Ratio Reservation */
/* These classes ensure the container holds space BEFORE the ad loads */

/* Mobile Banner / Small Leaderboard */
.vf-ad-box--320x100 {
    min-height: 100px;
    max-width: 320px;
    width: 100%;
}

/* Medium Rectangle (MPU) */
.vf-ad-box--300x250 {
    min-height: 250px;
    max-width: 300px;
    width: 100%;
    aspect-ratio: 300 / 250;
}

/* Large Rectangle */
.vf-ad-box--336x280 {
    min-height: 280px;
    max-width: 336px;
    width: 100%;
    aspect-ratio: 336 / 280;
}

/* Inner Container */
.vf-ad-slot__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}