/* ============================================================
   Mind Theory — Ebooks (Digital Bookstore) stylesheet (ebooks.css)
   Loads after home.css and article.css — reuses home.css design
   tokens and article.css's shared language-selector / related-
   content-tabs components (`.mtart-lang-*`, `.mtart-related-*`)
   rather than re-defining them a third time. Only ebooks-specific
   rules live here. Self-contained: does not modify home.css,
   article.css, styles.css or script.js.
   ============================================================ */

/* ---------------- HERO ---------------- */
.mte-hero{
  background:radial-gradient(120% 100% at 82% 0%, #FDF0F6 0%, #FBF3FC 45%, #FFFFFF 78%);
  overflow:hidden; position:relative;
}
.mte-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;
}
.mte-hero-copy .mt-eyebrow{ justify-content:flex-start; }
.mte-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);
}
.mte-accent{ color:var(--pink-deep); }
.mte-hero-desc{ font-size:1.08rem; color:var(--text-body); max-width:460px; line-height:1.62; margin:0 0 24px; }

.mte-hero-art{ position:relative; display:flex; align-items:flex-end; justify-content:center; height:100%; }
.mte-hero-art::before{
  content:''; position:absolute; width:56%; height:56%; border-radius:50%;
  background:#FBD7E7; filter:blur(48px); opacity:.55; z-index:0; left:50%; top:8%; transform:translateX(-50%);
}
.mte-hero-art img{
  position:relative; z-index:1; max-height:250px; width:auto; object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(20,30,70,.18));
}
.mte-this-month{
  position:absolute; z-index:2; top:6%; right:0; width:200px;
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:16px 18px; box-shadow:var(--shadow-md);
}
.mte-tm-head{
  display:flex; align-items:center; gap:7px; font-size:.68rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-head);
  padding-bottom:9px; border-bottom:1px solid var(--border-soft); margin-bottom:9px;
}
.mte-tm-kicker{
  font-size:.62rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--pink-deep); display:block; margin-bottom:4px;
}
.mte-this-month h4{ font-size:.94rem; line-height:1.28; margin:0 0 12px; color:var(--text-head); }
.mte-tm-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(180deg,#FF4C82,var(--pink-deep)); color:#fff;
  border-radius:999px; padding:9px 0;
  font-weight:800; font-size:.76rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 20px -8px rgba(217,21,83,.48);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.mte-tm-btn:hover{ transform:translateY(-2px); }

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

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

/* ---------------- TOOLBAR: FILTERS + STATUS + SEARCH + SORT ---------------- */
.mte-status-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.mte-status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 17px; border-radius:999px; border:1.5px solid var(--border-soft); background:#fff;
  font-weight:700; font-size:.86rem; color:var(--text-head); cursor:pointer;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s ease, background-color .2s ease, color .2s ease;
  box-shadow:var(--shadow-xs);
}
.mte-status-pill:hover{ transform:translateY(-2px); border-color:var(--pink); }
.mte-status-pill.active{
  background:linear-gradient(180deg,#FF4C82,var(--pink-deep)); border-color:transparent; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 24px -10px rgba(217,21,83,.5);
}

.filter-row{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px; }
.fpill{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-soft); background:#fff; color:var(--text-head);
  font-family:var(--font-body); font-weight:700; font-size:.85rem; cursor:pointer;
  transition:border-color .2s ease, transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  box-shadow:var(--shadow-xs);
}
.fpill:hover{ border-color:var(--pink); transform:translateY(-2px); }
.fpill.active{ background:var(--pink); border-color:var(--pink); color:#fff; }

.tools{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.eb-search{ position:relative; width:100%; max-width:300px; }
.eb-search input{
  width:100%; padding:11px 16px 11px 42px; 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;
}
.eb-search input:focus{ outline:none; border-color:var(--pink-deep); box-shadow:0 0 0 4px rgba(199,39,95,.1); }
.eb-search input::placeholder{ color:#9AA4C0; }
.eb-search > svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#9AA2B8; pointer-events:none; }

.sortg{ display:flex; align-items:center; gap:10px; }
.sortg label{ font-size:.9rem; color:var(--text-head); font-weight:700; }
.sortg select{
  font-family:var(--font-body); font-size:.9rem; font-weight:700;
  padding:10px 32px 10px 15px; 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 12px center;
  transition:border-color .2s ease;
}
.sortg select:focus{ outline:none; border-color:var(--pink-deep); }

/* ---------------- SCROLL REVEAL ---------------- */
/* Cards fade/lift into place as they enter the viewport. Respects
   prefers-reduced-motion via home.css's global transition-duration
   override, so no separate media query is needed here. */
.mte-reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease-out-soft), transform .55s var(--ease-out-soft); }
.mte-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------- GRID ---------------- */
.eb-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:stretch; }
@media (max-width:1180px){ .eb-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){ .eb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .eb-grid{ grid-template-columns:minmax(0,1fr); } }
.mte-featured-span{ grid-column:1 / -1; }
@media (max-width:900px){ .mte-featured-span{ grid-column:1 / -1; } }

