/* ============================================================
   Najma Clean — bento.css
   تقسيمة فسيفساء البلاطات (Bento Mosaic) — تكسر النمط الخطي
   ============================================================ */

/* ---------- شبكة البنتو ---------- */
.nc-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 18px;
  grid-auto-flow: dense;
}
.nc-bento--hero { grid-auto-rows: minmax(168px, auto); }

/* امتدادات */
.t-c2 { grid-column: span 2; }
.t-c3 { grid-column: span 3; }
.t-c4 { grid-column: span 4; }
.t-r2 { grid-row: span 2; }
.t-r3 { grid-row: span 3; }

/* ---------- البلاطة الأساسية ---------- */
.nc-tile {
  position: relative;
  border-radius: 26px;
  padding: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--nc-line);
  background: #fff;
  transition: transform var(--nc-dur) var(--nc-ease), box-shadow var(--nc-dur) var(--nc-ease);
  min-height: 150px;
}
.nc-tile:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(10,34,64,.16); }
.nc-tile h2, .nc-tile h3 { margin: 0; }
.nc-tile__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }

/* أيقونة دائرية أعلى البلاطة */
.nc-tile__ic { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:rgba(22,166,201,.10); color:var(--nc-cyan-600); flex:0 0 auto; }
.nc-tile__ic svg { width:28px; height:28px; }

