/* =========================================================
   Sanskarshala — Home page sections
   (header, menu and hero come from style.css)
   ========================================================= */

:root {
  --green-deep: #0b4a1c;
  --green-mid: #3a9d3f;
  --paper: #fbf8f1;
  --muted: #4a4a45;
  --container: 77.5rem;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.eyebrow--light {
  color: var(--lime);
}

.section-title {
  margin: 0;
  max-width: 17em;
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.accent-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.015em;
  color: var(--orange);
}

/* scroll-in animation (toggled by home.js) */
.reveal {
  opacity: 0;
  transform: translateY(2.125rem);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============ HERO extras ============ */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.95em 1.9em;
  border: 1.5px solid rgba(246, 241, 230, 0.55);
  border-radius: 0.1875rem;
  color: var(--cream);
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
  outline: none;
}

/* ============ STORY — the video first screen, then the sky scene ============ */

.story {
  position: relative;
  background: var(--cream);
  --story-left: clamp(1.5rem, 16vw, 20rem);
}

/* first screen: the looping video with the headline and buttons on it */
.story__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 7.5rem var(--gutter) clamp(2.5rem, 7vh, 4.5rem) var(--story-left);
  overflow: hidden;
}

.story__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 35%;      /* must match .portal__video on index.html */
}

.story__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 16, 12, 0.35) 0%,
    rgba(10, 16, 12, 0.12) 30%,
    rgba(10, 16, 12, 0.35) 60%,
    rgba(10, 16, 12, 0.72) 100%);
}

.story__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(2.3rem, min(5.2vw, 8.4vh), 5.3rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.story__line {
  display: block;
}

/* the light copy on the video */
.story__text--light {
  color: var(--cream);
  text-shadow: 0 2px 1.875rem rgba(0, 0, 0, 0.25);
}

.story__text--light .story__line--accent {
  color: var(--yellow);
}

/* the dark copy on the sky */
.story__text--dark {
  color: var(--green-deep);
}

.story__text--dark .story__line--accent {
  color: var(--green-mid);
}

/* subline + buttons, under the headline */
.story__extra {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-top: 1.25rem;
}

.story__extra .hero__actions {
  justify-content: flex-start;
  margin-top: 1.375rem;
}

.story__sub {
  margin: 0;
  font-size: clamp(1rem, min(1.35vw, 2.4vh), 1.25rem);
  line-height: 1.55;
  color: rgba(246, 241, 230, 0.88);
}

/* the first screen fades in */
.story__text--light .story__line,
.story__extra {
  animation: arrive 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.story__text--light .story__line:nth-child(2) { animation-delay: 0.08s; }
.story__extra { animation-delay: 0.3s; }

@keyframes arrive {
  from { opacity: 0; translate: 0 1.625rem; }
}

/* the sky scene with "What is Sanskarshala?" */
.story__sky {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2.5rem, 7vh, 5rem);
  min-height: clamp(28rem, 76vh, 48rem);
  overflow: hidden;
  padding: clamp(3.5rem, 8vh, 5.5rem) var(--gutter) clamp(2.5rem, 6vh, 4rem) var(--story-left);
  background: linear-gradient(180deg, #8fcdf2 0%, #cfe9f8 45%, var(--cream) 100%);
}

.story__sky-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* pale veil so the text on the lower part stays readable */
.story__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(246, 241, 230, 0) 0%,
    rgba(240, 247, 251, 0.55) 40%,
    rgba(246, 241, 230, 0.9) 62%,
    var(--cream) 100%);
}

.story__lead {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  color: var(--ink);
}

.story__lead p {
  margin: 0;
  font-size: clamp(1.1rem, min(1.75vw, 3vh), 1.9rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.story__lead-title {
  margin: 0 0 0.875rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ============ WHAT IS SANSKARSHALA? (continued) ============ */

.more {
  padding: clamp(2.5rem, 6vw, 5.625rem) 0 clamp(3.75rem, 8vw, 7.5rem);
  background: var(--cream);
  color: var(--ink);
}

.more__big {
  margin: 0;
  max-width: 20em;
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--menu-green);
  text-wrap: balance;
}

.more__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem clamp(2.5rem, 6vw, 6.875rem);
  align-items: end;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.more__text {
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.65;
  color: var(--muted);
}

.more__note {
  margin: 0;
  padding-left: 1.375rem;
  border-left: 0.1875rem solid var(--orange);
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
}

/* ============ FEATURE CARD ============ */

.feature {
  padding: 0 0 clamp(3.75rem, 8vw, 7.5rem);
  background: var(--cream);
}

.feature__card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  min-height: clamp(22.5rem, 30vw, 27.5rem);
  overflow: hidden;
  border-radius: 0.25rem;
  background: #efe6d2;
  color: var(--ink);
  box-shadow: 0 1.125rem 3.125rem rgba(4, 82, 29, 0.08);
}

.feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2.25rem, 5vw, 5rem);
}

.feature__title {
  margin: 0 0 1.125rem;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--menu-green);
}

