/* Homepage feature carousel: builds on the existing heritage design system. */
.ss-home-page .ss-feature-hero {
  min-height: clamp(610px, calc(100svh - 68px), 820px);
  height: clamp(610px, calc(100svh - 68px), 820px);
  background: #101a2c;
}
.ss-home-page .ss-feature-hero::before,
.ss-home-page .ss-feature-hero::after { pointer-events: none; }
.ss-carousel { position: relative; z-index: 2; width: 100%; height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: center; }
.ss-carousel__viewport { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(237,190,104,.7) rgba(255,255,255,.12); }
.ss-carousel__viewport:focus-visible { outline: 3px solid #ffd986; outline-offset: -5px; }
.ss-carousel__track { display: flex; width: 100%; }
.ss-carousel__slide { position: relative; isolation: isolate; display: flex; flex: 0 0 100%; align-items: center; min-height: clamp(520px, calc(100svh - 160px), 700px); overflow: hidden; padding: clamp(42px, 8vw, 110px) max(24px, calc((100vw - 1180px) / 2)); scroll-snap-align: start; background: transparent; }
.ss-carousel__slide::before { position: absolute; z-index: 0; inset: 0; content: ""; background: linear-gradient(90deg, rgba(10,17,29,.94) 0%, rgba(12,19,31,.79) 40%, rgba(13,18,27,.18) 100%), linear-gradient(0deg, rgba(11,14,21,.42), transparent 46%); }
.ss-carousel__slide::after { position: absolute; z-index: 2; inset: 18px; border: 1px solid rgba(240,201,125,.32); content: ""; pointer-events: none; }
.ss-carousel__slide::before { background-image: linear-gradient(90deg, rgba(10,17,29,.94) 0%, rgba(12,19,31,.79) 40%, rgba(13,18,27,.18) 100%), linear-gradient(0deg, rgba(11,14,21,.42), transparent 46%), var(--carousel-image); background-position: center, center, var(--carousel-position, center); background-size: cover; transform: translate3d(calc(var(--ss-pointer-x, 0px) * .18), calc(var(--ss-pointer-y, 0px) * .18), 0) scale(1.02); }
.ss-carousel__slide--scriptures { --carousel-image: url("../images/ramayana-cover-original-v1.webp"); --carousel-position: 62% 48%; }
.ss-carousel__slide--community { --carousel-image: url("../images/homepage-heritage-sunrise-v1.webp"); --carousel-position: 72% 55%; }
.ss-carousel__slide--business { --carousel-image: url("../images/homepage-heritage-sunrise-v1.webp"); --carousel-position: 48% 62%; }
.ss-carousel__slide--professionals { --carousel-image: url("../images/gita-poster-background-v1.webp"); --carousel-position: 67% 40%; }
.ss-carousel__slide--temples { --carousel-image: url("../images/daily_slokam_temple.webp"); --carousel-position: 68% 46%; }
.ss-carousel__slide--learning { --carousel-image: url("../images/panchangam-ganesha-hero.webp"); --carousel-position: 62% 40%; }
.ss-carousel__slide--sloka { --carousel-image: url("../images/daily_slokam_scene.webp"); --carousel-position: 70% 46%; }
.ss-carousel__slide--events { --carousel-image: url("../images/homepage-heritage-sunrise-v1.webp"); --carousel-position: 82% 45%; }
.ss-carousel__copy { width: min(670px, 100%); color: #fffaf0; }
.ss-carousel__copy { position: relative; z-index: 1; }
.ss-carousel__eyebrow { margin: 0 0 17px; color: #f4ca77; font-size: .76rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.ss-carousel__copy h1,
.ss-carousel__copy h2 { max-width: 680px; margin: 0; color: #fffaf0; font-family: var(--ss-home-display); font-size: clamp(2.6rem, 6.2vw, 5.8rem); font-weight: 600; line-height: 1.03; letter-spacing: -.035em; text-align: left; text-shadow: 0 5px 28px rgba(0,0,0,.34); text-wrap: balance; }
.ss-carousel__copy > p:not(.ss-carousel__eyebrow) { max-width: 570px; margin: 22px 0 30px; color: rgba(255,250,240,.92); font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.75; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.ss-carousel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.ss-carousel__cta { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 14px; padding: 13px 20px; border: 1px solid rgba(255,228,172,.55); border-radius: 4px; background: linear-gradient(130deg,#ffdc91,#d99a3d); color: #211709; font-weight: 850; text-decoration: none; box-shadow: 0 10px 28px rgba(9,11,16,.26); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.ss-carousel__cta span,.ss-carousel__join span { font-size: 1.1rem; transition: transform .2s ease; }
.ss-carousel__cta:hover,.ss-carousel__join:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(9,11,16,.32); }
.ss-carousel__cta:hover span,.ss-carousel__join:hover span { transform: translate(2px,-2px); }
.ss-carousel__link { color: #fff6df; font-weight: 750; text-decoration-color: rgba(255,246,223,.5); text-underline-offset: 5px; }
.ss-carousel__controls { display: flex; width: min(1180px, calc(100% - 48px)); align-items: center; gap: 18px; margin: 0 auto; position: absolute; z-index: 4; right: 0; bottom: 100px; left: 0; }
.ss-carousel__controls[hidden] { display: none; }
.ss-carousel__arrow { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,241,210,.55); border-radius: 50%; background: rgba(13,18,28,.48); color: #fff5dc; font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s ease, transform .2s ease; }
.ss-carousel__arrow:hover { transform: scale(1.06); background: rgba(225,164,74,.78); }
.ss-carousel__dots { display: flex; align-items: center; gap: 8px; }
.ss-carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 20px; background: rgba(255,246,224,.58); cursor: pointer; transition: width .24s ease, background .24s ease; }
.ss-carousel__dot[aria-current="true"] { width: 28px; background: #f2c776; }
.ss-carousel__progress { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,.18); }
.ss-carousel__progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#f0bf69,#fff0bd); transform-origin: left center; }
.ss-carousel__join { position: absolute; z-index: 4; right: max(24px, calc((100vw - 1180px) / 2)); bottom: 100px; display: inline-flex; align-items: center; gap: 9px; color: #fff4dc; font-size: .82rem; font-weight: 800; text-decoration: none; transition: transform .2s ease; }
.ss-carousel__join:hover { box-shadow: none; }
.ss-carousel__viewport::-webkit-scrollbar { height: 5px; }
.ss-carousel__viewport::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(237,190,104,.7); }

/* JavaScript enhancement layers slides in place; no-JS keeps a native swipeable strip. */
.ss-carousel.is-enhanced .ss-carousel__viewport { flex: 1; overflow: hidden; scrollbar-width: none; }
.ss-carousel.is-enhanced .ss-carousel__track { position: relative; height: 100%; min-height: inherit; }
.ss-carousel.is-enhanced .ss-carousel__slide { position: absolute; inset: 0; min-height: 100%; opacity: 0; visibility: hidden; transform: translateX(3%); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), visibility .7s; }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active { z-index: 1; opacity: 1; visibility: visible; transform: translateX(0); }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active::before { animation: ssCarouselImage 7s ease both; }
.ss-carousel.is-enhanced .ss-carousel__copy > * { opacity: 0; transform: translateY(18px); }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active .ss-carousel__eyebrow { animation: ssCarouselText .55s .08s ease both; }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active h1,
.ss-carousel.is-enhanced .ss-carousel__slide.is-active h2 { animation: ssCarouselText .65s .17s ease both; }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active .ss-carousel__copy > p:not(.ss-carousel__eyebrow) { animation: ssCarouselText .65s .28s ease both; }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active .ss-carousel__actions { animation: ssCarouselText .65s .4s ease both; }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active .ss-carousel__cta { animation: ssCarouselText .65s .4s ease both; }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active .ss-carousel__link { animation: ssCarouselText .65s .46s ease both; }
.ss-carousel.is-enhanced .ss-carousel__slide.is-active .ss-carousel__controls { visibility: visible; }
.ss-carousel.is-enhanced .ss-carousel__progress span.is-running { animation: ssCarouselProgress 6000ms linear both; }
@keyframes ssCarouselText { to { opacity: 1; transform: translateY(0); } }
@keyframes ssCarouselImage { from { transform: translate3d(calc(var(--ss-pointer-x, 0px) * .18), calc(var(--ss-pointer-y, 0px) * .18), 0) scale(1.02); } to { transform: translate3d(calc(var(--ss-pointer-x, 0px) * .18), calc(var(--ss-pointer-y, 0px) * .18), 0) scale(1.09); } }
@keyframes ssCarouselProgress { to { width: 100%; } }

@media (max-width: 700px) {
  .ss-home-page .ss-brand__tag {
    display: block;
    max-width: 100%;
    margin-top: 4px;
    color: #9b6a31;
    font-size: .54rem;
    line-height: 1.25;
    letter-spacing: .04em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 680px) {
  /* The shared header toggle is white for the dark site header; the homepage
     switches to ivory, so restore contrast for the mobile navigation entry. */
  .ss-home-page .ss-nav-toggle { display: inline-flex; flex: 0 0 42px; align-items: center; justify-content: center; border: 1px solid rgba(122,23,17,.24); background: #fff7e9; color: #7a1711; box-shadow: 0 3px 10px rgba(52,21,9,.12); }
  .ss-home-page .ss-nav-toggle:hover,
  .ss-home-page .ss-nav-toggle:focus-visible { background: #ffedcf; color: #56100c; }
  .ss-home-page .ss-feature-hero { min-height: 640px; height: min(780px, calc(100svh - 60px)); }
  .ss-carousel__slide { min-height: 620px; align-items: flex-end; padding: 56px 26px 210px; background-position: 61% center; }
  .ss-carousel__slide::before { background-image: linear-gradient(90deg,rgba(9,15,25,.79),rgba(10,15,24,.22)),linear-gradient(0deg,rgba(8,13,22,.9),rgba(9,15,25,.08) 85%),var(--carousel-image); background-position: center,center,var(--carousel-position,center); background-size: cover; }
  .ss-carousel__slide::after { inset: 12px; }
  .ss-carousel__copy h1,.ss-carousel__copy h2 { font-size: clamp(2.35rem, 11vw, 4rem); }
  .ss-carousel__copy > p:not(.ss-carousel__eyebrow) { margin: 16px 0 23px; font-size: .98rem; line-height: 1.62; }
  .ss-carousel__eyebrow { font-size: .66rem; letter-spacing: .13em; }
  .ss-carousel__controls { position: absolute; top: 72px; right: 0; bottom: auto; left: 0; width: calc(100% - 46px); gap: 12px; margin: 0 auto; }
  .ss-carousel__arrow { width: 38px; height: 38px; }
  .ss-carousel__dots { gap: 6px; }
  .ss-carousel__dot { width: 7px; height: 7px; }
  .ss-carousel__dot[aria-current="true"] { width: 20px; }
  .ss-carousel__join { top: 26px; right: 24px; bottom: auto; font-size: .72rem; }
  .ss-carousel__actions { gap: 14px; }
  .ss-carousel__cta { min-height: 46px; padding: 11px 14px; font-size: .88rem; }
  .ss-carousel.is-enhanced .ss-carousel__slide { transform: translateX(2%); }
  .ss-carousel.is-enhanced .ss-carousel__slide.is-active { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-carousel *, .ss-carousel *::before, .ss-carousel *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}