/* ============================================================================
   📣 Рекламный баннер — общий для главной, терминала, дайджеста и сводки.

   Файл подключён ко всем страницам, поэтому цвета берутся из переменных той
   страницы, где мы оказались: у лендинга это --border/--text/--muted/--cyan, у
   терминала --border-color/--text-primary/--text-muted/--color-blue, у
   дайджеста/часов — свои, но с теми же запасными значениями. Локальные --ad-*
   с запасным значением: баннер не должен остаться белым квадратом.

   Что здесь важно:
     * фото не обрезается: ширина — 100% контейнера, высота следует из
       пропорций (height: auto). Потолок max-height + object-fit: contain
       оставлял пустые полосы по бокам — этого больше нет;
     * подпись — ПОД фотографией (data-ad-caption="side" возвращает боковую
       раскладку, если админ захочет её обратно);
     * слайды лежат в одной ячейке grid (grid-area: 1 / 1), но высоту
       задаёт только активный: неактивные вынуты из потока, иначе короткий
       кадр «плавает» в коробке самого высокого. Плавность — прозрачность
       (--ad-fade из настроек админки);
     * неактивный слайд visibility:hidden — его не видят ни зрение, ни
       клавиатура, ни читалка экрана;
     * крестика нет: закрыть баннер может только админ, сняв объявление;
     * в терминале баннер скрывается для зарегистрированных (ad-free),
       на остальных страницах виден всем.
   ========================================================================== */

.ad-host {
    --ad-border: var(--border, var(--border-color, #1b2434));
    --ad-text: var(--text, var(--text-primary, #e8edf6));
    --ad-muted: var(--muted, var(--text-muted, #8493a8));
    --ad-accent: var(--cyan, #00d6ff);
    --ad-card: var(--bg-card, #0d1220);
    --ad-bg: var(--bg-dark, #070a10);
    --ad-img-max: min(46vh, 380px);
    --ad-fade: 500ms;      /* скрипт перезаписывает значением из настройки */
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px;
}
.ad-host[hidden] { display: none; }

.ad-banner {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: #141b2e;
    /* без внутренней рамки вокруг фото: отступ был щелью между картинкой и карточкой */
    padding: 0;
    overflow: hidden;
    max-width: 100%;
}

/* Слайды в одной ячейке. Высоту держит только .on — иначе контейнер
   равен самому высокому кадру и короткое фото оставляет пустоту. */
.ad-stage {
    display: grid;
    position: relative;
    width: 100%;
    max-width: 100%;
    line-height: 0;
}
.ad-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--ad-fade) ease,
                visibility 0s linear var(--ad-fade);
}
.ad-slide.on {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--ad-fade) ease;
}
.ad-host:not([data-ad-layout="grid"]) .ad-slide:not(.on) {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    align-self: start;
    justify-self: start;
}
.ad-host:not([data-ad-layout="grid"]) .ad-stage { overflow: hidden; }

/* --- фото ------------------------------------------------------------- */
.ad-hit {
    display: block;
    width: 100%;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: 0;
    line-height: 0;
}
.ad-media {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    min-height: 0;
    line-height: 0;
    font-size: 0;
}
/* «Реклама» в углу картинки — метка остаётся, даже когда подписи нет */
.ad-flag {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
    background: rgba(7, 10, 16, 0.72);
    backdrop-filter: blur(2px);
}
.ad-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;               /* потолок + contain давал боковые щели */
    object-fit: contain;            /* видно всё фото целиком, без обрезки */
    vertical-align: top;
}
.ad-host[data-ad-fit="cover"] .ad-media img {
    height: var(--ad-img-max);
    max-height: none;
    object-fit: cover;              /* по выбору админа: заполняет блок */
}
.ad-host[data-ad-fit="cover"] .ad-media { width: 100%; }
.ad-hit:hover .ad-media img { filter: brightness(1.06); }
.ad-hit:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }

/* --- подпись ------------------------------------------------------------ */
.ad-cap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
    min-width: 0;
    line-height: normal;
    font-size: 1rem;
}
.ad-hit-cap { color: inherit; }
.ad-hit-cap .ad-cap { padding-top: 8px; }
.ad-tag {
    align-self: flex-start;
    font-size: 0.66rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ad-muted);
    border: 1px solid var(--ad-border);
    border-radius: 999px;
    padding: 2px 8px;
}
.ad-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ad-text);
    white-space: pre-line;          /* переносы, которые задал админ, работают */
    word-break: break-word;
}
.ad-text a { color: var(--ad-accent); text-decoration: underline; }
.ad-until { font-size: 0.72rem; color: var(--ad-muted); }
.ad-no-photo .ad-media { display: none; }
.ad-no-photo .ad-cap { padding-top: 14px; }

