/* ============================================================================
 * groups.css — Community Groups page redesign. Loaded only on /groups via
 * $extra_head. Scoped under `.mgc-groups` so generic class names can't leak
 * into / be clobbered by main.css. Mirrors the preview-22 mockup with the
 * REAL data the site has (no stock photos — fall back to scope-icon
 * gradients on group cards that lack a cover_filename).
 * ========================================================================== */

.mgc-groups {
  --paper:#fff; --soft:#fbf8f1; --ink:#153826; --muted:#697166;
  /* Bumped .12 → .22 so card edges read clearly against the cream page bg. */
  --line:rgba(21,56,38,.22); --green:#123f29; --green2:#1f6b42;
  --sage:#e8f3e5; --gold:#d7a443; --goldsoft:#fff4db; --orange:#9b4318;
  --shadow:0 20px 50px rgba(19,42,28,.13);
  --shadow-soft:0 12px 30px rgba(19,42,28,.10);
  --r:24px;
  --font-serif:'Playfair Display', Georgia, serif;

  width:min(1360px, calc(100% - 80px));
  margin:0 auto;
  padding:92px 0 72px !important;     /* clears fixed nav (~89px) + breathing */
  color:var(--ink);
}
.mgc-groups *{box-sizing:border-box}
.mgc-groups a{text-decoration:none;color:inherit}
.mgc-groups button,.mgc-groups input{font:inherit}

/* ─── Kill main.css leaks ───
 * main.css line 75 ships `.hero { min-height: 100vh; padding: 8rem 4rem 5rem;
 * display: grid; grid-template-columns: 1fr 1fr }` which inflates this hero
 * to viewport-height and forces a 50/50 split. main.css also adds 6rem
 * padding to every <section>. Override both — and force `align-items:start`
 * so the engagement card sizes to its own content instead of stretching to
 * match the hero. */
.mgc-groups section{padding:0 !important;margin:0 !important;height:auto !important}
.mgc-groups .hero{
  min-height:0 !important;
  padding:0 !important;
  height:auto !important;
  align-items:start !important;
}

/* ────────────────────── Buttons ────────────────────── */
.mgc-groups .btn{
  border:0;border-radius:999px;padding:11px 17px;font-weight:850;font-size:13.5px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;transition:.18s ease;font-family:inherit;text-decoration:none;
}
.mgc-groups .btn:hover{transform:translateY(-1px)}
.mgc-groups .btn.primary{background:var(--green);color:#fff;box-shadow:0 10px 20px rgba(18,63,41,.18)}
.mgc-groups .btn.primary:hover{background:var(--green2)}
.mgc-groups .btn.light{background:#fff;color:var(--green);border:1px solid var(--line)}
.mgc-groups .btn.light:hover{background:#fff}

/* ────────────────────── Hero ────────────────────── */
.mgc-groups .hero{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;
  align-items:start;margin-bottom:22px !important;
}
/* both cards size to their own content — no stretching */
.mgc-groups .hero-card{
  position:relative;overflow:hidden;border-radius:var(--r);
  /* Dark green gradient + radial leaf glow — no stock photo dependency. */
  background:
    radial-gradient(circle at 88% 18%, rgba(184,218,131,.18), transparent 18rem),
    radial-gradient(circle at 12% 88%, rgba(184,218,131,.10), transparent 18rem),
    linear-gradient(135deg,#0e3322 0%,#14492f 55%,#1a6440 100%);
  color:#fff;padding:38px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;justify-content:center;
}
.mgc-groups .hero-card:before{
  content:"";position:absolute;right:-70px;bottom:-90px;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,218,131,.18),transparent 68%);
}
.mgc-groups .eyebrow{
  display:flex;align-items:center;gap:10px;text-transform:uppercase;
  letter-spacing:.16em;color:#cde486;font-size:11.5px;font-weight:900;
  margin-bottom:14px;position:relative;z-index:1;
}
.mgc-groups .eyebrow:before{content:"";width:38px;height:2px;background:currentColor;border-radius:99px}
.mgc-groups .hero-card h1{
  margin:0;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(40px,5.5vw,68px);line-height:.96;letter-spacing:-.055em;
  max-width:800px;position:relative;z-index:1;color:#fff;
}
.mgc-groups .hero-card h1 span{font-style:italic;color:#b8da83;font-weight:500}
.mgc-groups .hero-card .copy{
  margin:18px 0 0;max-width:780px;color:rgba(255,255,255,.86);
  font-size:16px;line-height:1.7;position:relative;z-index:1;
}
.mgc-groups .hero-actions{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:1;
}
.mgc-groups .hero-actions .btn.light{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.18);
}
.mgc-groups .hero-actions .btn.light:hover{background:rgba(255,255,255,.20)}

/* ────────────────────── Cards ────────────────────── */
.mgc-groups .card,
.mgc-groups .panel,
.mgc-groups .side-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-soft);padding:32px 34px;
}
.mgc-groups .card{display:grid;gap:18px;align-content:start}
.mgc-groups .card h2,
.mgc-groups .panel h2,
.mgc-groups .side-card h3{
  margin:0 0 6px;font-family:var(--font-serif);font-weight:700;
  font-size:26px;letter-spacing:-.04em;color:var(--green);
}
.mgc-groups .card p,
.mgc-groups .sub,
.mgc-groups .side-card p{
  margin:0;color:var(--muted);line-height:1.55;font-size:14px;
}

