/* Card carousel — v1 Figma node 994:4484. Section header (title + view-all +
   arrows) over a slick track of feature-cards. */

.card-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--secan-space-3xl);
  min-width: 0;
  /* Constrain and centre like the other homepage sections (two-column /
     find-products) so the section heading lines up with them and each of the
     3.2 visible slides matches the 385px Figma card instead of bleeding to the
     full viewport width. */
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--secan-space-3xl);
}

.card-carousel__viewport {
  width: 100%;
  overflow: hidden;
}

.card-carousel__track {
  margin-inline: calc(var(--secan-space-s) * -1);
}

/* Give each slide horizontal breathing room; slick sets the width. */
.card-carousel__track .slick-slide {
  box-sizing: border-box;
  height: auto;
  padding-inline: var(--secan-space-s);
}

.card-carousel__track .slick-track {
  display: flex;
  margin-left: 0;
  margin-right: auto;
}

.card-carousel__track .slick-slide > div {
  height: 100%;
}

.card-carousel__slide {
  height: 100%;
}

/* Before slick initialises, lay the cards out in a row so there is no flash
   of a stacked column. */
.card-carousel__track:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}

.card-carousel__track:not(.slick-initialized) > * {
  box-sizing: border-box;
  flex: 0 0 31.25%;
  padding-inline: var(--secan-space-s);
}

@media (max-width: 1023px) {
  .card-carousel {
    gap: var(--secan-space-2xl);
    padding-inline: var(--secan-space-2xl);
  }

  .card-carousel__track:not(.slick-initialized) > * {
    flex-basis: 45.45%;
  }
}

@media (max-width: 599px) {
  .card-carousel {
    padding-inline: var(--secan-space-s);
  }

  .card-carousel__track:not(.slick-initialized) > * {
    flex-basis: 100%;
  }
}