/**
 * medko-ads — Ad slot styling. Uses theme CSS custom properties with hex fallbacks.
 *
 * @package medko-ads
 */

.medko-ad-slot {
    margin: 24px 0;
    text-align: center;
    overflow: hidden;
}

.medko-ads-label {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted, #718096);
    margin-bottom: 4px;
}

/* Sidebar slots: no extra top/bottom margin, flush against widget area edge. */
.medko-ad-slot--sidebar-top {
    margin-top: 0;
}
.medko-ad-slot--sidebar-bottom {
    margin-bottom: 0;
}

/* In-feed slot: spans full grid width instead of a single card cell.
   No effect on list/classic layout (no CSS grid there). */
.medko-ad-slot--feed {
    grid-column: 1 / -1;
}

/* Desktop/mobile slot variants: both ad tags are always rendered server-side,
   visibility toggled via media query (not JS) for cache-friendliness.
   Breakpoint 767px matches the burger menu breakpoint in header.css. */
.medko-ads-device--desktop {
    display: block;
}
.medko-ads-device--mobile {
    display: none;
}
@media (max-width: 767px) {
    .medko-ads-device--desktop {
        display: none;
    }
    .medko-ads-device--mobile {
        display: block;
    }
}