/* ============================================================
   Mind Theory — Quotes stylesheet (quotes.css)
   Loads after home.css and article.css — reuses home.css design
   tokens and article.css's shared sidebar/nav-language components
   (`.mtart-sidebar`, `.mtart-side-card`, `.mtart-lang-*`) rather
   than redefining them a third time. Only quotes-specific rules
   live here. Self-contained: does not modify home.css, article.css,
   styles.css or script.js.
   ============================================================ */

/* ---------------- HERO ---------------- */
.mtq-hero{
  background:radial-gradient(120% 100% at 82% 0%, #EAF1FE 0%, #F0F3FC 45%, #FFFFFF 78%);
  overflow:hidden; position:relative;
}
.mtq-hero-inner{
  padding-top:clamp(48px, 7vw, 76px); padding-bottom:clamp(40px, 6vw, 60px);
  display:grid; grid-template-columns:1.05fr 0.9fr; gap:clamp(28px, 4vw, 48px); align-items:center;
}
.mtq-hero-copy .mt-eyebrow{ justify-content:flex-start; }
.mtq-hero-title{
  font-size:clamp(2.2rem, 1.6rem + 2.2vw, 3.1rem); line-height:1.1; font-weight:800;
  margin:4px 0 16px; color:var(--navy-2);
}
.mtq-accent{ color:var(--blue-deep); }
.mtq-hero-desc{ font-size:1.08rem; color:var(--text-body); max-width:460px; line-height:1.62; margin:0 0 24px; }

.mtq-hero-art{ position:relative; display:flex; align-items:flex-end; justify-content:center; height:100%; }
.mtq-hero-art::before{
  content:''; position:absolute; width:56%; height:56%; border-radius:50%;
  background:#CFE0FC; filter:blur(48px); opacity:.6; z-index:0; left:50%; top:8%; transform:translateX(-50%);
}
.mtq-hero-art::after{
  content:''; position:absolute; width:30%; height:30%; border-radius:50%;
  background:#FBD7E7; filter:blur(40px); opacity:.5; z-index:0; right:6%; bottom:4%;
}
.mtq-hero-art img{
  position:relative; z-index:1; max-height:260px; width:auto; object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(20,30,70,.18));
}
.mtq-hero-quote-card{
  position:absolute; z-index:2; top:4%; left:-4%; width:230px;
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:18px 20px; box-shadow:var(--shadow-md);
}
.mtq-hq-mark{ font-family:var(--font-head); font-size:2rem; color:var(--blue-deep); line-height:.6; display:block; margin-bottom:6px; }
.mtq-hero-quote-card p{ font-family:var(--font-head); font-style:italic; font-size:.98rem; line-height:1.44; color:var(--text-head); margin:0 0 10px; }
.mtq-hq-attr{ font-size:.78rem; color:var(--text-meta); font-weight:700; }

@media (max-width:960px){
  .mtq-hero-inner{ grid-template-columns:1fr; }
  .mtq-hero-art{ order:-1; max-height:200px; }
  .mtq-hero-copy{ text-align:center; }
  .mtq-hero-copy .mt-eyebrow{ justify-content:center; }
  .mtq-hero-desc{ margin-left:auto; margin-right:auto; }
  .mtq-hero-copy .mt-hero-ctas{ justify-content:center; }
  .mtq-hero-copy .mt-hero-pills{ justify-content:center; }
  .mtq-hero-quote-card{ display:none; }
}

/* ---------------- TRUST STRIP ---------------- */
.mtq-trust{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  overflow:hidden; margin-bottom:30px; box-shadow:var(--shadow-xs);
}
.mtq-trust-item{
  background:#fff; display:flex; align-items:center; gap:10px; padding:16px 14px;
}
.mtq-trust-item .ic{
  width:34px; height:34px; border-radius:50%; background:var(--card-blue-bg);
  display:flex; align-items:center; justify-content:center; color:var(--blue-deep); flex-shrink:0;
}
.mtq-trust-item b{ display:block; font-size:.85rem; font-weight:800; color:var(--text-head); line-height:1.25; }
.mtq-trust-item span{ display:block; font-size:.74rem; color:var(--text-meta); font-weight:500; }
@media (max-width:900px){ .mtq-trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .mtq-trust{ grid-template-columns:minmax(0,1fr); } }

