/* Б-08 Слайдер кейсов. Источник: по вёрстке verter.me/wms/, перерисован */

.b-cases {
  padding-block: var(--space-section);
  background: var(--color-surface);
}

.b-cases__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.b-cases__nav {
  display: none;
  gap: var(--space-2);
  margin-bottom: var(--space-stack);
}

.b-cases__nav-btn {
  display: grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
}

.b-cases__nav-btn:hover:not(:disabled) {
  border-color: var(--color-text);
}

.b-cases__nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.b-cases__nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.b-cases__track {
  display: grid;
  grid-auto-columns: minmax(17.5rem, 86%);
  grid-auto-flow: column;
  gap: var(--space-gutter);
  margin-inline: calc(-1 * var(--container-pad));
  padding: var(--space-1) var(--container-pad) var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  list-style: none;
  scrollbar-width: thin;
}

.b-cases__track:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.b-cases__slide {
  display: flex;
  scroll-snap-align: start;
}

.b-cases__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .b-cases__track {
    grid-auto-columns: minmax(20rem, 46%);
  }

  .b-cases__actions {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  .b-cases__nav:not([hidden]) {
    display: flex;
  }

  .b-cases__track {
    grid-auto-columns: calc((100% - 2 * var(--space-gutter)) / 3);
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}