/* =========================================
   VTKA Home — Full Replaceable Stylesheet
   Yellow #f7e801  |  Green #008700
   ========================================= */

:root{
  --yellow:#f7e801;
  --green:#008700;
  --ink:#0b0b0b;
  --muted:#6b6b6b;
  --bg:#fffbee;
  --card:#ffffff;
  --shadow:0 12px 28px rgba(0,0,0,.08);
  --radius:14px;
  --max:1200px;
}

/* Helpers */
.container{width:min(92%,var(--max));margin:0 auto;}
.lead{font-size:1.08rem;line-height:1.65;color:#222;}
.stack{display:flex;gap:14px;flex-wrap:wrap;}
body{margin:0;background:var(--bg);color:var(--ink);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;transition:.25s;}
.btn--primary{background:var(--green);color:#fff;box-shadow:0 8px 24px rgba(0,135,0,.18);}
.btn--primary:hover{transform:translateY(-1px);filter:brightness(1.06);}
.btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);}
.btn--ghost:hover{border-color:#fff;}
.btn--link{color:var(--green);font-weight:700;text-decoration:none;}
.btn--link:hover{text-decoration:underline;}

/* Sections */
.section{padding:64px 0;background:var(--bg);}
.section--events{background:#fffde6;}
.section--achievements{background:#fff;}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;}
.section__title{font-size:1.7rem;color:var(--ink);display:flex;gap:12px;align-items:center;margin:0 0 18px;}
.link-all{font-weight:700;color:var(--green);text-decoration:none;}
.link-all:hover{text-decoration:underline;}

/* Grids & Cards */
.grid{display:grid;gap:28px;}
.grid--2{grid-template-columns:1.2fr 1fr;}
.grid--3-1{grid-template-columns:3fr 1.25fr;align-items:start;}
.cards{display:grid;gap:20px;}
.cards--grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.cards--grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.cards--scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);overflow-x:auto;gap:18px;padding-bottom:6px;scroll-snap-type:x mandatory;}
.cards--scroll>*{scroll-snap-align:start;}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}

/* ======================================================
   HERO (Full-bleed video, breaks out of parent container)
   ====================================================== */
.hero{
  position:relative;
  width:100vw;
  min-height:100svh;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
}
.hero__video{position:absolute;inset:0;z-index:0;background:#000;}
/* Cover logic (no letterboxing) */
.hero__iframe{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;border:0;
  height:100vh;           /* fill by height on wide screens */
  width:177.78vh;         /* 16:9 */
}
@media (max-aspect-ratio:16/9){
  .hero__iframe{width:100vw;height:56.25vw;} /* fill by width on tall screens */
}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.0;transition:opacity .4s;}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.65) 100%);}

/* Hero content & quick stats */
.hero__content{position:relative;z-index:2;color:#fff;display:grid;place-items:center;text-align:center;min-height:min(90vh,700px);padding:5vh 24px;}
.hero__logo{width:clamp(186px,12vw,120px);height:186px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));margin:0 0 14px;}
.hero__title{font-size:clamp(1.6rem,3.2vw + .8rem,3.2rem);line-height:1.04;margin:.5rem 0;font-weight:800;text-shadow:0 14px 36px rgba(0,0,0,.6);}
.hero__tagline{color:var(--yellow);font-weight:700;letter-spacing:.6px;margin:0 0 1rem;}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;}
.hero__stats{position:relative;z-index:2;margin-top:-10vh;padding:0 24px 24px;}
.hero__stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.stat{background:rgba(0,0,0,.35);color:#fff;padding:10px 12px;border-radius:10px;backdrop-filter:blur(6px);text-align:center;}
.stat__num{display:block;font-weight:800;font-size:1.05rem;}
.stat__label{font-size:.85rem;opacity:.9;}

/* ABOUT */
.section--about .grid--2{align-items:center;}
.media-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);}
.media-card img{width:100%;height:220px;object-fit:cover;display:block;}
.list{margin:16px 0;padding:0;list-style:none;}
.list--check li{position:relative;padding-left:22px;margin:10px 0;}
.list--check li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,135,0,.15);}

