:root{
  --ivy-bg:#0b0f17; --ivy-card:#121826; --ivy-accent:#8b5cf6; --ivy-accent-2:#22d3ee;
  --ivy-text:#e5e7eb; --ivy-muted:#94a3b8; --ivy-border:#1f2937;
}
.ivy-page{direction:rtl;background:var(--ivy-bg);color:var(--ivy-text)}
.ivy-container{max-width:1200px;margin:auto;padding:24px}
.ivy-section{margin-top:40px}
.ivy-section h2{margin:0 0 12px}
.ivy-btn{display:inline-block;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg,var(--ivy-accent),var(--ivy-accent-2));color:#0b0f17;font-weight:700;text-decoration:none}

.ivy-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.ivy-card{grid-column:span 6;background:linear-gradient(180deg,#0f1628,#0b111f);border:1px solid var(--ivy-border);border-radius:16px;overflow:hidden}
@media(max-width:900px){.ivy-card{grid-column:span 12}}
.ivy-card .thumb{height:120px;background-size:cover;background-position:center;border-bottom:1px solid var(--ivy-border)}
.ivy-card .body{padding:16px}
.ivy-card h3{margin:0 0 8px}
.ivy-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ivy-badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--ivy-border);color:var(--ivy-muted)}

.swiper{border-radius:18px;border:1px solid var(--ivy-border)}
.swiper-slide{position:relative;height:420px;background-size:cover;background-position:center}
.swiper-slide .overlay{position:absolute;inset:0;background:linear-gradient(90deg,#0b0f17cc 30%,transparent 70%)}
.swiper-slide .content{position:absolute;inset:0;padding:40px;display:flex;align-items:center}
.swiper-slide h1{font-size:38px;margin:0 0 10px}
.swiper-slide p{max-width:560px;color:var(--ivy-muted)}

.ivy-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ivy-step{background:var(--ivy-card);border:1px solid var(--ivy-border);border-radius:14px;padding:16px}
@media(max-width:900px){.ivy-steps{grid-template-columns:1fr}}

.ivy-faq details{background:var(--ivy-card);border:1px solid var(--ivy-border);border-radius:12px;padding:14px;margin:10px 0}
.ivy-sticky{position:sticky;bottom:18px;display:flex;justify-content:center;margin-top:24px}
.ivy-sticky .ivy-btn{box-shadow:0 10px 30px #8b5cf655}
/* clickable + hover */
.ivy-card{ position:relative; transition:transform .25s ease, box-shadow .25s ease; }
.ivy-card:hover{ transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.35); }

.ivy-card .ivy-card-link{
  position:absolute; inset:0; z-index:1; /* کل کارت را لینک می‌کند */
}
.ivy-card .body, .ivy-card .thumb{ position:relative; z-index:2; }

/* خوانایی بیشتر بنرهای روشن (اختیاری) */
.ivy-card .thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,15,23,.28), rgba(11,15,23,.52));
}
.ivy-single-hero{height:280px;background-size:cover;background-position:center;border-radius:16px;border:1px solid var(--ivy-border);margin-bottom:20px}
.ivy-single h1{margin:8px 0 16px}
.ivy-single-content{background:var(--ivy-card);border:1px solid var(--ivy-border);border-radius:16px;padding:18px;line-height:1.9}
/* ==== Ivy: hover رفتار کارت‌ها (جلوگیری از برش/هم‌پوشانی) ==== */
.ivy-card{ will-change: transform, box-shadow; position:relative; }
.ivy-card:hover{ z-index:2; transform: translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.35); }

