/* ═══════════════════════════════════════════════════════════════
   Mantras section — cool-toned visual identity
   Loaded IN ADDITION TO style.css on /mantras/** pages only.
   Distinct from the warm editorial palette used elsewhere on the
   site: this section is the "practice" entry point, not the library.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --m-teal:    #0F6E56;
  --m-teal-lt: #E1F5EE;
  --m-teal-mid:#5DCAA5;
  --m-blue:    #185FA5;
  --m-blue-lt: #E6F1FB;
  --m-blue-mid:#85B7EB;
  --m-purple:  #534AB7;
  --m-purple-lt:#EEEDFE;
  --m-purple-mid:#AFA9EC;
  --m-pink:    #A21CAF;
  --m-pink-lt: #FBEAFB;
  --m-pink-mid:#E879F9;
  --m-coral:   #0E7490;
  --m-coral-lt:#E5F4F8;
  --m-coral-mid:#67C4DB;
  --m-amber:   #4338CA;
  --m-amber-lt:#ECEBFC;
  --m-amber-mid:#A5A0EE;
}

/* ── Hub hero — the one gradient in the whole site ─────────────── */
.m-hero{
  max-width:var(--max-w);margin:0 auto;padding:32px 24px 28px;
}
.m-hero-band{
  background:linear-gradient(135deg,var(--m-teal) 0%,var(--m-blue) 100%);
  border-radius:16px;padding:32px 28px;color:#fff;
}
.m-hero-skt{font-size:14px;color:var(--m-teal-lt);font-weight:600;margin-bottom:6px;letter-spacing:.02em;}
.m-hero-title{font-size:clamp(28px,5vw,38px);font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.02em;}
.m-hero-deck{font-size:15px;color:var(--m-blue-mid);max-width:520px;line-height:1.6;}
.m-hero-stats{display:flex;gap:28px;margin-top:20px;}
.m-hero-stat-n{font-size:26px;font-weight:800;color:#fff;line-height:1;}
.m-hero-stat-l{font-size:11px;color:var(--m-teal-lt);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;}

/* ── Canonical definition (reuses site pattern, cool accent) ───── */
.m-def{max-width:var(--max-w);margin:0 auto;padding:20px 24px;}
.m-def-inner{background:var(--bg2);border:1px solid var(--rule);border-left:3px solid var(--m-blue);border-radius:var(--radius);padding:18px 22px;}
.m-def-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m-blue);margin-bottom:8px;}
.m-def-text{font-size:15px;color:var(--ink2);line-height:1.75;}

/* ── Category card grid (Level 2 — sub-hub tiles) ──────────────── */
.m-cat-grid{max-width:var(--max-w);margin:0 auto;padding:8px 24px 32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.m-cat-card{
  display:block;border-radius:14px;padding:20px;text-decoration:none;
  transition:transform .15s;
}
.m-cat-card:hover{transform:translateY(-2px);}
.m-cat-icon{font-size:22px;margin-bottom:10px;display:block;}
.m-cat-title{font-size:16px;font-weight:700;margin-bottom:3px;}
.m-cat-desc{font-size:13px;line-height:1.5;}
.m-cat-count{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:10px;opacity:.75;}

.m-cat-teal{background:var(--m-teal-lt);}
.m-cat-teal .m-cat-title,.m-cat-teal .m-cat-icon{color:var(--m-teal);}
.m-cat-teal .m-cat-desc,.m-cat-teal .m-cat-count{color:#0A5744;}

.m-cat-purple{background:var(--m-purple-lt);}
.m-cat-purple .m-cat-title,.m-cat-purple .m-cat-icon{color:var(--m-purple);}
.m-cat-purple .m-cat-desc,.m-cat-purple .m-cat-count{color:#403992;}

.m-cat-pink{background:var(--m-pink-lt);}
.m-cat-pink .m-cat-title,.m-cat-pink .m-cat-icon{color:var(--m-pink);}
.m-cat-pink .m-cat-desc,.m-cat-pink .m-cat-count{color:#701A75;}

.m-cat-blue{background:var(--m-blue-lt);}
.m-cat-blue .m-cat-title,.m-cat-blue .m-cat-icon{color:var(--m-blue);}
.m-cat-blue .m-cat-desc,.m-cat-blue .m-cat-count{color:#134B84;}

.m-cat-coral{background:var(--m-coral-lt);}
.m-cat-coral .m-cat-title,.m-cat-coral .m-cat-icon{color:var(--m-coral);}
.m-cat-coral .m-cat-desc,.m-cat-coral .m-cat-count{color:#155E75;}

.m-cat-amber{background:var(--m-amber-lt);}
.m-cat-amber .m-cat-title,.m-cat-amber .m-cat-icon{color:var(--m-amber);}
.m-cat-amber .m-cat-desc,.m-cat-amber .m-cat-count{color:#3730A3;}

/* ── Sub-hub page header (Level 2 pages) ────────────────────────── */
.m-subhero{max-width:var(--max-w);margin:0 auto;padding:32px 24px 20px;}
.m-subhero-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:12px;}
.m-subhero-title{font-size:clamp(26px,4.5vw,36px);font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em;}
.m-subhero-deck{font-size:15px;color:var(--ink3);max-width:600px;line-height:1.7;}

/* ── Mantra card grid + individual card (Level 3, for later) ──── */
.m-card-grid{max-width:var(--max-w);margin:0 auto;padding:8px 24px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.m-card{display:block;background:var(--bg2);border:1px solid var(--rule);border-radius:12px;padding:18px;text-decoration:none;transition:border-color .15s;}
.m-card:hover{border-color:var(--m-blue);}
.m-card-dv{font-size:19px;color:var(--ink);font-weight:600;margin-bottom:2px;}
.m-card-title{font-size:13px;color:var(--ink3);margin-bottom:10px;}
.m-card-tags{display:flex;gap:6px;flex-wrap:wrap;}
.m-tag{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--bg3);color:var(--ink4);font-weight:500;}

/* ── Empty-state (used on shell/sub-hub pages before cards exist) ── */
.m-empty{max-width:var(--max-w);margin:0 auto;padding:32px 24px 60px;}
.m-empty-box{background:var(--bg2);border:1px dashed var(--rule);border-radius:var(--radius);padding:40px 24px;text-align:center;}
.m-empty-icon{font-size:28px;margin-bottom:12px;}
.m-empty-title{font-size:16px;font-weight:700;color:var(--ink2);margin-bottom:6px;}
.m-empty-desc{font-size:13px;color:var(--ink4);max-width:400px;margin:0 auto;line-height:1.6;}

@media(max-width:700px){
  .m-hero,.m-def,.m-cat-grid,.m-subhero,.m-card-grid,.m-empty{padding-left:16px;padding-right:16px;}
  .m-hero-band{padding:24px 20px;}
}