/* ============================================================
   MAYURI INTERNATIONAL FOODS | shared brand kit (prototype)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700&display=swap');

.mev-cmn{
  --cream: oklch(0.972 0.018 85);
  --forest: oklch(0.32 0.075 148);
  --forest-deep: oklch(0.22 0.06 148);
  --saffron: oklch(0.68 0.19 42);
  --gold: oklch(0.78 0.13 75);

  --bg: var(--cream);
  --fg: oklch(0.18 0.03 148);
  --card: oklch(1 0 0);
  --muted: oklch(0.45 0.03 148);
  --secondary: oklch(0.94 0.02 85);
  --border: oklch(0.88 0.02 85);

  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --radius: 1rem;
  --maxw: 1200px;
}

.mev-cmn *{ box-sizing:border-box; margin:0; padding:0; border-color:var(--border); }
.mev-cmn{ scroll-behavior:smooth; }
.mev-cmn,.mev-cmn{ overflow-x:clip; }
.mev-cmn{
  background:var(--bg); color:var(--fg); font-family:var(--font-sans);
  font-feature-settings:"ss01","cv11"; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.mev-cmn h1,.mev-cmn h2,.mev-cmn h3,.mev-cmn h4{ font-family:var(--font-serif); font-weight:500; letter-spacing:-0.02em; line-height:1.05; }
.mev-cmn img{ max-width:100%; display:block; }
.mev-cmn a{ color:inherit; text-decoration:none; }
.mev-cmn .serif{ font-family:var(--font-serif); }
.mev-cmn .italic{ font-style:italic; }
.mev-cmn .eyebrow{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.28em; color:var(--saffron); }
.mev-cmn .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

.mev-cmn .btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.9rem 1.6rem;
  font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease; border:1px solid transparent; }
.mev-cmn .btn-primary{ background:var(--forest); color:var(--cream); }
.mev-cmn .btn-primary:hover{ transform:translateY(-2px); }
.mev-cmn .btn-accent{ background:var(--saffron); color:var(--cream); }
.mev-cmn .btn-accent:hover{ transform:scale(1.03); }
.mev-cmn .btn-ghost{ border-color:var(--border); color:var(--forest); }
.mev-cmn .btn-ghost:hover{ background:var(--secondary); }

.mev-cmn .mk-topbar{ background:var(--forest-deep); color:oklch(0.9 0.02 85); font-size:.74rem; }
.mev-cmn .mk-topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:.55rem 1.5rem; gap:1rem; flex-wrap:wrap; }
.mev-cmn .mk-topbar a{ color:var(--gold); font-weight:600; }
.mev-cmn .mk-nav{ position:sticky; top:0; z-index:50; background:oklch(0.972 0.018 85 / .9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.mev-cmn .mk-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.5rem; }
.mev-cmn .mk-logo{ display:flex; align-items:baseline; gap:.5rem; }
.mev-cmn .mk-logo b{ font-family:var(--font-serif); font-size:1.5rem; font-weight:600; color:var(--forest); letter-spacing:-.02em; }
.mev-cmn .mk-logo span{ font-size:.6rem; text-transform:uppercase; letter-spacing:.25em; color:var(--muted); }
.mev-cmn .mk-links{ display:flex; gap:2rem; }
.mev-cmn .mk-links a{ font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:oklch(0.3 0.03 148 / .8); transition:color .2s; }
.mev-cmn .mk-links a:hover{ color:var(--forest); }
@media(max-width:860px){ .mev-cmn .mk-links{ display:none; } }

.mev-cmn .mk-footer{ background:var(--forest-deep); color:oklch(0.9 0.02 85 / .75); padding:3rem 0 2rem; font-size:.85rem; }
.mev-cmn .mk-footer .cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.mev-cmn .mk-footer h4{ color:var(--gold); font-family:var(--font-sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; margin-bottom:1rem; }
.mev-cmn .mk-footer a{ display:block; padding:.2rem 0; }
.mev-cmn .mk-footer a:hover{ color:var(--cream); }
.mev-cmn .mk-footer .base{ border-top:1px solid oklch(1 0 0 / .12); margin-top:2rem; padding-top:1.5rem; text-align:center; font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; }
@media(max-width:720px){ .mev-cmn .mk-footer .cols{ grid-template-columns:repeat(2,1fr); } }

.mev-cmn .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.mev-cmn .reveal.in{ opacity:1; transform:none; }
.mev-cmn .reveal.d1{ transition-delay:.08s;} .mev-cmn .reveal.d2{ transition-delay:.16s;} .mev-cmn .reveal.d3{ transition-delay:.24s;} .mev-cmn .reveal.d4{ transition-delay:.32s;}
@media(prefers-reduced-motion:reduce){ .mev-cmn .reveal{opacity:1;transform:none;} }

.mev-cmn .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }

/* ============================================================
   COMMUNITY PAGE
   ============================================================ */

