/* ====================================
   PROVIDERS SECTION - FINAL VERSION
   ==================================== */

.providers-section-block {
  width: 100%;
  background-color: transparent;
}

.providers-section-container {
  width: 100%;
  margin: 50px auto;
}

/* ====================================
   HEADING + ARROWS (Top Row)
   ==================================== */

.providers-section-block .providers-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
  width: 100%;
}

.providers-section-block .providers-heading-box {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
}

.providers-section-block .providers-heading-box h2 {
  margin: 0;
}

/* ====================================
   CARDS GRID
   ==================================== */

/* Sliding window: the wrapper is a plain flex row. Only the cards currently
   inside the window are shown (display:flex via .is-in-view, set by JS);
   the rest are display:none and take up no space. No transforms, no pixel
   measuring - Next/Prev just shift which cards get .is-in-view. */
.providers-section-block .providers-cards-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  width: 100%;
  box-sizing: border-box;
}


.providers-section-block .provider-card {
  display: none; /* hidden until the sliding window includes it (.is-in-view) */
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  flex: 0 0 calc((100% - (var(--providers-visible, 3) - 1) * 40px) / var(--providers-visible, 3));
}

.providers-section-block .provider-card.is-in-view {
  display: flex;
}

/* ====================================
   IMAGE
   ==================================== */

.providers-section-block .provider-image-wrapper {
  width: 100%;
  aspect-ratio: 6/7;
  overflow: hidden;
  border-radius: 0 !important;
  margin-bottom: 25px;
}

.providers-section-block .provider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.providers-section-block .provider-card:hover .provider-image {
  transform: scale(1.08);
}

/* ====================================
   TEXT
   ==================================== */

.providers-section-block h2 {
  text-align: left;
}

.providers-section-block h4 {
  font-family: var(--bs-body-font-family);
  font-size: 16px;
  color: #161814;
  font-weight: 600;
  margin-bottom: 18px;
}

.providers-section-block .provider-description {
  color: #333;
  line-height: 1.6;
  font-size: 15px;
}

.providers-section-block .provider-description p {
  margin: 0;
}

/* ====================================
   NAVIGATION ARROWS
   ==================================== */

.providers-section-block .providers-nav-arrows {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.providers-section-block .providers-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1a1a1a;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  padding: 0;
  font-size: 24px;
  color: #fff;
  font-weight: bold;
}

.providers-section-block .providers-nav-btn:hover:not(:disabled) {
  background-color: #333;
}

.providers-section-block .providers-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.providers-section-block .providers-nav-btn .arrow-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: inherit;
}

/* ====================================
   DESKTOP (≥1200px) - 4 Cards
   ==================================== */

@media (min-width: 1200px) {
  .providers-section-block {
    padding-top: 40px;
    padding-right: var(--theme-section-lg-pr);
    padding-left: var(--theme-section-lg-pl);
  }

  .providers-section-block .providers-cards-wrapper {
    gap: 40px;
  }

  .providers-section-block .provider-card {
     flex: 0 0 calc((100% - 80px) / 3); 
  }
}

/* ====================================
   TABLET (769px - 1199px) - 2 Cards
   ==================================== */

@media (min-width: 769px) and (max-width: 1199px) {
  .providers-section-block {
    padding: 40px var(--theme-section-md-pr) 40px var(--theme-section-md-pl);
  }

  .providers-section-block .providers-cards-wrapper {
    gap: 24px;
  }

  .providers-section-block .provider-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }

  .providers-section-block .provider-image-wrapper {
    aspect-ratio: 4/5;
  }
}

/* ====================================
   MOBILE (≤768px) - 1 Card
   ==================================== */

@media (max-width: 768px) {
  .providers-section-block {
    padding: 30px var(--theme-section-sm-pr) 30px var(--theme-section-sm-pl);
  }

  /* Stack heading -> cards -> arrows. The arrows live inside .providers-top-row
     in the markup (so they sit next to the heading on desktop). On mobile we
     flatten the top row with display:contents so its children (heading + arrows)
     join the container's flex flow directly, then use `order` to push the arrows
     to the very bottom, below the images. */
  .providers-section-block .providers-section-container {
    display: flex;
    flex-direction: column;
  }

  .providers-section-block .providers-top-row {
    display: contents;
  }

  .providers-section-block .providers-heading-box {
    order: 1;
    width: 100%;
    margin-bottom: 30px;
  }

  .providers-section-block .providers-cards-wrapper {
    order: 2;
  }

  /* Arrows below the cards, centered, side by side */
  .providers-section-block .providers-nav-arrows {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top:15px;
  }

  .providers-section-block .providers-cards-wrapper {
    gap: 20px;
  }

  .providers-section-block .provider-card {
    flex: 0 0 100%;
  }

  .providers-section-block .provider-image-wrapper {
    aspect-ratio: 4/5;
  }
}

/* ====================================
   REVEAL ANIMATION (Page Load)
   ==================================== */

/* Heading box: driven purely by scroll-reveal (.is-visible), added by
   initProvidersReveal in providers-section.js */
.providers-section-block .providers-heading-box {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  animation: revealFallback 0.6s ease 2s forwards;
}

.providers-section-block .providers-heading-box.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

@keyframes revealFallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards entering the window get a light fade-in. Because .is-in-view is only
   added when a card enters the window (and its display flips none->flex),
   this animation plays once per entry - no transforms, so nothing can leave a
   card present-but-unpainted the way the old translateX approach did. */
.providers-section-block .provider-card.is-in-view {
  animation: providerFadeIn 0.4s ease;
}

@keyframes providerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .providers-section-block .providers-heading-box,
  .providers-section-block .provider-card {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .providers-section-block .provider-image {
    transition: none;
  }

  .providers-section-block .provider-card:hover .provider-image {
    transform: none;
  }
}

@media (min-width: 1200px) {
    .providers-section-block {
        padding-top: 0px;
        padding-right: 0px;
        padding-left: 0px;
    }
}