/* =========================================================
 * public/css/magazine.css
 * TrustShopi Magazine – UX + SEO Focused (RTL, Responsive)
 * ---------------------------------------------------------
 * - Hero carousel (4 slides) with a11y + reduced motion
 * - Filters + Sort
 * - Article grid + Trending aside
 * - Pillar clusters
 * - Skeletons, Lazy image fade-in
 * - Clean buttons, toasts, and utilities
 * =======================================================*/

/* ------------------------- Reset & Base ------------------------- */
:root{
  /* Brand */
  --brand: #7a3cff;            /* Trust-ish electric purple */
  --brand-2: #ff6e8c;          /* soft pink accent (per existing site vibe) */
  --ink: #1d1b20;
  --ink-2: #3a3940;
  --muted: #6f6d78;
  --line: #e9e7ee;
  --bg: #ffffff;
  --bg-soft: #faf9fd;
  --card: #ffffff;

  /* Effects */
  --radius: 18px;
  --radius-lg: 22px;
  --shadow-1: 0 10px 28px rgba(17, 10, 31, .08);
  --shadow-2: 0 20px 60px rgba(17, 10, 31, .12);
  --blur-bg: rgba(255,255,255,.65);

  /* Sizing */
  --wrap: min(1160px, 92vw);
  --gutter: 16px;

  /* Hero */
  --hero-h: clamp(240px, 56vh, 560px);

  /* Motion */
  --dur-fast: .18s;
  --dur: .28s;
  --dur-slow: .6s;
  --ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --ink: #f6f5fb;
    --ink-2: #d6d4df;
    --muted: #a7a5b1;
    --line: #2b2833;
    --bg: #0f0e12;
    --bg-soft: #15141a;
    --card: #17151e;
    --blur-bg: rgba(17,16,23,.6);
    --shadow-1: 0 10px 28px rgba(0,0,0,.35);
    --shadow-2: 0 20px 60px rgba(0,0,0,.45);
  }
}

html{ box-sizing: border-box; }
*, *::before, *::after{ box-sizing: inherit; }

body{
  margin:0;
  font-family: Vazirmatn, IranSansX, IRANSans, "Segoe UI", Tahoma, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", "Roboto", "SF Pro Display", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: rtl;
}

img{ max-width: 100%; height: auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--brand); }
button, input, select{ font-family: inherit; color: inherit; }

/* Container */
#magazine-app{
  width: var(--wrap);
  margin-inline: auto;
  padding: 18px var(--gutter) 64px;
}

/* Title styles */
.mag-title{
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: -.2px;
}

/* ------------------------- Hero Carousel ------------------------ */
.mag-hero{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  height: var(--hero-h);
  background: linear-gradient(135deg, rgba(122,60,255,.08), rgba(255,110,140,.12));
  box-shadow: var(--shadow-1);
  margin-bottom: 28px;
}

.hero-carousel{ position: relative; height: 100%; overflow: hidden; border-radius: inherit; }
.hero-track{
  display: flex;
  height: 100%;
  transition: transform var(--dur-slow) var(--ease);
  will-change: transform;
  direction: ltr; /* برای ترنزیشن و محاسبات درصدی */
}
.hero-slide{
  position: relative;
  height: 100%;
  overflow: hidden;
  display: grid;               /* برای مرکز شدن کپشن */
  place-items: center;
  flex: 0 0 100%;              /* هر اسلاید = 100% عرض قاب */
}
.hero-media{ position: absolute; inset: 0; }
.hero-media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;                  /* قبل از load پنهان باشد */
  transition: opacity .45s var(--ease);
  filter: saturate(105%);
}
.hero-media img.is-loaded{ opacity: 1; }

.hero-gradient{
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 80% 50%, rgba(10,6,18,0) 0%, rgba(10,6,18,.12) 55%, rgba(10,6,18,.45) 100%),
              linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);
}

.hero-caption{
  position: relative;
  z-index: 2;
  width: min(90%, 780px);
  text-align: center;
  color: #fff;
  text-shadow: 0 6px 26px rgba(0,0,0,.35);
  transform: translateY(6px);
}
.hero-caption h2{
  margin: 0 0 10px;
  font-size: clamp(18px, 3.6vw, 34px);
  font-weight: 900;
}
.hero-cta{
  display: inline-block;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 26px rgba(122,60,255,.35);
}

