/* ============================================
   PILA — Google AdSense slots (Basic/guest only)
   One sticky ad per viewport; no mirrored sticky units.
   ============================================ */

.pila-ad {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 14px);
    padding: 16px 8px 8px;
    overflow: hidden;
}

.pila-ad-label {
    position: absolute;
    top: 4px;
    left: 10px;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: .7;
}

.pila-ad-ins { display: block; width: 100%; }

/* Collapse the whole slot when AdSense returns no ad, so production never shows a blank labeled box. */
.pila-ad:has(.pila-ad-ins[data-ad-status="unfilled"]) { display: none !important; }

.pila-ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    background: var(--brand-primary-light);
    border: 1px dashed var(--brand-primary);
    border-radius: calc(var(--radius-md, 14px) - 4px);
    font-size: 12px;
    min-height: 60px;
}

/* Hidden by default; each breakpoint opts positions in. */
.pila-ad-topbanner,
.pila-ad-bottombanner,
.pila-ad-leftrail,
.pila-ad-rightrail { display: none; }

/* ---- Mobile + tablet (<1200): top in-flow, bottom sticky ---- */
@media (max-width: 1199.98px) {
    .pila-ad-topbanner { display: block; margin: 8px; }
    .pila-ad-topbanner .pila-ad-placeholder,
    .pila-ad-topbanner .pila-ad-ins { min-height: 90px; }

    .pila-ad-bottombanner {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        margin: 0;
        border-radius: 0;
        border-left: none; border-right: none; border-bottom: none;
    }
    .pila-ad-bottombanner .pila-ad-placeholder,
    .pila-ad-bottombanner .pila-ad-ins { min-height: 50px; max-height: 90px; }

    /* Reserve space so the sticky bottom never covers content. */
    .app-layout main.app-main { padding-bottom: 100px !important; }
}

/* ---- Desktop (>=1200): left in-flow, right sticky ---- */
@media (min-width: 1200px) {
    .app-main-inner { display: flex; align-items: flex-start; gap: 16px; }
    .app-main-body { flex: 1 1 auto; min-width: 0; }

    .pila-ad-leftrail { display: block; flex: 0 0 160px; }
    .pila-ad-leftrail .pila-ad-placeholder,
    .pila-ad-leftrail .pila-ad-ins { min-height: 600px; }

    .pila-ad-rightrail {
        display: block;
        position: fixed;
        right: 8px;
        top: 90px;
        width: 160px;
        z-index: 1020;
    }
    .pila-ad-rightrail .pila-ad-placeholder,
    .pila-ad-rightrail .pila-ad-ins { min-height: 600px; }

    /* Reserve room so the fixed right rail never covers content. */
    .app-main { padding-right: 184px !important; }
}