/* Lakshyavedh — page-specific styles, kept in its own file (not appended
   to the shared css/styles.css) so this build stays isolated from every
   other page's styling. */

/* Each .lv-block is now also a .snap-section (height/overflow/flex
   centering all come from Tailwind utility classes on the element
   itself, matching index.html's own .snap-section pattern) — this class
   is kept only as a styling hook, no properties of its own needed now
   that the old continuous-scroll padding/divider system is gone. */
.lv-block {
  position: relative;
}

/* Hero — no real photo exists for the hero itself (per content draft), so
   it's a confident text treatment over a warm gradient + the page's own
   swastika-lotus motif, rather than forcing the growing-circular-reveal
   treatment onto a graphic that isn't a real, significant photograph
   (that device is reserved for genuine archival finds elsewhere on the
   site). Real speaker photos ARE used further down — see the Speaker
   roster comment below. */
.lv-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 105, 0, 0.14), rgba(255, 205, 133, 0.4) 55%, rgba(251, 105, 0, 0.1));
  padding: 3.5rem 1.5rem;
}
@media (min-width: 768px) {
  .lv-hero {
    padding: 5rem 3rem;
  }
}

/* Reach stats — Odometer digit-roll, same minimal theme/inherited-font
   approach as Home's Impact Through Numbers (js/home.js initImpactCounters,
   index.html's own comment on the odometer-theme-minimal stylesheet).
   Sizing matches Home's own stat-value scale exactly (text-5xl/6xl/7xl)
   now that this lives in its own full-viewport panel with room to match
   that scale, rather than the smaller clamp() used for the old
   continuous-scroll layout. */
.lv-stat-value {
  font-family: "Literata", "Noto Serif Devanagari", serif;
  font-weight: 700;
  font-size: 3rem;
  color: #3F3F3F;
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .lv-stat-value {
    font-size: 3.75rem;
  }
}
@media (min-width: 768px) {
  .lv-stat-value {
    font-size: 4.5rem;
  }
}
.lv-stat-label {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: rgba(63, 63, 63, 0.7);
}
@media (min-width: 768px) {
  .lv-stat-label {
    font-size: 1.05rem;
  }
}

/* Speaker roster — fixed 2x2/1x4 grid (no expand/collapse: chosen after a
   side-by-side demo of four hover concepts, see js file's own comment).
   Real, rights-cleared Wikimedia Commons press/official photos are used
   for the two public figures with available ones (Acharya Devvrat,
   Smriti Irani); for the other two, no such photo exists, so a neutral
   silhouette (speaker-placeholder.svg) stands in rather than an
   unrelated stranger's photo. Each card stacks two copies of the same
   photo — grayscale underneath, full color on top — and the color
   copy's opacity is masked by a radial-gradient positioned at --mx/--my
   (set from mousemove in initSpeakersGrid), so color only "bleeds in"
   in a soft circle around the cursor instead of the whole card
   colorizing at once. Height is a touch shorter on mobile (60dvh, 2
   rows) vs desktop (56dvh, 1 row of 4). */
.lv-speakers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.75rem;
  height: 60dvh;
  min-height: 20rem;
}
@media (min-width: 768px) {
  .lv-speakers-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    height: 56dvh;
    max-height: 28rem;
    gap: 1rem;
  }
}
.lv-speaker-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 40px -20px rgba(63, 63, 63, 0.18), 0 4px 14px rgba(63, 63, 63, 0.05);
}
.lv-speaker-img-base,
.lv-speaker-img-color {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.lv-speaker-img-base {
  filter: grayscale(1);
}
.lv-speaker-img-color {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-mask-image: radial-gradient(circle 130px at var(--mx, 50%) var(--my, 50%), black 55%, transparent 100%);
  mask-image: radial-gradient(circle 130px at var(--mx, 50%) var(--my, 50%), black 55%, transparent 100%);
}
.lv-speaker-card:hover .lv-speaker-img-color {
  opacity: 1;
}
/* Touch devices (no real cursor to track): initSpeakersGrid adds
   .lv-touch to the grid and toggles .is-active per tapped card instead
   — the mask is dropped entirely there so the whole photo just
   colorizes, since a fixed-position spotlight would be meaningless
   without a moving pointer. */
.lv-speakers-grid.lv-touch .lv-speaker-card.is-active .lv-speaker-img-color {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.lv-speaker-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 0.85rem 1.1rem;
  background: linear-gradient(to top, rgba(20, 14, 8, 0.85), rgba(20, 14, 8, 0));
  color: #FFFBF3;
  text-align: left;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (min-width: 768px) {
  .lv-speaker-info {
    padding: 1.5rem 1.25rem 1.5rem;
  }
}
.lv-speaker-card:hover .lv-speaker-info,
.lv-speakers-grid.lv-touch .lv-speaker-card.is-active .lv-speaker-info {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .lv-speaker-img-color,
  .lv-speaker-info {
    transition: none;
  }
}

/* Press mentions — slow horizontal auto-scroll strip. Plain CSS/GSAP
   marquee rather than pulling in a new carousel library (Swiper) for one
   decorative strip — keeps the "locked stack, no build step" footprint
   the same as every other page. Duplicated tile set for a seamless loop. */
.lv-press-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.lv-press-track {
  display: flex;
  gap: 2rem;
  width: max-content;
}
.lv-press-tile {
  flex-shrink: 0;
  width: 10.5rem;
  height: 5rem;
  border-radius: 0.85rem;
  border: 1px dashed rgba(63, 63, 63, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(63, 63, 63, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .lv-press-tile {
    width: 12rem;
    height: 5.5rem;
    font-size: 0.9rem;
  }
}

.lv-testimonial-card {
  border-radius: 1.25rem;
  background: #FFFBF3;
  box-shadow: 0 20px 40px -20px rgba(63, 63, 63, 0.15), 0 4px 12px rgba(63, 63, 63, 0.04);
  padding: 2rem;
}