/* =========================================================
   MangoPedia — India's mango varieties (mangopedia.html)
   Built on the shared tokens in style.css. The "journey" meters
   are filled by main.js from each meter's data-km, so the bars
   stay proportional to the distance written beside them.
   ========================================================= */

/* ---- Region filter ---- */
.mp-filter{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 0 28px;padding:4px;background:var(--cream-100);border:1px solid var(--line);border-radius:var(--r-sm);}
.mp-filter button{padding:7px 14px;border-radius:4px;font-weight:600;color:var(--text-soft);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.mp-filter button:hover{color:var(--olive-800);}
.mp-filter button.active{background:var(--white);color:var(--olive-900);box-shadow:0 1px 2px rgba(43,36,24,.08);}
.mp-filter button:focus-visible{outline:3px solid var(--mango-400);outline-offset:2px;}

/* ---- Variety cards ---- */
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;}
@media (max-width:980px){.mp-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.mp-grid{grid-template-columns:1fr;}}

.mp-card{display:flex;flex-direction:column;overflow:hidden;}
.mp-card[hidden]{display:none;}
.mp-card:hover{border-color:var(--olive-300);}
.mp-ours{border:2px solid var(--olive-600);}

.mp-photo{margin:0;aspect-ratio:4/3;background:var(--cream-100);overflow:hidden;}
.mp-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease);}

#mallika .mp-photo img{object-position:center 38%;}

/* A drawn mango for a variety still waiting for its photograph. */
.mp-photo-drawn{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,var(--white),var(--cream-100) 70%);}
.mp-photo-drawn svg{width:62%;height:auto;}
.mp-photo-drawn .mp-fruit{stroke:var(--mango-400);stroke-width:1.5;}
.mp-photo-drawn .mp-shine{fill:var(--white);opacity:0.45;}
.mp-photo-drawn .mp-vein{fill:none;stroke:var(--olive-300);stroke-width:1.5;stroke-linecap:round;}
.mp-photo-drawn .mp-stalk{fill:none;stroke:var(--ink-500);stroke-width:4;stroke-linecap:round;}
.mp-photo-drawn .mp-leaf{fill:var(--olive-500);}

.mp-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;}
.mp-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;}
.mp-title h3{margin-right:auto;}
.mp-local{display:block;margin-top:4px;font-family:var(--font-devanagari);font-size:var(--fs-2);font-weight:500;color:var(--text-soft);letter-spacing:0;}
.mp-origin{font-size:var(--fs-2);font-weight:600;color:var(--olive-700);margin-bottom:16px;}
.mp-origin::before{content:"📍 ";}

.mp-facts{display:grid;gap:9px;margin:0 0 16px;}
.mp-facts div{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:baseline;}
.mp-facts dt{font-size:var(--fs-1);font-weight:600;color:var(--mango-800);}
.mp-facts dd{margin:0;font-size:var(--fs-2);color:var(--ink-700);line-height:1.5;}

.mp-note{font-size:var(--fs-2);color:var(--text-soft);line-height:1.55;border-left:3px solid var(--mango-300);padding-left:12px;margin-bottom:18px;}

/* ---- Journey to Delhi ---- */
.mp-journey{margin-top:auto;padding-top:16px;border-top:1px solid var(--hairline);}
.mp-route{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--fs-1);color:var(--text-soft);margin-bottom:6px;}
.mp-route strong{font-size:var(--fs-2);color:var(--ink-900);}
.mp-route-ours{margin-top:12px;}
.mp-route-ours span,.mp-route-ours strong{color:var(--olive-700);}
.mp-meter{height:6px;border-radius:var(--r-sm);background:var(--cream-100);overflow:hidden;}
.mp-meter span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--mango-300),var(--mango-600));transition:width 1.1s var(--ease);}
.mp-meter-ours span{background:linear-gradient(90deg,var(--olive-300),var(--olive-600));}
.mp-route-note{font-size:var(--fs-1);color:var(--text-soft);margin-top:10px;line-height:1.5;}

.mp-footnote{font-size:var(--fs-1);color:var(--text-soft);margin-top:24px;line-height:1.6;}

