/* ============================================================================
 * discover.css — Discover page redesign (light cream/sage theme).
 *
 * Loaded only on /discover via $extra_head. Scoped under `.mgc-discover` so
 * the generic class names can't leak into / be clobbered by main.css.
 * Tokens live on the wrapper. Fonts reuse the site's Playfair/DM Sans.
 *
 * IMPORTANT: explicitly resets main.css `.hero { min-height: 100vh; padding:
 * 8rem 4rem 5rem }` which was leaking via the shared class name (same root
 * cause we just fixed on dashboard/garden/feed/listing-new/assistant).
 * ========================================================================== */

.mgc-discover {
  --paper:#fff; --paper-soft:#fbf8f1; --ink:#142f21; --muted:#687164;
  --line:rgba(20,47,33,.12); --line-soft:rgba(20,47,33,.07);
  --green:#123f29; --green-2:#1f6b42; --sage:#e8f3e5; --sage-2:#dcebd6;
  --gold:#d6a227; --gold-soft:#fff4d8;
  --blue:#2868d8; --blue-soft:#eef5ff;
  --red:#d74b44; --red-soft:#fff0ef;
  --shadow:0 18px 44px rgba(18,42,28,.08);
  --shadow-soft:0 8px 22px rgba(18,42,28,.06);
  --font-serif:'Playfair Display', Georgia, "Times New Roman", serif;

  /* Reset the leaking marketing-page .hero (children get this too via the
     scoped selectors below). */
  min-height:0;
  background:
    radial-gradient(circle at top left, rgba(185,216,142,.18), transparent 24rem),
    radial-gradient(circle at top right, rgba(215,164,67,.10), transparent 24rem),
    #f7f4ec;
  color:var(--ink);
  padding-bottom:32px;
}
.mgc-discover *{box-sizing:border-box}
.mgc-discover a{color:inherit;text-decoration:none}

/* Kill the leaking main.css `section { padding: 6rem 4rem }` (line 288) —
   it's a marketing-landing rule that targets every <section> on the page
   and was adding 96px top/bottom + 64px sides to .trust-row, .map-card,
   .stat-strip (everything except .hero, which has its own !important
   override above). Same root cause as the .hero{min-height:100vh} leak. */
.mgc-discover section{padding:0}

/* ---- HERO override (kill main.css 100vh + 8rem padding). Aggressive
       tightening: less internal padding, smaller headline, tighter lede.
       Top padding is 90px because the site's #mainNav is position:fixed
       (~74px tall) and the hero is the first content on the page — without
       this, the h1 sits underneath the nav. ---- */
