/**
 * Ad Slots — assets/css/ads.css
 *
 * Styles for .eln-ad-slot, used by template-parts/ads/ad-slot.php.
 * Uses --eln-* design tokens only. No hardcoded colours or sizes.
 *
 * Placement types (BEM modifiers):
 *   .eln-ad-slot--card    Card-based slots (category section, sidebar, article bottom)
 *                         Enforces 4:3 aspect-ratio + object-fit on the primary image.
 *   .eln-ad-slot--banner  Wide horizontal slots (homepage footer, article after author)
 *                         No forced aspect-ratio — advertisers supply correct proportions.
 *
 * Slot modes (BEM modifiers):
 *   .eln-ad-slot--placeholder  Development placeholder box
 *   .eln-ad-slot--live         Real ad creative with responsive images
 *
 * Responsive image strategy:
 *   --desktop class: primary image (image_4x3 for card, image_banner for banner)
 *   --mobile  class: optional mobile override; shown < 768px, hidden ≥ 768px
 *   --only    class: added when only one image exists; shows at all widths
 */

/* ── Base slot ────────────────────────────────────────────────────────────── */

.eln-ad-slot {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ── Label ────────────────────────────────────────────────────────────────── */
/* Always visible. On live ads: outside <a>, below the image.
   On placeholders: centred inside the box. */

.eln-ad-slot__label {
    display: block;
    font-size: var(--eln-font-size-xs);
    font-family: var(--eln-font-ui, sans-serif);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--eln-color-text-muted);
    line-height: 1;
}

/* ── Placeholder ──────────────────────────────────────────────────────────── */

.eln-ad-slot--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--eln-color-surface-alt, #f4f4f4);
    border: 1px dashed var(--eln-color-border, #ddd);
    border-radius: var(--eln-radius-sm, 4px);
}

/* TODO: replace with --eln-space-* tokens when the token scale is extended to cover these sizes */
.eln-ad-slot--placeholder.eln-ad-slot--card   { min-height: 120px; }
.eln-ad-slot--placeholder.eln-ad-slot--banner  { min-height: 90px; }

/* ── Live ─────────────────────────────────────────────────────────────────── */

.eln-ad-slot--live .eln-ad-slot__link {
    display: block;
    text-decoration: none;
}

.eln-ad-slot--live .eln-ad-slot__link:focus-visible {
    outline: 2px solid var(--eln-color-accent);
    outline-offset: 2px;
}

/* ── Images ───────────────────────────────────────────────────────────────── */

.eln-ad-slot__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Card slots: enforce 4:3 and fill without distortion */
.eln-ad-slot--card .eln-ad-slot__img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Desktop image: visible ≥ 768px (hidden below, unless it's the only image) */
.eln-ad-slot__img--desktop:not(.eln-ad-slot__img--only) {
    display: none;
}

@media ( min-width: 768px ) {
    .eln-ad-slot__img--desktop:not(.eln-ad-slot__img--only) {
        display: block;
    }
    .eln-ad-slot__img--mobile:not(.eln-ad-slot__img--only) {
        display: none;
    }
}

/* Live slot label — sits below the image, outside <a> */
.eln-ad-slot--live .eln-ad-slot__label {
    padding-block: var(--eln-space-1, 4px);
    text-align: right;
}