/* ============================================================
   Torkzt · assets/css/ad_slot.css
   Рекламный слот с резервом места: блок не прыгает при загрузке.
   Дописать в home.css ИЛИ подключить отдельно.
   ============================================================ */

/* ── слот: место зарезервировано ДО загрузки ──
   Размер должен совпадать с реальным баннером сетки,
   иначе скачок вернётся. Подставь свои значения. */
.ad-slot {
    position: relative;
    width: 100%;
    /* резерв: не фиксированная высота, а минимальная —
       баннер может прийти чуть выше, блок подрастёт вниз,
       а не сдвинет весь контент */
    min-height: 250px;
    margin: 0 0 18px;
    border-radius: 14px;
    /* overflow:hidden НЕ ставим — обрежет высокий креатив.
       Слот растёт под реальную высоту баннера. */
    background: #f4f6f9;
    /* высота блока = высота содержимого, чтобы соседи
       не оказались под баннером */
    display: flow-root;
    /* плавно подстраиваемся, если реальный баннер иного размера */
    transition: min-height .25s ease;
}

/* сам контейнер, куда сетка отрисует баннер.
   Именно он задаёт итоговую высоту слота. */
.ad-slot__frame {
    position: relative;
    z-index: 2;
    width: 100%;
    /* баннер не должен вылезать вбок за колонку */
    max-width: 100%;
}
.ad-slot__frame iframe,
.ad-slot__frame img { max-width: 100%; }

/* ── плейсхолдер «загружается» ── */
.ad-slot__ph {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    /* мягкий шиммер вместо мёртвого серого */
    background: linear-gradient(100deg,
        #f4f6f9 30%, #e9edf3 50%, #f4f6f9 70%);
    background-size: 200% 100%;
    animation: ad-shimmer 1.4s linear infinite;
}

.ad-slot__ph-text {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9aa3af;
}

.ad-slot__ph svg {
    width: 22px;
    height: 22px;
    color: #c2c9d4;
}

@keyframes ad-shimmer { to { background-position: -200% 0; } }

/* ── состояния ── */

/* баннер отрисовался — плейсхолдер убираем, резерв снимаем */
.ad-slot.is-loaded { min-height: 0; background: transparent; }
.ad-slot.is-loaded .ad-slot__ph { display: none; }

/* реклама не пришла (блокировщик, нет заполнения, таймаут) —
   схлопываем слот полностью, чтобы не висела пустая дыра */
.ad-slot.is-empty {
    min-height: 0;
    margin: 0;
    background: transparent;
}
.ad-slot.is-empty .ad-slot__ph { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ad-slot__ph { animation: none; }
}

/* ── мобильные: баннер обычно ниже ── */
@media (max-width: 575px) {
    .ad-slot { min-height: 200px; margin-bottom: 12px; }
}

/* ── тёмная тема (отключена, включим позже) ────────────────
body[data-bs-theme='dark'] .ad-slot { background: #1c1e23; }
body[data-bs-theme='dark'] .ad-slot__ph {
    background: linear-gradient(100deg, #1c1e23 30%, #24272d 50%, #1c1e23 70%);
    background-size: 200% 100%;
}
body[data-bs-theme='dark'] .ad-slot__ph-text { color: #6b7280; }
*/