/* ==========================================================================
   Stories — "Watch this!" story cards
   Clone of friendsseminary.org  .section--stories-cards
   Source of truth: recon/homepage-loaded-rules.css lines 758–856 (rules) and the live measurements in
   scratchpad/motion-clone/stories/live-stories-geometry.json (1440×900 and 390×844).
   Every value below is the live one; the copy, photos and mascot (NDC logo) are Nalanda Degree College's.
   Everything is scoped to .stories. Hover rules sit behind html.no-touch exactly like the live site
   (sections/stories.js adds the class when the device has a fine hover pointer).
   Structure classes reuse the live names so the recon can be diffed against this file.
   ========================================================================== */

/* ----- Section (live: .section--stories-cards — 1440×1451.31 at 1440×900) ----- */
.stories {
  /* live: :root --curvyMaskLightThird — cream bump, viewBox 0 0 1440 320, preserveAspectRatio none */
  --stories-curvy-mask: 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 20c360 300 1080 300 1440 0v300H0z' fill='%23F0EFE7'/%3E%3C/svg%3E");
  display: block;
  position: relative;
  z-index: 15;
  margin-top: 16.25rem;                    /* live: 260px */
  padding: 4.375rem 3.125rem 7.8125rem;    /* live: 70px 50px 125px */
  background-color: var(--cream);          /* live: rgb(240, 239, 231) */
  color: var(--charcoal);
  text-align: left;
  justify-items: normal;                  /* resets the old .stories grid rule so the inner block spans the section */
  gap: normal;
}
/* live: .section--stories-cards::before — 250px tall bump hanging 249px above the section, over the teachers */
.stories::before {
  content: "";
  position: absolute;
  left: 0;
  top: -15.5625rem;                        /* live: -249px */
  width: 100%;
  height: 15.625rem;                       /* live: 250px */
  z-index: 10;
  background: var(--stories-curvy-mask) 50% center / cover no-repeat;
}

/* ----- Inner: title block centred, cards float over it (live: .module_stories-cards--inner 1340×1080) ----- */
.stories .module_stories-cards { display: block; width: 100%; }
.stories .module_stories-cards--inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 67.5rem;                     /* live: 1080px */
}
.stories .stories--inner { text-align: center; }

/* ----- Eyebrow (live: .item--subtitle — 43.23px / 44.1px, letter-spacing 4.32px at 1440; 19px at 390) ----- */
.stories .stories--inner .item--subtitle {
  margin: 0;
  color: var(--stone-text);                /* live: rgb(149, 137, 125) */
  font-family: var(--font-ui);             /* live: brandon-grotesque (Figtree stands in) */
  font-size: clamp(1.1875rem, -0.543269rem + 3.60577vw, 3.0625rem);
  font-weight: 700;
  letter-spacing: clamp(0.11875rem, -0.0543269rem + 0.360577vw, 0.30625rem);
  line-height: 1.02;
  text-transform: uppercase;
}

/* ----- Title (live: .stories--inner_image > .item--title — EB Garamond 700, 214.19px / 220.62px at 1440, 68px / 85px at 390) ----- */
.stories .stories--inner_image { position: relative; }
.stories .stories--inner_image .item--title {
  display: block;
  margin: 0;
  color: var(--red);                       /* live: rgb(214, 38, 45) */
  font-family: var(--font-display);
  font-size: clamp(4.25rem, -6.19231rem + 21.7548vw, 15.5625rem);
  font-weight: 700;
  /* live: clamp(-0.1275rem, 0.185769rem - 0.652644vw, -0.466875rem) — min > max so it always resolves to -2.04px */
  letter-spacing: -0.1275rem;
  line-height: 1.03;
  text-align: center;
}
/* the empty span between "Watch" and "this!" is the gap the mascot sits in (live: 124.42px at 1440, 38px at 390) */
.stories .stories--inner_image .item--title .stories__gap {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: clamp(2.375rem, -3.79808rem + 12.8606vw, 9.0625rem);
  height: 1em;
}

/* ----- Mascot over the gap (live: .item--image 256.27×253.84 at 1440, 81×81 at 390; owl on live, NDC logo here) ----- */
.stories .stories--inner_image .item--image {
  position: absolute;
  left: 50%;
  top: 55%;                                /* centred on the gap, a touch below the line's centre */
  transform: translate(-50%, -50%);
  /* the live owl is 256px but mostly transparent; the emblem is a solid shape, so it is sized to the gap itself */
  width: 96%;
  aspect-ratio: 600 / 648;
  height: auto;
  margin: 0;
}
.stories .stories--inner_image .item--image::before,
.stories .stories--inner_image .item--image::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/ndc-emblem.png") 50% center / contain no-repeat;
}
/* live swaps ::before (rest image) for ::after (a second "state" image) instantly on hover — no transition.
   The clone only has the one logo, so both layers use it; drop a hover-state PNG into ::after to get the swap. */