.feature__text {
  max-width: 32em;
  margin: 0 0 clamp(1.75rem, 4vw, 3.5rem);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
}

/* picture on the right, its inner edge curving into the card */
.feature__media {
  position: relative;
  clip-path: ellipse(100% 92% at 100% 50%);
}

/* a little taller than the box and pinned to the bottom,
   so the white strip along the top of the picture stays hidden */
.feature__media img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: 60% 100%;
  transform-origin: bottom center;
  transition: transform 0.8s ease;
}

.feature__card:hover .feature__media img {
  transform: scale(1.04);
}

/* ============ IMPACT COUNTERS ============ */

.impact {
  padding: clamp(3.5rem, 7vw, 6.25rem) 0;
  border-top: 1px solid rgba(4, 82, 29, 0.12);
  background: var(--cream);
  color: var(--ink);
}

.impact__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.impact__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 2px solid rgba(4, 82, 29, 0.18);
}

.impact__item:nth-child(2) { --delay: 0.1s; }
.impact__item:nth-child(3) { --delay: 0.2s; }
.impact__item:nth-child(4) { --delay: 0.3s; }

.impact__num {
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--menu-green);
  font-variant-numeric: tabular-nums;
}

.impact__label {
  font-size: 1.05rem;
  color: var(--muted);
}

/* ============ PILLARS ============ */

.pillars {
  padding: clamp(5rem, 10vw, 9.375rem) 0;
  background: var(--paper);
  color: var(--ink);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.pillar {
  --pillar: var(--orange);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0.75rem 1.875rem rgba(30, 43, 34, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.8s ease;
}

.pillar--civic { --pillar: #2e9e3e; --delay: 0.12s; }
.pillar--patriotism { --pillar: #2a9fc9; --delay: 0.24s; }

.pillar:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.05), 0 1.375rem 2.75rem rgba(30, 43, 34, 0.12);
}

.pillar__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 0.25rem solid var(--pillar);
}

.pillar__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.pillar:hover .pillar__img img {
  transform: scale(1.05);
}

.pillar__body {
  position: relative;
  padding: 2.75rem 1.75rem 2rem;
}

.pillar__icon {
  position: absolute;
  top: -1.75rem;
  left: 1.75rem;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 0.25rem solid #fff;
  border-radius: 50%;
  background: var(--pillar);
  color: #fff;
}

.pillar__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.pillar h3 {
  margin: 0 0 0.625rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.pillar p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ============ TESTIMONIALS ============ */

.voices {
  position: relative;
  padding: clamp(5rem, 10vw, 9.375rem) 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(185, 226, 140, 0.12), transparent 70%),
    var(--menu-green);
  color: var(--cream);
}

.carousel {
  position: relative;
  max-width: 62.5rem;
}

.carousel__quote {
  display: block;
  width: 3.5rem;
  margin: 0.75rem 0 1.75rem;
  color: var(--lime);
}

.carousel__track {
  display: grid;
  touch-action: pan-y;
}

.carousel__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(2.5rem);
  transition: opacity 0.5s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}

.carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.1s, transform 0.6s ease 0.1s, visibility 0s;
}

.carousel__slide.is-leaving {
  transform: translateX(-2.5rem);
}

.carousel__slide blockquote {
  margin: 0;
}

.carousel__slide blockquote p {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.7rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.carousel__slide figcaption {
  margin-top: 1.75rem;
  font-size: 1rem;
  color: var(--lime);
}

.carousel__slide figcaption strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--cream);
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-top: 2.75rem;
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1.5px solid var(--lime);
  border-radius: 50%;
  background: transparent;
  color: var(--lime);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.carousel__btn svg {
  width: 1.375rem;
  height: 1.375rem;
}

.carousel__btn:hover,
.carousel__btn:focus-visible {
  background: var(--lime);
  color: var(--menu-green);
  outline: none;
}

.carousel__dots {
  display: flex;
  gap: 0.5rem;
}

.carousel__dot {
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 62.4375rem;
  background: rgba(246, 241, 230, 0.35);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

/* a bigger invisible area to tap or click around the small dot */
.carousel__dot::before {
  content: "";
  position: absolute;
  inset: -0.9375rem -0.25rem;
}

.carousel__dot[aria-selected="true"] {
  width: 1.875rem;
  background: var(--lime);
}

.carousel__dot:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 0.1875rem;
}

/* ============ FINAL CTA ============ */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(5.625rem, 11vw, 10.625rem) var(--gutter);
  background: linear-gradient(135deg, #ffcf3f 0%, #f9b224 55%, #f59a1b 100%);
  color: var(--ink);
  text-align: center;
}

/* Sanskarshala logos floating behind the text (added by script.js) */
.cta__logos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cta__logo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  --size: calc(var(--s) * var(--k, 1));
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  opacity: var(--o, 0.8);
  filter: drop-shadow(0 0.25rem 0.375rem rgba(150, 60, 0, 0.3));
  animation: logo-drift var(--d, 14s) ease-in-out var(--delay, 0s) infinite alternate;
}

