/* =========================================================
   advertise-variants.css — الدعاية والإعلان (تصميمان)
   عنصران فقط (صف واحد × عمودان) — صور أو فيديو
   الألوان من متغيّرات الثيم. يُضاف بعد style.css
   ========================================================= */

/* عناصر مشتركة */
.advertise-item{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);background:#fff;
  border:1px solid var(--gray-100);transition:var(--transition-slow);position:relative;}
.advertise-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(201,169,97,.3);}
.advertise-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.advertise-item:hover img{transform:scale(1.05);}
.advertise-video{position:relative;width:100%;height:100%;}
.advertise-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ============ تصميم 1 — طولي متمركز (وسط الصفحة) ============ */
/* عنصران طوليان، محدودا العرض، في وسط الصفحة */
.advertise-grid--portrait{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:26px auto 0;
  max-width:760px;}                                   /* التمركز عبر max-width + auto */
.advertise-grid--portrait .advertise-item{aspect-ratio:3/4;}   /* الطول أكبر من العرض */
.advertise-grid--portrait .advertise-video{padding-bottom:0;height:100%;}
@media(max-width:600px){.advertise-grid--portrait{grid-template-columns:1fr;max-width:380px;}}

/* ============ تصميم 2 — عرضي ممتلئ للصفحة ============ */
/* عنصران عرضيان متجاوران يملآن عرض الحاوية بالكامل */
.advertise-grid--landscape{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:26px;
  width:100%;}
.advertise-grid--landscape .advertise-item{aspect-ratio:16/9;}  /* عرضي */
.advertise-grid--landscape .advertise-video{padding-bottom:0;height:100%;}
@media(max-width:600px){.advertise-grid--landscape{grid-template-columns:1fr;}}