/* maeveport-cards-slider component styles */

/* Slider Section Styles */
.maeveport-cards-slider-section {
  position: relative; /* Establish a stacking context */
  z-index: 2; /* Lift the component above background elements */
  overflow: hidden; /* Keep this to contain a potentially wider inner wrapper if not perfectly managed */
  padding: 50px 0; /* Vertical padding for the section */
  background-color: #fff; /* Example background, can be themed */
  margin-top: 2rem; /* Added top margin */
  margin-bottom: 2rem; /* Added bottom margin */
}

.maeveport-cards-slider {
  /* formerly c-cardslider */
  position: relative;
}

.maeveport-cards-slider-layout-full-width {
  /* formerly c-layout-full_width */
  /* Handles width if needed, mostly a structural element */
}

.maeveport-cards-slider-wrapper {
  /* formerly c-wrapper-case_studies */
  display: flex;
  align-items: center; /* Desktop: vertically center items if they have different heights */
  width: 100%;
}

.maeveport-cards-slider-item {
  /* formerly c-case_study */
  flex-shrink: 0; /* Desktop: prevent shrinking, JS controls basis */
  padding: 0;
  position: relative;
  min-height: 22.4em; /* Default min-height - REDUCED 20% from 28em */
  border: none;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}

.maeveport-cards-slider-item.is-active {
  /* formerly c-case_study.is-active */
  /* flex-basis handled by JS for desktop */
  cursor: default;
}

.maeveport-cards-slider-item-content {
  /* formerly case_study-content */
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  color: white;
  padding: 20px;
  border-radius: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  will-change: opacity; /* Added will-change */
}

/* is-active state for content opacity/visibility is controlled by GSAP */

.maeveport-cards-slider-item-content h3 {
  margin-bottom: 10px !important;
  font-size: var(--font-size-heading-sm); /* Using global typography */
  font-weight: 400; /* As per original */
}

.maeveport-cards-slider-item-content p {
  margin-bottom: 15px;
  font-size: var(--font-size-body-md); /* Using global typography */
  display: -webkit-box; /* Enable flexbox for line clamping */
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical; /* Vertical orientation for lines */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis for overflow */
  /* Fallback for non-webkit browsers (optional, less precise) */
  /* max-height: calc(var(--font-size-body-md) * 1.6 * 3); */ /* Estimate height: line-height * number of lines */
  /* line-height: 1.6; */ /* Ensure line-height is set if using max-height fallback */
}

.maeveport-cards-slider-link {
  /* formerly c-link */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  font-weight: normal; /* As per original */
  font-size: var(--font-size-body-md); /* Using global typography */
}

.maeveport-cards-slider-link-text {
  /* formerly c-text - new class for clarity */
  /* styles inherited or add specific if needed */
}

.maeveport-cards-slider-link-svg {
  /* formerly c-svg.is-icon_mid.w-embed */
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
}

.maeveport-cards-slider-link-svg svg path {
  stroke-width: 1.5; /* As per original, if not overridden by currentColor logic */
}

.maeveport-cards-slider-item-backdrop {
  /* formerly c-backdrop */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.maeveport-cards-slider-item-overlay {
  /* formerly dark-overlay */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0; /* Controlled by GSAP */
  z-index: 2; /* Ensure overlay is above image but below content if needed */
  pointer-events: none;
  will-change: opacity; /* Added will-change */
}

/* is-active state for overlay opacity is controlled by GSAP */

.maeveport-cards-slider-item-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1; /* Base opacity */
  filter: blur(0px); /* Base blur, active state controlled by GSAP */
  will-change: filter; /* Added will-change */
}

/* is-active state for image filter is controlled by GSAP */

/* Neutralize WordPress default block styles within the slider to prevent layout issues */
.maeveport-cards-slider-section .wp-block-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

.maeveport-cards-slider-item .wp-block-image {
  margin: 0 !important; /* Remove default image block margins */
  max-width: 100% !important;
  width: 100%;
  height: 100%; /* Ensure image fills its container */
}

.maeveport-cards-slider-item .wp-block-image img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

.maeveport-cards-slider-item-content .wp-block-heading,
.maeveport-cards-slider-item-content .wp-block-paragraph {
  margin: 0;
  padding: 0;
}

/* Responsive adjustments */

/* Mobile & Small Tablets (<= 991.98px) */
@media (max-width: 991.98px) {
  .maeveport-cards-slider-wrapper {
    /* overflow-x: auto; */ /* REMOVED to prevent native scroll conflicts */
    /* scroll-snap-type: x mandatory; */ /* REMOVED */
    /* -webkit-overflow-scrolling: touch; */ /* REMOVED */
    align-items: stretch; /* Make items full height of wrapper if needed */
    position: relative; /* Needed for absolute positioning of slides if we go that route, but for now for x-transform */
  }

  .maeveport-cards-slider-item {
    flex: 0 0 100%; /* Each slide takes full width */
    /* scroll-snap-align: start; */ /* REMOVED */
    min-height: 17.6em; /* Adjust min-height for smaller screens - REDUCED 20% from 22em */
  }

  /* On mobile, content is always visible for the active (snapped) slide */
  /* GSAP will still toggle opacity/visibility for the active slide logic */
  /* The blur and overlay effect for the active slide remain as per JS */

  .maeveport-cards-slider-item-content h3 {
    font-size: var(
      --font-size-heading-xs
    ); /* Adjust typography for smaller screens */
  }

  .maeveport-cards-slider-item-content p {
    font-size: var(--font-size-body-sm); /* Adjust typography */
  }

  .maeveport-cards-slider-link {
    font-size: var(--font-size-body-sm); /* Adjust typography */
  }
}

/* Desktop and larger tablets (min-width: 992px) will use the default styles above */
/* No specific overrides needed here as the mobile styles are scoped */