.stories .stories--inner_image .item--image::before { opacity: 1; }
.stories .stories--inner_image .item--image::after { opacity: 0; }
html.no-touch .stories .stories--inner_image .item--image:hover::before { opacity: 0; }
html.no-touch .stories .stories--inner_image .item--image:hover::after { opacity: 1; }

/* ----- Desktop card layer (live: .module--items-stories — absolute 1340×1080, translateY(-50%), JS overwrites the transform for the scroll parallax) ----- */
.stories .module--items-stories {
  display: block;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}
.stories .stories-card {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
.stories .module--items-stories .stories-card {
  position: absolute;
  cursor: pointer;
  pointer-events: all;
}
/* card positions inside the 1340×1080 layer (DOM order: top-left, bottom-right, top-right, bottom-left) */
.stories .module--items-stories .stories-card:first-child { left: 15.625rem; top: -2.1875rem; }      /* live: 250px / -35px → x 300, section-rel y 35 */
.stories .module--items-stories .stories-card:nth-child(2) { right: 14.375rem; bottom: -2.1875rem; } /* live: 230px / -35px → x 851.7, y 876.7 */
.stories .module--items-stories .stories-card:nth-child(3) { right: 14.6875rem; top: 2.5rem; }       /* live: 235px / 40px → x 891.8, y 110 */
.stories .module--items-stories .stories-card:nth-child(4) { left: 17.5rem; bottom: -2.8125rem; }    /* live: 280px / -45px → x 330, y 931.8 */

/* ----- Card inner (live: .stories-card-inner / .stories-card-image / .img / gradient) ----- */
.stories .stories-card .stories-card-inner { position: relative; pointer-events: none; }
.stories .stories-card .stories-card-image {
  position: relative;
  overflow: hidden;
  background-color: var(--sand);           /* live: rgb(206, 193, 182) while the photo loads */
}
.stories .module--items-stories .stories-card-image {
  width: clamp(17.5rem, 15.4808rem + 4.20673vw, 19.6875rem);   /* live: 308.27px at 1440 (cards 1–2) */
  height: clamp(17.5rem, 15.4808rem + 4.20673vw, 19.6875rem);
  border-radius: 0.9375rem;                /* live: 15px */
  box-shadow: 5px 5px 40px rgba(149, 137, 125, 0.5);
}
.stories .module--items-stories .stories-card:nth-child(3) .stories-card-image,
.stories .module--items-stories .stories-card:nth-child(4) .stories-card-image {
  width: clamp(14.9375rem, 13.2067rem + 3.60577vw, 16.8125rem); /* live: 263.22px at 1440 (cards 3–4) */
  height: clamp(14.9375rem, 13.2067rem + 3.60577vw, 16.8125rem);
}
/* live: bottom black gradient, 85% of the card, opacity .84, above the photo */
.stories .module--items-stories .stories-card-image::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 85%;
  background: linear-gradient(transparent, #000);
  opacity: 0.84;
  z-index: 5;
}
/* live: global img rule (100%×100%, object-fit cover) + .img transition .4s ease-in-out */
.stories .stories-card-image .img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
}
.stories .module--items-stories .stories-card-image .img { transition: 0.4s ease-in-out; }