/* featured card */
.feat-card{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-xl); padding:26px;
  display:grid; grid-template-columns:0.62fr 1fr; gap:28px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.feat-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
/* All corner badges (Editor's Pick, Free, New, Premium, Bestseller, Discount)
   live inside one flex row so they stack side-by-side instead of overlapping
   when a card ever has more than one at once. */
.mte-badge-row{
  position:absolute; top:14px; left:14px; right:14px; z-index:3;
  display:flex; flex-wrap:wrap; gap:7px; pointer-events:none;
}
.editors-pick{
  display:inline-flex; align-items:center; gap:6px;
  background:#FFF6DC; border:1px solid #F0DCA4; color:#8A6A16;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
}
.feat-cover{ display:flex; align-items:center; justify-content:center; }
.feat-cover svg{ width:100%; height:auto; max-width:210px; filter:drop-shadow(0 14px 24px rgba(20,30,70,.16)); }
.feat-info{ display:flex; flex-direction:column; min-width:0; }
.feat-info h3{ font-size:1.4rem; line-height:1.22; margin:0 0 10px; color:var(--text-head); letter-spacing:-.01em; }
.feat-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.chip{
  font-size:.7rem; font-weight:800; padding:5px 11px; border-radius:999px;
  background:var(--bg-soft); color:var(--text-meta);
}
.chip.hot{ background:var(--card-pink-bg); color:var(--pink-deep); }
.feat-info > p{ font-size:.94rem; line-height:1.58; color:var(--text-body); margin:0 0 14px; }
.learn-label{ font-size:.8rem; font-weight:800; color:var(--pink-deep); margin-bottom:8px; }
.learn-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:7px; }
.learn-list li{ display:flex; gap:8px; align-items:flex-start; font-size:.88rem; color:var(--text-body); line-height:1.45; }
.learn-list li svg{ flex-shrink:0; margin-top:2px; color:var(--pink-deep); }
.feat-meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--text-meta); font-weight:600; margin-bottom:14px; }
.feat-meta span{ display:inline-flex; align-items:center; gap:5px; }
.feat-btns{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:auto; }

@media (max-width:700px){
  .feat-card{ grid-template-columns:1fr; padding:22px; }
  .feat-cover{ padding-top:8px; }
}