/* EVENTS */
.event .event__meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.badge{background:var(--green);color:#fff;font-size:.78rem;padding:4px 8px;border-radius:999px;}
.date{font-weight:700;color:#333;}
.event__title{margin:4px 0 4px;font-size:1.15rem;}
.event__place{color:var(--muted);margin-bottom:12px;}
.event .btn{padding:10px 14px;}

/* ACHIEVEMENTS — timeline */
.timeline{margin:10px 0 0;padding:0;position:relative;}
.timeline::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:3px;background:linear-gradient(var(--green),var(--yellow));}
.tl-item{position:relative;padding-left:56px;margin:24px 0;}
.tl-year{position:absolute;left:0;top:8px;width:44px;height:44px;border-radius:50%;background:var(--yellow);color:#000;display:grid;place-items:center;font-weight:800;box-shadow:var(--shadow);}
.tl-card{background:#fff;border-left:6px solid var(--green);padding:16px 18px;border-radius:10px;box-shadow:var(--shadow);}
.tl-card h3{margin:0 0 6px;}

/* TEAMS */
.team{padding:0;overflow:hidden;}
.team__img{width:100%;height:160px;object-fit:cover;display:block;}
.team__body{padding:14px 16px 16px;}
.team__title{margin:0 0 4px;}
.team__meta{color:var(--muted);margin-bottom:8px;}

/* SPOTLIGHT */
.spotlight__title{margin:0 0 10px;font-size:1.1rem;}
.spotlight__card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;}
.spotlight__card img{width:100%;height:160px;object-fit:cover;display:block;}
.spotlight__body{padding:12px 14px 14px;}
.spotlight .btn--link{padding:0;}

/* TRUSTEES */
.trustee{text-align:center;}
.trustee__img{width:108px;height:108px;object-fit:cover;border-radius:50%;display:block;margin:14px auto 10px;border:3px solid var(--yellow);}
.trustee__name{margin:4px 0 2px;}
.trustee__role{color:var(--green);font-weight:700;margin:0 0 6px;}
.trustee__bio{color:var(--muted);}

/* ======================
   RESPONSIVE BREAKPOINTS
   ====================== */
@media (max-width:1024px){
  .grid--3-1{grid-template-columns:1fr;}
  .hero__stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .grid--2{grid-template-columns:1fr;}
  .hero{min-height:520px;}
  .hero__logo{width:88px;}
}
@media (max-width:560px){
  .section{padding:54px 0;}
  .cards--scroll{grid-auto-columns:78%;}
  .hero__stats{margin-top:0;padding:10px 24px 0;}
  .btn{padding:11px 16px;}
  .team__img,.spotlight__card img{height:150px;}
}

/* =======================
   MOBILE HERO FIXES
   ======================= */
@media (max-width: 768px) {

  /* Ensure hero truly fills viewport height on all browsers */
  .hero {
    height: 100svh; /* safe full height on mobile */
    min-height: 100vh;
  }

  /* Resize and re-center video properly */
  .hero__iframe {
    width: 100vw !important;
    height: 100svh !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }

  /* Reduce inner spacing so content centers visually */
  .hero__content {
    padding-top: 8vh;
    padding-bottom: 8vh;
  }

  /* Make sure the video sits behind header cleanly */
  .hero__video {
    margin-top: 0;
  }

  /* Shrink logo slightly for smaller screens */
  .hero__logo {
    width: 85px;
  }

  /* Fix stats bar spacing */
  .hero__stats {
    margin-top: -4vh;
    padding-bottom: 2vh;
  }

  /* If any black bands remain due to safe areas, neutralize them */
  body, html {
    background-color: #000; /* ensures no white/black edges peek out */
  }
}