/* ---------- أنماط لونية للبلاطات ---------- */
.nc-tile--navy { background: var(--nc-grad-hero); color:#fff; border-color:transparent; }
.nc-tile--navy h1,.nc-tile--navy h2,.nc-tile--navy h3 { color:#fff; }
.nc-tile--navy p { color:#CBDAEC; }
.nc-tile--navy .nc-tile__ic { background:rgba(255,255,255,.12); color:#fff; }

.nc-tile--cyan { background: var(--nc-grad-cyan); color:#fff; border-color:transparent; }
.nc-tile--cyan h2,.nc-tile--cyan h3 { color:#fff; }

.nc-tile--gold { background: var(--nc-grad-gold); color:var(--nc-navy-900); border-color:transparent; }
.nc-tile--gold h2,.nc-tile--gold h3 { color:var(--nc-navy-900); }

.nc-tile--glass {
  background: var(--nc-glass-bg-dark);
  -webkit-backdrop-filter: var(--nc-glass-blur); backdrop-filter: var(--nc-glass-blur);
  border: 1px solid rgba(255,255,255,.7);
}
.nc-tile--dark { background: var(--nc-navy-800); color:#DCE7F2; border-color:transparent; }
.nc-tile--dark h2,.nc-tile--dark h3 { color:#fff; }

.nc-tile--img { color:#fff; border-color:transparent; }
.nc-tile--img .nc-tile__bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; transition:transform .6s var(--nc-ease); }
.nc-tile--img:hover .nc-tile__bg { transform:scale(1.06); }
.nc-tile--img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,34,64,.15), rgba(10,34,64,.85)); z-index:1; }
.nc-tile--img > * { position:relative; z-index:2; }
.nc-tile--img h2,.nc-tile--img h3 { color:#fff; }

/* توهّجات داخل البلاطات */
.nc-tile__glow { position:absolute; width:280px; height:280px; border-radius:50%; pointer-events:none; z-index:0; }
.nc-tile__glow--gold { background: var(--nc-glow-gold); top:-110px; left:-70px; }
.nc-tile__glow--cyan { background: var(--nc-glow-cyan); bottom:-130px; right:-90px; }
.nc-tile > .nc-tile__inner { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; height:100%; gap:14px; }

/* ---------- محتوى البلاطات الخاص ---------- */
.nc-tile__eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--nc-font-head); font-weight:700; font-size:.85rem; padding:6px 14px; border-radius:var(--nc-radius-pill); background:rgba(255,255,255,.14); width:max-content; }
.nc-tile--glass .nc-tile__eyebrow { background:rgba(22,166,201,.12); color:var(--nc-cyan-600); }

.nc-tile__big { font-family:var(--nc-font-head); font-weight:800; font-size:clamp(2.2rem,3.4vw,3.4rem); line-height:1; }
.nc-tile__num { font-family:var(--nc-font-head); font-weight:800; font-size:clamp(2rem,3vw,3rem); line-height:1; color:var(--nc-gold-500); }
.nc-tile--navy .nc-tile__num, .nc-tile--dark .nc-tile__num { color:var(--nc-gold-400); }
.nc-tile__label { color:var(--nc-muted); font-size:.92rem; }
.nc-tile--navy .nc-tile__label,.nc-tile--dark .nc-tile__label { color:#A9BDD4; }

.nc-tile__stars { color:var(--nc-gold-500); letter-spacing:3px; font-size:1.1rem; }
.nc-tile__cta { display:inline-flex; align-items:center; gap:8px; font-family:var(--nc-font-head); font-weight:700; color:var(--nc-cyan-600); width:max-content; }
.nc-tile--navy .nc-tile__cta,.nc-tile--img .nc-tile__cta { color:var(--nc-gold-400); }

/* بلاطة إجراء سريع (واتساب/اتصال) */
.nc-tile--action { align-items:flex-start; justify-content:center; gap:10px; text-align:center; }
.nc-tile--action .nc-tile__ic { width:62px; height:62px; margin-bottom:4px; }
.nc-tile--wa { background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; border-color:transparent; }
.nc-tile--wa .nc-tile__ic { background:rgba(255,255,255,.18); color:#fff; }

/* بلاطة قبل/بعد داخل البنتو */
.nc-tile--ba { padding:0; }
.nc-tile--ba .nc-ba { position:absolute; inset:0; max-width:none; margin:0; border-radius:26px; aspect-ratio:auto; box-shadow:none; }

/* رقائق المدن داخل بلاطة */
.nc-tile__chips { display:flex; flex-wrap:wrap; gap:8px; }
.nc-tile__chips span { font-size:.82rem; padding:7px 13px; border-radius:var(--nc-radius-pill); background:rgba(255,255,255,.12); font-family:var(--nc-font-head); font-weight:600; }
.nc-tile--glass .nc-tile__chips span { background:rgba(10,34,64,.06); color:var(--nc-navy-800); }

/* صورة عميل صغيرة (avatar stack) */
.nc-ava-stack { display:flex; }
.nc-ava-stack span { width:38px; height:38px; border-radius:50%; border:2px solid #fff; margin-in-start:-10px; background:var(--nc-grad-cyan); color:#fff; display:grid; place-items:center; font-family:var(--nc-font-head); font-weight:700; font-size:.85rem; }
.nc-ava-stack span:first-child { margin-in-start:0; }

/* ---------- شريط المدن المتحرك (marquee) ---------- */
.nc-marquee { overflow:hidden; border-radius:var(--nc-radius-pill); border:1px solid var(--nc-line); background:#fff; padding:14px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.nc-marquee__track { display:flex; gap:42px; width:max-content; animation:nc-marq 32s linear infinite; }
.nc-marquee:hover .nc-marquee__track { animation-play-state:paused; }
.nc-marquee__track span { font-family:var(--nc-font-head); font-weight:700; color:var(--nc-navy-800); display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.nc-marquee__track span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--nc-cyan-500); }
@keyframes nc-marq { to { transform:translateX(50%); } }

/* ---------- عنوان قسم البنتو (مضغوط، غير متمركز) ---------- */
.nc-bento-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap; }
.nc-bento-head h2 { margin:0; }
.nc-bento-head p { color:var(--nc-muted); margin:6px 0 0; max-width:520px; }
.nc-section--dark .nc-bento-head p { color:#A9BDD4; }

/* ---------- استجابة ---------- */
@media (max-width: 900px) {
  .nc-bento { grid-template-columns: repeat(2, 1fr); }
  .t-c3, .t-c4 { grid-column: span 2; }
  .t-r3 { grid-row: span 2; }
}
@media (max-width: 560px) {
  .nc-bento { grid-template-columns: 1fr; grid-auto-rows:auto; }
  .t-c2, .t-c3, .t-c4 { grid-column: span 1; }
  .t-r2, .t-r3 { grid-row: span 1; }
  .nc-tile--ba { min-height:280px; }
  .nc-tile--navy.t-r2 { min-height:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-marquee__track { animation:none; }
}