/* Stats grid in the engagement card */
.mgc-groups .stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mgc-groups .stat{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;
}
.mgc-groups .stat strong{
  display:block;font-family:var(--font-serif);font-size:26px;line-height:1;
  letter-spacing:-.03em;margin-bottom:4px;color:var(--green);
}
.mgc-groups .stat span{color:var(--muted);font-size:11.5px;font-weight:700}

/* Featured group spotlight (inside engagement card) */
.mgc-groups .spotlight{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff}
.mgc-groups .spotlight-img{
  height:110px;
  background:linear-gradient(135deg,#9aca6a,#3d7849);
  display:grid;place-items:center;font-size:42px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.mgc-groups .spotlight-body{padding:18px 20px}
.mgc-groups .spotlight-body strong{display:block;font-size:15.5px;margin-bottom:4px;color:var(--green)}
.mgc-groups .spotlight-body span{color:var(--muted);font-size:13px;line-height:1.45}

/* ────────────────────── Layout (main + sidebar) ────────────────────── */
.mgc-groups .layout{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;
}
.mgc-groups .main{display:grid;gap:20px;min-width:0}
.mgc-groups .side{display:grid;gap:16px;position:sticky;top:100px;min-width:0}

/* Section panel header (Discover groups, Upcoming events, Live activity) */
.mgc-groups .head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:20px;
}
.mgc-groups .head h2{margin:0;font-size:28px}

/* Toolbar (search + sort) */
.mgc-groups .toolbar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-bottom:18px;
}
.mgc-groups .search{
  height:48px;display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:0 16px;
  box-shadow:var(--shadow-soft);color:var(--muted);
}
.mgc-groups .search input{border:0;outline:0;background:transparent;width:100%;color:var(--ink);font-size:14px}

