/* ==========================================================================
   Marji V8 — full-screen hero image with text overlaid
   • Each .hero-slide becomes a single bleed: the image fills the entire
     slide via object-fit: cover, the text sits on top with a soft gradient
     so it stays readable.
   • Works without touching the HTML — we re-position the existing
     col-6 children purely via CSS.
   ========================================================================== */

.hero-slider { padding: 0; }
.hero-slider .container { padding: 0; }

/* Slide is the canvas */
.hero-slide {
  position: relative;
  min-height: 640px;
  padding: 0;
  overflow: hidden;
}

/* The .row wrapper inherits the slide size */
.hero-slide .row {
  position: relative;
  margin: 0;
  min-height: 640px;
  align-items: stretch;
}

/* Move the image's col-6 OUT of the flex flow and let it fill the slide */
.hero-slide .row > [class*="col-"]:not(.hero-slide-text) {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  flex: none;
  z-index: 1;
}

.hero-slide-media {
  width: 100%;
  height: 100%;
}
.hero-slide-media img,
.hero-slide-media video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: right center;
  display: block;
}

/* Soft gradient fade so the text on the LEFT stays readable.
   LTR: fade from light on the left → transparent on the right. */
.hero-slide .row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 248, 240, 0.96) 0%,
    rgba(255, 248, 240, 0.85) 35%,
    rgba(255, 248, 240, 0.35) 60%,
    rgba(255, 248, 240, 0) 80%
  );
  z-index: 2;
  pointer-events: none;
}

/* Text sits on top */
.hero-slide-text {
  position: relative;
  z-index: 3;
  flex: 0 0 60%;
  max-width: 60%;
  padding: 80px 60px 80px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 640px;
  background: transparent;
}

/* Make the inline counter blend on the overlay */
.hero-slide-text .hero-counter-inline {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  max-width: 640px;
}

/* --- RTL: mirror image focal point + gradient direction --- */
html[dir="rtl"] .hero-slide-media img,
html[dir="rtl"] .hero-slide-media video { object-position: left center; }

html[dir="rtl"] .hero-slide .row::before {
  background: linear-gradient(
    to left,
    rgba(255, 248, 240, 0.96) 0%,
    rgba(255, 248, 240, 0.85) 35%,
    rgba(255, 248, 240, 0.35) 60%,
    rgba(255, 248, 240, 0) 80%
  );
}

html[dir="rtl"] .hero-slide-text { padding: 80px 80px 80px 60px; }

/* Pagination dots overlap the bottom of the slide */
.hero-slider .swiper-pagination {
  position: absolute;
  bottom: 24px;
  left: 0; right: 0;
  z-index: 4;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
  .hero-slide,
  .hero-slide .row,
  .hero-slide-text { min-height: 560px; }
  .hero-slide-text { padding: 60px 50px; max-width: 65%; flex-basis: 65%; }
}
@media (max-width: 991px) {
  .hero-slide,
  .hero-slide .row,
  .hero-slide-text { min-height: 500px; }
  .hero-slide-text { padding: 50px 36px; max-width: 70%; flex-basis: 70%; }
}
@media (max-width: 767px) {
  .hero-slide,
  .hero-slide .row,
  .hero-slide-text { min-height: 460px; }
  .hero-slide-text {
    flex-basis: 100%;
    max-width: 100%;
    padding: 40px 24px;
  }
  /* Slightly stronger overlay on phones so text reads over the image */
  .hero-slide .row::before {
    background: linear-gradient(
      to bottom,
      rgba(255, 248, 240, 0.93) 0%,
      rgba(255, 248, 240, 0.85) 55%,
      rgba(255, 248, 240, 0.55) 80%,
      rgba(255, 248, 240, 0.35) 100%
    );
  }
  html[dir="rtl"] .hero-slide .row::before {
    background: linear-gradient(
      to bottom,
      rgba(255, 248, 240, 0.93) 0%,
      rgba(255, 248, 240, 0.85) 55%,
      rgba(255, 248, 240, 0.55) 80%,
      rgba(255, 248, 240, 0.35) 100%
    );
  }
  .hero-slide-media img,
  .hero-slide-media video,
  html[dir="rtl"] .hero-slide-media img,
  html[dir="rtl"] .hero-slide-media video { object-position: center; }
}