/* =========================================================
   Aamr Vaatika — Home page
   Shared components (buttons, features, FAQ, footer) live in
   style.css. Font sizes come only from the --fs-* scale.
   ========================================================= */

/* =============== Hero =============== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:var(--cream-100);
  background:var(--olive-900);min-height:min(760px,100vh);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:var(--nav-h);
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(38,49,15,.92) 0%,rgba(38,49,15,.72) 42%,rgba(38,49,15,.2) 75%),
    linear-gradient(0deg,rgba(38,49,15,.95) 0%,rgba(38,49,15,0) 38%);
}
.hero-inner{width:100%;padding-top:56px;padding-bottom:48px;}
.hero-copy{max-width:600px;}
.hero h1{color:var(--white);}
.hero .lead{color:rgba(255,255,255,.84);margin-top:18px;}

/* ---- The route line: orchard → highway → India Gate → your door ----
   A gold rule runs behind four stops. On load it draws from left to
   right and the stops light up in order: the one animation on the site. */
.route{position:relative;padding:28px 0 36px;border-top:1px solid rgba(255,255,255,.14);}
.route-line{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;}
.route-line::before{
  content:"";position:absolute;top:19px;left:20px;right:calc(25% - 20px);height:2px;
  background:linear-gradient(90deg,var(--mango-400),var(--mango-500));
  transform-origin:0 50%;animation:route-draw 3s linear .4s both;
}
.route-line li{position:relative;display:flex;flex-direction:column;gap:2px;}
.route-node{
  width:40px;height:40px;border-radius:50%;margin-bottom:12px;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--olive-900);color:var(--mango-300);border:2px solid var(--mango-400);
  animation:route-node .5s var(--ease) both;
}
/* The line runs at a steady pace, so each stop lights up as it arrives:
   one second per leg, after a short pause. */
.route-line li:nth-child(1) .route-node{animation-delay:.4s;}
.route-line li:nth-child(2) .route-node{animation-delay:1.4s;}
.route-line li:nth-child(3) .route-node{animation-delay:2.4s;}
.route-line li:nth-child(4) .route-node{animation-delay:3.4s;}
.route-node.is-end{background:var(--mango-500);color:var(--olive-900);border-color:var(--mango-500);}
.route-line strong{color:var(--white);font-weight:600;}
.route-line li > span:last-child{font-size:var(--fs-1);color:rgba(255,255,255,.7);}
@keyframes route-draw{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes route-node{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:none;}}

@media (max-width:860px){
  .hero{min-height:0;}
  .hero-inner{padding-top:48px;padding-bottom:32px;}
  .hero::before{background:linear-gradient(0deg,rgba(38,49,15,.96) 10%,rgba(38,49,15,.62) 100%);}
  /* Stacked on phones: the rule runs down the left edge instead. */
  .route-line{grid-template-columns:1fr;gap:16px;}
  .route-line::before{top:20px;bottom:20px;left:19px;right:auto;width:2px;height:auto;transform-origin:50% 0;animation-name:route-draw-v;}
  .route-line li{display:grid;grid-template-columns:40px 1fr;column-gap:14px;}
  .route-node{grid-row:span 2;margin-bottom:0;}
}
@keyframes route-draw-v{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* =============== Three ways, side by side ===============
   Each column shares the grid's rows (subgrid), so the headings, text,
   lists and buttons line up across all three however long each is. */
.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;row-gap:24px;}
.way-col{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;overflow:hidden;}
.way-col > img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.way-body{display:contents;}
.way-body > *{padding-left:22px;padding-right:22px;}
.way-name{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--olive-700);padding-top:20px;padding-bottom:12px;}
.ways-icon{width:36px;height:36px;flex-shrink:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--olive-100);color:var(--olive-700);}
.way-body h3{padding-bottom:4px;}
.way-body .list-check{margin:12px 22px 0;padding:12px 0 0;border-top:1px solid var(--line);}
/* The closing line of each offering, set in the heading face. */
.way-close{font-family:var(--font-display);font-size:var(--fs-3);line-height:1.4;color:var(--olive-800);padding-top:16px;padding-bottom:22px;}
.way-actions{display:flex;flex-direction:column;align-items:center;gap:12px;align-self:end;padding-bottom:24px;}
@media (max-width:1040px){.ways-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.ways-grid{grid-template-columns:1fr;}}

/* =============== What makes us different =============== */
.why{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start;}
.why-intro{position:sticky;top:calc(var(--nav-h) + 24px);}
.why-intro h2{margin-bottom:12px;}
.why-photo{margin-top:28px;}
.why-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-lg);}
.why-photo figcaption{margin-top:8px;font-size:var(--fs-1);color:var(--text-soft);}
.why-list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;}
@media (max-width:980px){
  .why{grid-template-columns:1fr;gap:24px;}
  .why-intro{position:static;}
}
@media (max-width:640px){.why-list{grid-template-columns:1fr;}}

/* =============== Only in season =============== */
.season{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;}
.season-copy h2{margin-bottom:12px;}
.season-status{
  margin-top:20px;padding:12px 14px;border-left:3px solid var(--olive-300);
  background:var(--cream-100);color:var(--olive-900);font-weight:600;
}
.season-status.is-live{border-left-color:var(--mango-500);background:var(--mango-50);}