.mgc-discover .hero{
  min-height:0 !important;
  /* 96px top = ~74px fixed nav + 22px breathing room (mockup uses 48px on a
     no-nav page; we add ~48px more for the fixed nav). */
  padding:96px 18px 36px !important;
  display:block !important;
  grid-template-columns:none !important;
  align-items:initial !important;
  gap:0 !important;
  position:relative;
  overflow:hidden;
  border-radius:0 0 32px 32px;
  margin:0;
  text-align:center;
  background:
    radial-gradient(circle at 12% 50%, rgba(129,166,92,.16), transparent 18rem),
    radial-gradient(circle at 92% 28%, rgba(129,166,92,.17), transparent 17rem),
    linear-gradient(180deg, #fbfcf6 0%, #f4f4e8 100%);
  border-bottom:1px solid var(--line);
}

/* ---- Decorative botanicals + faint city silhouette (purely visual,
        pointer-events:none so they never block hero buttons). Positions
        mirror the preview (9).html mockup, but the leaf-left top is
        pushed down to ~70px below the nav-clearance so the leaves don't
        crowd the headline on the live page (mockup has no fixed nav). ---- */
.mgc-discover .leaf-deco{position:absolute;opacity:.55;pointer-events:none;z-index:0}
.mgc-discover .leaf-left{left:25px;top:120px;width:140px;height:220px;transform:rotate(-20deg)}
.mgc-discover .leaf-right{right:28px;top:94px;width:160px;height:230px;transform:rotate(14deg)}
.mgc-discover .leaf-shape{
  position:absolute;width:75px;height:128px;border-radius:90% 0 90% 0;
  background:linear-gradient(145deg,#4d7b45,#a3bf87);opacity:.9;
}
.mgc-discover .leaf-left .leaf-shape:nth-child(1){left:0;top:0;transform:rotate(22deg)}
.mgc-discover .leaf-left .leaf-shape:nth-child(2){left:55px;top:50px;width:52px;height:84px;transform:rotate(72deg)}
.mgc-discover .leaf-left .leaf-shape:nth-child(3){left:76px;top:100px;width:42px;height:66px;transform:rotate(105deg)}
.mgc-discover .leaf-right .leaf-shape:nth-child(1){right:0;top:18px;transform:rotate(12deg)}
.mgc-discover .leaf-right .leaf-shape:nth-child(2){right:72px;top:0;width:42px;height:68px;transform:rotate(42deg)}
.mgc-discover .leaf-right .leaf-shape:nth-child(3){right:42px;top:116px;width:45px;height:74px;transform:rotate(120deg)}

.mgc-discover .city-lines{
  position:absolute;right:90px;bottom:18px;width:210px;height:110px;opacity:.14;
  border-bottom:3px solid #799465;border-left:3px solid #799465;border-radius:5px;
  pointer-events:none;z-index:0;
}
.mgc-discover .city-lines::before,
.mgc-discover .city-lines::after{
  content:"";position:absolute;bottom:0;width:42px;
  border:3px solid #799465;border-bottom:0;border-radius:6px 6px 0 0;
}
.mgc-discover .city-lines::before{height:74px;right:28px}
.mgc-discover .city-lines::after{height:50px;right:82px}

/* Hide decorations on small screens — they crowd the headline and the
   leaf-right would overlap the stacked hero-actions. */
@media (max-width:720px){
  .mgc-discover .leaf-deco,
  .mgc-discover .city-lines{display:none}
}

.mgc-discover .hero-inner{position:relative;z-index:1;width:min(920px, calc(100% - 28px));margin:0 auto}
.mgc-discover .hero h1{
  margin:0;font-family:var(--font-serif);font-size:clamp(36px,5.2vw,64px);
  line-height:.98;letter-spacing:-.05em;color:var(--ink);
}
.mgc-discover .hero h1 em{color:#789d50;font-style:italic;font-weight:500}
.mgc-discover .hero p.lede{
  margin:18px auto 0;max-width:760px;color:#3e483d;
  font-size:clamp(15px,1.4vw,18px);line-height:1.55;font-weight:600;
}
.mgc-discover .hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:24px}

.mgc-discover .btn{
  border:0;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;font-weight:850;padding:13px 22px;transition:.18s ease;white-space:nowrap;text-decoration:none;
  font-size:14px;
}
.mgc-discover .btn:hover{transform:translateY(-1px)}
.mgc-discover .btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 22px rgba(18,63,41,.20)}
.mgc-discover .btn-light{background:rgba(255,255,255,.82);color:var(--green);border:1px solid rgba(18,63,41,.18)}

/* ---- trust row ----
   Flex (not grid) so each cell hugs its own content width — a 4-col grid
   leaves ~60px of dead space inside each cell because the content is shorter
   than 1fr. Flex + center + wrap groups them tightly under the headline. */
.mgc-discover .trust-row{
  position:relative;z-index:1;width:min(960px,calc(100% - 36px));margin:18px auto 0;
  display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;text-align:left;
}
.mgc-discover .trust-cell{display:flex;align-items:center;gap:12px}
.mgc-discover .trust-icon{
  width:52px;height:52px;border-radius:14px;
  /* line-height matched to height + text-align center is the most reliable
     way to vertically/horizontally center emoji glyphs — flex/grid centering
     can leave them offset because emoji baselines aren't standardized. */
  display:block;line-height:52px;text-align:center;
  background:rgba(255,255,255,.85);border:1px solid var(--line);
  font-size:32px;flex:0 0 auto;
  box-shadow:0 2px 6px rgba(18,42,28,.05);
}
.mgc-discover .trust-cell strong{display:block;font-size:15px;margin-bottom:3px;color:var(--ink);font-weight:700;line-height:1.2}
/* Scope this to the SUBTITLE span only (inside the inner div). A bare
   `.trust-cell span` would also match `.trust-icon` (which is a span)
   and override its 32px emoji size with this 13px text size — the bug
   that was making the icons render tiny. */
.mgc-discover .trust-cell > div > span{display:block;color:var(--muted);font-size:13px;font-weight:600;line-height:1.3}

/* ---- page container (below hero) ---- */
.mgc-discover .page{width:min(1320px, calc(100% - 36px));margin:0 auto;padding:10px 0 0}

/* ---- map card wrapper (keeps the existing discovery-map.php partial intact;
   this just gives the OUTER wrapper a cleaner look). ---- */
.mgc-discover .map-card{
  background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden;margin:0 0 10px;
}

/* ---- stat strip (per preview (10).html — larger, more prominent) ---- */
.mgc-discover .stat-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 28px;
  background:linear-gradient(180deg, rgba(248,252,243,.92), rgba(241,247,237,.92));
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;
}
.mgc-discover .stat-box{
  display:flex;align-items:center;gap:14px;padding:20px 28px;border-right:1px solid var(--line-soft);
}
.mgc-discover .stat-box:last-child{border-right:0}
.mgc-discover .stat-number{
  font-size:40px;font-weight:850;color:var(--green);letter-spacing:-.05em;line-height:1;flex:0 0 auto;
}
.mgc-discover .stat-text strong{display:block;font-size:13px;margin-bottom:3px}
.mgc-discover .stat-text span{display:block;color:var(--muted);font-size:12px}

