/* Version: 2025-08-13-v1640 */
/*
 * Carousel Component Styles
 *
 * Layout and appearance for the carousel and its container.
 */

.carousel {
  position: relative;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.carousel-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black-05);
  /* Light gray background */
  margin-bottom: 0;
  min-height: 400px;
  border-radius: 8px;
}

.carousel-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.carousel-slide picture,
.carousel-slide img,
.carousel-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  object-position: center;
}

/* Navigation positioning */
.carousel-nav {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
  margin: 0;
}

/* Fix caption positioning */
.carousel .content-caption {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 0;
}

/* Regular content captions (non-carousel) */
.content:not(.carousel) .content-caption {
  position: static;
  margin-top: 0;
  height: auto;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  border-radius: 50%;
  background: var(--color-black-20);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 10;
  padding: 0;
  line-height: 1;
  /* Remove asymmetric margin that caused slight upward shift */
  margin: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.carousel-button:hover {
  background: var(--color-black-10);
}

.carousel-button.prev {
  left: 0;
}

.carousel-button.next {
  right: 0;
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--color-black-20);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-indicator.active {
  background: #000;
}

.carousel .carousel-description {
  display: none;
  margin: 0;
  /* Remove default margins */
  width: 100%;
}

/* Add explicit spacer styling for carousel descriptions */
.carousel .carousel-description .spacer {
  display: block;
}

.carousel .carousel-description.active {
  display: block;
  /* Changed from flex */
  overflow: hidden;
  text-overflow: ellipsis;
  animation: fadeIn 0.3s ease-in-out;
  padding: 0;
  margin: 20px 0;
  position: relative;
}

.carousel .carousel-description.active.expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.read-more {
  display: none;
}

.read-more.visible {
  display: none;
}

.carousel .content-caption {
  padding: 0 30px;
}

/* Add breakpoints to match content-caption */
@media (min-width: 530px) {
  .carousel .carousel-description.active {
    margin: 20px 0 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Static carousel title styling */
.carousel>.content-caption:first-child p,
.carousel>.content-caption .carousel-description {
  text-transform: capitalize;
  font-size: 0.875rem;
  /* margin-bottom: 1.5rem; */
  text-align: left;
}

/* --- Override global .content svg rule for carousel nav icons ---
   The generic selector in main-components.css:
     .content svg, .content img[src$=".svg"], .card--company-logo img[src$=".svg"]
   applies width:100%, max-width:800px, max-height:300px, margin-bottom:10px etc.
   That unintentionally inflates and offsets the inline SVG arrows inside the
   carousel navigation buttons. We scope a corrective reset here with higher
   specificity so arrows render at intended icon size and remain vertically centered.
*/
.carousel .carousel-button svg {
  width: 24px;
  height: 24px;
  max-width: none;
  max-height: none;
  margin: 0;
  /* Remove inherited bottom margin */
  display: block;
  /* Consistent centering within flex button */
  object-fit: contain;
  /* Harmless; ensures aspect ratio */
  position: static;
  /* Neutralize relative from global rule */
  z-index: auto;
  /* Reset stacking */
}


/* Carousel description content styling */
.carousel .carousel-description {
  text-transform: none;
  /* Override the capitalize from above */
}

.carousel .carousel-description b,
.carousel .carousel-description strong {
  text-transform: capitalize;
  display: block;
  /* margin-bottom: 0.5rem; */
  font-weight: 600;
}

/* List styling within carousel descriptions */
.carousel .carousel-description ul {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.carousel .carousel-description li {
  margin-bottom: 0.5rem;
  font-size: inherit;
  /* Ensure list items inherit the 1.2em font size */
}

.carousel .carousel-description li strong {
  display: inline;
  text-transform: none;
  margin-bottom: 0;
  font-weight: 600;
  font-size: inherit;
  /* Ensure strong text in lists matches font size */
}