/* Рекламный ролик наверху главной (задание German 27.10.2026). Один файл на три языка:
   разметка блока на страницах — рамка с видео своего языка, кнопки рисует promo.js. */
.promo { max-width: 960px; margin: 0 auto; padding: 20px 24px 8px; }
.promo-btn:focus-visible { outline: 3px solid #EDC3A5; outline-offset: 2px; }
.promo-frame {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px;
    background: #F6EFE4; border: 1px solid #D8C9B0;
    box-shadow: 0 10px 30px rgba(46, 36, 24, .12);
    /* На низком экране ноутбука рамка целиком влезает под шапку — с кнопкой звука. */
    max-width: max(480px, calc((100vh - 190px) * 16 / 9)); margin-inline: auto;
}
.promo-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #F6EFE4; }
.promo-btn {
    /* Верхний угол: надписи ролика бывают только внизу кадра и посередине (German 27.10.2026). */
    position: absolute; top: 14px; inset-inline-end: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    padding: 10px 14px; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(46, 36, 24, .78); color: #FBF7EF;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.promo-btn:hover { background: rgba(46, 36, 24, .92); }
.promo-btn svg { width: 18px; height: 18px; flex: none; }
.promo-play {
    position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border: 0; border-radius: 50%;
    cursor: pointer; background: rgba(176, 95, 46, .92); color: #FBF7EF;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(46, 36, 24, .3);
}
.promo-play[hidden] { display: none; }
/* Треугольник «играть» не зеркалится и на иврите. */
.promo-play svg { width: 34px; height: 34px; margin-left: 4px; }
/* На телефоне — по ширине экрана, без полей и скруглений. */
@media (max-width: 640px) {
    .promo { padding: 12px 0 4px; }
    .promo-frame { border-radius: 0; border-inline: 0; box-shadow: none; max-width: none; }
    .promo-btn { top: 10px; inset-inline-end: 10px; padding: 9px 12px; font-size: 13px; }
    .promo-play { width: 64px; height: 64px; }
}