/* ============================================================
   روائع للمجوهرات — الصفحة الرئيسية
   أقسام لا مقابل لها في متجر نُور الثابت (المنتج المميّز، الهدايا،
   لحظات العملاء، فنّ بنر العرض) — مبنية بنفس توكنات الهوية ومفرداتها.
   يُحمَّل بعد base.css و components.css و pages.css.
   ============================================================ */

/* بنر العرض (.deal__art) عاد للطبقة المشتركة في base.css — يظهر بالرئيسية
   وبصفحة الألماس المزروع، وهذه الأخيرة لا تُحمّل هذه الورقة. */

/* ---------- المنتج المميّز ---------- */
.spot{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;
  padding:28px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh);
}
.spot__gal{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(140deg,var(--brand-50),var(--soft));
  aspect-ratio:1/1;
}
.spot__gal img{width:100%;height:100%;object-fit:cover;object-position:center}
.spot__gal img:not(.is-active){display:none}

.spot__info{display:flex;flex-direction:column;gap:12px;min-width:0}
.spot__info .tag{position:static;align-self:flex-start}
.spot__info h3{font-size:var(--fs-h3);line-height:1.45}
.spot__info > p{color:var(--ink-2);font-size:15px;line-height:1.9;max-width:52ch}
.spot__info .price{margin-top:0}
.spot__info .price b{font-size:24px}
.spot__save{color:var(--ok);font-size:13.5px;font-weight:600}
.spot__acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:6px}
.spot__acts .btn{gap:8px}
.spot__acts svg{width:18px;height:18px}

/* ---------- الهدايا ---------- */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gift{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.gift:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.gift a{display:block;padding-bottom:18px}
/* كانت display معرَّفة مرتين (block ثم grid) والصورة بـ contain داخل
   إطار 4/3، فتحطّ صور 2.00 شريطًا رفيعًا وصور 0.67 خارج الإطار. */
.gift__img{
  display:block;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(140deg,var(--brand-50),var(--soft));
}
.gift__img img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .3s var(--ease);
}
.gift:hover .gift__img img{transform:scale(1.07)}
.gift b{display:block;padding:16px 18px 0;font-size:15px;font-weight:700}
.gift span{display:block;padding:5px 18px 0;font-size:13px;color:var(--mut);line-height:1.7}

/* ---------- لحظات العملاء ---------- */
.social{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;
}

/* الإطار: الرابط إن كان للعنصر رابط، وإلا الصورة نفسها — الترميز
   يُصيّر <a><img></a> أو <img> مجرّدة حسب وجود url. */
.social > a,
.social > img{
  display:block;width:100%;min-width:0;
  aspect-ratio:2/3;
  border-radius:var(--r-sm);overflow:hidden;
  background:var(--soft);
}
/* الصورة داخل الرابط تملأ ارتفاع الإطار المحسوم من نسبته. */
.social > a img{width:100%;height:100%}
/* الصورة المجرّدة هي الإطار: ارتفاعها من aspect-ratio لا من نسبة
   مئوية تُقاس على صفٍّ تلقائي غير محسوم. */
.social > img{height:auto}
.social img{object-fit:cover;object-position:center;transition:transform .3s var(--ease)}
.social a:hover img{transform:scale(1.08)}

/* ---------- صورة المُعلّق داخل بطاقة الرأي ---------- */
.review__who .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.review__who .avatar{background:var(--brand);overflow:hidden}

/* ---------- الاستجابة ----------
   نفس سلم نقاط الكسر المعتمد بالمشروع: 1180 ← 980 ← 720 ← 560. */
@media (max-width:1180px){
  .social{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:980px){
  .spot{grid-template-columns:1fr;gap:24px}
  .gifts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .social{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media (max-width:560px){
  .gifts{grid-template-columns:1fr}
  .spot{padding:18px}
  .spot__acts .btn{width:100%;justify-content:center}
}