/* Home page polish (loaded from welcome.blade.php only).
   1) hero buttons: icon for "Расписание", readable hover/focus
   2) one card/illustration system: grid edges, 20px gap, 3/2 images */
:root{
  --hp-brand:#3f7d80;
  --hp-brand-dark:#346b6e;
  --hp-brand-light:#94bdbf;
  --hp-gap:20px;
  --hp-ratio:3/2;
  --hp-pad:40px;
}
@media (max-width:767px){:root{--hp-pad:24px}}

/* ---------- 1. hero buttons ---------- */
.header--cta .button{
  background-repeat:no-repeat;background-position:10px 5px;background-size:28px 25px;
  padding:12px 20px 10px 45px;
}
.header--cta .header--cta--main{
  background-color:var(--hp-brand);border-color:var(--hp-brand);color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 26'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='21' height='18' rx='3'/%3E%3Cpath d='M4 11h21M10 2.5v5M19 2.5v5'/%3E%3Cpath d='M9.5 16h1M14 16h1M18.5 16h1M9.5 19.5h1M14 19.5h1'/%3E%3C/g%3E%3C/svg%3E");
}
/* audit-fixes.css sets .button:hover{color:#3f7d80} and style.css drops the left padding on hover:
   on the filled #3f7d80 button that gave teal text on teal fill. Keep text white, padding and icon stable. */
.header .header--cta a.button:hover:not(.button__disable),
.header .header--cta a.button:focus-visible{
  color:#fff;padding:12px 20px 10px 45px;border-color:#fff;
}
.header .header--cta a.button.header--cta--main:hover:not(.button__disable),
.header .header--cta a.button.header--cta--main:focus-visible{background-color:var(--hp-brand-dark)}
.header .header--cta a.button.button__more:not(.header--cta--main):hover:not(.button__disable),
.header .header--cta a.button.button__more:not(.header--cta--main):focus-visible{background-color:var(--hp-brand)}
.header .header--cta a.button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- 2. cards and illustrations ---------- */
/* shop: grid-aligned columns when all products fit (swiper is locked then); keep swiper widths otherwise */
.catalogSlider .swiper-container{padding-left:0;padding-right:0}
@media (min-width:900px){
  .catalogSlider .swiper-wrapper>.swiper-slide:first-child:nth-last-child(-n+4),
  .catalogSlider .swiper-wrapper>.swiper-slide:first-child:nth-last-child(-n+4)~.swiper-slide{
    width:calc((100% - 3*var(--hp-gap))/4)!important;margin-right:var(--hp-gap)!important;
  }
  .catalogSlider .swiper-wrapper>.swiper-slide:last-child{margin-right:0!important}
}
.catalogSlider{padding-top:var(--hp-pad)}
.catalogItem--image{padding-bottom:0;aspect-ratio:1/1;background-size:contain}
.catalogItem--image img{width:86%!important}

/* events and blog: image ratio 3/2 cropped with object-fit, items flush to the grid, 20px gap */
.newsList__slider .newsList--item{padding-left:0;padding-right:0}
.newsList--image{padding-bottom:0;aspect-ratio:var(--hp-ratio);background-color:var(--hp-brand-light)}
.newsList--image img{top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}
.newsList:not(.newsList__slider) .newsList--wrapper{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--hp-gap);margin-left:auto;margin-right:auto;
}
.newsList:not(.newsList__slider) .newsList--item{width:auto;flex-basis:auto;padding-left:0;padding-right:0}
@media (max-width:900px){.newsList:not(.newsList__slider) .newsList--wrapper{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.newsList:not(.newsList__slider) .newsList--wrapper{grid-template-columns:minmax(0,1fr)}}

/* gift block: 3/2 cover instead of 100%-width background that left gaps for other source ratios */
.textBlock--image{padding-bottom:0;aspect-ratio:var(--hp-ratio);border-left:0;height:auto}
.textBlock--image--wrapper{background-size:cover!important;transform:scale(1);transition:transform .5s ease-in-out}
.textBlock--image:hover .textBlock--image--wrapper{background-size:cover!important;transform:scale(1.04)}