/* ===== Ivy Org Promo (image + two/three mini violet chips) ===== */
.ivy-banner { padding:20px; position:relative; display:block; border-radius:16px; border:1px solid var(--ivy-border); background:linear-gradient(180deg,#0f1628,#0b111f); }
.ivy-banner .org-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:center;
}
.ivy-banner .promo-text h2{ margin:0 0 8px; font-size:22px; color:#fff; }
.ivy-banner .promo-text .promo-sub{ margin:0 0 12px; color:var(--ivy-muted); font-size:14.5px; }

.ivy-banner .mini-row{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.ivy-banner .mini-card{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:12px;
  background: rgba(124,77,255,.16);
  border:1px solid rgba(124,77,255,.35);
  color:#e9e2ff; font-size:12.5px; white-space:nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.ivy-banner .promo-media{
  aspect-ratio: 16/10;
  border-radius:14px; overflow:hidden;
  background: rgba(255,255,255,.04);
  display:block;
}
.ivy-banner .promo-media img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}

/* Glow بنفش لطیف برای کل بنر (با hover قوی‌تر) */
.ivy-banner{
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .25s ease, transform .2s ease;
}
.ivy-banner:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px rgba(90,38,255,.40),
    0 42px 120px rgba(90,38,255,.26);
}

/* دکمه حالت Ghost */
.ivy-btn.ghost{
  background:transparent;
  color:#c7c3ff; border:1px solid rgba(139,92,246,.45);
  padding:10px 14px; border-radius:10px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.ivy-btn.ghost:hover{
  background: rgba(139,92,246,.12);
  border-color: rgba(139,92,246,.75);
  color:#fff;
}

/* موبایل: استک عمودی و نسبت تصویری مناسب */
@media (max-width: 900px){
  .ivy-banner .org-grid{ grid-template-columns: 1fr; }
  .ivy-banner .promo-media{ aspect-ratio: 16/11; order:-1; }
}

/* tighten paddings on small mobile + خوانایی پاراگراف‌ها */
@media (max-width: 640px){
  .ivy-banner{ padding:12px !important; }
  .ivy-banner .org-grid{ gap:10px; }
  .ivy-banner .promo-text{ padding:0 !important; margin:0; }
  .ivy-banner .promo-text h2{ font-size:18px; margin:0 0 6px; }
  .ivy-banner .promo-text .promo-sub{ font-size:13px; line-height:1.6; margin:0 0 10px; }
  .ivy-banner .mini-row{ gap:6px; margin-bottom:10px; }
  .ivy-banner .mini-card{ padding:6px 10px; font-size:12px; }
  .ivy-btn.ghost{ padding:8px 12px; border-radius:10px; }

  .ivy-banner .promo-text p{
    text-align: justify;
    text-justify: inter-word;
    text-align-last: right;
    line-height: 1.85;
    overflow-wrap: anywhere; word-break: normal;
    hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
  }
}
/* ==== Ivy Hero Slider ==== */
#ivy-hero{ margin: 8px 0 28px; border:1px solid var(--ivy-border); border-radius:18px; overflow:hidden; position:relative; }
#ivy-hero .swiper-slide{ position:relative; height:480px; }
@media (max-width: 900px){ #ivy-hero .swiper-slide{ height:360px; } }

#ivy-hero .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.08); }
#ivy-hero .content{ position:relative; z-index:2; height:100%; display:flex; align-items:center; }
#ivy-hero .content > div{ padding:36px; max-width:720px; background:linear-gradient(90deg, rgba(11,15,23,.65), rgba(11,15,23,0) 65%); border-radius:12px; }
#ivy-hero h1{ margin:0 0 10px; font-size:34px; }
#ivy-hero p{ color:var(--ivy-muted); margin:0 0 12px; }
/* ==== Hero Slider: ارتفاع ایمن برای موبایل/دسکتاپ ==== */
#ivy-hero{
  border:1px solid var(--ivy-border);
  border-radius:18px;
  overflow:hidden;
  margin:8px 0 28px;
  position:relative;
}
#ivy-hero .swiper-wrapper{ align-items:stretch; }
#ivy-hero .swiper-slide{
  position:relative;
  height:48vh;         /* متناسب با ارتفاع صفحه */
  min-height:320px;    /* کف برای گوشی‌ها */
  max-height:520px;    /* سقف برای دسکتاپ */
}
@media (max-width: 900px){
  #ivy-hero .swiper-slide{ height:40vh; min-height:300px; }
}
@media (max-width: 480px){
  #ivy-hero .swiper-slide{ height:36vh; min-height:260px; }
}
#ivy-hero .hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.08);
}
#ivy-hero .hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,15,23,.55), rgba(11,15,23,0) 70%);
}
#ivy-hero .content{ position:relative; z-index:2; height:100%; display:flex; align-items:center; }
#ivy-hero .content > div{
  padding:28px; max-width:720px;
  background:linear-gradient(90deg, rgba(11,15,23,.65), rgba(11,15,23,0));
  border-radius:12px;
}
#ivy-hero h1{ margin:0 0 10px; font-size:32px; }
#ivy-hero p{ color:var(--ivy-muted); margin:0 0 12px; }