/* ---------- 1. hero ---------- */
.mev-cmn .cm-hero{ position:relative; overflow:hidden; }
.mev-cmn .cm-hero .grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:3rem; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:3.5rem 1.5rem 4rem; }
.mev-cmn .crumb{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); margin-bottom:2.5rem; }
.mev-cmn .crumb a{ color:var(--saffron); font-weight:600; }
.mev-cmn .crumb i{ font-style:normal; margin:0 .5rem; opacity:.5; }
.mev-cmn .cm-hero h1{ font-size:clamp(2.5rem,4.6vw,3.9rem); color:var(--forest); margin:.9rem 0 1.4rem; max-width:12ch; }
.mev-cmn .cm-hero p{ color:var(--muted); max-width:38ch; margin-bottom:2rem; }
/* the photo runs off the right edge, as in the reference */
.mev-cmn .cm-hero .shot{ position:relative; }
.mev-cmn .cm-hero .shot img{ width:calc(100% + 50vw); max-width:none; height:clamp(320px,38vw,470px); object-fit:cover;
  border-radius:.5rem 0 0 .5rem; }
@media(max-width:900px){
  .mev-cmn .cm-hero .grid{ grid-template-columns:1fr; gap:2rem; padding-top:2rem; }
  .mev-cmn .cm-hero .shot img{ width:calc(100% + 3rem); height:280px; border-radius:.5rem; }
  .mev-cmn .cm-hero h1{ max-width:none; }
}

/* ---------- 2. commitment intro + 3. pillars ---------- */
.mev-cmn .cm-band{ background:var(--secondary); padding:4.5rem 0 0; text-align:center; }
.mev-cmn .cm-band h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); color:var(--forest); margin:.8rem 0 1.2rem; }
.mev-cmn .cm-band .lede{ color:var(--muted); max-width:62ch; margin:0 auto; }
/* Six across gave each pillar about 180px, which broke the copy into four and five word
   ribbons and left the headings ragged. Three across doubles the measure, so the text sets
   properly and every card lines up on a shared baseline. Cards are deliberately quiet:
   hairline border, soft radius, no drop shadow at rest. */
.mev-cmn .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
  max-width:var(--maxw); margin:0 auto; padding:2.6rem 1.5rem 3.6rem; }
