/**
 * image-links-list-carousel-front.css
 *
 * Carousel overrides for image_links_list on the Front page node.
 * Breakpoints:
 *   Desktop  ≥992px  → 4 items flat row (no carousel), equal width, no padding.
 *   Tablet 768–991px → Bootstrap carousel, 3 per slide.
 *   Mobile  <768px   → Bootstrap carousel, 1 item per slide.
 *
 * KEY CONSTRAINT: image-links-list.css has on every .image-links-list__item:
 *   flex: 0 0 auto !important;  width: 280px;  padding: 0;
 * All overrides below must use !important and load AFTER that file.
 *
 * SPACING STRATEGY: use CSS gap on the row — NOT padding on items.
 * This keeps images flush with card edges (top / left / right) while
 * still creating visible gutters between cards.
 */

/* ─────────────────────────────────────────────────────────
   DESKTOP: flat row, 4 equal-width items, no carousel
───────────────────────────────────────────────────────── */
.image-links-list__items--desktop {
  padding-bottom: 8px;
}

/* Row: neutralise Bootstrap g-3 negative margins; use gap instead */
.image-links-list__items--desktop .row {
  gap: 16px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  flex-wrap: nowrap !important;
}

/* Items: grow equally from flex-basis 0, zero padding → image flush */
.image-links-list__items--desktop .image-links-list__item {
  flex: 1 1 0 !important;       /* equal share of available width      */
  width: 0 !important;          /* override .row > * width:100%        */
  min-width: 0 !important;
  padding: 0 !important;        /* image fills card edge-to-edge       */
  height: 350px;
  margin-bottom: 32px;
}

.image-links-list__items--desktop .image-links-list__item.has-description {
  height: auto;
  min-height: 350px;
}

/* ─────────────────────────────────────────────────────────
   CAROUSEL SHARED (tablet + mobile)
───────────────────────────────────────────────────────── */
.image-links-list-carousel {
  width: 100%;
}

/* Keep slide clipping; override global style.css rule: .carousel-inner { height: 93vh } */
.image-links-list-carousel .carousel-inner {
  overflow: hidden;
  height: auto !important;
}

/* ─────────────────────────────────────────────────────────
   TABLET: 3 equal items per slide
───────────────────────────────────────────────────────── */

/* Row: same gap strategy, reset BS negative margins */
.image-links-list-carousel--tablet .carousel-item .row {
  gap: 16px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  flex-wrap: nowrap !important;
}

/* Items: equal share, zero padding */
.image-links-list-carousel--tablet .image-links-list__item {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  height: 350px;
}

.image-links-list-carousel--tablet .image-links-list__item.has-description {
  height: auto;
  min-height: 350px;
}

/* ─────────────────────────────────────────────────────────
   MOBILE: 1 item per slide, full width
   Goal: image fills most of the card, no dead whitespace,
         dots appear close below the card.
───────────────────────────────────────────────────────── */

/* Base card: shorter than desktop so image ratio works on narrow screens */
.image-links-list-carousel--mobile .image-links-list__item {
  width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  height: 260px;
  overflow: hidden; /* clip image to card border-radius */
}

/* item-link fills the full card height so the image fills it too */
.image-links-list-carousel--mobile .image-links-list__item .item-link {
  height: 100% !important;
  border-radius: 7px !important; /* match card radius */
}

/* Remove the 176px cap — image fills the full card height */
.image-links-list-carousel--mobile .image-links-list__item .item-media img {
  max-height: none !important;
}

/* has-description: content-driven height, taller image area */
.image-links-list-carousel--mobile .image-links-list__item.has-description {
  height: auto !important;
  min-height: 0 !important;
}

.image-links-list-carousel--mobile .image-links-list__item.has-description .item-media {
  height: 200px !important;
}

/* ── Dots: bring closer to the slide on mobile ── */
@media (max-width: 767.98px) {
  .image-links-list .image-links-list-indicators {
    padding-top: 8px !important;
    padding-bottom: 20px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   DOTS / INDICATORS
   Bootstrap's .carousel-indicators is also on the element so
   Bootstrap finds _indicatorsElement. Our class has higher
   specificity (2 classes vs 1) so our styles win.
───────────────────────────────────────────────────────── */

/* Container */
.image-links-list .image-links-list-indicators {
  /* Override Bootstrap's position: absolute */
  position: static !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px 0 40px;
  /* Override Bootstrap's margin-right/left: 15% */
  margin: 0 !important;
  list-style: none;
}

/* Inactive dot */
.image-links-list .image-links-list-indicators button {
  display: inline-block;
  /* Override Bootstrap's 30px × 3px bar shape */
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid #F9FAFB !important;
  border-top: 2px solid #F9FAFB !important;
  border-bottom: 2px solid #F9FAFB !important;
  background-color: transparent !important;
  background-clip: border-box !important;
  padding: 0 !important;
  margin: 0;
  cursor: pointer;
  opacity: 1 !important;
  text-indent: -9999px;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Size animation */
  transition: width 0.2s ease, height 0.2s ease,
              background-color 0.2s ease, margin 0.2s ease;
}

/* Active dot */
.image-links-list .image-links-list-indicators button.active {
  background-color: #F9FAFB !important;
  /* Grows exactly 2px: 16px → 18px */
  width: 18px !important;
  height: 18px !important;
  /* Compensate +2px so adjacent dots don't shift */
  margin: -1px !important;
  opacity: 1 !important;
}

.image-links-list .image-links-list-indicators button:focus {
  outline: none;
  box-shadow: none;
}