/* ==== بنر پرومو: کادر/پس‌زمینه و رفتار موبایل ==== */
.ivy-banner{
  display:block; border:1px solid var(--ivy-border);
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#101727,#0b111f);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:box-shadow .25s ease, transform .2s ease;
}
.ivy-banner:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(90,38,255,.35), 0 42px 120px rgba(90,38,255,.22);
}
@media (max-width: 640px){
  .ivy-banner{ padding:12px !important; border-radius:14px; }
  .ivy-banner .promo-media{ aspect-ratio:16/11; border-radius:12px; }
  .ivy-banner .promo-text h2{ font-size:18px; }
  .ivy-banner .promo-text .promo-sub{ font-size:13px; line-height:1.65; }
}
/* ==== Ivy Hero: اندازه تیتر/متن/دکمه به صورت سیال ==== */
#ivy-hero .content > div{
  padding: clamp(12px, 2.4vw, 28px);
  max-width: min(720px, 92vw);
  border-radius: 12px;
}

/* تیتر */
#ivy-hero h1{
  font-size: clamp(18px, 3.2vw + 8px, 32px);  /* موبایل کوچیک ← دسکتاپ متوسط */
  line-height: 1.25;
  margin: 0 0 8px;
  text-wrap: balance;
}

/* زیرتیتر */
#ivy-hero p{
  font-size: clamp(12.5px, 1.2vw + 8px, 15.5px);
  line-height: 1.7;
  margin: 0 0 10px;
}

/* فقط دکمه‌های داخل هیرو اسلایدر */
#ivy-hero .ivy-btn{
  font-size: clamp(12px, 1vw + 8px, 14px);
  padding: clamp(7px, 1.2vw, 10px) clamp(12px, 2.2vw, 16px);
  border-radius: 10px;
}

/* نویگیشن/پیجینیشن جمع‌وجور */
#ivy-hero .swiper-button-next,
#ivy-hero .swiper-button-prev{
  width: 36px; height: 36px; transform: scale(.9);
}
#ivy-hero .swiper-pagination-bullet{
  width: 7px; height: 7px; opacity: .6;
}
#ivy-hero .swiper-pagination-bullet-active{ opacity: 1; }

/* موبایل‌های کوچک: متن فشرده‌تر و دکمه کوچک‌تر */
@media (max-width: 480px){
  #ivy-hero h1{ font-size: 20px; }
  #ivy-hero p{ font-size: 13px; }
  #ivy-hero .ivy-btn{ font-size: 12px; padding: 7px 12px; }
  /* درصورت تمایل فلش‌ها حذف شوند: */
  #ivy-hero .swiper-button-next, #ivy-hero .swiper-button-prev{ display:none; }
}
/* --- Hero CTA: در موبایل نصف اندازه و گوشهٔ پایین راست --- */
@media (max-width: 600px){
  #ivy-hero .swiper-slide{ position: relative; } /* لازم برای position:absolute */
  #ivy-hero .content > div{
    /* کمی فضا برای دکمه در پایین راست خالی کنیم */
    padding-right: 12px !important;
    padding-bottom: 56px !important;
    max-width: 100%;
  }
  #ivy-hero .content .ivy-btn{
    position: absolute;
    right: 12px;             /* گوشهٔ پایین راست */
    bottom: 12px;
    z-index: 3;

    /* نصف اندازه‌ی فعلی */
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 9px;

    /* کمی سایه برای خوانایی */
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
  }
}

/* خیلی کوچک‌ها (<=380px): یک پله کوچک‌تر */
@media (max-width: 380px){
  #ivy-hero .content .ivy-btn{
    font-size: 10px;
    padding: 5px 9px;
  }
}
/* --- Hero text @ mobile: roughly half size --- */
@media (max-width: 600px){
  #ivy-hero h1{
    font-size: 16px;      /* قبلاً ~30 → حالا حدود نصف */
    line-height: 1.3;
    margin: 0 0 6px;
  }
  #ivy-hero p{
    font-size: 12px;      /* قبلاً ~14–15 → نصف‌تر */
    line-height: 1.55;
    margin: 0 0 8px;
  }
  /* دکمه را هم که جابجا کردیم، نصف سایز بماند: */
  #ivy-hero .content .ivy-btn{
    font-size: 10px;
    padding: 5px 9px;
    border-radius: 9px;
  }
}

