/* ============================================================
   Mind Theory — Resources page stylesheet (resources.css)
   Loads after home.css and reuses its design tokens (colors,
   shadows, radii, easing, nav/button/footer/section classes).
   Only page-specific rules live here — self-contained, does not
   modify home.css, styles.css or script.js.
   ============================================================ */

/* ---------------- HERO ---------------- */
.mtr-hero{
  background:radial-gradient(120% 100% at 82% 0%, #FDF3E7 0%, #FFF8ED 45%, #FFFFFF 78%);
  overflow:hidden;
  position:relative;
}
.mtr-hero-inner{
  padding-top:clamp(52px, 8vw, 84px);
  padding-bottom:clamp(48px, 7vw, 76px);
  display:grid; grid-template-columns:1.05fr 0.85fr; gap:clamp(32px, 5vw, 56px); align-items:center;
}
.mtr-hero-copy .mt-eyebrow{ justify-content:flex-start; }
.mtr-hero-title{
  font-size:clamp(2.3rem, 1.7rem + 2.4vw, 3.4rem);
  line-height:1.1; font-weight:800; margin:4px 0 18px; color:var(--navy-2);
}
.mtr-accent{ color:var(--orange-deep); }
.mtr-hero-desc{
  font-size:1.1rem; color:var(--text-body); max-width:480px; line-height:1.65; margin:0 0 26px;
}
.mtr-hero-pills{ margin-bottom:0; }

.mtr-hero-art{
  position:relative; display:flex; align-items:flex-end; justify-content:center; height:100%;
}
.mtr-hero-art::before{
  content:''; position:absolute; width:56%; height:56%; border-radius:50%;
  background:#FBE0AE; filter:blur(48px); opacity:.55; z-index:0; left:50%; top:8%; transform:translateX(-50%);
}
.mtr-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));
}
.mtr-all-free{
  position:absolute; z-index:2; top:6%; right:2%;
  width:84px; height:84px; border-radius:50%;
  background:#fff; border:2px dashed var(--orange);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.15; box-shadow:var(--shadow-sm);
}
.mtr-all-free b{ font-family:var(--font-body); font-size:.6rem; font-weight:800; letter-spacing:.08em; color:var(--text-meta); }
.mtr-all-free strong{ font-family:var(--font-head); font-size:1.14rem; color:var(--orange-deep); display:block; margin:1px 0; }
.mtr-all-free span{ font-size:.56rem; color:var(--text-meta); font-weight:700; }

@media (max-width:960px){
  .mtr-hero-inner{ grid-template-columns:1fr; }
  .mtr-hero-art{ order:-1; max-height:200px; }
  .mtr-hero-art img{ max-height:180px; }
  .mtr-hero-copy{ text-align:center; }
  .mtr-hero-copy .mt-eyebrow{ justify-content:center; }
  .mtr-hero-desc{ margin-left:auto; margin-right:auto; }
  .mtr-hero-copy .mt-hero-pills{ justify-content:center; }
  .mtr-all-free{ display:none; }
}
@media (max-width:520px){
  .mtr-hero-art img{ max-height:150px; }
}