/* ----- Card content: Instagram icon at the bottom-left, caption hidden until hover (live: .stories-card-content) ----- */
.stories .module--items-stories .stories-card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1.5625rem 1.5625rem 0.75rem;    /* live: 25px 25px 12px */
  z-index: 5;
  transition: 0.4s ease-in-out;
}
.stories .stories-card-content .scc-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* live: .social-icon in the private "social-icons" font, 21px, 13px padding-right → the row is 21px tall */
.stories .stories-card-content .social-icon {
  display: block;
  color: #fff;
  font-size: 1.3125rem;
  font-style: normal;
  line-height: 1;
  padding-right: 0.8125rem;
}
/* the Instagram glyph is a private icon-font glyph on live; drawn here as a 1em mask in currentColor */
.stories .social-icon.social-instagram-icon::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Ccircle cx='17.6' cy='6.4' r='0.6' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Ccircle cx='17.6' cy='6.4' r='0.6' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* live: .scc-text — 19px/1.21 white, 5-line clamp, max-height 0 → 125px on hover over .5s ease-in-out */
.stories .module--items-stories .scc-text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 0;
  padding-top: 0.625rem;                   /* live: 10px */
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.21;
  transition: 0.5s ease-in-out;
}
.stories .scc-text a { color: inherit; font-size: inherit; font-weight: 500; text-decoration: none; }
.stories .truncate-js { overflow: hidden; overflow-wrap: break-word; word-break: break-word; }
/* live: .story-card-btn — transparent <button> covering the card at z 6; on live it opens the CMS media popup, in the clone it is inert (popup out of scope) so a click never moves the page */
.stories .stories-card .story-card-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: all;
  border-radius: 0.9375rem;
}
.stories .stories-card .story-card-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* card hover (live: html.no-touch only — photo scales 1.05 over .4s, caption slides open to 125px over .5s) */
html.no-touch .stories .module--items-stories .stories-card:hover .stories-card-image .img,
.stories .module--items-stories .stories-card:focus-within .stories-card-image .img { transform: scale(1.05); }
html.no-touch .stories .module--items-stories .stories-card:hover .scc-text,
.stories .module--items-stories .stories-card:focus-within .scc-text { max-height: 7.8125rem; }   /* live: 125px */

/* ----- "More news and stories" button (live: .dark-blue--button + stories override — 321.6×56.3, margin-top 120px at 1440) ----- */
.stories .dark-blue--button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 12.1875rem;                   /* live: 195px */
  margin: 7.5rem auto 0;                   /* live: 120px auto 0 */
  padding: 1.125rem 1.875rem 1rem;         /* live: 18px 30px 16px */
  color: var(--charcoal);                  /* live: rgb(84, 84, 84) */
  font-family: var(--font-ui);
  font-size: clamp(0.875rem, 0.759615rem + 0.240385vw, 1rem);            /* live: 15.62px at 1440 */
  font-weight: 700;
  letter-spacing: clamp(0.0875rem, 0.0528846rem + 0.0721154vw, 0.125rem); /* live: 1.88px at 1440 */
  line-height: 1.43;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