.hero-prev, .hero-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; border-radius: 999px;
  background: var(--blur-bg); box-shadow: var(--shadow-1);
  display: grid; place-items: center;
  cursor: pointer; z-index: 5;
  backdrop-filter: saturate(120%) blur(6px);
}
.hero-prev{ right: 12px; }
.hero-next{ left: 12px; }
.hero-prev:hover, .hero-next:hover{ background: rgba(255,255,255,.85); }
@media (prefers-color-scheme: dark){
  .hero-prev, .hero-next{ background: rgba(25,22,33,.5); }
  .hero-prev:hover, .hero-next:hover{ background: rgba(25,22,33,.7); }
}

.hero-dots{
  position: absolute; bottom: 12px; inset-inline: 0;
  display: flex; justify-content: center; gap: 8px; z-index: 5;
}
.hero-dot{
  width: 9px; height: 9px; border-radius: 999px;
  border: none; background: rgba(255,255,255,.55);
  cursor: pointer;
}
.hero-dot.is-active{ background: #fff; width: 22px; transition: width var(--dur) var(--ease); }

@media (max-width: 760px){
  .hero-prev, .hero-next{ display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-track{ direction: ltr; }
  .hero-media img{ transition: none; }
}

/* -------------------------- Controls --------------------------- */
#mag-controls{
  margin: 18px 0 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.controls-inner{
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr .6fr;
  gap: 10px;
  padding: 12px;
}
#mag-search, #mag-category, #mag-type, #mag-sort{
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#mag-search:focus, #mag-category:focus, #mag-type:focus, #mag-sort:focus{
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 16%, transparent);
}

@media (max-width: 920px){
  .controls-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .controls-inner{ grid-template-columns: 1fr; }
}

/* ------------------ Lists layout (grid + aside) ----------------- */
#mag-lists{
  display: grid;
  grid-template-columns: 3fr 1.1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px){
  #mag-lists{ grid-template-columns: 1fr; }
}

/* Article grid */
.mag-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 16px;
}

/* --------------------------- Cards ------------------------------ */
.mag-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
}
.mag-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.mag-cover{
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  background: var(--bg-soft);
  overflow: hidden;
}
.mag-cover img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(102%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.mag-cover img.is-loaded{ opacity: 1; }

.mag-body{ padding: 12px 12px 14px; display: grid; gap: 8px; }
.mag-h3{
  margin: 2px 0 0;
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
}
.mag-h3 a:hover{ color: var(--brand); }

.mag-excerpt{
  color: var(--ink-2);
  font-size: 14px;
  margin: 0;
}

.mag-meta{
  display: flex; gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--muted);
}
.mag-meta .mag-read{
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  color: color-mix(in oklab, var(--brand) 70%, var(--ink));
}

.mag-tags{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mag-tag{
  display: inline-block;
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand-2) 10%, transparent);
  color: color-mix(in oklab, var(--brand-2) 75%, var(--ink));
  border: 1px solid color-mix(in oklab, var(--brand-2) 22%, var(--line));
}
.mag-tag:hover{
  background: color-mix(in oklab, var(--brand-2) 18%, transparent);
}

.mag-ctas{
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px;
}

/* --------------------------- Buttons --------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 14px; border-radius: 12px;
  font-weight: 700; font-size: 14px; border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  cursor: pointer;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand), var(--brand-2) 38%));
  color: #fff;
  box-shadow: 0 10px 26px rgba(122,60,255,.28);
}
.btn-primary:hover{
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 90%, white), var(--brand-2));
}

.btn-soft{
  background: color-mix(in oklab, var(--brand) 6%, transparent);
  color: color-mix(in oklab, var(--brand) 80%, var(--ink));
  border-color: color-mix(in oklab, var(--brand) 24%, var(--line));
}
.btn-soft:hover{
  background: color-mix(in oklab, var(--brand) 10%, transparent);
}

/* Button "load more" (fallback for older browsers) */
.btn-more{
  margin: 14px auto 0; display: block;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* --------------------------- Aside ---------------------------- */
.mag-aside{
  position: sticky; top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-1);
}
.mag-list{ display: grid; gap: 8px; }
.tr-item{
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 10px 10px;
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tr-item:hover{ transform: translateY(-2px); background: color-mix(in oklab, var(--brand) 6%, var(--bg-soft)); }
.tr-link{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.tr-title{
  font-size: 14px; line-height: 1.6; font-weight: 700;
}
.tr-score{
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--line));
  padding: 2px 8px; border-radius: 999px;
}

