/* ===================================================================== */
/*  POPULAR MAPS block (desktop + mobile tweaks)                         */
/* ===================================================================== */

.homepage-popular-maps-block{--pop-gap:1rem;}

/* ---------- Header (title + link) ----------------------------------- */
.homepage-popular-maps-block .section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  max-width:var(--container-max,1200px);
  margin:clamp(2rem,4vw,2.5rem) auto;
  padding-inline:var(--pop-gap);
}
@media (min-width:768px){
  .homepage-popular-maps-block .section-header{
    margin-block:clamp(2.5rem,5vw,3.5rem);
  }
}

/* ---------- Title --------------------------------------------------- */
.section-title{
  margin:0;
  font:700 1.2rem/1.1 "Montserrat",sans-serif;
  color:#000;
}
@media (min-width:768px){
  .section-title{font-size:clamp(1.2rem,2.4vw,1.9rem);}
}

/* ---------- Link ---------------------------------------------------- */
.section-link{
  margin:0;
  display:inline-flex;align-items:center;gap:.45rem;
  font:600 .9rem/1.1 "Montserrat",sans-serif;
  color:#1d3557;text-decoration:none;white-space:nowrap;
  transition:opacity .25s;
}
.section-link:hover{opacity:.75;}
.section-link .arrow{transition:transform .25s;}
.section-link:hover .arrow{transform:translateX(.25rem);}
@media (min-width:768px){
  .section-link{font-size:clamp(.8rem,1vw,.95rem);}
}
@media (max-width:767px){
  .section-link{font-weight:400;}
}

/* ---------- Grid ---------------------------------------------------- */
.homepage-popular-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--pop-gap);
  max-width:var(--container-max,1200px);
  margin:0 auto;
  padding:0 var(--pop-gap);
}

/* ---------- Card ---------------------------------------------------- */
.homepage-popular-grid .card{
  display:flex;flex-direction:column;text-align:center;
  border:none;background:transparent;border-radius:8px;
  overflow:visible;                           /* тень не обрезается */
  transition:transform .2s ease;
}
.homepage-popular-grid .card:hover{transform:translateY(-4px);}

/* ---------- Image & hover shadow ----------------------------------- */
.popular-maps-card-img-wrap{
  margin:4px;                                 /* десктоп-зазор вокруг фото */
  border-radius:8px;
}
.popular-maps-card-img-wrap img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:inherit;
  transition:filter .3s;
}
.homepage-popular-grid .card:hover .popular-maps-card-img-wrap img{
  filter:
    drop-shadow(0 0 4px  rgba(0,0,0,.5))
    drop-shadow(0 0 12px rgba(0,0,0,.25));
}

/* ---------- Card body ---------------------------------------------- */
.homepage-popular-grid .card-body{
  background:#fff;padding:.75rem;flex-grow:1;text-align:center;
}

/* ---------- Text sizes --------------------------------------------- */
.homepage-popular-grid .card h3{margin:.5rem 0 0;font:700 .95rem/1.2 "Montserrat",sans-serif;}
.homepage-popular-grid .price,
.homepage-popular-grid .price-accent{margin:.25rem 0 1rem;font:700 .9rem/1.2 "Montserrat",sans-serif;color:#444;}
.price-accent{color:#d62828!important;}
.homepage-popular-grid .card p{margin:.25rem 0;font:.85rem/1.4 "Montserrat",sans-serif;color:#666;}
@media (min-width:768px){
  .homepage-popular-grid .card h3{font-size:clamp(.95rem,1.3vw,1.05rem);}
  .homepage-popular-grid .price,
  .homepage-popular-grid .price-accent{font-size:clamp(.9rem,1.1vw,.95rem);}
  .homepage-popular-grid .card p{font-size:clamp(.85rem,1vw,.95rem);}
}

/* ---------- Visually hidden ---------------------------------------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* =================================================================== */
/*  Mobile ≤1023 px                                                    */
/* =================================================================== */
@media (max-width:1023px){

  /* --------- горизонтальная карусель ------------------------------ */
  .homepage-popular-grid{
    display:flex;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    gap:var(--pop-gap);
    padding-inline:var(--pop-gap);          /* 1 rem слева/справа — линия старта */
    scroll-padding-left:var(--pop-gap);
    max-width:100%;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .homepage-popular-grid::-webkit-scrollbar{display:none;}
  .homepage-popular-grid .card{flex:0 0 64vw;scroll-snap-align:start;}

  /* --------- заголовок: одна строка, без левого padding ---------- */
  .homepage-popular-maps-block .section-header{
    max-width:100%;
    margin:clamp(2rem,4vw,2.5rem) 0;        /* центрирование снято */
    padding-inline:var(--pop-gap);          /* воздух справа сохраняем */
  }
  .homepage-popular-maps-block .section-title{
    padding-left:0;                         /* убрали лишний воздух слева */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* --------- убираем внутренний margin у фото -------------------- */
  .popular-maps-card-img-wrap{margin:0;}
}