/* assets/css/ads.css */
/* Contains styles for both vertical and horizontal ads, */
/* including responsive display rules and support for JS positioning. */

/* --- Skyscraper Ads (Vertical) --- */
.ad-skyscraper {
    position: fixed;
    top: 80px; /* Adjust based on your header height - THIS WILL BE CHANGED BY JS */
    width: 160px; /* Standard skyscraper width */
    height: 600px; /* Set a fixed height (adjust as needed for JS calculations) */
    z-index: 50; /* Ensure it's above content but below modals/menus */
    display: none; /* Hidden by default - shown via media query */
    text-align: center;
    overflow: hidden; /* Prevents oversized images breaking layout */
    transition: top 0.05s linear; /* Optional: A tiny transition for JS changes. Remove if it feels laggy. */
}

#ad-skyscraper-left {
    left: 5px; /* Position left ad */
}

#ad-skyscraper-right {
    right: 5px; /* Position right ad */
}

.ad-skyscraper .ad-link,
.ad-skyscraper .ad-image {
    display: block;
    width: 100%;
    height: 100%; 
    object-fit: cover; /* Keeps aspect ratio while filling, might crop */
    /* object-fit: contain; */ /* Alternative: Shows whole image, might leave gaps */
}

/* --- Horizontal Ads --- */
.ad-horizontal {
    width: 100%;
    margin: 30px 0; /* Add spacing above and below */
    padding: 10px 0;
    text-align: center;
    display: none; /* Hidden by default - shown via media query */
    min-height: 50px; /* Ensure it has some height even if image fails */
    border-top: 1px solid var(--theme-border, #333);
    border-bottom: 1px solid var(--border-color, #333);
}

.ad-horizontal .ad-link {
    display: inline-block;
}

.ad-horizontal .ad-image {
    max-width: 100%;
    height: auto;
    vertical-align: middle; /* Helps with alignment */
}


/* --- Media Queries for Responsiveness --- */

/* Show Skyscraper ads ONLY on WIDE screens (1600px or wider) */
@media (min-width: 1500px) { /* <-- CHANGED */
    .ad-skyscraper {
        display: block; 
    }
    .ad-horizontal {
        display: none;
    }
}

/* Show Horizontal ads ONLY on NARROW/MEDIUM screens (1599px or narrower) */
@media (max-width: 1499px) { /* <-- CHANGED */
    .ad-horizontal {
        display: block; 
    }
    .ad-skyscraper {
        display: none;
    }
}