/* ---------------- CATEGORY BROWSE TILES ---------------- */
.mtq-cat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:34px; }
@media (max-width:900px){ .mtq-cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .mtq-cat-grid{ grid-template-columns:minmax(0,1fr); } }
.mtq-cat-tile{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:15px 17px; display:flex; align-items:center; gap:12px; cursor:pointer; min-width:0;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .2s ease;
}
.mtq-cat-tile:hover{ box-shadow:var(--shadow-sm); transform:translateY(-3px); }
.mtq-cat-tile.is-active{ border-color:var(--blue-deep); box-shadow:0 0 0 2px rgba(12,79,199,.14), var(--shadow-sm); }
.mtq-cat-tile .ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mtq-cat-tile > div{ min-width:0; }
.mtq-cat-tile b, .mtq-cat-tile span{ display:block; overflow-wrap:break-word; }
.mtq-cat-tile b{ font-size:.9rem; font-weight:800; color:var(--text-head); }
.mtq-cat-tile span{ font-size:.75rem; color:var(--text-meta); font-weight:600; }

/* ---------------- STICKY TOOLBAR ---------------- */
.mtq-toolbar{
  position:sticky; top:70px; z-index:40;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px);
  border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  box-shadow:var(--shadow-xs);
}
.mtq-search{ position:relative; flex:1 1 240px; max-width:320px; min-width:0; }
.mtq-search input{
  width:100%; padding:11px 16px 11px 40px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-soft); background:#fff;
  font-family:var(--font-body); font-size:.92rem; color:var(--text-head);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mtq-search input:focus{ outline:none; border-color:var(--blue-deep); box-shadow:0 0 0 4px rgba(12,79,199,.1); }