/* گوشی‌های خیلی کوچک */
@media (max-width: 380px){
  #ivy-hero h1{ font-size: 14px; }
  #ivy-hero p { font-size: 11px; }
  #ivy-hero .content .ivy-btn{ font-size: 9.5px; padding: 4.5px 8px; }
}
/* --- Hero: متن خیلی کوچک + جابجایی به گوشهٔ پایین راست (بالای CTA) --- */
@media (max-width: 600px){

  /* ظرف متن را از وسط می‌بریم گوشهٔ پایین راست */
  #ivy-hero .content{ align-items:flex-end; }
  #ivy-hero .content > div{
    position:absolute;
    right:12px;              /* گوشهٔ راست */
    bottom:56px;             /* بالای CTA (CTA bottom=12px + فاصله) */
    max-width:58vw;          /* عرض کم تا با CTA تداخل نکند */
    padding:6px 8px !important;
    border-radius:10px;
    background:rgba(11,15,23,.55);              /* پس‌زمینه تیره برای خوانایی */
    border:1px solid rgba(255,255,255,.08);
    text-align:right; 
    z-index:3;
  }

  /* متن‌ها تقریباً نصف اندازه */
  #ivy-hero h1{
    font-size:13px;          /* کوچک مثل h6 */
    line-height:1.25;
    margin:0 0 4px;
    text-wrap:balance;
  }
  #ivy-hero p{
    font-size:11px;
    line-height:1.4;
    margin:0;
  }

  /* CTA: گوشهٔ پایین راست و کوچک */
  #ivy-hero .content .ivy-btn{
    position:absolute;
    right:12px; bottom:12px;
    font-size:10px;
    padding:5px 9px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    z-index:3;
  }

  /* کمک به خوانایی روی تصاویر روشن */
  #ivy-hero .hero-bg::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, transparent 58%, rgba(11,15,23,.55) 100%),
      linear-gradient(90deg, rgba(11,15,23,.35), transparent 60%);
  }

  /* نویگیشن جمع‌وجور */
  #ivy-hero .swiper-button-next, #ivy-hero .swiper-button-prev{ display:none; }
  #ivy-hero .swiper-pagination-bullet{ width:6px; height:6px; }
}
/* --- Hero: bring text lower & move CTA to bottom-left on mobile --- */
@media (max-width: 600px){
  /* ظرف متن: گوشهٔ چپ پایین و نزدیک‌تر به لبه */
  #ivy-hero .content{ align-items:flex-end; }
  #ivy-hero .content > div{
    position:absolute;
    left:12px;              /* از راست به چپ تغییر کرد */
    right:auto;
    bottom:44px;            /* قبلاً 56 → نزدیک‌تر به لبه پایین */
    max-width:58vw;
    padding:6px 8px !important;
    border-radius:10px;
    background:rgba(11,15,23,.55);
    border:1px solid rgba(255,255,255,.08);
    text-align:right;       /* متن فارسی راست‌چین بماند */
    z-index:3;
  }

  /* CTA: گوشهٔ پایین چپ */
  #ivy-hero .content .ivy-btn{
    position:absolute;
    left:12px;
    right:auto;
    bottom:10px;
    font-size:10px; padding:5px 9px; border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    z-index:3;
  }

  /* برای خوانایی متن سمت چپ، گرادیان از چپ و پایین */
  #ivy-hero .hero-bg::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, transparent 58%, rgba(11,15,23,.55) 100%),
      linear-gradient(270deg, rgba(11,15,23,.35), transparent 60%);
  }
}
/* ---- Hero mobile: text bottom-right, CTA separated (no overlap) ---- */
@media (max-width: 600px){
  #ivy-hero .content{ align-items:flex-end; }

  /* کل باکس متن را به گوشهٔ پایینِ راست بچسبان */
  #ivy-hero .content > div{
    position:absolute;
    right:5px;
    bottom:5px;                 /* نزدیک لبه؛ اگر خواستی 12px کن */
    max-width:62vw;
    padding:8px 10px !important;
    border-radius:10px;
    background:rgba(11,15,23,.58);
    border:1px solid rgba(255,255,255,.08);
    text-align:right;
    z-index:3;

    display:flex;                /* CTA را زیر متن نگه می‌دارد */
    flex-direction:column;
    gap:6px;                     /* فاصلهٔ امن بین متن و CTA */
  }

  /* متن کوچک‌تر (تقریباً نصف) */
  #ivy-hero h1{ font-size:12px; line-height:1.25; margin:0; }
  #ivy-hero p { font-size:10px; line-height:1.4;  margin:0; }

  /* CTA: دیگر absolute نیست تا روی متن نیفتد */
  #ivy-hero .content .ivy-btn{
    position:static !important;  /* لغو قوانین قبلی */
    align-self:flex-end;         /* چسبیده به راست */
    font-size:10px;
    padding:5px 9px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
  }

  /* نقاط صفحه‌بندی کمی پایین‌تر تا با متن تداخل نکند */
  #ivy-hero .swiper-pagination{ bottom:6px; }

  /* کمک به خوانایی در گوشهٔ راست/پایین */
  #ivy-hero .hero-bg::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, transparent 58%, rgba(11,15,23,.55) 100%),
      linear-gradient(90deg, rgba(11,15,23,.35), transparent 60%);
  }
}
/* ==== Hero (Desktop ≥901px): caption + CTA bottom-right, separate ==== */
@media (min-width: 901px){
  #ivy-hero .content{ align-items:flex-end; }

  /* باکس متن در پایینِ راست، با پس‌زمینهٔ نیمه‌شفاف برای خوانایی */
  #ivy-hero .content > div{
    position:absolute;
    right:24px;
    bottom:24px;               /* اگر خواستی نزدیک‌تر: 56px یا 48px */
    max-width: 38vw;
    padding:14px 16px;
    border-radius:12px;
    background: rgba(11,15,23,.55);
    border:1px solid rgba(255,255,255,.08);
    text-align:right;

    display:flex;
    flex-direction:column;
    gap:8px;                   /* فاصله متن و CTA */
    z-index:3;
  }

  /* CTA جدا، زیر متن و چسبیده به راست */
  #ivy-hero .content .ivy-btn{
    position:static !important;
    align-self:flex-end;
    font-size:14px;
    padding:10px 14px;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
  }

  /* نقاط صفحه‌بندی کمی بالاتر تا با باکس تداخل نکند */
  #ivy-hero .swiper-pagination{ bottom:18px; }

  /* گرادیان برای خوانایی در پایین و راست تصویر */
  #ivy-hero .hero-bg::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, transparent 62%, rgba(11,15,23,.55) 100%),
      linear-gradient(90deg, rgba(11,15,23,.28), transparent 55%);
  }
}
/* ==== Split Intro Card (image right, text left) ==== */
.ivy-split{
  padding:20px; border:1px solid var(--ivy-border); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#101727,#0b111f);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:box-shadow .25s ease, transform .2s ease;
}
.ivy-split:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(90,38,255,.35), 0 42px 120px rgba(90,38,255,.22);
}