/* tablets and phones: the heading fills the width, so the logos near the top move into the corners
   (and the two small ones in the middle are left out) instead of sitting behind its letters */
@media (max-width: 1000px) {
  .cta__logo:nth-child(3),
  .cta__logo:nth-child(7) {
    display: none;
  }

  .cta__logo:nth-child(1) {
    left: 3%;
    top: 3%;
  }

  .cta__logo:nth-child(4) {
    left: 97%;
    top: 4%;
  }
}

.cta__logo img {
  display: block;
  width: 100%;
  height: 100%;
  animation: logo-spin var(--spin, 30s) linear infinite;
}

.cta__logo:nth-child(even) img {
  animation-direction: reverse;
}

@keyframes logo-drift {
  0%   { translate: 0 0; }
  50%  { translate: var(--dx, 1.5rem) calc(var(--dy, -1.875rem) * 0.5); }
  100% { translate: calc(var(--dx, 1.5rem) * -0.6) var(--dy, -1.875rem); }
}

@keyframes logo-spin {
  to { rotate: 360deg; }
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 56rem;   /* room for the big heading on two lines on wide screens */
  margin: 0 auto;
}

.cta__title {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 4.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.cta__title .accent-serif {
  color: var(--menu-green);
}

.cta__sub {
  margin: 1.375rem auto 2.25rem;
  max-width: 30em;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.55;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1em 2em;
  border-radius: 0.1875rem;
  background: var(--bg);
  color: var(--cream);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-dark svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.25s ease;
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background: var(--menu-green);
  transform: translateY(-2px);
  outline: none;
}

.btn-dark:hover svg {
  transform: translateX(0.25rem);
}

.cta__mascot {
  position: absolute;
  z-index: 1;
  bottom: -18%;
  height: clamp(16.25rem, 38vw, 35rem);
  width: auto;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cta__mascot--boy {
  left: clamp(-1.25rem, 5vw, 7.5rem);
  transform: translateY(var(--mascot-y, 1.875rem));
}

.cta__mascot--girl {
  right: clamp(-1.25rem, 5vw, 7.5rem);
  transform: translateY(var(--mascot-y, 1.875rem));
}

/* ============ FOOTER ============ */

.footer {
  padding: clamp(4rem, 8vw, 6.25rem) 0 1.75rem;
  background: #16211a;
  color: var(--cream);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}

.footer__brand p {
  max-width: 22em;
  margin: 1.125rem 0 0;
  line-height: 1.6;
  color: rgba(246, 241, 230, 0.7);
}

.footer__col h3 {
  margin: 0 0 1.125rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__col a {
  color: rgba(246, 241, 230, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* the small icons in front of the phone, WhatsApp and website lines */
.footer__col .footer__ico {
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
  vertical-align: -0.1875rem;
  margin-right: 0.4375rem;
}

.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  outline: none;
}

/* touch screens: each footer link is a 40px tall target for a finger (the list keeps about the same look) */
@media (pointer: coarse) {
  .footer__col ul:not(.footer__social) {
    gap: 0;
  }

  .footer__col ul:not(.footer__social) a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
  }
}

.footer__col .footer__social {
  flex-direction: row;
  margin-top: 1.375rem;
}

.footer__col .footer__social a {
  color: var(--lime);
}

.footer__col .footer__social a:hover,
.footer__col .footer__social a:focus-visible {
  color: var(--menu-green);
  text-decoration: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 241, 230, 0.12);
  font-size: 0.9rem;
  color: rgba(246, 241, 230, 0.55);
}

.footer__bottom p {
  margin: 0;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 1000px) {
  /* the 3 pillars stay side by side (2 columns would leave the third alone on a row) */
  .pillars__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 800px) {
  .more__cols {
    grid-template-columns: 1fr;
  }

  /* picture on top, curving down into the text */
  .feature__card {
    grid-template-columns: 1fr;
  }

  .feature__media {
    order: -1;
    aspect-ratio: 16 / 10;
    clip-path: ellipse(95% 100% at 50% 0);
  }

  .impact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .cta__logos {
    --k: 0.55;                   /* smaller floating logos on phones */
  }

  .story {
    --story-left: var(--gutter);
  }


  .pillars__grid {
    grid-template-columns: 1fr;
  }

  .cta {
    padding-bottom: 15.625rem;
  }

  .cta__mascot {
    height: 17.5rem;
    bottom: -3.75rem;
  }

  .cta__mascot--boy { left: 12%; }
  .cta__mascot--girl { right: 12%; }

  .carousel__controls {
    margin-top: 2rem;
  }
}

@media (max-width: 520px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .impact__item {
    padding-left: 1rem;
  }

  /* two numbers side by side on a phone: "9,000+" must fit half of even a 320px screen */
  .impact__num {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .story__text .story__line,
  .story__extra {
    animation: none;
  }

  .carousel__slide,
  .cta__mascot {
    transition: none;
  }

  .cta__logo,
  .cta__logo img {
    animation: none;
  }
}