/* ---- Season calendar ---- */
.mp-calendar{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--line);padding:18px 22px 10px;overflow-x:auto;}
.mp-cal-row{
  display:grid;grid-template-columns:130px repeat(10,minmax(30px,1fr));align-items:center;
  min-width:620px;min-height:42px;border-bottom:1px solid var(--cream-100);
}
.mp-cal-row:last-child{border-bottom:0;}
.mp-cal-row > [role="rowheader"],.mp-cal-head > span:first-child{grid-column:1;font-weight:600;font-size:var(--fs-2);color:var(--ink-700);}
.mp-cal-head{min-height:34px;background:none;}
.mp-cal-head span{font-size:var(--fs-1);font-weight:600;color:var(--text-soft);}
.mp-cal-head > span:first-child{font-size:var(--fs-1);}
.mp-cal-month{grid-column:span 2;text-align:center;}
.mp-cal-bar{
  height:26px;border-radius:var(--r-sm);margin:0 2px;padding:0 12px;display:flex;align-items:center;
  background:linear-gradient(90deg,var(--mango-300),var(--mango-500));color:var(--mango-900);
  font-size:var(--fs-1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mp-cal-ours > [role="rowheader"]{color:var(--olive-800);}
.mp-cal-ours > [role="rowheader"]::after{content:" ●";color:var(--olive-500);font-size:var(--fs-1);vertical-align:middle;}
.mp-cal-ours .mp-cal-bar{background:linear-gradient(90deg,var(--olive-300),var(--olive-500));color:var(--white);}

/* Bars are placed by half-month: 1 = early April … 10 = late August.
   Column 1 holds the variety name, so each index is offset by one. */
.from-1{grid-column-start:2}.from-2{grid-column-start:3}.from-3{grid-column-start:4}.from-4{grid-column-start:5}
.from-5{grid-column-start:6}.from-6{grid-column-start:7}.from-7{grid-column-start:8}.from-8{grid-column-start:9}
.from-9{grid-column-start:10}.from-10{grid-column-start:11}
.to-2{grid-column-end:3}.to-3{grid-column-end:4}.to-4{grid-column-end:5}.to-5{grid-column-end:6}.to-6{grid-column-end:7}
.to-7{grid-column-end:8}.to-8{grid-column-end:9}.to-9{grid-column-end:10}.to-10{grid-column-end:11}.to-11{grid-column-end:12}

/* ---- Why the journey matters ---- */
.mp-journey-story{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){.mp-journey-story{grid-template-columns:1fr;gap:36px;}}
.mp-story-text .eyebrow{margin-bottom:16px;}
.mp-story-text h2{margin-bottom:18px;}
.mp-story-text p{color:var(--text-soft);margin-bottom:14px;max-width:60ch;}
.mp-story-text .btn-row{margin-top:24px;}

.mp-steps-caption{font-size:var(--fs-1);font-weight:600;color:var(--text-soft);margin-bottom:14px;}
.mp-story-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:14px;}
.mp-story-steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--cream-200);}
.mp-story-steps li{
  position:relative;display:grid;grid-template-columns:44px 1fr;gap:2px 14px;align-items:center;
  background:var(--white);border-radius:var(--r-md);border:1px solid var(--line);padding:14px 18px 14px 10px;
}
.mp-story-steps li::before{
  content:"";grid-row:1 / span 2;width:14px;height:14px;margin-left:15px;border-radius:50%;
  background:var(--mango-400);box-shadow:0 0 0 5px var(--mango-100);
}
.mp-story-steps strong{font-size:var(--fs-1);font-weight:600;color:var(--mango-800);}
.mp-story-steps span{font-size:var(--fs-2);color:var(--ink-700);}

/* ---- Photo credits ---- */
.mp-credits{max-width:780px;margin:0 auto;font-size:var(--fs-1);color:var(--text-soft);}
.mp-credits summary{cursor:pointer;font-weight:600;color:var(--olive-700);text-align:center;}
.mp-credits p{margin:12px 0 8px;}
.mp-credits ul{padding-left:18px;display:grid;gap:4px;}
.mp-credits a{color:var(--olive-700);text-decoration:underline;text-underline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  .mp-meter span,.mp-photo img{transition:none;}
  .mp-card:hover{transform:none;}
  .mp-card:hover .mp-photo img{transform:none;}
}