/* ══════════════════════════════════════════
   EO Annoncer — frontend
   Matcher Eloversigt-temaets designvariabler.
   ══════════════════════════════════════════ */

.eo-annonce {
    position: relative;
}

/* Lovpligtig annoncemærkning */
.eo-annonce__label {
    display: block;
    text-align: center;
    font-family: var(--eo-sans, system-ui, sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eo-muted, #6b7280);
    margin-bottom: 5px;
}

.eo-annonce a {
    display: block;
    line-height: 0;
}

.eo-annonce img {
    max-width: 100%;
    height: auto;
    border-radius: var(--eo-radius, 14px);
    border: 1px solid var(--eo-rule, rgba(15, 20, 25, 0.09));
}

/* ── Sidebar på artikler ─────────────────── */
.eo-annonce--sidebar-artikel {
    margin: 28px 0;
}

/* ── Skyscrapers ─────────────────────────────
   Faste bannere i venstre/højre side.
   Vises kun når der er luft uden om indholdet:
   --eo-max = 1240px  +  2 × (160px banner + margin)

   Topafstand: temaets header er sticky (plus utility-bar, i alt ca. 135px ved sidetop)
   og etiketten "Annonce" skal være fri af den.
   Justér evt. med --eo-annonce-top i temaets :root. */
.eo-annonce--skyscraper-venstre,
.eo-annonce--skyscraper-hoejre {
    display: none;
}

@media (min-width: 1620px) {
    .eo-annonce--skyscraper-venstre,
    .eo-annonce--skyscraper-hoejre {
        display: block;
        position: fixed;
        top: var(--eo-annonce-top, 150px);
        width: 160px;
        z-index: 40; /* under headerens z-index 100 */
    }
    /* Logget ind: WP-adminbaren (32px) skubber den sticky header ned */
    body.admin-bar .eo-annonce--skyscraper-venstre,
    body.admin-bar .eo-annonce--skyscraper-hoejre {
        top: calc(var(--eo-annonce-top, 150px) + 32px);
    }

    .eo-annonce--skyscraper-venstre  { left:  calc((100vw - var(--eo-max, 1240px)) / 2 - 160px - 28px); }
    .eo-annonce--skyscraper-hoejre   { right: calc((100vw - var(--eo-max, 1240px)) / 2 - 160px - 28px); }

    .eo-annonce--skyscraper-venstre img,
    .eo-annonce--skyscraper-hoejre img {
        width: 160px;
    }
}

/* ── Mobil: banner i artiklen ────────────────
   Vises kun på mobil — på desktop er elementet
   skjult, og visninger tælles derfor ikke der. */
.eo-annonce--mobil-artikel {
    display: none;
}

@media (max-width: 767px) {
    .eo-annonce--mobil-artikel {
        display: block;
        margin: 28px auto;
        max-width: 320px;
        text-align: center;
    }
}

/* ── Mobil: sticky bundbanner ──────────────── */
.eo-annonce--mobil-bund {
    display: none;
}

@media (max-width: 767px) {
    .eo-annonce--mobil-bund {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90; /* under headerens 100 */
        background: var(--eo-bg, #fff);
        border-top: 1px solid var(--eo-rule-strong, rgba(15, 20, 25, 0.18));
        box-shadow: 0 -4px 16px rgba(15, 20, 25, 0.08);
        padding: 4px 10px calc(6px + env(safe-area-inset-bottom, 0px));
        text-align: center;
    }
    .eo-annonce--mobil-bund .eo-annonce__label {
        text-align: left;
        margin-bottom: 2px;
    }
    .eo-annonce--mobil-bund a {
        display: inline-block;
    }
    .eo-annonce--mobil-bund img {
        border: none;
        border-radius: 6px;
        max-height: 100px;
        width: auto;
    }
}

/* Luk-knap (bundbanner) */
.eo-annonce__luk {
    position: absolute;
    top: 2px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--eo-muted, #6b7280);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* Print: ingen annoncer */
@media print {
    .eo-annonce { display: none !important; }
}