/* =============================================
   SaudiJabo — লেখার ভিতরের CTA বাক্স
   ---------------------------------------------
   সাইটের নিজস্ব রং ও মাপই ব্যবহার করা হয়েছে (main.css এর
   --sj-* ভেরিয়েবল)। আর্টিকেলের শেষের পুরোনো .sj-cta বাক্সটির
   সাথে যেন গুলিয়ে না যায়, তাই আলাদা নাম .sj-ictaa।

   ⚠️ লেখার মাঝখানে বসে, তাই পড়ার ছন্দ যেন না ভাঙে —
      হালকা ব্যাকগ্রাউন্ড, পাতলা বর্ডার, কোনো ছায়া বা
      অ্যানিমেশন নেই, আর বাক্সটি লেখার প্রস্থের বাইরে যায় না।
   ============================================= */

.sj-ictaa{
  margin: 26px 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--sj-line, #e9edf1);
  border-left: 3px solid var(--sj-green, #1B4332);
  background: var(--sj-soft, #f7f9fa);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

.sj-ictaa .sj-ictaa-head{ display: flex; align-items: flex-start; gap: 9px; }
.sj-ictaa .sj-ictaa-ic{ font-size: 19px; line-height: 1.4; flex: none; }
.sj-ictaa .sj-ictaa-t{
  font-size: 16px; font-weight: 700; line-height: 1.45;
  color: var(--sj-ink, #1f2937);
  margin: 0; padding: 0; border: 0;     /* .sj-body h3 এর মার্জিন/বর্ডার বাতিল */
  min-width: 0;
}
.sj-ictaa .sj-ictaa-d{
  font-size: 14px; line-height: 1.75;
  color: var(--sj-muted, #6b7280); margin: 7px 0 0;
}
.sj-ictaa .sj-ictaa-row{ display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }

.sj-ictaa .sj-ictaa-b{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;              /* মোবাইলে আঙুলের জন্য যথেষ্ট */
  padding: 10px 17px;
  border-radius: 9px;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  text-decoration: none;                 /* .sj-body a এর underline বাতিল */
  background: var(--sj-green, #1B4332);
  color: #fff;                           /* .sj-body a এর সবুজ রং বাতিল */
  border: 1px solid transparent;
  transition: opacity .15s;
}
.sj-ictaa .sj-ictaa-b:hover{ opacity: .92; color: #fff; text-decoration: none; }
.sj-ictaa .sj-ictaa-b:focus-visible{ outline: 2px solid var(--sj-green, #1B4332); outline-offset: 2px; }

/* বর্ডার-only বোতাম */
.sj-ictaa .sj-ictaa-b2{
  background: transparent;
  color: var(--sj-green, #1B4332);
  border-color: var(--sj-green, #1B4332);
}
.sj-ictaa .sj-ictaa-b2:hover{ background: rgba(27,67,50,.06); opacity: 1;
                                 color: var(--sj-green, #1B4332); }


/* ---------------------------------------------
   ⚠️ নির্দিষ্টতা (specificity)
   বাক্সটি লেখার ভিতরে বসে, আর main.css এ `.sj-body a` ও
   `.sj-body h3` নিয়ম দুটি আছে — সেগুলো (0,1,1) আমার আগের
   (0,1,0) নিয়মকে হারিয়ে দিত: বোতামে আন্ডারলাইন ও সবুজ লেখা,
   শিরোনামে ২৩px ও বাড়তি মার্জিন চলে আসত।
   তাই নিচে প্রতিটি নিয়ম `.sj-ictaa` এর ভিতরে লেখা — (0,2,0),
   যা `.sj-body` এর নিয়মগুলোর চেয়ে বেশি নির্দিষ্ট।
   --------------------------------------------- */

/* ---------- রং ---------- */
/* রং বদলানোর নিয়মগুলোকেও ভিত্তি নিয়মের (0,2,0) চেয়ে বেশি
   নির্দিষ্ট হতে হয়, তাই দুটি class একসাথে: .sj-ictaa.sj-ictaa-gold */
.sj-ictaa-gold{ border-left-color: var(--sj-gold, #d4af37); background: #fffbf0; }
.sj-ictaa.sj-ictaa-gold .sj-ictaa-b{ background: #b8912a; color: #fff; }
.sj-ictaa.sj-ictaa-gold .sj-ictaa-b2{ background: transparent; color: #8a6d1f; border-color: #b8912a; }

.sj-ictaa-blue{ border-left-color: #2563eb; background: #f3f8ff; }
.sj-ictaa.sj-ictaa-blue .sj-ictaa-b{ background: #2563eb; color: #fff; }
.sj-ictaa.sj-ictaa-blue .sj-ictaa-b2{ background: transparent; color: #1d4ed8; border-color: #2563eb; }

.sj-ictaa-neutral{ border-left-color: #9ca3af; background: #fafafa; }
.sj-ictaa.sj-ictaa-neutral .sj-ictaa-b{ background: #374151; color: #fff; }
.sj-ictaa.sj-ictaa-neutral .sj-ictaa-b2{ background: transparent; color: #374151; border-color: #9ca3af; }

/* ---------- ছোট পর্দা ---------- */
@media (max-width: 480px){
  .sj-ictaa{ padding: 14px 15px; margin: 22px 0; border-radius: 11px; }
  .sj-ictaa .sj-ictaa-t{ font-size: 15px; }
  .sj-ictaa .sj-ictaa-d{ font-size: 13.5px; }
  /* বোতাম পাশাপাশি না ধরলে পুরো প্রস্থে — কেটে যাওয়ার চেয়ে ভালো */
  .sj-ictaa .sj-ictaa-row{ gap: 8px; }
  .sj-ictaa .sj-ictaa-b{ flex: 1 1 100%; }
}
@media (min-width: 481px){
  .sj-ictaa .sj-ictaa-b{ flex: 0 1 auto; }
}

/* ছাপার সময় CTA দরকার নেই */
@media print{ .sj-ictaa{ display: none; } }