/**
 * Organize 3-Up Card Carousel Styles
 * CSS-only horizontal scroll: desktop shows 3 cards per row, mobile uses overflow-x.
 */

/* Scroll container: single row, horizontal scroll only (no JS) */
.organize-3up-carousel .organize-3up-carousel-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* Establish container for desktop card sizing (3 visible) */
  container-type: inline-size;
  container-name: organize-carousel;
}

.organize-3up-carousel .organize-3up-carousel-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
  min-height: 0;
  padding-bottom: 8px;
}
.organize-3up-carousel
  .organize-3up-carousel-container::-webkit-scrollbar-track {
  background: transparent !important;
}
.organize-3up-carousel
  .organize-3up-carousel-container::-webkit-scrollbar-thumb {
  background: #003594;
  border-radius: 4px;
}
.organize-3up-carousel .organize-3up-carousel-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* Accessibility: visible focus for carousel card links (WCAG 2.4.7) */
.organize-3up-carousel .up-card-box:focus-visible {
  outline: 2px solid var(--primary-blue, #003594);
  outline-offset: 2px;
}


@container organize-carousel (min-width: 1024px) {
  .organize-3up-carousel .organize-3up-carousel-slide {
    width: calc((100cqw - 40px) / 3);
  }
}


@container organize-carousel (min-width: 768px) and (max-width: 1023px) {
  .organize-3up-carousel .organize-3up-carousel-slide {
    width: calc((100cqw - 20px) / 2);
  }
}

/* Mobile: single row, overflow-x scroll, card width so ~1 card visible at a time */
@media (max-width: 767px) {
  .organize-3up-carousel .organize-3up-carousel-container {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .up-card-box {
    padding-left: 20px !important;
  }

  .organize-3up-carousel .organize-3up-carousel-track {
    gap: 0;
  }

  .organize-3up-carousel .organize-3up-carousel-slide {
    min-width: calc(100vw - 50px);
    width: 100%;
  }
}