.mev-cmn .pillar{ background:var(--card); border:1px solid var(--border); border-radius:.9rem;
  padding:2.1rem 1.9rem; text-align:center;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.mev-cmn .pillar:hover{ border-color:oklch(0.78 0.13 75 / .55); box-shadow:0 10px 28px -18px oklch(0.32 0.075 148 / .35); transform:translateY(-2px); }
.mev-cmn .pillar svg{ color:var(--saffron); margin:0 auto .9rem; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.mev-cmn .pillar:hover svg{ transform:translateY(-4px) scale(1.06); }
.mev-cmn .pillar h3{ font-size:1.06rem; color:var(--forest); line-height:1.25; margin-bottom:.55rem; }
.mev-cmn .pillar p{ font-size:.84rem; color:var(--muted); line-height:1.6; max-width:34ch; margin:0 auto; }
@media(max-width:900px){ .mev-cmn .pillars{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .mev-cmn .pillars{ grid-template-columns:1fr; } }

/* ---------- 4. featured events ---------- */
.mev-cmn .sec{ padding:4.5rem 0; }
.mev-cmn .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.2rem; }
.mev-cmn .sec-head h2{ font-size:clamp(1.7rem,2.8vw,2.25rem); color:var(--forest); margin-top:.6rem; }
.mev-cmn .sec-head .act{ display:flex; align-items:center; gap:1rem; flex:none; }
.mev-cmn .link-acc{ color:var(--saffron); font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:.45rem;
  transition:gap .25s ease; }
.mev-cmn .link-acc:hover{ gap:.8rem; }
.mev-cmn .arw{ width:38px; height:38px; border-radius:999px; border:1px solid var(--border); background:var(--card);
  display:grid; place-items:center; cursor:pointer; color:var(--forest); transition:.2s; }
.mev-cmn .arw:hover{ background:var(--forest); color:var(--cream); border-color:var(--forest); }

.mev-cmn .ev-rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.mev-cmn .ev{ background:var(--card); border:1px solid var(--border); border-radius:.55rem; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.mev-cmn .ev:hover{ transform:translateY(-6px); box-shadow:0 20px 44px -22px oklch(0.22 0.06 148 / .35); }
.mev-cmn .ev .ph{ aspect-ratio:16/10; overflow:hidden; background:var(--secondary); }
.mev-cmn .ev .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.mev-cmn .ev:hover .ph img{ transform:scale(1.05); }
.mev-cmn .ev .body{ padding:1.1rem 1.15rem 1.3rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.mev-cmn .ev h3{ font-size:1.02rem; color:var(--forest); font-family:var(--font-sans); font-weight:700; letter-spacing:0; line-height:1.3; margin-bottom:.35rem; }
.mev-cmn .ev .meta{ font-size:.82rem; color:var(--muted); }
.mev-cmn .ev .link-acc{ margin-top:auto; padding-top:.9rem; }
@media(max-width:1000px){ .mev-cmn .ev-rail{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){
  .mev-cmn .ev-rail{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem;
    scrollbar-width:none; }
  .mev-cmn .ev-rail::-webkit-scrollbar{ display:none; }
  .mev-cmn .ev{ scroll-snap-align:start; }
  .mev-cmn .sec-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
}

/* ---------- 5. moments mosaic ---------- */
/* One fixed row height for the whole strip, every tile fills it and crops. Columns are
   deliberately unequal widths for rhythm, so heights must be pinned rather than derived from
   an aspect ratio, otherwise each tile ends up a different height. */
.mev-cmn .mosaic{ display:grid; grid-template-columns:1.25fr 1fr 1fr 1.15fr 1fr; gap:.75rem; height:250px; }
.mev-cmn .mosaic figure{ overflow:hidden; border-radius:.4rem; background:var(--secondary); height:100%; }
.mev-cmn .mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.mev-cmn .mosaic figure:hover img{ transform:scale(1.06); }
.mev-cmn .mosaic .stack{ display:grid; grid-template-rows:1fr 1fr; gap:.75rem; height:100%; min-height:0; }
.mev-cmn .mosaic .stack figure{ min-height:0; }
.mev-cmn .gal-link{ display:flex; justify-content:center; margin-top:2rem; }
@media(max-width:900px){
  .mev-cmn .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; height:auto; }
  .mev-cmn .mosaic .stack{ grid-row:span 2; height:100%; }
}
@media(max-width:520px){ .mev-cmn .mosaic{ grid-template-columns:1fr; grid-auto-rows:190px; } }

/* ---------- 6. partners ---------- */
.mev-cmn .partners{ padding:.5rem 0 4rem; text-align:center; }
/* auto-fit tracks so the row stays even whatever number of logos is in the repeater, and the
   1px grid gap over a border-coloured background draws the dividers, which keeps working when
   the logos wrap onto a second row (nth-child border rules did not). */
.mev-cmn .plogos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; margin-top:1.8rem;
  border:1px solid var(--border); border-radius:.4rem; overflow:hidden; background:var(--border); }
.mev-cmn .plogo{ padding:1.4rem 1.1rem; background:var(--card); display:grid; place-items:center; min-height:126px;
  transition:background .25s ease; text-align:center; }
.mev-cmn .plogo:hover{ background:var(--secondary); }
/* Real logos sit in a fixed box and scale down to fit, so wildly different source dimensions
   (a 392x58 wordmark next to a square mark) still read at the same visual weight. */
/* Logos run in their real colours. Greyscaling them turned the detailed marks (the
   Maharashtra Mandal crest, the King County portrait) into mud, and these are real
   partners, so they should read as themselves. */
.mev-cmn .plogo img{ max-height:44px; max-width:100%; width:auto; object-fit:contain;
  opacity:.92; transition:opacity .3s ease, transform .3s ease; }
/* square/illustrative marks read smaller than wordmarks at the same height */
/* the crest marks are tall, so cap them low enough to clear the cell padding, otherwise
   the wordmark under the crest ran into the bottom edge */
.mev-cmn .plogo img.sq{ max-height:64px; }
.mev-cmn .plogo:hover img{ opacity:1; transform:scale(1.04); }
.mev-cmn .plogo.more{ font-family:var(--font-serif); font-size:.95rem; color:var(--muted); }
@media(max-width:620px){ .mev-cmn .plogos{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 7. impact band ---------- */
/* The two corner glow blobs read as visible dark squares against the forest band rather than
   as light, because a radial gradient still paints its whole box. Dropped. */
.mev-cmn .impact{ background:var(--forest-deep); color:var(--cream); padding:3.4rem 0; text-align:center; position:relative; overflow:hidden; }
.mev-cmn .impact .eyebrow{ color:var(--gold); }
.mev-cmn .impact h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin:.7rem 0 2.4rem; }
.mev-cmn .stats{ display:grid; grid-template-columns:repeat(5,1fr); position:relative; }
.mev-cmn .stat{ padding:0 1rem; border-left:1px solid oklch(1 0 0 / .16); }
.mev-cmn .stat:first-child{ border-left:0; }
.mev-cmn .stat svg{ color:var(--gold); margin:0 auto .7rem; }
.mev-cmn .stat .n{ font-family:var(--font-serif); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; line-height:1; }
.mev-cmn .stat .l{ font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; opacity:.72; margin-top:.55rem; line-height:1.5; }
@media(max-width:860px){ .mev-cmn .stats{ grid-template-columns:repeat(3,1fr); row-gap:2.2rem; }
  .mev-cmn .stat:nth-child(3n+1){ border-left:0; } }
@media(max-width:560px){ .mev-cmn .stats{ grid-template-columns:repeat(2,1fr); } .mev-cmn .stat{ border-left:0; } }

/* ---------- 8. get involved ----------
   Two contained columns inside the wrap, so the closing section shares the page's
   rhythm instead of running edge to edge. The quote is a pull quote inside the text
   column, which keeps the copy, the CTA and the quote on one vertical rhythm and
   removes the dead space the old floating card left above and below itself. */
.mev-cmn .involve{ padding:clamp(3.4rem,6vw,5rem) 0 clamp(4rem,7vw,5.6rem); }
.mev-cmn .iv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4.5vw,4.5rem); align-items:center; }
.mev-cmn .iv-media{ border-radius:var(--radius); overflow:hidden; background:var(--secondary); }
.mev-cmn .iv-media img{ width:100%; aspect-ratio:4/3.15; object-fit:cover; }
.mev-cmn .iv-body{ display:flex; flex-direction:column; align-items:flex-start; }
.mev-cmn .involve h2{ font-size:clamp(1.7rem,2.8vw,2.25rem); color:var(--forest); margin:.75rem 0 1rem; max-width:16ch; }
.mev-cmn .involve .lede-sm{ color:var(--muted); font-size:.95rem; margin-bottom:1.9rem; max-width:40ch; }
.mev-cmn .iv-quote{ position:relative; align-self:stretch; margin-top:clamp(2.2rem,3.4vw,3rem);
  padding:.2rem 0 .2rem 1.5rem; border-left:2px solid var(--gold); }
.mev-cmn .iv-quote blockquote{ font-family:var(--font-serif); font-size:clamp(1.15rem,1.5vw,1.42rem);
  line-height:1.34; color:var(--forest); max-width:22ch; position:relative; z-index:1; }
.mev-cmn .iv-quote figcaption{ font-size:.66rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--muted); margin-top:.85rem; position:relative; z-index:1; }
/* the old floating ornament read as a stray element in the gutter; the gold rule
   is enough to mark the quote */
.mev-cmn .iv-quote .flo{ display:none; }
@media(max-width:900px){
  .mev-cmn .iv-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .mev-cmn .iv-media img{ aspect-ratio:16/10; }
  .mev-cmn .iv-quote{ margin-top:2rem; }
}

/* ===== WordPress / Elementor overrides (not in the local prototype) =====
   Elementor's frontend.min.css resets `figure{margin:0}` at a higher specificity than the
   scoped rule, so the gap between the Get Involved button and the pull quote collapsed on the
   server while it looked correct locally. */
.mev-cmn .involve .iv-quote{ margin-top:clamp(2.2rem,3.4vw,3rem) !important; }