/* ============================================
   Component: Catalog Section
   ============================================ */
.catalog {
  padding: var(--spacing-section-catalog) 0;
  background-color: var(--color-bg);
}

.catalog.catalog--sections {
  padding-bottom: calc(var(--spacing-section-catalog) + var(--spacing-6xl));
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-4xl);
  padding-bottom: 70px;
}

.catalog .catalog__grid--sections {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: 0;
  padding-bottom: 0;
}

.catalog .catalog__grid--sections .catalog__card {
  width: 100%;
}

.catalog__slider {
  position: relative;
}

.catalog__slider-nav {
  display: none;
}

/* --- Slider mode for catalog sections page (1024–1280px) --- */
@media (min-width: 1025px) and (max-width: 1280px) {
  .catalog .catalog__slider--sections {
    overflow: hidden;
    padding-bottom: 70px;
  }

  .catalog .catalog__slider--sections .catalog__grid--sections {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    touch-action: pan-y;
    transition: transform var(--transition-default);
    will-change: transform;
  }

  .catalog .catalog__slider--sections .catalog__grid--sections > .catalog__card {
    flex: 0 0 100%;
    width: 100%;
  }

  .catalog__slider--sections .catalog__slider-nav {
    position: absolute;
    left: 0;
    bottom: 19px;
    z-index: 4;
    display: flex;
    gap: 13px;
  }
}

/* Hide sections slider nav outside its active range */
@media (max-width: 1024px) {
  .catalog__slider--sections .catalog__slider-nav {
    display: none;
  }
}

.catalog__slider-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  transition: opacity var(--transition-default);
}

.catalog__slider-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--color-bg-dark);
  border-left: 2px solid var(--color-bg-dark);
}

.catalog__slider-btn--prev::before {
  transform: translate(-35%, -50%) rotate(-45deg);
}

.catalog__slider-btn--next::before {
  transform: translate(-65%, -50%) rotate(135deg);
}

.catalog__slider-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.catalog__card {
  position: relative;
  border-radius: var(--radius-sm);
  padding: 34px var(--spacing-xl) var(--spacing-xl);
  min-height: 267px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-default), background-color 0.3s;
  overflow: visible;
  background-color: var(--color-bg-light);
}

.catalog__card--yellow {
  background-color: var(--color-bg-light);
}

.catalog__card--gray {
  background-color: var(--color-bg-light);
}

.catalog__card-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-md);
  line-height: 23px;
}

.catalog__card-image {
  position: absolute;
  right: 0;
  bottom: -70px;
  width: 210px;
  height: 210px;
  object-fit: contain;
}

.catalog__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.catalog__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.catalog__card--yellow .catalog__list-item {
  color: var(--color-text-body);
}

.catalog__card--gray .catalog__list-item {
  color: var(--color-text-body);
}

.catalog__list-bullet {
  width: var(--spacing-sm);
  height: var(--spacing-sm);
  flex-shrink: 0;
  margin-top: 8px;
}

.catalog__card--yellow .catalog__list-bullet {
  background-color: var(--color-primary);
}

.catalog__card--gray .catalog__list-bullet {
  background-color: var(--color-primary);
}

.catalog__button-wrap {
  display: flex;
  justify-content: center;
}

/* --- Card link styles --- */
.catalog__card-title a {
  color: inherit;
  text-decoration: none;
}

.catalog__card-title a:hover {
  text-decoration: underline;
}

.catalog__list-link {
  color: inherit;
  text-decoration: none;
}

.catalog__list-link:hover {
  text-decoration: underline;
}

.catalog__card-more {
  margin-top: auto;
  padding-top: var(--spacing-md);
}

@media (hover: hover) and (pointer: fine) {
  .catalog__card:hover {
    box-shadow: var(--shadow-card-hover);
    background-color: var(--color-primary);
  }

  .catalog__card:hover .catalog__list-item {
    color: var(--color-secondary);
  }

  .catalog__card:hover .catalog__list-bullet {
    background-color: var(--color-secondary);
  }

  .catalog__card:hover .catalog__list-link:hover {
    color: var(--color-text-heading);
  }
}