/* Filter chip row */
.mgc-groups .filter-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.mgc-groups .chip{
  height:36px;border-radius:99px;border:1px solid var(--line);background:#fff;
  color:#4a5449;padding:0 14px;font-weight:850;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:.15s ease;
  font-family:inherit;
}
.mgc-groups .chip:hover{background:#fafdf5;border-color:rgba(31,107,66,.18)}
.mgc-groups .chip.active{background:var(--green);border-color:var(--green);color:#fff}

/* ────────────────────── Group grid ────────────────────── */
.mgc-groups .group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mgc-groups .group-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-soft);transition:.18s ease;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
}
.mgc-groups .group-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mgc-groups .group-img{
  height:130px;position:relative;background-size:cover;background-position:center;
}
.mgc-groups .group-img.fallback{
  display:grid;place-items:center;font-size:54px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.20);
}
.mgc-groups .group-img.fallback.place   {background:linear-gradient(135deg,#4d7ea4,#23527c)}
.mgc-groups .group-img.fallback.produce {background:linear-gradient(135deg,#9aca6a,#3d7849)}
.mgc-groups .badge{
  position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--green);
  font-size:11.5px;font-weight:900;backdrop-filter:blur(6px);
}
.mgc-groups .badge.joined{background:var(--sage);color:var(--green);left:auto;right:12px}
.mgc-groups .group-body{padding:20px 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.mgc-groups .group-body h3{
  margin:0;font-family:var(--font-serif);font-weight:700;
  font-size:19px;letter-spacing:-.03em;color:var(--ink);line-height:1.25;
}
.mgc-groups .group-body p{
  margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;
  /* clamp to 2 lines */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mgc-groups .group-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.mgc-groups .mini{
  display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;
  border-radius:99px;background:var(--soft);border:1px solid rgba(21,56,38,.10);
  font-size:11.5px;font-weight:800;color:#405143;
}
.mgc-groups .group-actions{display:flex;gap:9px;margin-top:auto;padding-top:10px}
.mgc-groups .group-actions .btn{padding:10px 14px;font-size:12.5px;flex:1}

/* ────────────────────── Empty-upgrade panel ────────────────────── */
.mgc-groups .empty-upgrade{
  display:grid;grid-template-columns:1fr 220px;gap:22px;align-items:center;
  background:
    radial-gradient(circle at 92% 18%,rgba(184,216,142,.22),transparent 12rem),
    linear-gradient(180deg,#fff,#fcfaf6);
  border:1px dashed rgba(21,56,38,.22);border-radius:22px;padding:28px 30px;
}
.mgc-groups .empty-upgrade h3{
  margin:0 0 6px;font-family:var(--font-serif);font-weight:700;
  font-size:24px;letter-spacing:-.04em;color:var(--green);
}
.mgc-groups .empty-upgrade p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}
.mgc-groups .empty-graphic{
  height:140px;border-radius:18px;
  background:linear-gradient(135deg,#fcd9a3 0%,#e88c3a 100%);
  display:grid;place-items:center;color:#fff;font-size:42px;
  text-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* ────────────────────── Events grid ────────────────────── */
.mgc-groups .events{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mgc-groups .event-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  box-shadow:var(--shadow-soft);
}
.mgc-groups .date{
  width:52px;height:52px;border-radius:14px;background:var(--sage);color:var(--green);
  display:grid;place-items:center;font-weight:900;margin-bottom:10px;text-align:center;
  line-height:1;
}
.mgc-groups .date small{display:block;font-size:10px;text-transform:uppercase;margin-top:3px}
.mgc-groups .event-card h3{
  margin:0 0 6px;font-family:var(--font-serif);font-weight:700;
  font-size:16px;letter-spacing:-.02em;color:var(--ink);
}
.mgc-groups .event-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

/* ────────────────────── Activity feed ────────────────────── */
.mgc-groups .activity{display:grid;gap:12px}
.mgc-groups .activity-item{
  display:grid;grid-template-columns:40px 1fr auto;gap:13px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
}
.mgc-groups .activity-icon{
  width:40px;height:40px;border-radius:13px;background:var(--sage);color:var(--green);
  display:grid;place-items:center;font-size:17px;
}
.mgc-groups .activity-item strong{display:block;font-size:13.5px;margin-bottom:3px;color:var(--ink)}
.mgc-groups .activity-item span{color:var(--muted);font-size:12.5px}
.mgc-groups .activity-time{color:var(--muted);font-size:11.5px;font-weight:800}

/* ────────────────────── Right-rail side cards ────────────────────── */
.mgc-groups .side-card{border-radius:20px;padding:24px 26px}
.mgc-groups .side-card h3{font-size:21px}
.mgc-groups .side-list{display:grid;gap:11px;margin-top:16px}
.mgc-groups .side-item{
  display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;padding:14px 16px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
}
.mgc-groups .side-icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--sage);color:var(--green);font-size:16px;
}
.mgc-groups .side-item strong{display:block;margin-bottom:3px;font-size:13.5px;color:var(--ink)}
.mgc-groups .side-item span{display:block;color:var(--muted);font-size:12px;line-height:1.45}

.mgc-groups .side-card.promo{
  background:
    radial-gradient(circle at 90% 20%,rgba(184,216,142,.20),transparent 9rem),
    linear-gradient(180deg,#fffdf5,#fff7e3);
  border-color:rgba(215,164,67,.28);
}

/* Leaderboard */
.mgc-groups .leaderboard{display:grid;gap:11px;margin-top:16px}
.mgc-groups .rank{
  display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;
  padding:13px 15px;border-radius:12px;background:#fff;border:1px solid var(--line);
}
.mgc-groups .rank-num{
  width:30px;height:30px;border-radius:50%;background:var(--goldsoft);color:#806018;
  display:grid;place-items:center;font-weight:900;font-size:13px;
}
.mgc-groups .rank strong{display:block;font-size:13.5px;color:var(--ink)}
.mgc-groups .rank span{color:var(--muted);font-size:11.5px;display:block}
.mgc-groups .rank .emoji{font-size:18px}

/* Note callout (gold) */
.mgc-groups .note{
  padding:18px 22px;border-radius:16px;background:#fff8e8;border:1px solid rgba(215,164,67,.24);
  color:#5d4b20;font-size:13px;line-height:1.6;
}
.mgc-groups .note strong{color:var(--green)}

/* Crumb (back link) */
.mgc-groups .crumb{
  display:inline-flex;align-items:center;gap:7px;color:var(--green2);
  font-weight:800;margin-bottom:12px;font-size:13.5px;
}

/* ────────────────────── Responsive ────────────────────── */
@media (max-width: 1180px){
  .mgc-groups .hero{grid-template-columns:1fr}
  .mgc-groups .layout{grid-template-columns:1fr}
  .mgc-groups .side{position:static}
  .mgc-groups .group-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 820px){
  .mgc-groups{width:min(100% - 24px, 1360px);padding:88px 0 60px !important}
  .mgc-groups .hero-card{padding:26px 22px}
  .mgc-groups .card,
  .mgc-groups .panel{padding:24px 22px}
  .mgc-groups .side-card{padding:20px 22px}
  .mgc-groups .group-body{padding:18px 20px}
  .mgc-groups .stat-grid,
  .mgc-groups .toolbar,
  .mgc-groups .empty-upgrade,
  .mgc-groups .events{grid-template-columns:1fr}
  .mgc-groups .head{flex-direction:column}
  .mgc-groups .group-grid{grid-template-columns:1fr}
  .mgc-groups .empty-graphic{display:none}
}
@media (max-width: 560px){
  .mgc-groups .hero-card h1{font-size:38px}
  .mgc-groups .hero-actions,
  .mgc-groups .group-actions{flex-direction:column}
  .mgc-groups .hero-actions .btn,
  .mgc-groups .group-actions .btn{width:100%}
}