/* ---------------- RATING PLACEHOLDER ---------------- */
.mte-rating{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700; color:var(--text-meta); }
.mte-rating svg{ width:14px; height:14px; color:#D7DEEC; }
.mte-rating.has-rating svg{ color:#F0B429; }

/* ---------------- DOWNLOAD / BUY BUTTONS ---------------- */
.dl{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border-radius:999px; font-weight:800; font-size:.84rem; color:#fff;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s ease;
}
.dl:hover{ transform:translateY(-2px); }
.dl.lang-en{ background:linear-gradient(180deg,#1868E8,var(--blue-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 22px -10px rgba(12,79,199,.48); }
.dl.lang-en:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 16px 28px -10px rgba(12,79,199,.55); }
.dl.lang-hi{ background:linear-gradient(180deg,#F6AE5E,var(--orange-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 22px -10px rgba(195,106,30,.48); }
.dl.lang-hi:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 16px 28px -10px rgba(195,106,30,.55); }
.dl.ghost{
  background:#fff; color:var(--text-head); border:1.5px solid var(--border-crisp); box-shadow:var(--shadow-xs);
}
.dl.ghost:hover{ border-color:var(--blue-deep); color:var(--blue-deep); box-shadow:var(--shadow-sm); }
.dl.pending{ background:var(--bg-soft); color:#98A0B5; cursor:default; pointer-events:none; box-shadow:none; }
.dl.is-checking{
  background:var(--bg-soft); color:var(--text-meta); cursor:wait; pointer-events:none; box-shadow:none;
  position:relative; padding-left:34px;
}
.dl.is-checking::before{
  content:''; position:absolute; left:12px; top:50%; width:13px; height:13px; margin-top:-6.5px;
  border:2px solid var(--border-crisp); border-top-color:var(--pink-deep); border-radius:50%;
  animation:mteSpin .7s linear infinite;
}
@keyframes mteSpin{ to{ transform:rotate(360deg); } }
.dl.buy{ background:linear-gradient(180deg,var(--purple),#5F49AE); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 22px -10px rgba(122,100,229,.48); }
.dl.buy:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 16px 28px -10px rgba(122,100,229,.55); }

/* Badges — Free/New are live today; Premium/Bestseller/Discount are ready
   for future paid ebooks (not used in markup yet). All sit inside
   .mte-badge-row as plain inline pills, never independently positioned,
   so any future combination (e.g. New + Bestseller + Premium) simply
   flex-wraps instead of stacking on top of each other. */
.free-tag, .premium-tag, .discount-tag, .new-tag, .bestseller-tag{
  display:inline-flex; align-items:center;
  font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; pointer-events:auto;
}
.free-tag{ background:var(--pink); color:#fff; }
.new-tag{ background:var(--green); color:#fff; }
.bestseller-tag{ background:linear-gradient(135deg,#F0B429,#C98A0E); color:#fff; }
.premium-tag{ background:linear-gradient(135deg,var(--purple),#5F49AE); color:#fff; }
.discount-tag{ background:var(--orange); color:#fff; }
.mte-price{ display:flex; align-items:baseline; gap:7px; margin:2px 0 6px; }
.mte-price .now{ font-size:1rem; font-weight:800; color:var(--text-head); }
.mte-price .was{ font-size:.82rem; color:var(--text-meta); text-decoration:line-through; }

/* ---------------- REGULAR BOOK CARD ---------------- */
.eb-card{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  box-shadow:var(--shadow-xs); transition:box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.eb-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); }
.eb-cover{ padding:22px 22px 12px; display:flex; justify-content:center; background:var(--bg-soft); }
.eb-cover svg{ width:100%; height:auto; max-width:150px; filter:drop-shadow(0 10px 18px rgba(20,30,70,.14)); }
.eb-body{ padding:16px 18px 0; display:flex; flex-direction:column; gap:8px; flex:1; }
.eb-body h3{ font-size:1.02rem; margin:0; line-height:1.3; color:var(--text-head); letter-spacing:-.005em; }
.eb-body p{ font-size:.86rem; line-height:1.5; color:var(--text-body); margin:0; }
.eb-meta{ display:flex; flex-direction:column; gap:5px; font-size:.78rem; color:var(--text-meta); font-weight:600; padding:4px 0 8px; }
.eb-meta .row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.eb-btns{ display:flex; gap:8px; padding:14px 18px 18px; flex-wrap:wrap; }
.eb-btns .dl{ flex:1; padding:9px 8px; font-size:.78rem; white-space:nowrap; }

/* per-card language row, reusing .mtart-lang-* shell from article.css */
.mte-lang-row{ padding:0 18px; }
.mte-lang-row .mtart-lang{ width:100%; }
.mte-lang-row .mtart-lang-select{ display:block; }
.mte-lang-row .mtart-lang-btn{ width:100%; justify-content:space-between; }

.no-res{ display:none; text-align:center; padding:clamp(40px,6vw,60px) 20px; color:var(--text-meta); font-weight:600; }

/* ---------------- TRIO PANEL ---------------- */
.trio{ display:grid; grid-template-columns:0.95fr 1.35fr 1.1fr; gap:22px; margin-top:32px; }
@media (max-width:1080px){ .trio{ grid-template-columns:minmax(0,1fr); } }
.panel{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:24px; min-width:0; box-shadow:var(--shadow-xs);
}
.panel h4{ display:flex; align-items:center; gap:9px; font-size:1.05rem; margin:0 0 16px; color:var(--text-head); }
.coll-list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.coll{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:10px 12px; min-width:0;
}
.coll b{ font-size:.82rem; font-weight:700; color:var(--text-head); }
.coll em{ font-style:normal; font-size:.7rem; color:var(--pink-deep); background:var(--card-pink-bg); padding:3px 8px; border-radius:6px; font-weight:700; }
.view-all{ display:block; text-align:center; margin-top:14px; font-weight:700; font-size:.86rem; color:var(--pink-deep); }

.journey{ display:flex; justify-content:space-between; gap:6px; position:relative; margin:8px 0 14px; }
.journey::before{ content:''; position:absolute; left:8%; right:8%; top:15px; height:2px; background:var(--card-pink-bg); }
.jstep{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; flex:1; min-width:0; position:relative; }
.jstep .n{
  width:28px; height:28px; border-radius:50%; background:var(--pink); color:#fff;
  font-size:.76rem; font-weight:800; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
}
.jstep b{ font-size:.74rem; font-weight:700; color:var(--text-head); line-height:1.3; overflow-wrap:break-word; }
.jnote{
  background:var(--card-pink-bg); border-radius:var(--radius-sm); padding:10px 14px; text-align:center;
  font-size:.82rem; color:var(--pink-deep); font-weight:700;
}

.why-panel{ display:grid; grid-template-columns:minmax(0,1fr) 108px; gap:12px; align-items:end; }
.why-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.why-list li{ display:flex; gap:9px; align-items:flex-start; font-size:.87rem; color:var(--text-body); line-height:1.45; }
.why-list li svg{ flex-shrink:0; margin-top:2px; color:var(--green); }
.why-panel img{ width:108px; height:auto; }