/**
 * ══════════════════════════════════════════════════════════════════════════════
 * css/ad-framework.css — Dedicated AdSense & CLS Protection Stylesheet
 * ══════════════════════════════════════════════════════════════════════════════
 * Portal: OnlineRealGames.com
 *
 * SPECIFICATIONS:
 *  1. Desktop 300x600 Sidebar Unit:
 *     - Fixed width 300px, min-height 600px.
 *     - Completely hidden on viewports <1024px via media queries.
 *
 *  2. Mobile Repositioning & Controller Touch Safety:
 *     - 35px explicit safety margin beneath game window canvas / controls
 *       to prevent accidental touch interactions on mobile game controllers.
 *     - Responsive horizontal banner displayed on mobile screens.
 *
 *  3. In-Feed Native Grid Units:
 *     - Exact aspect-ratio (512/310) and border-radius matching site game cards.
 *
 *  4. Ad Collapse & Revenue Fallback:
 *     - .custom-fallback-content defaults to display: none.
 *     - Unfilled ads collapse to 0px height; fallback switches to display: block.
 * ══════════════════════════════════════════════════════════════════════════════
 */

/* ── 1. BASE AD UNIT ARCHITECTURE ─────────────────────────────────────────── */
.org-ad-unit {
    position: relative;
    width: 100%;
    margin: 16px auto;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    clear: both;
}

.org-ad-label {
    display: block;
    margin: 0 auto 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    user-select: none;
    pointer-events: none;
}

.org-ad-content {
    width: 100%;
    height: auto;
    min-height: 0;
    text-align: center;
    box-sizing: border-box;
}

.org-ad-content ins.adsbygoogle {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── 2. DESKTOP AD UNITS ──────────────────────────────────────────────────── */

/* Sidebar Unit: Fixed width 300px, min-height 600px (Half-Page / Skyscraper) */
.org-ad-sidebar-300x600 {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    min-height: 600px;
    margin: 0 auto 20px;
    box-sizing: border-box;
}

.org-ad-sidebar-300x600 .org-ad-content ins.adsbygoogle {
    width: 300px !important;
    height: 600px !important;
    min-height: 600px !important;
}

/* Horizontal Divider Units: Responsive fluid layouts forced to "horizontal" */
.org-ad-unit--horizontal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    box-sizing: border-box !important;
}

.org-ad-unit--horizontal .org-ad-content ins.adsbygoogle {
    width: 100% !important;
    min-height: 90px;
}

@media (max-width: 768px) {
    .org-ad-unit--horizontal .org-ad-content ins.adsbygoogle {
        min-height: 50px;
    }
}

/* Native In-Feed Units: Grid-aligned cards matching exact aspect-ratio & radius */
.org-ad-unit--infeed,
.grid-ad.gcard-ad {
    position: relative;
    width: 100%;
    aspect-ratio: 512 / 310;
    border-radius: 10px;
    overflow: hidden;
    background: #141827;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    margin: 0;
}

.org-ad-unit--infeed .org-ad-label {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 10;
    margin: 0;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.7);
    color: #ffcb52;
    border-radius: 4px;
}

.org-ad-unit--infeed .org-ad-content,
.org-ad-unit--infeed .org-ad-content ins.adsbygoogle {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ── 3. MOBILE REPOSITIONING & TOUCH CONTROLLER SAFETY ────────────────────── */

/* Completely hide the 300x600 Desktop Sidebar on viewports <1024px */
@media (max-width: 1023px) {
    .org-ad-sidebar-300x600 {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Enforce explicit 35px safety margin beneath game window canvas / controls
       to prevent invalid accidental clicks on mobile gaming controllers */
    .game-wrapper,
    #game-frame,
    .game-stack,
    .gp-controls {
        margin-bottom: 35px !important;
    }
}

/* Mobile Repositioned Horizontal Banner container */
.org-mobile-repositioned-wrap {
    display: none;
    width: 100%;
    margin: 20px auto;
}

@media (max-width: 1023px) {
    .org-mobile-repositioned-wrap {
        display: block;
    }
}

/* ── 4. AD COLLAPSE & REVENUE FALLBACK ─────────────────────────────────────── */

/* Default state: Fallback container is completely hidden */
.custom-fallback-content {
    display: none;
    width: 100%;
    box-sizing: border-box;
}

/* While loading (state-loading): display fallback promotion immediately before ad loads */
.org-ad-unit.state-loading .custom-fallback-content {
    display: block !important;
    height: auto;
}
.org-ad-unit.state-loading .org-ad-content {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* On UNFILLED or state-fallback: collapse empty Google container to 0px */
ins.adsbygoogle[data-ad-status="unfilled"],
.org-ad-unit.state-fallback .org-ad-content ins.adsbygoogle,
.org-ad-unit.state-fallback .org-ad-content {
    display: none !important;
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* On UNFILLED: trigger fallback display:block */
.org-ad-unit.state-fallback .custom-fallback-content {
    display: block !important;
    height: auto;
}

/* Hide fallback when ad is successfully filled */
.org-ad-unit.state-filled .custom-fallback-content {
    display: none !important;
}

/* ── 5. INTERNAL HOUSE FALLBACK BANNER DESIGN ─────────────────────────────── */
.org-house-fallback {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, #141827 0%, #1e2538 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.25);
    color: #fff;
    box-sizing: border-box;
}

.org-house-fallback__logo {
    height: 52px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    flex-shrink: 0;
}

.org-house-fallback__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.org-house-fallback__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-house-fallback__desc {
    font-size: 12px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-house-fallback__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    background: #ffcb52;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.org-house-fallback__cta:hover {
    transform: translateY(-2px);
    background: #ffd875;
}

/* Mobile responsive fallback adjustments */
@media (max-width: 640px) {
    .org-house-fallback {
        padding: 10px 14px;
        gap: 10px;
    }
    .org-house-fallback__logo {
        height: 40px;
        max-width: 70px;
    }
    .org-house-fallback__title {
        font-size: 14px;
    }
    .org-house-fallback__desc {
        font-size: 11px;
    }
    .org-house-fallback__cta {
        padding: 6px 12px;
        font-size: 12px;
    }
}