/* Container */
.home-hero-cats { padding: 6px 0 15px; }
.home-hero-cats .container { max-width:1322px; margin:0 auto; }
.home-hero-cats__grid { display:grid; grid-template-columns: 401px 1fr; gap: 20px; align-items: start; }
.home-hero-cats__grid > * { min-width: 0; }

/* Left hero card */
.heroCard { position:relative; display:block; width:401px; height:263px; border-radius:10px; overflow:hidden; text-decoration:none; color:#fff; }
.heroCard__bg { position:absolute; inset:0; 
  /* Figma: 070C36 @100% until 31%, then to 242C6E @15% at 100% */
  background-image: linear-gradient(180deg,
    rgba(7,12,54,0.75) 0%,
    rgba(7,12,54,0.75) 31%,
    rgba(36,44,110,0.15) 100%
  ), var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.heroCard__content { position:absolute; inset:0; padding:25px 25px; display:flex; flex-direction:column; }
.heroCard__title { font-size:20px; line-height:27px; font-weight:500; margin:0 0 17px 0; color:#fff; }
.heroCard__desc { font-size:16px; line-height:22px; font-weight:400; margin:0; color:#fff; }
.heroCard__btn { margin-top:auto; /* push to bottom */
  display:inline-flex; align-items:center; justify-content:center;
  width:135px; height:46px; background:rgba(255,255,255,0.85); color:#323232; border-radius:8px; }

/* Right carousel */
.catsCarousel { position:relative; height:261px; min-width:0; width:100%; --cards:5; --gap:14px; }
.catsCarousel .i { width:12px; height:12px; transform: rotate(180deg); color: rgba(117, 124, 187, 0.68); }
.cc__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); display:grid; place-items:center; cursor:pointer; }
.cc__arrow[disabled] { opacity:.4; cursor:default; }
.cc__arrow[hidden] { display: none !important; }
.cc__arrow--left { left:-8px; }
.cc__arrow--right { right:-8px; }
.cc__arrow .i {
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
  color: #242C6E80;
  fill: currentColor;
  transition: color .15s ease;
}

.cc__arrow:not([disabled]):hover .i,
.cc__arrow:not([disabled]):focus-visible .i {
  color: #242C6E;
}

.cc__arrow--right .i { transform:none; }

.cc__track { height:100%; overflow:auto hidden; display:flex; gap:var(--gap); scroll-behavior:smooth; scrollbar-width:none; }
.cc__track::-webkit-scrollbar { display:none; }
.cc__item { 
  flex: 0 0 calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards));
  height:100%; border-radius:10px; background:#FCFCFC; border:1px solid #EAEAEA; padding:16px 12px 12px 20px;
  display:flex; flex-direction:column; gap:8px; color:#111827; text-decoration:none;
  transition: border-color 0.2s ease; }
.cc__item:hover { border-color: #242C6E59; }
.cc__title { font-size:16px; line-height:22px; font-weight:400; color:#323232; min-height:44px; }
.cc__img { width:135px; height:135px; max-height: calc(100% - 52px); object-fit:contain; border-radius:6px; background:transparent; margin-top:auto; align-self:center; }

.page-content {
  margin: 8px
}


@media (max-width: 640px) {
    .home-hero-cats {
        border-radius: 12px;
        top: 0;
    }
    .heroCard { max-height: 198px; }
    .heroCard__desc { font-size: 14px;}
    .heroCard__btn { max-height: 136px; }
    .heroCard__title {
      margin: 0 0 12px 0;
    }
    .heroCard__content {
      padding: 18px 18px;
    }
    .cc__title {
      max-width: 80px;
      font-size: 18px;
    }
}



@media (max-width: 960px) {
  .home-hero-cats__grid { grid-template-columns: 1fr; }
  .heroCard { width:100%; }
}

/* Responsive cards-per-view */
@media (max-width: 1280px) { .catsCarousel { --cards:4; } }
@media (max-width: 1024px) { .catsCarousel { --cards:3; } }
@media (max-width: 720px)  { .catsCarousel { --cards:2.5; } }

@media (min-width: 319px) and (max-width: 424px) {
  .heroCard__title {
    font-size: 16px;
  }
  .catsCarousel { width:100%; --cards:2.5;}
  .cc__title {
    max-width: 280px;
  }
}