.season-chart{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:24px;}
/* Months are 12 columns; the bars run on 24 half-months beneath them. */
.season-months{display:grid;grid-template-columns:repeat(12,1fr);}
.season-track{display:grid;grid-template-columns:repeat(24,1fr);}
.season-months{margin-left:150px;border-bottom:1px solid var(--line);padding-bottom:8px;}
.season-months span{font-size:var(--fs-1);color:var(--text-soft);text-align:center;}
.season-months span[data-in-season]{color:var(--olive-900);font-weight:600;}
.season-months span.is-now{color:var(--white);background:var(--olive-800);border-radius:var(--r-sm);}
.season-row{display:grid;grid-template-columns:150px 1fr;align-items:center;min-height:60px;border-bottom:1px solid var(--cream-100);}
.season-name{font-weight:600;color:var(--olive-900);line-height:1.3;}
.season-name small{display:block;font-size:var(--fs-1);font-weight:400;color:var(--text-soft);}
.season-row.is-muted .season-name{color:var(--text-soft);font-weight:500;}
.season-track{position:relative;height:22px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1px),var(--cream-100) calc(100%/12 - 1px) calc(100%/12));}
.season-bar{border-radius:var(--r-sm);}
.s-dasheri{grid-column:11 / 14;background:var(--mango-400);color:var(--olive-900);}
.s-langra{grid-column:12 / 15;background:var(--olive-700);color:var(--white);}
.s-bloom{grid-column:3 / 7;background:var(--olive-100);color:var(--olive-800);}
.season-note{margin-top:14px;font-size:var(--fs-1);color:var(--text-soft);}
@media (max-width:980px){.season{grid-template-columns:1fr;gap:28px;}}
@media (max-width:560px){
  .season-chart{padding:16px 12px;}
  .season-months{margin-left:104px;}
  .season-months span{font-size:0;}
  .season-months span::first-letter{font-size:var(--fs-1);}
  .season-row{grid-template-columns:104px 1fr;}
}

/* =============== Visit =============== */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.visit-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.visit-photos img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);aspect-ratio:4/3;}
.visit-photos .vp-main{grid-column:1 / -1;aspect-ratio:16/9;}
.visit-copy h2{margin-bottom:12px;}
.visit-facts{margin-top:24px;border-top:1px solid var(--line);}
.visit-facts div{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.visit-facts dt{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--olive-900);}
.visit-facts dt svg{color:var(--olive-600);}
.visit-facts dd{color:var(--text-soft);}
@media (max-width:980px){.visit{grid-template-columns:1fr;gap:28px;}}
@media (max-width:520px){.visit-facts div{grid-template-columns:1fr;gap:2px;}}

/* =============== Gifting & events =============== */
.corp{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center;}
.corp-copy h2{margin-bottom:12px;}
.corp-copy .list-check{margin-top:20px;}
.corp-photos{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:440px;}
.corp-photos img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);}
.corp-photos .cp-tall{grid-row:1 / -1;}
@media (max-width:980px){
  .corp{grid-template-columns:1fr;gap:28px;}
  .corp-photos{height:360px;}
}
@media (max-width:520px){.corp-photos{height:280px;}}

/* =============== MangoPedia teaser =============== */
.mpt-row{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
@media (max-width:980px){.mpt-row{grid-template-columns:repeat(3,1fr);row-gap:28px;}}
@media (max-width:520px){.mpt-row{grid-template-columns:repeat(2,1fr);}}
.mpt-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;}
.mpt-photo{
  width:104px;height:104px;border-radius:50%;overflow:hidden;margin-bottom:10px;background:var(--white);
  box-shadow:0 0 0 1px var(--line),0 0 0 5px var(--white),0 0 0 6px var(--line);
}
.mpt-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.mpt-item strong{font-weight:600;color:var(--olive-900);}
.mpt-item:hover strong{text-decoration:underline;text-underline-offset:3px;}
.mpt-place{font-size:var(--fs-1);color:var(--text-soft);}
.mpt-km{margin-top:6px;font-size:var(--fs-1);font-weight:600;color:var(--mango-900);background:var(--mango-100);padding:2px 10px;border-radius:var(--r-sm);}
.mpt-pair{display:flex;box-shadow:0 0 0 1px var(--olive-300),0 0 0 5px var(--white),0 0 0 7px var(--olive-500);}
.mpt-pair img{width:50%;}
.mpt-ours .mpt-km{color:var(--white);background:var(--olive-700);}

/* =============== Families =============== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.quote{padding:28px 28px 28px 0;}
.quote + .quote{padding-left:28px;border-left:1px solid var(--line);}
.quote blockquote{font-family:var(--font-display);font-size:var(--fs-3);line-height:1.45;color:var(--olive-900);}
.quote blockquote::before{content:"“";color:var(--mango-600);}
.quote blockquote::after{content:"”";color:var(--mango-600);}
.quote figcaption{margin-top:14px;font-size:var(--fs-1);color:var(--text-soft);}
.quote figcaption strong{display:block;font-size:var(--fs-2);color:var(--olive-900);}
@media (max-width:860px){
  .quotes{grid-template-columns:1fr;}
  .quote,.quote + .quote{padding:22px 0;border-left:none;}
  .quote + .quote{border-top:1px solid var(--line);}
}

/* =============== Order directly =============== */
.order-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.order-tile{display:flex;align-items:center;gap:14px;padding:18px;}
.order-text strong{display:block;font-weight:600;color:var(--olive-900);}
.order-text span{font-size:var(--fs-1);color:var(--text-soft);}
@media (max-width:980px){.order-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.order-grid{grid-template-columns:1fr;gap:10px;}}

@media (prefers-reduced-motion:reduce){
  .route-line::before,.route-node{animation:none;}
}