/* File: assets/css/carousel.css
 * Purpose: Shared styling for 12D Carousel widget (news + image modes)
 */

/* ============================================================
   ROOT + TRACK
   ============================================================ */

.d12-carousel {
  max-width: var(--d12-carousel-max-width, 800px);
  margin-left: auto;
  margin-right: auto;
  position: relative;

  width: 100%;            /* ✅ added: prevent shrink in Images mode */
  box-sizing: border-box; /* ✅ added */
}

.d12-carousel .d12-carousel__track {
  position: relative;
  min-height: 180px;
  padding: 0 var(--d12-carousel-track-pad-x, 45px);
  box-sizing: border-box;

  width: 100%;            /* ✅ added */
}

/* Slides */
.d12-carousel .d12-carousel__slide {
  display: none;

  width: 100%;            /* ✅ added */
}
.d12-carousel .d12-carousel__slide.is-active {
  display: block;
}

/* End of Root + Track */
/* =================== */

/* ============================================================
   CARD (shared)
   ============================================================ */

.d12-carousel .d12-carousel__slide-inner {
  display: block;
  padding: var(--d12-card-padding, 1.5rem 1.75rem);
  border-radius: var(--d12-card-radius, 12px);
  border: 1px solid var(--d12-card-border, var(--bering-dark-grey, #d5d8dc));
  background-color: var(--d12-card-bg, #ffffff);
  text-decoration: none;
  color: var(--d12-card-text, var(--bering-text, #7a7a7a));

  width: 100%;            /* ✅ added: ensures inner fills slide */
  box-sizing: border-box; /* ✅ added */

  /* IMPORTANT: stop the “grow on hover” behavior */
  transition: none;
}

/* Hover: intentionally no grow/shadow.
   (If later you want optional hover styling, we can add a switch + controls.) */
.d12-carousel .d12-carousel__slide-inner:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--d12-card-border-hover, var(--d12-card-border, var(--bering-dark-grey, #d5d8dc)));
}

/* End of Card */
/* =========== */

/* ============================================================
   NEWS MODE: stable layout + fixed image frame
   ============================================================ */

/* Make card stable height (prevents "jumping") */
.d12-carousel.d12-carousel--news .d12-carousel__slide-inner {
  display: flex;
  flex-direction: column;
  min-height: var(--d12-news-card-min-height, 260px);
}

/* Thumbnail block */
.d12-carousel .d12-carousel__thumb {
  margin-bottom: var(--d12-thumb-margin-bottom, 0.75rem);
}

/* NEWS: fixed aspect frame so featured images don’t change slide height */
.d12-carousel.d12-carousel--news .d12-carousel__thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--d12-thumb-radius, 8px);
  padding-bottom: var(--d12-news-thumb-ratio, 56.25%); /* default 16:9 */
}

/* make thumb in news mode fill the frame */
.d12-carousel.d12-carousel--news .d12-carousel__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--d12-news-thumb-fit, cover);
  object-position: center;
  display: block;
  border-radius: var(--d12-thumb-radius, 8px);
  max-height: none;
}

/* Title, date, excerpt, readmore */
.d12-carousel .d12-carousel__title {
  margin: var(--d12-title-margin, 0 0 0.35rem 0);
  font-size: 1.1rem;
}

/* Optional: reserve 2 lines for title (same height across slides) */
.d12-carousel.d12-carousel--news .d12-carousel__title {
  line-height: var(--d12-title-line-height, 1.4);
  height: calc(var(--d12-title-line-height, 1.4) * 1em * var(--d12-title-lines, 2));
  overflow: hidden;
  margin-bottom: var(--d12-title-margin-bottom, 0.4rem);
}

.d12-carousel .d12-carousel__date {
  display: block;
  font-size: 0.85rem;
  color: var(--d12-date-color, #999999);
  margin: var(--d12-date-margin, 0 0 0.6rem 0);
}

.d12-carousel .d12-carousel__excerpt {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: var(--d12-excerpt-margin, 0 0 0.85rem 0);
  color: var(--d12-excerpt-color, var(--bering-text, #7a7a7a));

  /* clamp lines */
  display: -webkit-box;
  -webkit-line-clamp: var(--d12-excerpt-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.d12-carousel .d12-carousel__readmore {
  margin-top: auto; /* pushes it to bottom (nice stable layout) */
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--d12-readmore-color, var(--e-global-color-accent, #91b6c7));
}

.d12-carousel .d12-carousel__slide-inner:hover .d12-carousel__readmore {
  color: var(--d12-readmore-hover-color, var(--e-global-color-accent-hover, #437491));
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .d12-carousel .d12-carousel__slide-inner {
    padding: var(--d12-card-padding-mobile, 1.2rem 1.25rem);
  }
  .d12-carousel .d12-carousel__title {
    font-size: 1rem;
  }
  .d12-carousel .d12-carousel__excerpt {
    font-size: 0.9rem;
  }
}

/* End of News mode */
/* ================ */

/* ============================================================
   DOTS (no !important so Elementor styles can work)
   ============================================================ */

.d12-carousel .d12-carousel__dots {
  margin-top: var(--d12-dots-margin-top, 1.3rem);
  display: flex;
  justify-content: center;
  gap: var(--d12-dots-gap, 0.4rem);
}

.d12-carousel .d12-carousel__dot {
  min-width: 22px;
  height: 22px;
  padding: var(--d12-dot-padding, 4px 6px);

  border-radius: var(--d12-dot-radius, 999px);
  border: 1px solid var(--d12-dot-border, var(--bering-accent, #91b6c7));
  background: var(--d12-dot-bg, transparent);

  font-size: var(--d12-dot-font-size, 0.65rem);
  font-weight: 600;
  line-height: 1;
  color: var(--d12-dot-color, var(--bering-accent, #91b6c7));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none;

  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.d12-carousel .d12-carousel__dot.is-active {
  background-color: var(--d12-dot-bg-active, var(--bering-accent, #91b6c7));
  color: var(--d12-dot-color-active, #ffffff);
  border-color: var(--d12-dot-border-active, var(--bering-accent-hover, #437491));
}

.d12-carousel .d12-carousel__dot:hover {
  background-color: var(--d12-dot-bg-hover, var(--bering-accent-hover, #437491));
  color: var(--d12-dot-color-hover, #ffffff);
  border-color: var(--d12-dot-border-hover, var(--bering-accent-hover, #437491));
}


/* End of Dots */
/* =========== */

/* ============================================================
   ARROWS (no !important so Elementor styles can work)
   ============================================================ */

.d12-carousel .d12-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: auto;
  height: auto;
  padding: var(--d12-arrow-padding, 0.2rem 0.35rem);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  font-size: var(--d12-arrow-size, 5rem);
  line-height: 1;

  opacity: var(--d12-arrow-opacity, 0.35);
  color: var(--d12-arrow-color, var(--bering-accent, #91b6c7));

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  box-sizing: border-box;

  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.d12-carousel .d12-carousel__arrow:hover {
  opacity: var(--d12-arrow-opacity-hover, 0.85);
  color: var(--d12-arrow-color-hover, var(--bering-accent-hover, #437491));
  transform: translateY(-50%) scale(var(--d12-arrow-scale-hover, 1.0));
}

.d12-carousel .d12-carousel__arrow--prev {
  left: var(--d12-arrow-left, -40px);
}
.d12-carousel .d12-carousel__arrow--next {
  right: var(--d12-arrow-right, -40px);
}

/* Mobile portrait */
@media (max-width: 767px) {
  .d12-carousel .d12-carousel__track {
    padding: 0 var(--d12-carousel-track-pad-x-mobile, 70px);
  }
  .d12-carousel .d12-carousel__arrow--prev {
    left: var(--d12-arrow-left-mobile, 14px);
  }
  .d12-carousel .d12-carousel__arrow--next {
    right: var(--d12-arrow-right-mobile, 14px);
  }
}

/* Mobile landscape (768–880) */
@media (min-width: 768px) and (max-width: 880px) {
  .d12-carousel .d12-carousel__track {
    padding: 0 var(--d12-carousel-track-pad-x-ml, 85px);
  }
  .d12-carousel .d12-carousel__arrow--prev {
    left: var(--d12-arrow-left-ml, 18px);
  }
  .d12-carousel .d12-carousel__arrow--next {
    right: var(--d12-arrow-right-ml, 18px);
  }
}

/* HARD RESET arrow buttons so Elementor styles can win */
.d12-carousel .d12-carousel__arrow {
  background-color: transparent !important;
  background-image: none !important;
}

/* End of Arrows */
/* ============= */

/* ============================================================
   IMAGE MODE (your fixed aspect “frame”)
   ============================================================ */

.d12-carousel.d12-carousel--images .d12-carousel__slide-inner {
  padding: 0;
  cursor: pointer;

  width: 100%;            /* ✅ added */
}

.d12-carousel.d12-carousel--images .d12-carousel__thumb {
  margin-bottom: 0;
  position: relative;
  width: 100%;
  padding-bottom: var(--d12-image-thumb-ratio, 56.25%);
  overflow: hidden;
  border-radius: var(--d12-card-radius, 12px);
}

.d12-carousel.d12-carousel--images .d12-carousel__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: var(--d12-image-thumb-fit, cover);
  object-position: center;
  border-radius: var(--d12-card-radius, 12px);
  display: block;
}

/* ============================================================
   HOTFIX: Image mode must never collapse to thumbnail size
   Put at END of carousel.css
   ============================================================ */

.d12-carousel.d12-carousel--images,
.d12-carousel.d12-carousel--images .d12-carousel__track,
.d12-carousel.d12-carousel--images .d12-carousel__slide,
.d12-carousel.d12-carousel--images .d12-carousel__slide-inner {
  width: 100%;
}

.d12-carousel.d12-carousel--images .d12-carousel__slide {
  display: none;
}
.d12-carousel.d12-carousel--images .d12-carousel__slide.is-active {
  display: block;
}

/* The ratio frame MUST define the height */
.d12-carousel.d12-carousel--images .d12-carousel__thumb {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  position: relative;
  padding-bottom: var(--d12-image-thumb-ratio, 56.25%);
  overflow: hidden;
}

/* Image must fill the frame no matter what WP outputs */
.d12-carousel.d12-carousel--images .d12-carousel__thumb img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: var(--d12-image-thumb-fit, cover);
  object-position: center;
  display: block;
}

/* End of Image mode */
/* ================= */

/* End of file carousel.css */