/* Главная — перевод bottega/index.html (промо-полоса, медиаблоки, новинки). Подключается
   только шаблоном главной: стили по сайту не размазаны (plan.html §3). Шапка, меню,
   карточки и футер — общие, из buro.css и site.css. */

/* ---------- промо-полоса (BV: 36px) ---------- */
.promo{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;padding:6px 44px;background:var(--navy);color:#fff;text-align:center;font-size:10px;line-height:14px}
.promo a{color:#fff;text-decoration:none}
.promo__close{position:absolute;right:6px;top:50%;width:34px;height:34px;margin-top:-17px;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.promo__close .icon{width:12px;height:12px;stroke-width:1.5;stroke-linecap:square}

/* ---------- медиаблоки ---------- */
.media{position:relative;overflow:hidden;background:var(--rule)}
.media__frame{position:relative;width:100%;aspect-ratio:9/16}
.media__frame img,.media__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* кадр первого экрана уже обрезан сервером слева; если пропорция экрана другая — режем тоже слева */
.hero .media__frame img,.hero .media__frame video{object-position:right center}
.hero__video{opacity:0;transition:opacity .4s}
.hero__video.is-ready{opacity:1}
/* Кнопка видна, только если браузер отказал в автозапуске (энергосбережение, встроенные
   браузеры приложений). Левый верхний угол не спорит ни с подписью, ни с главным справа */
.hero__play{position:absolute;top:16px;left:16px;z-index:3;width:44px;height:44px;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(16,16,16,.45)}
.hero__play[hidden]{display:none}
.hero__play svg{width:18px;height:18px}
.hero--empty{background:var(--navy)}
.media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.25));pointer-events:none;z-index:1}
.media__overlay{position:absolute;left:0;right:0;bottom:25px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 16px;text-align:center}
.media__title{margin:0;color:#fff;font-size:14px;line-height:22px;font-weight:400}
.media__btns{display:grid;grid-auto-flow:row;grid-auto-columns:1fr;gap:14px;justify-items:stretch;max-width:100%}
.media .btn{min-width:194px;border:0;background:#fff;color:#000}
.hero,.scene{margin-bottom:12px}
.tiles{display:grid;gap:12px}

/* ---------- новинки ---------- */
.home-new{padding:103px 0 56px}
.home-new .section-title{margin:0 0 45px;font-size:13px;line-height:22px;font-weight:400;text-align:center}
.home-new__more{margin-top:28px;text-align:center;font-size:13px}
.home-new__note{margin-top:20px;text-align:center;font-size:11px;line-height:18px;color:var(--muted)}

@media (hover:hover){
  .promo a:hover{text-decoration:underline;text-underline-offset:3px}
  .media .btn:hover{background:var(--navy);color:#fff}
}
@media (hover:none){
  .media .btn:active{background:var(--navy);color:#fff}
}
@media (max-width:767px){
  /* 744–767 (iPad mini портрет): 9:16 выше вьюпорта — ограничиваем высотой экрана без промо и шапки */
  .media__frame{max-height:calc(100vh - 96px);max-height:calc(100svh - 96px)}
}
@media (min-width:768px){
  .media__frame{aspect-ratio:16/9}
  .tile .media__frame{aspect-ratio:1}
  .tiles{grid-template-columns:1fr 1fr}
  .media__overlay{bottom:58px}
  .scene .media__overlay,.tile .media__overlay{bottom:25px}
  .media__btns{grid-auto-flow:column}
  .media .btn{min-width:195px}
  .hero .btn{min-width:231px}
  .tile .btn{min-width:236px}
}
@media (prefers-reduced-motion:reduce){
  .hero__video{transition:none}
}