/* --------------------------- Pillars -------------------------- */
#mag-pillars{
  margin-top: 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-1);
}
.pillar-wrap{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
@media (max-width: 860px){
  .pillar-wrap{ grid-template-columns: 1fr; }
}
.pillar{
  border: 1px dashed color-mix(in oklab, var(--brand) 30%, var(--line));
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 6%, transparent), transparent);
}
.pillar h3{
  margin: 0 0 8px; font-size: 16px; font-weight: 900;
}
.pillar-links{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 8px;
}
.pillar-links a{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-2);
}
.pillar-links a::before{
  content: "↗"; font-size: 12px; opacity: .7; transform: translateY(1px);
}
.pillar-links a:hover{ color: var(--brand); }

/* --------------------------- Skeletons ------------------------ */
.skeleton{
  position: relative; overflow: hidden;
  background: var(--card);
}
.sk-thumb{
  height: 0; padding-bottom: 56%;
  background: linear-gradient(90deg, var(--bg-soft), color-mix(in oklab, var(--bg-soft) 70%, #fff), var(--bg-soft));
  border-bottom: 1px solid var(--line);
}
.sk-line{
  height: 12px; margin: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-soft), color-mix(in oklab, var(--bg-soft) 70%, #fff), var(--bg-soft));
}
.sk-line.short{ width: 60%; }
.sk-meta{
  height: 10px; width: 40%;
  margin: 0 12px 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-soft), color-mix(in oklab, var(--bg-soft) 70%, #fff), var(--bg-soft));
}

/* Shimmer animation */
@keyframes shimmer{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}
.skeleton .sk-thumb,
.skeleton .sk-line,
.skeleton .sk-meta{
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .skeleton .sk-thumb,
  .skeleton .sk-line,
  .skeleton .sk-meta{ animation: none; }
}

/* ----------------------------- Toast -------------------------- */
.mag-toast{
  position: fixed;
  inset-inline: 0; bottom: 18px;
  width: fit-content; max-width: calc(100% - 24px);
  margin: 0 auto;
  background: var(--blur-bg);
  backdrop-filter: blur(10px) saturate(125%);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--shadow-2);
  transform: translateY(10px);
  opacity: 0; visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 2000;
}
.mag-toast.show{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mag-toast.error{
  border-color: color-mix(in oklab, crimson 45%, var(--line));
}

/* --------------------------- Utilities ------------------------ */
[hidden]{ display: none !important; }

:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand) 75%, #fff);
  outline-offset: 2px;
  border-radius: 8px;
}

hr{
  border: none; height: 1px; background: var(--line);
  margin: 18px 0;
}

/* ------------------------- Print basics ----------------------- */
@media print{
  #mag-controls, .mag-hero, .mag-aside, #mag-infinite-sentinel, .mag-toast{ display: none !important; }
  #mag-lists{ display: block; }
  .mag-card{ break-inside: avoid; box-shadow: none; border-color: #ccc; }
}

/* ==============================================================
   FINAL HERO OVERRIDE (Keep ONLY these lines at the end)
   - پاک‌سازی تداخل‌ها؛ اطمینان از Cover و نمایش بلافاصله
   ============================================================== */
#mag-hero .hero-carousel{ overflow:hidden; border-radius:inherit; }
#mag-hero .hero-track{ display:flex; height:100%; will-change:transform; transition:transform var(--dur-slow) var(--ease); direction:ltr; }
#mag-hero .hero-slide{ cursor: default; } 
#mag-hero .hero-media{ position:absolute; inset:0; }
#mag-hero .hero-media img{ display:block; width:100%; height:100%; object-fit:cover; opacity:1 !important; }
/* --- Fix: arrows point outward (prev at left, next at right) --- */
#mag-hero .hero-prev{ left:12px; right:auto; }
#mag-hero .hero-next{ right:12px; left:auto; }
/* --- Mobile hero sizing fix --- */
@supports (height: 1dvh){
  :root{ --hero-h: clamp(220px, 52dvh, 520px); } /* dvh روی دیوایس‌های جدید */
}

/* موبایل: بنر کوتاه‌تر و همیشه داخل قاب */
@media (max-width: 640px){
  :root{ --hero-h: clamp(200px, 44dvh, 420px); } /* ارتفاع کمتر در موبایل */
}

/* جلوگیری از نشتی گوشه‌های گرد هنگام transform در WebKit */
.mag-hero{ overflow: hidden; }
@supports (overflow: clip){
  .mag-hero{ overflow: clip; } /* iOS Safari fix */
}

/* اطمینان از این‌که ارتفاع از والد خارج نشود */
#mag-hero .hero-carousel,
#mag-hero .hero-track,
#mag-hero .hero-slide{ min-height: 0; height: 100%; }

#mag-hero .hero-media img{
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}