/* Force the height for the container to be smaller on mobile */
.container {
  position: relative;
  width: 100%;
  height: 70vh; /* Default height for desktop */
  max-height: 600px;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Ensures image fills container */
}

.text-overlay {
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 2;
  color: white;
  padding-right: 15%;
}

/* Force height for smaller screens, !important ensures it overrides other rules */
@media (max-width: 1024px) {
  .container {
    height: 60vh !important;  /* Slightly smaller on tablets */
  }
}

@media (max-width: 768px) {
  .container {
    height: 60vh !important;  /* Adjust this value for smaller screens */
  }

  .text-overlay {
    top: 5%;
    left: 5%;
    font-size: 1rem;
    padding-right: 10%;
  }
}

@media (max-width: 480px) {
  .container {
    height: 150vh !important;  /* Smaller height for mobile to fit better */
  }

  .text-overlay {
    top: 3%;
    left: 3%;
    font-size: 0.9rem;
    padding-right: 5%;
  }
}

/* Remove possible overflow issue caused by slick-carousel container */
.slick-carousel {
  height: auto !important;
  max-height: none !important;
}

/* Removed the CTA styles */
.cta-container {
  display: none;
}

/* Slide link styling to ensure it is clickable */
.slide-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Other styles */
.text-overlay {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 100%;
  z-index: 2;
  color: white;
  padding-right: 15%;
}

/* =========================
   TABLET-ONLY FIX (768–1024)
   Keeps desktop banner shape (1920×600 = 3.2:1)
   ========================= */
@media (min-width: 768px) && (max-width: 1024px) {
  .container {
    aspect-ratio: 1920 / 600;          /* lock the box to desktop ratio */
    height: auto !important;           /* override earlier 60vh */
    max-height: none !important;
    overflow: hidden;
  }
  .slide-img {
    width: 100%;
    height: 100% !important;
    object-fit: contain;                  /* use 'contain' if you prefer zero crop */
  }
}

/* Fallback for tablet browsers without aspect-ratio support */
@supports not (aspect-ratio: 1) {
  @media (min-width: 768px) && (max-width: 1024px) {
    .container {
      position: relative;
      height: auto !important;
      max-height: none !important;
      /* 600 / 1920 = 31.25% maintains 3.2:1 */
      padding-top: 31.25%;
    }
    .slide-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100% !important;
      object-fit: cover;
    }
  }
}