/* --- боковая раскладка (если админ её включил) ------------------------- */
@media (min-width: 760px) {
    .ad-host[data-ad-caption="side"] .ad-slide { flex-direction: row; align-items: flex-start; }
    .ad-host[data-ad-caption="side"] .ad-media { flex: 0 0 46%; }
    .ad-host[data-ad-caption="side"] .ad-hit { display: flex; flex: 0 0 46%; }
    .ad-host[data-ad-caption="side"] .ad-hit .ad-media { flex: 1; }
    .ad-host[data-ad-caption="side"] .ad-cap { flex: 1; justify-content: center; padding: 16px 18px; }
}

/* --- сетка: несколько акций одновременно ------------------------------ */
.ad-host[data-ad-layout="grid"] .ad-stage {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.ad-host[data-ad-layout="grid"] .ad-slide {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: 1px solid var(--ad-border);
    background: rgba(7, 10, 16, 0.45);
}
.ad-host[data-ad-layout="grid"] .ad-stage { align-items: start; overflow: visible; }
.ad-host[data-ad-layout="grid"] .ad-slide { position: relative; height: auto; }
.ad-host[data-ad-layout="grid"] .ad-media img { max-height: none; height: auto; }

/* --- переключение ---------------------------------------------------- */
/* Кнопки (стрелки и точки) не показываем ни на одной странице.
   Смена по таймеру и свайп остаются — прячем только сами кнопки. */
.ad-pager {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 4px 6px;
    line-height: normal;
    font-size: 1rem;
}
.ad-dots { display: flex; gap: 6px; }
.ad-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(132, 147, 168, 0.5);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.ad-dot.on { background: var(--ad-accent); transform: scale(1.25); }
.ad-nav {
    border: 1px solid transparent;
    background: rgba(7, 10, 16, 0.28);
    color: rgba(232, 237, 246, 0.7);
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    font-size: 1.05rem;
    opacity: 0.42;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ad-nav:hover,
.ad-nav:focus-visible {
    opacity: 0.92;
    background: rgba(7, 10, 16, 0.55);
    border-color: var(--ad-accent);
}
.ad-nav:active {
    opacity: 1;
    background: rgba(7, 10, 16, 0.72);
}
.ad-host[data-ad-layout="grid"] .ad-pager { display: none; }

/* --- HTML-баннер: произвольный код админа в том же слоте ---------------- */
.ad-slide.ad-html { background: transparent; }
.ad-html-banner {
    position: relative;
    display: block;
    width: 100%;
    min-height: 60px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ad-bg);
}
.ad-html-banner > * { max-width: 100%; }
.ad-html-preview {
    background: var(--bg-card, #0d1220);
    border-radius: 8px;
    overflow: hidden;
}

/* --- телефон: фото на всю ширину, высота по пропорциям, без щелей ---- */
@media (max-width: 640px) {
    .ad-host { padding: 0; max-width: 100%; }
    .ad-banner {
        padding: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .ad-media img { max-height: none; height: auto; }
    .ad-cap { padding: 10px 12px 12px; }
}

/* --- терминал: баннер под графиком, места просим поменьше ------------ */
.ad-host[data-ad-place="terminal"] {
    --ad-img-max: min(20vh, 190px);
    max-width: none;
    margin: 0;
    padding: 6px 8px 8px;
}
.ad-host[data-ad-place="terminal"] .ad-banner {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
    border-radius: 12px;
}
.ad-host[data-ad-place="terminal"] .ad-media { width: auto; max-width: 100%; }
.ad-host[data-ad-place="terminal"] .ad-media img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--ad-img-max);
}
.ad-host[data-ad-place="terminal"] .ad-cap { padding: 8px 10px 10px; gap: 4px; }
.ad-host[data-ad-place="terminal"] .ad-text { font-size: 0.84rem; line-height: 1.4; }
@media (max-width: 640px) {
    .ad-host[data-ad-place="terminal"] { --ad-img-max: min(26vh, 190px); padding: 4px 0 6px; }
}

/* --- дайджест и сводка по часам: как на главной, но с отступом сверху ---- */
.ad-host[data-ad-place="digest"],
.ad-host[data-ad-place="hourly"] {
    --ad-img-max: min(34vh, 320px);
    max-width: 1080px;
    margin: 14px auto 0;
    padding: 0 22px;
}
.ad-host[data-ad-place="digest"] .ad-banner,
.ad-host[data-ad-place="hourly"] .ad-banner { border-radius: 14px; }
@media (max-width: 640px) {
    .ad-host[data-ad-place="digest"],
    .ad-host[data-ad-place="hourly"] {
        --ad-img-max: min(30vh, 260px);
        margin: 10px auto 0;
        padding: 0;
    }
}
/* Поведение внутри колонки графика: баннер занимает ровно свою высоту (остальное
   отдаётся графику), а когда графика не видно — на весь экран или свёрнут в
   полоску — реклама тоже уходит: незачем занимать место под пустотой. */
.chart-section .ad-host { flex: 0 0 auto; }
.chart-section.fullscreen .ad-host,
.chart-section.collapsed .ad-host { display: none; }