/* public_html/landing-modules/land-cta-final/assets/module.css */
/* land-cta-final (lcf) – scoped, RTL */

/* ====== Base ====== */
.lcf{
  direction: rtl;
  --container: min(1200px, 92vw);
  --ink:#111827; --muted:#6b7280;
  --brand:#ec4899; --brand2:#f472b6; --accent:#8b5cf6;
  --card-bd: rgba(17,24,39,.08);
  --radius: 20px;

  width: var(--container);
  margin-inline: auto;
  margin-block: 36px;                 /* فاصله از ماژول بالا/پایین */
  color: var(--ink);
  font-family: "IRANSans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ====== Card ====== */
.lcf__card{
  position: relative; isolation:isolate;
  display: grid; gap: 18px;
  grid-template-columns: 1.2fr .8fr;  /* متن راست، تصویر چپ (دسکتاپ) */
  grid-template-areas: "content illus";
  align-items: center;

  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.98));
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  padding: 22px 22px 22px 12px;
  box-shadow: 0 10px 30px rgba(17,24,39,.08), 0 2px 10px rgba(17,24,39,.04);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  overflow: hidden;
}

/* soft background glow inside card */
.lcf__card::before{
  content:""; position:absolute; inset:-18% -8%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40rem 22rem at 15% -6%, rgba(236,72,153,.12), transparent 60%),
    radial-gradient(28rem 18rem at 85% -8%, rgba(139,92,246,.10), transparent 62%),
    radial-gradient(48rem 28rem at 50% 120%, rgba(244,114,182,.10), transparent 66%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* grid areas */
.lcf__content{ grid-area: content; position:relative; z-index:1; }
.lcf__illus{   grid-area: illus;   position:relative; z-index:1; margin:0; display:grid; place-items:end; }

/* ====== Content ====== */
.lcf__title{
  margin:0 0 8px;
  font-family:"Lalezar","IRANSans";
  color:#7c3aed;
  font-size: clamp(22px,2.4vw,28px);
}
.lcf__title i{ margin-left:8px }
.lcf__lead{ margin:0 0 10px; color:var(--muted) }

.lcf__list{ list-style:none; padding:0; margin:0 0 14px; display:grid; gap:8px; }
.lcf__list li{ display:flex; align-items:flex-start; gap:8px; color:#374151 }
.lcf__list i{ color:#10b981; margin-top:3px }

/* ====== Buttons (no underline) ====== */
.lcf a, .lcf a:link, .lcf a:visited, .lcf a:hover, .lcf a:focus{ text-decoration:none !important; }
.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:700;border:0;cursor:pointer}
.btn-primary{ background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; box-shadow:0 10px 22px rgba(236,72,153,.25) }
.btn-ghost{ background:transparent; border:2px solid var(--accent); color:var(--accent) }
.btn-primary:hover{ filter:saturate(110%) }
.lcf__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ====== Illustration ====== */
.lcf__illus img{
  width: min(420px, 100%);
  height: auto;
  object-fit: contain;
  transform: translateY(6px);
  filter: drop-shadow(0 14px 30px rgba(17,24,39,.18));
}
.lcf__badge{
  position:absolute; bottom:16px; left:12px;
  background:#111827; color:#fff; font-size:12px; border-radius:999px;
  padding:6px 10px; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 10px 24px rgba(17,24,39,.25);
}

/* ====== Responsive (mobile) ====== */
@media (max-width: 980px){
  /* تک‌ستونه و ترتیب: اول عکس، بعد محتوا */
  .lcf__card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "illus"
      "content";
    padding: 18px;
  }

  /* تصویر بالای متن و بدون هم‌پوشانی */
  .lcf__illus{
    place-items: center;
    margin: 0 0 14px 0;      /* فاصله زیر تصویر */
    z-index: 1;
  }
  .lcf__illus img{
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none;         /* جلوی افتادن روی متن را می‌گیرد */
  }
  .lcf__badge{
    left: 50%;
    transform: translateX(-50%);
  }

  /* دکمه‌ها در یک ردیف و به اندازه متن */
  .lcf__actions{
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .lcf__actions .btn{
    width: auto;
    min-width: 0;
    text-align: center;
  }
}