.ivy-split .split-grid{
  display:grid; align-items:center; gap:18px;
  grid-template-columns: 1fr 1.15fr;   /* متن چپ | تصویر راست */
}
.ivy-split .split-text h2{ margin:0 0 8px; font-size:22px; color:#fff; }
.ivy-split .split-text .promo-sub{ margin:0 0 12px; color:var(--ivy-muted); font-size:14.5px; }

/* reuse chips from banner */
.ivy-split .mini-row{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.ivy-split .mini-card{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:12px;
  background: rgba(124,77,255,.16);
  border:1px solid rgba(124,77,255,.35);
  color:#e9e2ff; font-size:12.5px; white-space:nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* تصویر راست */
.ivy-split .split-media{
  aspect-ratio: 16/10; border-radius:14px; overflow:hidden;
  background: rgba(255,255,255,.04);
}
.ivy-split .split-media img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}

/* ریسپانسیو */
@media (max-width: 900px){
  .ivy-split .split-grid{ grid-template-columns: 1fr; }
  .ivy-split .split-media{ order:-1; aspect-ratio:16/11; } /* تصویر بالا، متن پایین */
}
@media (max-width: 640px){
  .ivy-split{ padding:12px !important; border-radius:14px; }
  .ivy-split .split-text h2{ font-size:18px; margin:0 0 6px; }
  .ivy-split .split-text .promo-sub{ font-size:13px; line-height:1.65; margin:0 0 10px; }
  .ivy-split .mini-row{ gap:6px; margin-bottom:10px; }
  .ivy-split .mini-card{ padding:6px 10px; font-size:12px; }
  .ivy-split .split-media{ border-radius:12px; }
}
/* ---- Collapsible abstract (details/summary) ---- */
.ivy-btn.sm{ font-size:12px; padding:7px 10px; border-radius:9px; }

.ivy-details{ margin-top:8px; }
.ivy-details > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
/* حذف فلش پیش‌فرض summary */
.ivy-details > summary::-webkit-details-marker{ display:none; }

/* بدنهٔ متن کامل با انیمیشن نرم */
.ivy-details-body{
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, opacity .25s ease;
  opacity:.0; margin-top:6px;
}
.ivy-details[open] .ivy-details-body{
  max-height: 1800px; /* کافی بزرگ که جواب بده */
  opacity:1;
}

/* فاصله با چپس‌ها/CTA در کارت */
.split-text .ivy-details{ margin-bottom:8px; }
/* === Intro Card: کنترل اندازه تصویر + تغییر لایه‌بندی وقتی متن کامل باز است === */

/* اندازه تصویر کارت معرفی: این عدد را با کارت بالایی هماهنگ کن (۵۲۰/۵۴۰/۵۶۰px).
   اگر کارت بالایی را 16:9 می‌خواهی، aspect-ratio هم الان 16/10 است (کمی پهن‌تر). */
.ivy-split{ --intro-media-w: 540px; }  /* ← درصورت نیاز 520 یا 560 کن */

@media (min-width: 901px){
  /* حالت معمول: دو ستون (متن چپ، تصویر راست) و عرض ثابت برای تصویر */
  .ivy-split .split-grid{
    display:grid; align-items:center; gap:18px;
    grid-template-columns: 1fr auto;         /* متن کشسان، تصویر به اندازه ثابت */
  }
  .ivy-split .split-media{
    width: var(--intro-media-w);
    aspect-ratio: 16/10;
    border-radius:14px; overflow:hidden;
    justify-self:end;
    background: rgba(255,255,255,.04);
  }
  .ivy-split .split-media img{
    width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
  }

  /* وقتی متن کامل باز است: کارت تک‌ستونه شود و تصویر برود بالا */
  .ivy-split:has(details[open]) .split-grid,
  .ivy-split.details-open .split-grid {       /* fallback برای مرورگرهای بدون :has */
    grid-template-columns: 1fr;
  }
  .ivy-split:has(details[open]) .split-media,
  .ivy-split.details-open .split-media{
    width: 100%;           /* تمام‌عرض کارت */
    max-width: none;
    order: -1;             /* برود بالای متن */
    margin-bottom: 12px;
    justify-self: stretch;
  }
  .ivy-split:has(details[open]) .split-text,
  .ivy-split.details-open .split-text{
    max-width: 100%;
  }
}

/* اگر کارت خیلی عریض است و تصویر هنوز بزرگ دیده می‌شود، این break را فعال کن */
@media (min-width: 1200px){
  .ivy-split{ --intro-media-w: 520px; }  /* یک پله کوچک‌تر در دسکتاپ‌های بزرگ */
}
/* ==== فقط کارد معرفی با کلاس swap-left: تصویر چپ، متن راست ==== */
@media (min-width: 901px){
  .ivy-split.swap-left .split-grid{
    /* قبلاً: 1fr auto (متن چپ | تصویر راست) */
    grid-template-columns: auto 1fr;   /* تصویر چپ | متن راست */
  }
  .ivy-split.swap-left .split-media{
    order: -1;               /* تصویر را قبل از متن بیاور */
    justify-self: start;     /* به چپ بچسبد */
    margin: 0;               /* از gap داخلی گرید استفاده کن */
  }
}

/* وقتی متن کامل باز شود، همان رفتار قبلی: تک‌ستونه، تصویر بالا */
@media (min-width: 901px){
  .ivy-split.swap-left:has(details[open]) .split-grid,
  .ivy-split.swap-left.details-open .split-grid{ /* fallback برای مرورگرهای بدون :has */
    grid-template-columns: 1fr;
  }
  .ivy-split.swap-left:has(details[open]) .split-media,
  .ivy-split.swap-left.details-open .split-media{
    width: 100%;
    order: -1;
    margin-bottom: 12px;
    justify-self: stretch;
  }
}
/* === Hero overlay: quarter size + font sizes === */
.ivy-hero-swiper .content{           /* خود لایه‌ی اوورلی */
  position: absolute; inset: 0;
  display:flex; align-items:center; justify-content:center;
}

.ivy-hero-swiper .content > div{     /* باکس متن و دکمه */
  width: clamp(150px, 25%, 420px);   /* ≈ یک‌چهارم اسلاید، با حداقل/حداکثر منطقی برای موبایل و دسکتاپ */
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(10,12,22,.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* فونت‌ها طبق درخواست شما */
.ivy-hero-swiper .content h1{
  font-size: 12px !important;
  line-height: 1.5;
  margin: 0 0 6px;
  font-weight: 800;
}
.ivy-hero-swiper .content p{
  font-size: 10px !important;
  line-height: 1.7;
  margin: 0 0 8px;
}
.ivy-hero-swiper .ivy-btn{
  font-size: 9px !important;
  padding: 6px 10px;
  border-radius: 8px;
}

/* اگر فاصله‌ی باکس از مرکز زیاد است و می‌خواهی پایین بیاید، این را فعال کن: */
/*
.ivy-hero-swiper .content{
  align-items: flex-end;
  padding-bottom: 6%;
}
*/
/* === HERO: جلوگیری از چندخطی شدن تیتر/زیرتیتر === */
.ivy-hero-swiper .content > div{
  max-width: min(75vw, 580px); /* کادر اوورلی محدود؛ روی موبایل هم جمع‌وجور می‌ماند */
}

/* تک‌خط اجباری + سه‌نقطه در انتها در صورت بلند بودن متن */
.ivy-hero-swiper .content h1,
.ivy-hero-swiper .content p{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: right;
  direction: rtl;
}

/* دکمه هم تک‌خط بماند */
.ivy-hero-swiper .content .ivy-btn{
  white-space: nowrap;
}

/* اگر لازم شد: روی نمایشگرهای بزرگ‌تر، کادر را جمع‌تر کن تا قطع شدن کمتر رخ دهد */
@media (min-width: 1024px){
  .ivy-hero-swiper .content > div{ max-width: 40vw; }
}
/* Single Workshop — Hero */
.ivy-hero-single .ivy-hero-wrap{position:relative; border-radius:18px; overflow:hidden; box-shadow:0 0 40px rgba(120,70,255,.25)}
.ivy-hero-single .ivy-hero-media{aspect-ratio:16/9; background:#0b0f18}
.ivy-hero-single .ivy-hero-media img{width:100%; height:100%; object-fit:cover; display:block}
.ivy-hero-single .ivy-hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,10,18,.05),rgba(6,10,18,.66))}
.ivy-hero-single .ivy-hero-content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:24px}
.ivy-hero-title{margin:0 0 6px; font-size:30px}
.ivy-hero-subtitle{opacity:.9; margin:0 0 12px}
.ivy-hero-minis{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.ivy-hero-minis .mini{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px 10px}
.ivy-hero-minis .mini span{display:block; font-size:12px; opacity:.75}
.ivy-hero-cta .ivy-btn{padding:.7rem 1.1rem}

/* Instructors */
.ivy-instructors-card .ivy-instructors{display:flex; gap:10px; flex-wrap:wrap}
.ivy-instructor{width:84px; height:84px; border-radius:999px; overflow:hidden; box-shadow:0 0 0 3px rgba(255,255,255,.12) inset}
.ivy-instructors-meta{margin-top:10px; display:grid; gap:4px}
.ivy-instructors-meta span{opacity:.7; margin-left:6px}

/* Facts mini-cards */
.ivy-mini.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:1024px){ .ivy-mini.grid-4{grid-template-columns:repeat(2,1fr);} }

/* Syllabus */
.ivy-syllabus{display:flex; flex-direction:column; gap:10px}
.syll-row{display:grid; grid-template-columns:48px 1fr 120px; align-items:center; gap:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px 12px}
.syll-idx{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:rgba(120,70,255,.18)}
.syll-title{font-weight:700}
.syll-desc{opacity:.85}
.syll-dur{text-align:center; background:rgba(255,255,255,.06); border-radius:12px; padding:6px 10px}

/* Links list */
.ivy-links{display:grid; gap:8px; padding:0; list-style:none}
.ivy-links a{text-decoration:underline}

/* Purple chips */
.ivy-chips{display:flex; gap:8px; flex-wrap:wrap}
.chip.purple{background:rgba(132,72,255,.18); border:1px solid rgba(132,72,255,.35); color:#cdbdff; padding:6px 10px; border-radius:999px; font-size:13px}

/* Related grid */
.ivy-rel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.ivy-rel-item{display:block; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden}
.ivy-rel-item .media{aspect-ratio:16/9; background:#0b0f18}
.ivy-rel-item .media img{width:100%; height:100%; object-fit:cover}
.ivy-rel-item .ttl{padding:10px 12px; font-weight:700; line-height:1.5}
@media (max-width:1024px){ .ivy-rel-grid{grid-template-columns:1fr 1fr} }

/* two-col text */
.ivy-card-body.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:1024px){ .ivy-card-body.two-col{grid-template-columns:1fr} }
/* === FIX[workshops only]: make entire card clickable === */
/* body کلاس این صفحه معمولاً یکی از این‌هاست: page-template-template-ivy-workshops[-php] */
body.page-template-template-ivy-workshops .ivy-card .ivy-card-link,
body.page-template-template-ivy-workshops-php .ivy-card .ivy-card-link{
  position: absolute; inset: 0;
  z-index: 60 !important;      /* بالاتر از بدنه/تصویر/اوورلی‌ها */
  display: block;
  pointer-events: auto;
}

/* دکمه‌ها از روکش لینک هم بالاتر بمانند */
body.page-template-template-ivy-workshops .ivy-card .ivy-btn,
body.page-template-template-ivy-workshops-php .ivy-card .ivy-btn{
  position: relative;
  z-index: 70 !important;
}
/* === FIX (scoped to workshops template): stacking + clicks === */
body.page-template-template-ivy-workshops .ivy-card,
body.page-template-template-ivy-workshops-php .ivy-card{
  position: relative;              /* کانتکست قطعی برای inset:0 */
  isolation: isolate;              /* استکینگ‌کانتکست مستقل */
  display: grid !important;        /* جلوی inline شدن ناخواسته */
}

body.page-template-template-ivy-workshops .ivy-card .ivy-card-link,
body.page-template-template-ivy-workshops-php .ivy-card .ivy-card-link{
  position: absolute;
  inset: 0;
  z-index: 999 !important;         /* بالاتر از همهٔ فرزندان کارت */
  display: block;
  pointer-events: auto !important;
}

/* دکمه بالاتر از روکش بماند */
body.page-template-template-ivy-workshops .ivy-card .ivy-btn,
body.page-template-template-ivy-workshops-php .ivy-card .ivy-btn{
  position: relative;
  z-index: 1000 !important;
}

/* هیچ لایهٔ تزئینی کلیک را نگیرد */
body.page-template-template-ivy-workshops .ivy-card::before,
body.page-template-template-ivy-workshops .ivy-card::after,
body.page-template-template-ivy-workshops .ivy-card .thumb::after,
body.page-template-template-ivy-workshops-php .ivy-card::before,
body.page-template-template-ivy-workshops-php .ivy-card::after,
body.page-template-template-ivy-workshops-php .ivy-card .thumb::after{
  pointer-events: none !important;
}

/* اگر هنوز تصویر روی روکش می‌افتد، کلیک تصویر را عبور بده (فقط این صفحه) */
body.page-template-template-ivy-workshops .ivy-card .ivy-media-frame img,
body.page-template-template-ivy-workshops-php .ivy-card .ivy-media-frame img{
  pointer-events: none;            /* کلیک از تصویر رد شود به روکش لینک */
}