.mtq-search input::placeholder{ color:#9AA4C0; }
.mtq-search > svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#9AA2B8; pointer-events:none; }

.mtq-pills{ display:flex; gap:8px; flex-wrap:wrap; flex:2 1 auto; min-width:0; }
.mtq-pill{
  display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:999px;
  border:1.5px solid var(--border-soft); background:#fff; color:var(--text-head);
  font-family:var(--font-body); font-weight:700; font-size:.82rem; cursor:pointer;
  transition:border-color .2s ease, transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s ease, color .2s ease;
  box-shadow:var(--shadow-xs); white-space:nowrap;
}
.mtq-pill:hover{ border-color:var(--blue-deep); transform:translateY(-2px); }
.mtq-pill.is-active{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.mtq-pill--saved{ margin-left:2px; }
.mtq-pill--saved.is-active{ background:var(--pink); border-color:var(--pink); color:#fff; }

.mtq-toolbar-lang{ flex-shrink:0; }

@media (max-width:760px){
  .mtq-toolbar{ position:static; }
  .mtq-pills{ order:2; width:100%; }
  .mtq-search{ max-width:none; flex-basis:100%; }
  .mtq-toolbar-lang{ order:1; }
}

/* ---------------- QUOTE GRID + CARD ---------------- */
.mtq-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:16px; }
@media (max-width:1080px){ .mtq-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .mtq-grid{ grid-template-columns:minmax(0,1fr); } }

.mtq-card{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:26px; display:flex; flex-direction:column; gap:16px; min-width:0;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.mtq-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); }
.mtq-mark{ font-family:var(--font-head); font-size:1.9rem; color:var(--blue-deep); line-height:.6; }
.mtq-text{ margin:0; font-size:1.04rem; line-height:1.52; color:var(--text-head); font-weight:700; flex:1; letter-spacing:-.005em; }
.mtq-attr{ margin:-6px 0 0; font-size:.84rem; font-weight:700; color:var(--text-meta); }

.mtq-badges{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mtq-badge{
  display:inline-flex; align-items:center; font-size:.72rem; font-weight:800;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.mtq-badge--blue{ background:var(--card-blue-bg); color:var(--blue-deep); }
.mtq-badge--pink{ background:var(--card-pink-bg); color:var(--pink-deep); }
.mtq-badge--orange{ background:var(--card-orange-bg); color:var(--orange-deep); }
.mtq-badge--green{ background:rgba(31,156,121,.12); color:var(--green); }
.mtq-badge--purple{ background:rgba(122,100,229,.12); color:var(--purple); }
.mtq-lang-badge{ background:var(--bg-soft); color:var(--text-meta); font-size:.68rem; font-weight:700; padding:5px 10px; border-radius:999px; }

.mtq-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mtq-actions{ display:flex; gap:7px; }
.mtq-icon-btn{
  width:34px; height:34px; border-radius:9px; border:1.5px solid var(--border-soft); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--text-meta); cursor:pointer; position:relative;
  transition:border-color .2s ease, box-shadow .25s var(--ease-out), transform .25s var(--ease-out), background-color .2s ease, color .2s ease;
}
.mtq-icon-btn:hover{ border-color:var(--blue-deep); color:var(--blue-deep); box-shadow:var(--shadow-xs); transform:translateY(-2px); }
.mtq-icon-btn .icon-alt{ display:none; }
.mtq-icon-btn.is-active .icon-main{ display:none; }
.mtq-icon-btn.is-active .icon-alt{ display:flex; }
.mtq-icon-btn--save.is-active{ background:var(--card-pink-bg); border-color:var(--pink); color:var(--pink-deep); }
.mtq-icon-btn--share.is-active{ background:#E6F4EC; border-color:var(--green); color:var(--green); }
.mtq-icon-btn.copied{ background:#E6F4EC; border-color:var(--green); color:var(--green); }

/* ---------------- EMPTY STATE ---------------- */
.mtq-empty{
  display:none; text-align:center; padding:clamp(48px,7vw,72px) 20px; margin-bottom:16px;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-xl);
}
.mtq-empty .ic{
  width:60px; height:60px; border-radius:50%; background:#fff; box-shadow:var(--shadow-xs);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--blue-deep);
}
.mtq-empty h3{ font-size:1.1rem; margin:0 0 8px; color:var(--text-head); }
.mtq-empty p{ font-size:.92rem; color:var(--text-meta); margin:0 0 18px; }

.mtq-end-note{ text-align:center; padding:16px 0 4px; font-size:.86rem; color:var(--text-meta); font-weight:600; }

/* ---------------- SIDEBAR EXTRAS (layer onto .mtart-side-card) ---------------- */
.mtq-daily-card{
  background:linear-gradient(160deg,#FDF3D8 0%,#FDEBDA 100%); border-color:#F0DFAF; position:relative;
}
.mtq-daily-head{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:.82rem; color:#8A6A16; margin-bottom:12px; }
.mtq-daily-mark{ font-family:var(--font-head); font-size:1.7rem; color:#D9A21F; line-height:.8; display:block; }
.mtq-daily-card blockquote{ font-family:var(--font-head); font-style:italic; font-size:1.02rem; line-height:1.46; color:var(--text-head); margin:8px 0 12px; }
.mtq-daily-card .mtq-attr{ color:#8A6A16; font-weight:700; margin:0 0 14px; }
.mtq-daily-heart{ position:absolute; top:16px; right:16px; color:var(--pink); }
.mtq-daily-share{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  background:linear-gradient(180deg,#1868E8,var(--blue-deep)); color:#fff; border:none; border-radius:999px;
  padding:12px 0; font-weight:800; font-size:.86rem; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 22px -10px rgba(12,79,199,.45);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.mtq-daily-share:hover{ transform:translateY(-2px); }

.mtq-why-body{ display:flex; align-items:flex-end; gap:12px; }
.mtq-why-body img{ width:76px; height:auto; flex-shrink:0; }
.mtq-why-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.mtq-why-list li{ display:flex; gap:8px; align-items:flex-start; font-size:.86rem; color:var(--text-body); font-weight:600; }
.mtq-why-list li svg{ flex-shrink:0; margin-top:2px; color:var(--green); }

.mtq-pull-card{ background:var(--card-blue-bg); text-align:center; padding:24px 20px; position:relative; }
.mtq-pull-card p{ font-family:var(--font-head); font-style:italic; font-size:1.02rem; line-height:1.5; color:var(--text-head); margin:0 0 10px; }
.mtq-pull-card .mtq-attr{ color:var(--blue-deep); font-weight:700; }
.mtq-pull-heart{ position:absolute; bottom:16px; right:18px; color:var(--pink); }

.mtq-step-card{ text-align:center; }
.mtq-step-card h3{ font-size:1rem; line-height:1.4; margin:0 0 18px; }
.mtq-step-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.mtq-step-item{ padding:0 2px; position:relative; }
.mtq-step-item + .mtq-step-item::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--border-soft); }
.mtq-step-item .ic{ display:flex; align-items:center; justify-content:center; margin:0 auto 8px; }
.mtq-step-item b{ display:block; font-size:.72rem; font-weight:800; color:var(--text-head); line-height:1.35; }
.mtq-step-item b span{ display:block; font-size:.64rem; font-weight:700; color:var(--text-body); }

/* mobile: sidebar cards stack full-width already via .mtart-layout */