/* sections/teachers.css — live .section--powered-by-carousel ("powered by" carousel): fixed photo revealed through a
   rising circle, then a vertical crossfade carousel with a progress disc.
   Transcribed from recon/homepage-loaded-rules.css lines 696-764 (section, photo, Swiper root, slides, copy, pagination,
   arrows, stories neighbour) plus the Swiper base rules (150-173) and the :root curvy masks (line 2).
   Structure classes are the live ones; the copy and photos are Nalanda Degree College's. rem = 16px at 1440.
   Breakpoint: 991/992 like the live. Requires swiper-bundle.min.css (11.x) loaded before this file. */

/* ===== section: exactly one viewport tall on desktop (live: height var(--windowHeight) = 100svh, 100vh fallback) ===== */
.section--powered-by-carousel { position: relative; height: 100vh; height: 100svh; }
@media (max-width: 991px) {
  /* live: height auto; overflow hidden is clone-only — the live clips the horizontal slides with html { overflow: hidden scroll } */
  .section--powered-by-carousel { height: auto; overflow: hidden; }
}

/* ===== fixed photo + two crossfade layers (live 700-711) ===== */
.section--powered-by-carousel .pb--img { position: fixed; top: 0; left: 0; width: 100%; height: 100%; -webkit-clip-path: circle(65% at 50% 250%); clip-path: circle(65% at 50% 250%); }
.section--powered-by-carousel .pb--img,
.section--powered-by-carousel .pb--img .pb-bg { background-position: 50% center; background-repeat: no-repeat; background-size: cover; }
.section--powered-by-carousel .pb--img .pb-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1); } /* live: 1s crossfade */
.section--powered-by-carousel .pb--img .pb-bg.active { opacity: 1; }
.section--powered-by-carousel .pb--img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(181deg, transparent, #000) transparent; opacity: 0.7; z-index: 5; } /* live: dark gradient overlay */
@media (max-width: 991px) {
  .section--powered-by-carousel .pb--img { position: relative; height: 22.1875rem; pointer-events: none; -webkit-clip-path: none !important; clip-path: none !important; } /* live: 355px band, no clip */
  /* live: --curvyMaskLightSecond (fill #EAE8E0 = cream tinted by the carousel block's 7% stone) */
  .section--powered-by-carousel .pb--img::before { content: ""; position: absolute; left: 0; bottom: -0.125rem; width: 100%; height: 4.6875rem; z-index: 10; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 140c360 180 1080 180 1440 0v180H0z' fill='%23EAE8E0'/%3E%3C/svg%3E") 50% center / cover no-repeat; }
}

/* ===== Swiper root / wrapper / slides (live 712-725) ===== */
.section--powered-by-carousel .module--inner-carousel { width: 100%; height: 100%; }
@media (max-width: 991px) {
  .section--powered-by-carousel .module--inner-carousel { background: rgba(149, 138, 126, 0.07); overflow: visible; z-index: 5; }
}
.section--powered-by-carousel .module--inner-carousel .powered-by--items { width: 100%; height: 100%; overflow: visible !important; }
@media (min-width: 992px) {
  .section--powered-by-carousel .module--inner-carousel .powered-by--items { position: relative; transform: none !important; } /* live: virtualTranslate — the wrapper never moves */
}
.section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide { position: relative; height: 100%; opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 992px) {
  /* live: slides stack, only the active one is visible (instant, no transition on the slide itself) */
  .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; }
  .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide.swiper-slide-active { opacity: 1; visibility: visible; pointer-events: auto; }
  .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide.swiper-slide-active .pb--content .pb--content-inner { opacity: 1; transform: translateY(0); }
}

/* ===== slide copy (live 726-743) ===== */
/* live: translateY(30%) in CSS; GSAP tweens yPercent 30 -> 0 on 'top 55%' and fades it up 30% on exit */
.section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content { position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 1.5625rem 7.1875rem; text-align: center; transform: translateY(30%); z-index: 6; }
@media (max-width: 991px) {
  .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content { position: static; transform: none; padding-top: 1.25rem; padding-bottom: 1.875rem; }
}
/* live: inner copy fades/rises when its slide becomes active — opacity .45s, transform .65s, both cubic-bezier(.22,1,.36,1) */
.section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--content-inner { opacity: 0; transform: translateY(15px); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; }
@media (max-width: 991px) {
  .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--content-inner { opacity: 1; transform: none; }
}
/* live: EB Garamond 600, 78.38px/0.8 at 1440, 38px at 390; letter-spacing clamp resolves to -1.14px (min > max) */
.section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--title { color: #fff; font-family: var(--font-display, "EB Garamond", serif); font-size: clamp(2.375rem, -0.509615rem + 6.00962vw, 5.5rem); font-weight: 600; letter-spacing: clamp(-0.07125rem, 0.0152885rem - 0.180288vw, -0.165rem); line-height: 0.8; margin: 0 auto 1.875rem; max-width: 70%; }
@media (max-width: 991px) {
  .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--title { color: var(--red, #d6262d); max-width: 100%; }
}
/* live: body font (brandon-grotesque; Figtree stands in), 18.42px at 1440, 16px at 390, max-width 568px */
.section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--description { color: #fff; font-size: clamp(1rem, 0.826923rem + 0.360577vw, 1.1875rem); font-weight: 500; line-height: 1.3; margin: 0 auto; max-width: 35.5rem; }
.section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--description p { margin: 0; }
@media (max-width: 991px) {
  .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--description { color: var(--charcoal, #545454); }
}
.section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--description a { color: inherit; font-weight: 700; text-decoration: underline 0.125rem #ffb56c; text-underline-offset: 0.1875rem; transition: 0.5s ease-in-out; }
html.no-touch .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--description a:hover { color: #ffb56c; }
/* .pb--item-img: no rule on the live either (empty 0px div carrying data-img) */

/* ===== pagination: progress disc + fraction + arrows (live 744-757) ===== */
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination { position: absolute; left: 50%; bottom: 2.1875rem; transform: translateX(-50%); z-index: 6; } /* live: 35px up, centred */
@media (max-width: 991px) {
  .section--powered-by-carousel .module--inner-carousel .powered-by-pagination { bottom: auto; top: -4.375rem; } /* live: -70px, over the photo */
}
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination-inner { position: relative; display: flex; align-items: center; justify-content: center; width: 2.1875rem; height: 2.1875rem; }
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination-inner .powered-by-progress-disc { position: absolute; inset: 0; border-radius: 50%; background: transparent; } /* JS paints the conic-gradient */
/* live: static flex item (Swiper's .swiper-pagination-custom only adds bottom/top/left/width, overridden here) */
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination-inner .powered-by-fraction { position: static; bottom: auto; width: auto; color: #fff; font-size: 1rem; font-weight: 500; letter-spacing: 0.08125rem; line-height: 1.75; text-shadow: 0 0 30px rgba(0, 0, 0, 0.3); }
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-next,
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-prev { position: absolute; top: 50%; right: -2.5rem; width: auto; height: auto; margin-top: 0; padding: 0; border: none; background: transparent; color: #fff; transform: translateY(-50%); transition: 0.3s ease-in-out; }
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-next svg,
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-prev svg { display: none; } /* live: hides Swiper 12's injected chevron */
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-next::after,
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-prev::after { content: none; } /* Swiper 11 injects 'next'/'prev' via swiper-icons */
/* live: private icon-font glyph at 0.875rem rendering a 21.56x14px thin line arrow with an open chevron — drawn here as an inline SVG of that size */
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-next::before,
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-prev::before { content: ""; display: block; width: 1.34765625rem; height: 0.875rem; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h21M14 .75 20.5 7 14 13.25' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html.no-touch .section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-next:hover,
html.no-touch .section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-prev:hover { opacity: 0.7; right: -2.6875rem; } /* live: 3px outward, 0.3s */
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .swiper-button-prev { left: -2.5rem; right: auto; }
.section--powered-by-carousel .module--inner-carousel .powered-by-pagination .swiper-button-prev::before { transform: rotate(180deg); }
html.no-touch .section--powered-by-carousel .module--inner-carousel .powered-by-pagination .swiper-button-prev:hover { left: -2.6875rem; right: auto; }

/* ===== neighbours: everything after the section must paint ABOVE the still-fixed photo (live 758-764, 857) =====
   The stories section's own values (z-index 15, margin-top 260px, cream, the 250px --curvyMaskLightThird at top -249px, and the
   ≤992 resets) are defined once in sections/stories.css; the ticker band (z 15) and footer (z 16) in sections/ticker-footer.css.
   This one generic rule stays as a safety net for any later section, so nothing can ever hide behind the fixed photo. */
.section--powered-by-carousel ~ section { position: relative; z-index: 15; }

/* ===== reduced motion, opt-in only (<html class="respect-reduced-motion">, read by teachers.js too; the live has no such rule,
   so by default the motion always runs): keep the layout, drop the motion ===== */
@media (prefers-reduced-motion: reduce) {
  html.respect-reduced-motion .section--powered-by-carousel .pb--img .pb-bg,
  html.respect-reduced-motion .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content .pb--content-inner,
  html.respect-reduced-motion .section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-next,
  html.respect-reduced-motion .section--powered-by-carousel .module--inner-carousel .powered-by-pagination .powered-by-prev { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  /* no scrubbed reveal: the photo simply fills its own section instead of staying fixed */
  html.respect-reduced-motion .section--powered-by-carousel .pb--img { position: absolute; -webkit-clip-path: none !important; clip-path: none !important; }
  html.respect-reduced-motion .section--powered-by-carousel .module--inner-carousel .powered-by--items .swiper-slide .pb--content { transform: none; }
}