/* =========================
   MODAL TEASERS (compact desktop, 2x2 fit mobile)
   ========================= */

.mtBack{
  position:fixed;
  inset:0;
  z-index:99999; /* выше липкой шапки */
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mtBack.isOpen{ display:flex; }

.mtModal{
  position:relative;
  width:min(860px, calc(100% - 36px));   /* меньше на ПК */
  max-height:min(70vh, 620px);          /* меньше по высоте */
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  display:flex;
  flex-direction:column;
}

/* header (без линии снизу) */
.mtHead{
  padding:14px 16px 10px;
  border-bottom:0; /* убрали черту под заголовком */
}

.mtTitle{
  font-weight:900;
  letter-spacing:.2px;
  text-transform:uppercase;
  font-size:15px;
  line-height:1.1;
}

.mtSub{
  margin-top:6px;
  color:rgba(0,0,0,.60);
  font-size:12px;
  line-height:1.25;
}

.mtClose{
  position:absolute;
  right:10px;
  top:10px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.mtClose span{
  font-size:22px;
  line-height:1;
  transform: translateY(-1px);
}

/* grid */
.mtGrid{
  padding:12px 16px 16px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

/* card */
.mtCard{
  position:relative;
  display:block;
  text-decoration:none;
  color:#fff;
  border-radius:12px;
  overflow:hidden;
  background:#111;
  min-width:0;
}

/* media */
.mtMedia{
  height:190px;              /* компактнее на ПК */
  background:#eaeaea;
  overflow:hidden;
}
.mtMedia img,
.mtMedia video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* overlay per teaser (а не на весь модал) */
.mtBody{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px 12px 10px;
  background:linear-gradient(180deg, rgba(0, 0, 0, 0.381), rgba(0,0,0,.84));
}

.mtT{
  margin:0;
  font-weight:900;
  font-size:15px;
  line-height:1.15;
}

/* desc можно оставить, но по умолчанию скрываем, чтобы всё влезало */
.mtD{ display:none; }

/* если хотите метку/кнопку внизу — можно включить позже.
   сейчас убираем полностью, чтобы не было “пустых белых зон” */
.mtFoot{ display:none; }

/* =========================
   MOBILE: без прокрутки, 4 тизера помещаются в экран
   (делаем 2x2 и фиксируем высоты через calc)
   ========================= */
/* MOBILE: 1 column (stack), modal поверх шапки, скролл внутри окна */
@media (max-width:760px){
  .mtBack{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
  }

  .mtModal{
    width:100%;
    height:100dvh;
    max-height:none;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }

  .mtHead{
    padding:12px 14px 8px;
  }

  .mtClose{
    right:10px;
    top:10px;
    width:36px;
    height:36px;
  }

  /* 1 колонка + скролл внутри */
  .mtGrid{
    padding:12px 12px 16px;
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;

    /* важно: скролл именно в контенте */
    overflow:auto;
    -webkit-overflow-scrolling: touch;

    /* чтобы grid корректно ужимался внутри flex */
    flex: 1 1 auto;
    min-height:0;
  }

  /* карточки чуть выше, но не гигантские */
  .mtMedia{
    height:190px;
  }

  .mtBody{
    padding:10px 10px 9px;
  }

  .mtT{
    font-size:14px;
    line-height:1.12;
  }
}


/* scroll lock */
html.mtNoScroll, body.mtNoScroll{ overflow:hidden !important; }