/* live: the 2px ring is a ::before so it can scale 1.02 on hover without moving the text */
.stories .dark-blue--button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0.125rem solid rgba(162, 150, 138, 0.22);
  border-radius: 0.4375rem;                /* live: 7px */
  opacity: 1;
  transition: 0.3s ease-in-out;
}
.stories .dark-blue--button .global-icons {
  display: block;
  color: rgb(137, 126, 114);
  font-size: clamp(0.625rem, 0.509615rem + 0.240385vw, 0.75rem);          /* live: 11.62px at 1440 */
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  padding-left: clamp(0.625rem, 0.394231rem + 0.480769vw, 0.875rem);      /* live: 13.23px at 1440 */
}
/* live: "+" is U+E900 in the private global-icons font; drawn here as a 1em mask in currentColor */
.stories .global-icons.global-plus-icon::before {
  content: "";
  display: block;
  width: 1.165em;                          /* live: the U+E900 glyph advances 13.52px at 11.61px font-size → 26.75px icon box with the padding */
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0.5v11M0.5 6h11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0.5v11M0.5 6h11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* button hover (live: text + icon → rgb(201,34,38), ring scale 1.02, .3s ease-in-out) */
html.no-touch .stories .dark-blue--button:hover,
html.no-touch .stories .dark-blue--button:hover .global-icons,
.stories .dark-blue--button:focus-visible,
.stories .dark-blue--button:focus-visible .global-icons { color: rgb(201, 34, 38); }
html.no-touch .stories .dark-blue--button:hover::before,
.stories .dark-blue--button:focus-visible::before { transform: scale(1.02); }
.stories .dark-blue--button:focus-visible { outline: none; }

/* ----- Mobile card slider (live: .module--items-stories_mobile, filled and turned into a Swiper by JS under 992px) ----- */
.stories .module--items-stories_mobile {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: 1.875rem;                    /* live: 30px */
  padding: 0 0.75rem;                      /* live: 0 12px */
  overflow: hidden;
}
.stories .module--items-stories_mobile .swiper-wrapper {
  display: flex;
  align-items: stretch;
  padding-bottom: 2.1875rem;               /* live: 35px */
}
.stories .module--items-stories_mobile .swiper-slide {
  flex-shrink: 0;
  width: 55%;
  height: auto;
}
.stories .module--items-stories_mobile .stories-card {
  position: relative;
  border-radius: 0.9375rem;                /* live: 15px */
  overflow: hidden;
}
.stories .module--items-stories_mobile .stories-card-image { position: relative; height: 17.25rem; }   /* live: 276px */
.stories .module--items-stories_mobile .stories-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(181deg, transparent, #000);
  opacity: 0.67;
  z-index: 5;
}
.stories .module--items-stories_mobile .stories-card-content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1.25rem;                        /* live: 20px */
  z-index: 6;
}
.stories .module--items-stories_mobile .scc-inner { color: #fff; }                       /* live: only the mobile rule sets the row white; desktop inherits rgb(84,84,84) and the icon carries its own white */
.stories .module--items-stories_mobile .scc-inner .social-icon { padding-right: 0.75rem; }   /* live: 12px */
.stories .module--items-stories_mobile .scc-text { display: none; }
/* arrows row under the slides (live: .swiper--btn-arrow — prev at x 42, next at x 317 on a 390 screen) */
.stories .module--items-stories_mobile .swiper--btn-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.875rem;                     /* live: 0 30px */
}
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-prev,
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-next {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  color: var(--stone);                     /* live: rgb(162, 150, 138) */
  cursor: pointer;
}
/* Swiper's own arrow (an ::after glyph in 11.x, an inline svg in 12.x) is hidden — live draws its own */
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-prev::after,
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-next::after { content: none; }
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-prev svg,
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-next svg { display: none; }
/* live: U+E90E in global-icons at 20px renders a 30.81×23 long thin arrow; drawn here as a mask */
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-prev::before,
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-next::before {
  content: "";
  display: block;
  width: 30.81px;
  height: 23px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 23'%3E%3Cpath d='M1 11.5h28.5M19.5 2l10 9.5-10 9.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 23'%3E%3Cpath d='M1 11.5h28.5M19.5 2l10 9.5-10 9.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stories .module--items-stories_mobile .swiper--btn-arrow .swiper-button-prev::before { transform: rotate(180deg); }

/* ----- Breakpoints (live: 1300 for the card offsets, 991/992 for the layout switch, 500 for the slide width) ----- */
@media (max-width: 1300px) {
  .stories { padding: 1.875rem 3.125rem; }                                                            /* live: 30px 50px */
  .stories .module--items-stories .stories-card:first-child { left: 10%; top: 3.75rem; }              /* live: 60px */
  .stories .module--items-stories .stories-card:nth-child(2) { right: 12%; bottom: 3.75rem; }         /* live: 60px */
  .stories .module--items-stories .stories-card:nth-child(3) { right: 12%; top: 6.875rem; }           /* live: 110px */
  .stories .module--items-stories .stories-card:nth-child(4) { left: 10%; bottom: 6.25rem; }          /* live: 100px */
}
/* live switches CSS at 991/992 and JS at innerWidth > 992; the clone uses one boundary — 992 and below is mobile */
@media (max-width: 992px) {
  .stories { margin-top: 0; padding: 4.0625rem 0; }                                                   /* live: 65px 0 */
  .stories::before { display: none; }
  .stories .module_stories-cards--inner { flex-direction: column; margin-top: 0; min-height: auto; }
  .stories .stories--inner .item--subtitle { color: var(--charcoal); }                                /* live: rgb(84,84,84) */
  .stories .stories--inner_image .item--title { line-height: 1.25; }                                  /* live: 85px at 390 */
  .stories .module--items-stories { display: none; }
  .stories .dark-blue--button { margin-top: 2.1875rem; padding: 0.8125rem 1.4375rem; }               /* live: 35px / 13px 23px → 272×46 at 390 */
}
@media (min-width: 993px) {
  .stories .module--items-stories_mobile { display: none; }
}
@media (max-width: 500px) {
  .stories .module--items-stories_mobile .swiper-slide { width: 100%; max-width: 16.875rem; }       /* live: 270px at 390, centred at x 60 */
}

/* ----- Reduced motion, opt-in only (<html class="respect-reduced-motion">; the live has no such rule): keep every layout value,
   drop the transitions (stories.js reads the same class and skips the parallaxes) ----- */
@media (prefers-reduced-motion: reduce) {
  html.respect-reduced-motion .stories .module--items-stories .stories-card-image .img,
  html.respect-reduced-motion .stories .module--items-stories .stories-card-content,
  html.respect-reduced-motion .stories .module--items-stories .scc-text,
  html.respect-reduced-motion .stories .dark-blue--button,
  html.respect-reduced-motion .stories .dark-blue--button::before { transition: none; }
}