/*
  @file Areas carousel component.
*/

/* ============================================================
   Header row — title + nav buttons on one line.
   Created by JS: wraps the viewsreference <h2> and .areas-carousel__nav.
   ============================================================ */

.field--name-localgov-embed-block-view.field__item:has(.areas-carousel) {
  background-color: inherit;
  padding-bottom: var(--input-padding-vertical);
}

.areas-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--spacing-large);
}

.areas-carousel__header .viewsreference--view-title {
  margin: 0;
}

/* ============================================================
   Navigation buttons
   ============================================================ */

.areas-carousel__nav {
  display: flex;
  --carousel-arrow-disabled-bg: #d9d9d9;
  --carousel-arrow-disabled-icon: #757575;
  background-color: transparent;
  gap: var(--spacing-small);
  flex-shrink: 0;
}

.areas-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  padding: 0;
  border: 2px solid var(--color-black);
  border-radius: 50%;
  background-color: var(--color-black);
  color: var(--color-accent);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.areas-carousel__btn:not(:disabled):hover,
.areas-carousel__btn:not(:disabled):focus,
.areas-carousel__btn:not(:disabled):focus-visible {
  color: var(--color-accent-2);
  background-color: var(--color-black);
  outline: none;
}

.areas-carousel__btn:disabled {
  border-color: var(--carousel-arrow-disabled-bg);
  background-color: var(--carousel-arrow-disabled-bg);
  color: var(--carousel-arrow-disabled-icon);
  cursor: not-allowed;
  opacity: 1;
}

.areas-carousel__btn svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

/* ============================================================
   Track (scrollable)
   ============================================================ */

.areas-carousel__track {
  display: flex;
  gap: var(--spacing-large);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.areas-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Each .views-row becomes a carousel slide. */
.areas-carousel__track .views-row {
  flex: 0 0 calc(25% - var(--spacing-large) * 3 / 4);
  scroll-snap-align: start;
  min-width: 0;
}

/* Override the card grid that card.css applies inside .view-content. */
.areas-carousel__track.view-content,
.areas-carousel__track .views-infinite-scroll-content-wrapper {
  display: flex;
}

.areas-carousel__track .lgd-card {
  height: 100%;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 67.5rem) {
  .areas-carousel__track .views-row {
    flex: 0 0 calc(33.333% - var(--spacing-large) * 2 / 3);
  }
}

@media (max-width: 48rem) {
  .areas-carousel__track .views-row {
    flex: 0 0 calc(50% - var(--spacing-large) / 2);
  }
}

@media (max-width: 30rem) {
  .areas-carousel__track .views-row {
    flex: 0 0 85%;
  }
}