/* =========================================================
   ДАРСИ — «Преимущества». Неровная сетка: текстовые плашки
   вперемешку со вставками фотографий.
   ========================================================= */

.adv{
  --a-ink:#0B0B0C;
  --a-card:#141416;
  --a-line:rgba(255,255,255,.12);
  --a-muted:rgba(255,255,255,.66);
  --a-rose:#E3A9BA;

  position:relative;
  padding:clamp(56px,7vw,110px) var(--pad-x);
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(227,169,186,.10) 0%, rgba(227,169,186,0) 60%),
    var(--a-ink);
  color:#fff;
}
.adv__inner{width:100%; max-width:var(--maxw); margin:0 auto}

.adv__head{margin-bottom:clamp(28px,3.4vw,48px)}
.adv__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(30px, 3.6vw, 50px); line-height:1.02; letter-spacing:-.015em;
  margin:0; max-width:42ch;   /* ровно две строки */
}

/* ---------- неровная сетка ---------- */
.adv__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(190px, auto);
  grid-template-areas:
    "a b c v"
    "m d e v"
    "m f g h";
  gap:clamp(10px,1vw,16px);
}
.adv__grid > :nth-child(1){grid-area:a}
.adv__grid > :nth-child(2){grid-area:b}
.adv__grid > :nth-child(3){grid-area:c}
.adv__grid > :nth-child(4){grid-area:v}   /* вертикальное фото на два ряда */
.adv__grid > :nth-child(5){grid-area:m}   /* квадратное видео на два ряда */
.adv__grid > :nth-child(6){grid-area:d}
.adv__grid > :nth-child(7){grid-area:e}
.adv__grid > :nth-child(8){grid-area:f}
.adv__grid > :nth-child(9){grid-area:g}
.adv__grid > :nth-child(10){grid-area:h}

/* ---------- текстовая плашка ---------- */
.adv-card{
  display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  padding:clamp(18px,1.6vw,28px);
  background:var(--a-card); border:1px solid var(--a-line);
  transition:background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.adv-card:hover{background:#1A1A1E; border-color:rgba(255,255,255,.22); transform:translateY(-3px)}
.adv-card__title{
  font-size:clamp(15px,1.15vw,19px); font-weight:600; letter-spacing:-.03em;
  line-height:1.22; margin:0 0 10px;
}
.adv-card__txt{
  margin:0; font-size:clamp(13px,.95vw,14.5px); line-height:1.45;
  letter-spacing:-.03em; color:var(--a-muted);
}
.adv-card__ico{
  display:block; width:28px; height:28px; flex:0 0 auto; color:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.adv-card__ico svg{width:100%; height:100%; display:block}
.adv-card:hover .adv-card__ico{transform:translateY(-3px)}

/* ---------- вставка с видео ---------- */
.adv-video{
  position:relative; overflow:hidden; margin:0;
  background:var(--a-ink);
}
/* постер и видео — два слоя с одинаковым выпуском за границы:
   на дробных ширинах по краю не остаётся светлой полоски */
.adv-video__poster,
.adv-video__el{
  max-width:none;
  position:absolute; inset:-2px;
  width:calc(100% + 4px); height:calc(100% + 4px);
  object-fit:cover; display:block;
}
.adv-video__el{opacity:0; transition:opacity .8s ease}
.adv-video__el.is-ready{opacity:1}

/* ---------- вставка с фото ---------- */
.adv-img{position:relative; overflow:hidden; background:#0F0F11; margin:0}
.adv-img img{
  max-width:none;
  position:absolute; inset:-2px;
  width:calc(100% + 4px); height:calc(100% + 4px);
  object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.3,1);
}
.adv-img:hover img{transform:scale(1.05)}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1100px){
  .adv__grid{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:minmax(170px, auto);
    grid-template-areas:
      "a b"
      "c v"
      "m v"
      "m d"
      "e f"
      "g h";
  }
}

@media (max-width:720px){
  .adv{padding-bottom:calc(var(--bar-h, 0px) + env(safe-area-inset-bottom))}
  .adv__title{max-width:none}
  .adv__grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    grid-template-areas:none;
  }
  .adv__grid > *{grid-area:auto !important}
  .adv-card{min-height:0; gap:12px; padding:16px; justify-content:flex-start}
  .adv-card__ico{order:-1}                     /* иконка сверху — карточка читается сверху вниз */
  .adv-card__ico{width:24px; height:24px}
  .adv-img{display:none}                       /* на мобильном оставляем только видео */
  .adv-video{aspect-ratio:1/1}
}