/* ---------------- TOOLBAR (filters + search + sort) ---------------- */
.mtr-toolbar{ margin-bottom:clamp(28px, 4vw, 40px); }
.mtr-filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.filter-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; 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:.88rem;
  cursor:pointer; box-shadow:var(--shadow-xs);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease, background-color .25s ease, color .25s ease;
}
.filter-pill:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:var(--orange); }
.filter-pill.active{
  background:linear-gradient(180deg,#F6AE5E,var(--orange-deep));
  border-color:transparent; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 24px -10px rgba(195,106,30,.5);
}
.filter-pill svg{ flex-shrink:0; }

.mtr-tools-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ws-search{ position:relative; width:100%; max-width:340px; }
.ws-search input{
  width:100%; padding:12px 18px 12px 44px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-soft); background:#fff;
  font-family:var(--font-body); font-size:.94rem; color:var(--text-head);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ws-search input:focus{ outline:none; border-color:var(--blue-deep); box-shadow:0 0 0 4px rgba(12,79,199,.1); }
.ws-search input::placeholder{ color:#9AA4C0; }
.ws-search > svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#9AA2B8; pointer-events:none; }

.mtr-sort{ display:flex; align-items:center; gap:10px; }
.mtr-sort label{ font-size:.9rem; color:var(--text-head); font-weight:700; }
.sort-select{
  font-family:var(--font-body); font-size:.9rem; font-weight:700;
  padding:10px 34px 10px 16px; border-radius:var(--radius-md); border:1.5px solid var(--border-soft);
  background-color:#fff; color:var(--text-head); appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7593' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.sort-select:focus{ outline:none; border-color:var(--blue-deep); box-shadow:0 0 0 4px rgba(12,79,199,.1); }

/* ---------------- WORKSHEET GRID / CARDS ---------------- */
.ws-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
@media (max-width:900px){ .ws-grid{ grid-template-columns:minmax(0,1fr); max-width:460px; margin:0 auto; } }

.ws-card{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.ws-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

.ws-thumb{
  position:relative; height:200px; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  border-bottom:1px solid var(--border-soft);
}
.ws-thumb.mtr-tint-blue{ background:linear-gradient(150deg,var(--card-blue-bg) 0%,#DDEAFB 100%); }
.ws-thumb.mtr-tint-green{ background:linear-gradient(150deg,#E9F6F1 0%,#DCF0E6 100%); }
.ws-thumb svg.paper{ width:82%; height:auto; display:block; margin-bottom:-4px; }
.ws-tag{
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--font-body); font-size:.62rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; box-shadow:var(--shadow-xs);
}
.tag-new{ background:#D6F0DC; color:#2E7D4B; }
.tag-best{ background:#FBE6AE; color:#8A6A16; }
.tag-trend{ background:var(--card-pink-bg); color:var(--pink-deep); }

.ws-body{ padding:20px 22px 0; display:flex; flex-direction:column; gap:7px; flex:1; }
.ws-cat{
  font-family:var(--font-body); font-size:.68rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:6px; align-self:flex-start;
}
.ws-card h3{ font-size:1.24rem; line-height:1.28; margin:2px 0 0; letter-spacing:-.01em; color:var(--text-head); }
.ws-card p{ font-size:.94rem; line-height:1.58; color:var(--text-body); margin:0; }
.ws-spec{ font-size:.78rem; color:var(--text-meta); font-weight:700; margin-top:2px; }

/* ---- language selector ---- */
.ws-lang{ padding:12px 0 16px; }
.ws-lang-title{
  display:block; font-family:var(--font-body); font-size:.66rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-meta); margin:0 0 7px;
}
.ws-lang-select{ position:relative; display:inline-block; }
.ws-lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 15px; border-radius:var(--radius-md);
  border:1.5px solid #BFD6FB; background:#fff; color:var(--text-head);
  font-family:var(--font-body); font-weight:700; font-size:.88rem;
  cursor:pointer; box-shadow:var(--shadow-xs);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s var(--ease-out);
}
.ws-lang-btn:hover{ border-color:var(--blue-deep); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.ws-lang-btn:focus-visible{ outline:none; border-color:var(--blue-deep); box-shadow:0 0 0 4px rgba(12,79,199,.14); }
.ws-lang-flag{ font-size:1rem; line-height:1; }
.ws-lang-caret{ color:var(--text-meta); flex-shrink:0; transition:transform .22s var(--ease-out); }
.ws-lang-select.open .ws-lang-btn{ border-color:var(--blue-deep); }
.ws-lang-select.open .ws-lang-caret{ transform:rotate(180deg); }

.ws-lang-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:30; min-width:158px;
  margin:0; padding:7px; list-style:none;
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
}
.ws-lang-select.open .ws-lang-menu{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.ws-lang-option{
  display:flex; align-items:center; gap:9px; padding:10px 11px; border-radius:9px;
  font-family:var(--font-body); font-size:.88rem; font-weight:600; color:var(--text-head);
  cursor:pointer; transition:background-color .15s ease;
}
.ws-lang-option:hover, .ws-lang-option:focus-visible{ background:var(--card-blue-bg); outline:none; }
.ws-lang-option[aria-selected="true"]{ font-weight:800; }
.ws-lang-check{ width:14px; flex-shrink:0; color:var(--blue-deep); font-weight:800; }
.ws-card.lang-menu-open{ overflow:visible; position:relative; z-index:5; }
.ws-card.lang-menu-open .ws-thumb{ overflow:hidden; }

/* ---- download CTA ---- */
.ws-dl{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 22px 22px; padding:13px 0; border-radius:999px;
  font-family:var(--font-body); font-weight:800; font-size:.9rem; color:#fff;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s ease;
}
.ws-dl:hover{ transform:translateY(-2px); }
.ws-dl.lang-en{
  background:linear-gradient(180deg,#1868E8,var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 26px -10px rgba(12,79,199,.5);
}
.ws-dl.lang-en:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 18px 32px -10px rgba(12,79,199,.58); }
.ws-dl.lang-hi{
  background:linear-gradient(180deg,#F6AE5E,var(--orange-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 26px -10px rgba(195,106,30,.5);
}
.ws-dl.lang-hi:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 18px 32px -10px rgba(195,106,30,.58); }
.ws-dl.pending{ background:#F2F4F9; color:#A3AABD; cursor:default; pointer-events:none; box-shadow:none; }

/* ---------------- EMPTY STATE ---------------- */
.no-results{
  display:none; text-align:center; padding:clamp(48px,7vw,70px) 20px;
  color:var(--text-meta);
}
.no-results-icon{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  background:var(--card-orange-bg); display:flex; align-items:center; justify-content:center;
  color:var(--orange-deep);
}
.no-results p{ font-size:1rem; font-weight:700; color:var(--text-head); margin:0 0 4px; }
.no-results span{ font-size:.9rem; color:var(--text-meta); }

/* ---------------- TRUST / FEATURE STRIP ---------------- */
.mtr-trust{
  background:var(--card-orange-bg); border-radius:var(--radius-xl);
  padding:clamp(28px,4vw,38px); display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; box-shadow:var(--shadow-xs);
  transition:box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.mtr-trust:hover{ box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.mtr-trust-items{ display:flex; flex-wrap:wrap; gap:28px; flex:1; }
.mtr-trust-item{ display:flex; align-items:center; gap:12px; }
.mtr-trust-item .ic{
  width:42px; height:42px; flex-shrink:0; border-radius:50%;
  background:#fff; border:1px solid #F0DFAF;
  display:flex; align-items:center; justify-content:center; color:var(--orange-deep);
  box-shadow:var(--shadow-xs);
}
.mtr-trust-item b{ display:block; font-size:.9rem; font-weight:800; color:var(--text-head); }
.mtr-trust-item span{ display:block; font-size:.8rem; color:var(--text-body); font-weight:500; line-height:1.4; }
.mtr-trust img{ max-height:118px; width:auto; align-self:flex-end; margin-bottom:-22px; flex-shrink:0; }

@media (max-width:760px){
  .mtr-trust img{ display:none; }
}
@media (max-width:520px){
  .mtr-trust-items{ gap:18px; }
}