/* ===================================================================== */
/*  PROMO BLOCK (refactored, integrated mobile spacing)                  */
/*  – Desktop / Tablet ≥768 px : 3 square cards                          */
/*  – Mobile  <768 px           : horizontal carousel                    */
/* ===================================================================== */

/* ---------- Desktop / Tablet ---------------------------------------- */
.promo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;                               /* карточки стыкуются без промежутков */
  width:100%;
}

.promo-card{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  display:flex;
  height:auto;
}

.promo-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1);
  transition:transform .4s ease;
}

.promo-card:hover img{transform:scale(1.06);}

/* ---------- Overlay -------------------------------------------------- */
.promo-info{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:2.5rem;
  background:linear-gradient(0deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.25) 40%,
    rgba(0,0,0,0) 70%);
  font-family:inherit;
}

.promo-title{
  color:#fff;
  font-size:clamp(1.5rem,2.2vw,2.25rem);
  margin:0 0 .25rem;
  font-weight:600;
}

.promo-sub{
  color:#fff;
  font-size:clamp(.9rem,1.15vw,1rem);
  line-height:1.4;
  min-height:2.8em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 0 1.25rem;
}

/* ---------- Button --------------------------------------------------- */
.promo-btn{
  align-self:stretch;
  width:100%;
  padding:.9rem 1.8rem;
  font-size:1rem;
  font-weight:600;
  text-align:center;
  background:transparent;
  border:2px solid #fff;
  border-radius:.8rem;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  cursor:pointer;
  text-decoration:none;
  transition:background .25s ease,color .25s ease;
}

.promo-btn:hover{
  background:#fff;
  color:#000;
  text-shadow:none;
}

/* ===================================================================== */
/*  Mobile <768 px : horizontal carousel with consistent padding        */
/* ===================================================================== */
@media(max-width:767px){
  .promo-grid{
    --promo-gap:1rem;
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;

    gap:var(--promo-gap);               /* одинаковый промежуток между картами */
    padding-inline:var(--promo-gap);    /* тот же отступ слева/справа, что у других блоков */
    scroll-padding-left:var(--promo-gap);

    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .promo-grid::-webkit-scrollbar{display:none;}

  .promo-card{
    flex:0 0 85vw;
    aspect-ratio:1/1;
    scroll-snap-align:start;
    border-radius:.6rem;
  }
}

/* ---------- Visually hidden (accessibility/SEO) --------------------- */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}