/* =========================================================================
   SVC — Homepage hero banner carousel (new file, only linked on index.php).
   Reference: vikramenthospital.com homepage banner (lightweight custom
   carousel, no plugin). Structure/behaviour mirrored, content/colors are
   SVC's own. Does not modify any existing CSS file.
   ========================================================================= */

.svc-hero {
  position: relative;
  overflow: hidden;
  /* The 3 banner photos are all natively 1920x882 (ratio 2.177). Sizing the
     box to that same ratio means object-fit: cover below never has to crop
     anything on desktop/tablet-landscape widths — the full photo always
     shows edge-to-edge. (A fixed px height here previously forced a
     shorter box than the photo, cropping the top and bottom.) The narrow
     breakpoints further down set an explicit height again, which takes
     priority over aspect-ratio and keeps the existing mobile sizing. */
  aspect-ratio: 1920 / 882;
  background: #0c0c0c;
  /* Full-bleed: theme's .main-container is capped at width:1920px, which
     leaves gutters on wider screens. Break out of it so the banner always
     spans the true viewport width, on every screen size. */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.svc-hero .svc-hero-track {
  position: relative;
  height: 100%;
  display: flex;
  transition: transform .6s ease;
  will-change: transform;
}

.svc-hero .svc-hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.svc-hero .svc-hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
}

.svc-hero .svc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .5) 45%, rgba(10, 10, 10, .25) 100%);
}

.svc-hero .svc-hero-text {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
}

.svc-hero .svc-hero-kicker {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: #fca61b;
}

.svc-hero .svc-hero-title {
  font-size: 46px;
  line-height: 1.2;
  margin: 0 0 18px;
  max-width: 700px;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, .5);
}

.svc-hero .svc-hero-title span {
  color: #fca61b;
}

.svc-hero .svc-hero-desc {
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
  color: #eaeaea;
  margin: 0 0 30px;
}

.svc-hero .svc-hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.svc-hero .svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  transition: all .25s ease;
}

.svc-hero .svc-btn-solid {
  background: #fca61b;
  color: #0c0c0c;
  border: 1px solid #fca61b;
}

.svc-hero .svc-btn-solid:hover {
  background: transparent;
  color: #fff;
}

.svc-hero .svc-btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
}

.svc-hero .svc-btn-outline:hover {
  background: #fff;
  color: #0c0c0c;
}

/* Arrows */
.svc-hero .svc-hero-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
  pointer-events: none;
}

.svc-hero .svc-hero-arrow {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(0, 0, 0, .25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s ease;
}

.svc-hero .svc-hero-arrow:hover {
  background: #fca61b;
  border-color: #fca61b;
  color: #0c0c0c;
}

.svc-hero .svc-hero-arrow svg {
  width: 18px;
  height: 18px;
}

/* Dots */
.svc-hero-dots {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.svc-hero-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: .8;
  transition: all .25s ease;
}

.svc-hero-dots button.is-active {
  background: #fca61b;
  border-color: #fca61b;
  opacity: 1;
}

/* Responsive */
@media (max-width: 991px) {
  .svc-hero {
    height: 520px;
  }

  .svc-hero .svc-hero-title {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .svc-hero {
    height: 460px;
  }

  .svc-hero .svc-hero-overlay {
    background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .85) 100%);
  }

  .svc-hero .svc-hero-slide img {
    object-position: 15% center;
  }

  .svc-hero .svc-hero-text {
    align-items: flex-start;
    justify-content: flex-end;
    /* Explicit top clearance so the longest slide title (which wraps to 3
       lines at narrow widths) never overflows past the box's top edge and
       gets clipped by .svc-hero's overflow:hidden right under the header —
       that clipping is what previously showed as the kicker badge looking
       cut off / tucked behind the header. */
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .svc-hero .svc-hero-title {
    font-size: 26px;
    max-width: 100%;
  }

  .svc-hero .svc-hero-desc {
    font-size: 14px;
    max-width: 100%;
  }

  .svc-hero .svc-hero-arrow {
    width: 36px;
    height: 36px;
  }

  .svc-hero .svc-hero-arrow svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  /* NOTE: intentionally does NOT reduce .svc-hero's height below the 767px
     breakpoint's 460px. Narrower width makes the longest title wrap to more
     lines (taller content, not shorter), so shrinking the box here was
     exactly backwards and caused the top of the text to get clipped off
     under the header — see the 767px block above. */

  .svc-hero .svc-btn {
    padding: 11px 22px;
    font-size: 12px;
  }

  .svc-hero .svc-hero-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero .svc-hero-track {
    transition: none;
  }
}