/* ===================================================================== */
/*  BLOG block  (desktop + mobile tweaks)                                */
/* ===================================================================== */

/* ---------- Header (title + link) ----------------------------------- */
.homepage-blog-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(--container-pad,20px);   /* десктопный “контейнер” */
}

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

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

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

/* ---------- Card ---------------------------------------------------- */
.homepage-blog-card{
  display:flex!important;flex-direction:column;text-align:center;
  border-radius:8px;overflow:visible;transition:transform .2s ease;width:100%!important;
}
.homepage-blog-card:hover{transform:translateY(-4px);}
.homepage-blog-card img{
  width:100%!important;aspect-ratio:1/1;object-fit:cover;border-radius:8px;
  transition:filter .3s;
}
.homepage-blog-card:hover img{
  filter:drop-shadow(0 0 4px rgba(0,0,0,.5))
         drop-shadow(0 0 12px rgba(0,0,0,.25));
}
.homepage-blog-card h3{
  margin:.6rem 0 0;padding:0 .5rem;
  font-weight:600;line-height:1.3;font-size:1rem;color:#555;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (min-width:768px){
  .homepage-blog-card h3{font-size:clamp(.95rem,1.3vw,1.05rem);}
}

/* =================================================================== */
/*  Mobile ≤1023 px : карусель + правка заголовка                      */
/* =================================================================== */
@media (max-width:1023px){

  /* -------- Grid → горизонтальная лента --------------------------- */
  .homepage-blog-grid{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;gap:1rem;
    padding-inline:1rem;scroll-padding-left:1rem;max-width:100%;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .homepage-blog-grid::-webkit-scrollbar{display:none;}
  .homepage-blog-card{flex:0 0 64vw;scroll-snap-align:start;}

  /* -------- Заголовок: выравниваем по той же линии (1rem) --------- */
  .homepage-blog-block .section-header{
    max-width:100%;
    margin:clamp(2rem,4vw,2.5rem) 0;      /* вертикальный отступ без auto */
    padding-inline:1rem;                  /* тот же 1rem, что у ленты */
  }

  /* убрать лишний padding слева (был 20px) ------------------------- */
  .homepage-blog-block .section-title{
    padding-left:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}