/* Pro India — page styles: Home / Our Purpose.
   Copied verbatim from the approved HTML design. */

/* ---- Homepage hero ---- */
.hero { position: relative; padding-top: 8px; }
.hero-card {
  position: relative; border-radius: var(--r-xl); overflow: hidden; color: var(--on-dark);
  background: linear-gradient(120deg, #0c352a 0%, #0f3d2e 46%, #124a37 100%);
}
.hero-card::after {
  content: ""; position: absolute; inset: 0;
  background: url("../../../uploads/hero-bg.jpg") center/cover no-repeat; opacity: .16; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
  pointer-events: none;
}
.hero-glow { position: absolute; bottom: -40%; left: 20%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(29,185,84,.22), transparent 70%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch; }
.hero-copy { padding: clamp(34px, 5vw, 64px) clamp(24px, 4vw, 52px); }
.hero-copy h1 { color: #fff; margin: 0 0 20px; }
.hero-copy h1 .it { color: var(--mint); }
.hero-copy .lede { color: var(--on-dark-s); max-width: 44ch; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-mini { display: flex; gap: 30px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.hero-mini .stat-num { color: #fff; font-size: 22px; }
.hero-mini .stat-num .u { color: var(--mint); }
.hero-mini .stat-label { color: var(--on-dark-m); }
.hero-form-wrap { padding: clamp(20px, 3vw, 36px); display: flex; align-items: center; }
.hero-form { width: 100%; background: #fff; border-radius: var(--r-lg); padding: 28px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); }
.hero-form h3 { font-family: var(--font-serif); font-weight: 500; font-size: 23px; color: var(--ink); margin-bottom: 4px; }
.hero-form p { font-size: 13px; color: var(--tx-soft); margin-bottom: 18px; }
.hero-form .stack { gap: 11px; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card::after { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 30%, #000 100%); }
}

/* about intro */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.about-media { position: relative; }
.about-media img { border-radius: var(--r-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--sh); }
.about-badge { position: absolute; bottom: -20px; left: -20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; box-shadow: var(--sh-lg); display: flex; align-items: center; gap: 12px; }
.about-badge .ic { width: 34px; height: 34px; color: var(--green); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-badge { left: 16px; } }

/* training / epr */
.epr-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 44px); align-items: center; }
.cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
@media (max-width: 860px) { .epr-grid, .cta-grid { grid-template-columns: 1fr; gap: 28px; } }

.plan-card.featured { border: 2px solid var(--green); box-shadow: var(--sh); }
.plan-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-pill); color: #fff; width: max-content; margin-bottom: 16px; }
.plan-card h3 { font-size: 18px; margin-bottom: 8px; }
.plan-card > p { font-size: 13.5px; color: var(--tx-soft); margin-bottom: 16px; }
.plan-card .checks { margin-bottom: 22px; }

/* mission & vision */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* founder journey */
.journey-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,4vw,52px); align-items: center; }
.cred-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cred-card { text-align: center; padding: 24px 16px; }
.cred-card .ic { width: 30px; height: 30px; color: var(--green); margin: 0 auto 10px; }
.cred-card b { display: block; font-size: 14px; color: var(--ink); }
.cred-card small { font-size: 12px; color: var(--tx-mute); }
/* video section */
.video-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: stretch; }
.vid-yt, .vid-testi { min-width: 0; position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.vid-yt { display: block; aspect-ratio: 16/9; background: #0f3d2e center/cover no-repeat; }
.vid-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(15,61,46,.34)); transition: background .2s ease; }
.vid-yt:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(15,61,46,.46)); }
.vid-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border: 0; padding: 0; cursor: pointer; border-radius: 50%; background: var(--amber); display: grid; place-items: center; z-index: 3; box-shadow: 0 12px 32px rgba(0,0,0,.4); transition: transform .2s var(--ease); }
.vid-play .ic { width: 28px; height: 28px; fill: var(--ink); stroke: var(--ink); margin-left: 3px; }
.vid-yt:hover .vid-play, .vid-testi:hover .vid-play { transform: scale(1.08); }
.vid-testi.playing .vid-play { display: none; }
.vid-testi.playing .cap { opacity: 0; }
.vid-badge { position: absolute; bottom: 14px; left: 16px; z-index: 1; color: #fff; font-size: 12.5px; font-weight: 600; background: rgba(0,0,0,.5); padding: 6px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; }
.vid-badge .ic { width: 14px; height: 14px; }
.vid-testi { background: var(--ink); }
.vid-testi video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vid-testi .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px 14px; background: linear-gradient(transparent, rgba(10,45,34,.92)); pointer-events: none; transition: opacity .3s ease; }
.vid-testi .cap b { color: #fff; font-size: 14.5px; display: block; }
.vid-testi .cap small { color: var(--mint); font-size: 12.5px; }
.vids-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 14px; }
.gallery-grid a { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; position: relative; display: block; }
.gallery-grid a.tall { grid-row: span 2; aspect-ratio: 4/5; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-grid a:hover img { transform: scale(1.06); }
/* associations */
.assoc-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; }
.assoc { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 20px; font-weight: 700; color: var(--ink); font-size: 14px; }
.assoc .ic { width: 17px; height: 17px; color: var(--green); }
/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px,4vw,44px); align-items: stretch; }
.contact-info { display: flex; flex-direction: column; gap: 14px; }
.contact-line { display: flex; align-items: center; gap: 14px; }
.contact-line .ic-box { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--mint); flex-shrink: 0; }
.contact-line .ic-box .ic { width: 21px; height: 21px; }
.contact-line b { color: #fff; font-size: 15px; display: block; }
.contact-line span { color: var(--on-dark-s); font-size: 13.5px; }
@media (max-width: 900px) {
  .mv-grid, .journey-grid, .video-grid, .vids-2, .contact-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid a.tall { grid-row: span 1; aspect-ratio: 4/3; }
}
@media (max-width: 560px) { .mv-grid, .cred-cards { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: 1fr 1fr; } }