/* ---- section header (Fresh finds) — larger headline + breathing room ---- */
.mgc-discover .section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px;flex-wrap:wrap;
}
.mgc-discover .section-title{display:flex;align-items:flex-start;gap:12px}
.mgc-discover .section-title .leaf{font-size:22px;margin-top:2px}
.mgc-discover .section-title h2{
  margin:0;font-family:var(--font-serif);font-size:30px;line-height:1;letter-spacing:-.04em;
}
.mgc-discover .section-title p{margin:8px 0 0;color:var(--muted);font-size:14px;font-weight:600}

/* sort controls + view toggle on the right side of section-head */
.mgc-discover .sort-controls{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;font-weight:700}
.mgc-discover .view-toggle{
  height:36px;border:1px solid var(--line);background:#fff;border-radius:999px;
  display:flex;align-items:center;overflow:hidden;
}
.mgc-discover .view-toggle button{
  width:42px;height:36px;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:14px;
}
.mgc-discover .view-toggle button.active{background:var(--green);color:#fff}

/* ---- spot cards grid — generous spacing per mockup ---- */
.mgc-discover .cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:12px}
.mgc-discover .spot-card{
  background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:15px;
  box-shadow:var(--shadow-soft);padding:18px;min-height:235px;display:flex;flex-direction:column;
  transition:.18s ease;
}
.mgc-discover .spot-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.mgc-discover .spot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:13px}
.mgc-discover .spot-icon{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:var(--sage);font-size:28px;overflow:hidden;flex:0 0 auto;
}
.mgc-discover .spot-icon img{width:100%;height:100%;object-fit:cover}
.mgc-discover .badge{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;
  background:#eef7ef;color:var(--green-2);font-size:11px;font-weight:850;white-space:nowrap;
}
.mgc-discover .badge.gold{background:var(--gold-soft);color:#8b6110}
.mgc-discover .badge.blue{background:var(--blue-soft);color:#285b9d}
.mgc-discover .badge.red{background:var(--red-soft);color:#bb423d}
.mgc-discover .spot-card h3{margin:0 0 8px;font-size:19px;letter-spacing:-.03em;line-height:1.14}
.mgc-discover .meta{color:var(--muted);font-size:13px;line-height:1.55}
.mgc-discover .meta strong{color:var(--ink)}
.mgc-discover .season{color:#9a4b1f;font-weight:800;font-size:13px}
.mgc-discover .note{
  margin-top:14px;padding:12px;border-radius:10px;background:#f6f2eb;
  color:#2f3b30;font-size:13px;line-height:1.45;
}
.mgc-discover .card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:16px}
.mgc-discover .save-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--muted);cursor:pointer;font-size:14px;
}
.mgc-discover .small-btn{
  border:1px solid var(--line);background:#fff;color:var(--green);padding:8px 14px;
  border-radius:10px;font-size:13px;font-weight:850;cursor:pointer;text-decoration:none;
}
.mgc-discover .small-btn.green{background:#eff8ef;border-color:rgba(31,107,66,.32)}

/* ---- load-more ---- */
.mgc-discover .load-more{display:flex;justify-content:center;margin:28px 0 0}
.mgc-discover .load-more .btn{min-width:270px;background:#fff;color:var(--green);border:1px solid rgba(31,107,66,.28)}

/* ---- guest pill ---- */
.mgc-discover .guest-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,243,189,.85);
  border:1px solid rgba(214,162,39,.30);border-radius:100px;color:#5b4a21;font-size:13px;
  font-weight:600;margin-top:12px;
}
.mgc-discover .guest-pill a{color:var(--green);text-decoration:underline;font-weight:700}

/* ---- responsive ---- */
@media (max-width:1120px){
  /* trust-row is already flex+wrap, so it just wraps naturally on narrower
     screens — no grid-template override needed. */
  .mgc-discover .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mgc-discover .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .mgc-discover .page{width:min(100% - 20px,1320px)}
  .mgc-discover .hero{padding:88px 16px 28px !important}
  .mgc-discover .trust-row{flex-direction:column;align-items:stretch;gap:12px;margin-top:14px}
  .mgc-discover .hero-actions{flex-direction:column;align-items:stretch}
  .mgc-discover .stat-strip,.mgc-discover .cards-grid{grid-template-columns:minmax(0,1fr)}
  .mgc-discover .stat-box{border-right:0;border-bottom:1px solid var(--line-soft)}
  .mgc-discover .stat-box:last-child{border-bottom:0}
  .mgc-discover .section-head{align-items:flex-start;flex-direction:column}
}
@media (max-width:480px){
  .mgc-discover .hero h1{font-size:32px}
  .mgc-discover .hero p.lede{font-size:14px}
}