/* ===== تصنيفات الصفحة الرئيسية (صور جاهزة) - ضع هذا في خانة CSS المخصص ===== */
.dgc-wrap{direction:rtl;max-width:1340px;margin:32px auto;padding:0 16px;box-sizing:border-box;--dgc-gap:clamp(8px,.9vw,12px);--dgc-radius:14px}
.dgc-wrap *{box-sizing:border-box}

/* الجزء العلوي: نفس نسب التصميم الأصلي، بيكبر ويصغر كوحدة واحدة */
.dgc-top{display:grid;gap:var(--dgc-gap);aspect-ratio:1330/645;
  grid-template-columns:412fr 390fr 505fr;
  grid-template-rows:103fr 295fr 235fr;
  grid-template-areas:". . hero" "t1 t2 hero" "t3 t4 hero"}
.dgc-top .dgc-hero{grid-area:hero}
.dgc-top .dgc-a1{grid-area:t1}.dgc-top .dgc-a2{grid-area:t2}
.dgc-top .dgc-a3{grid-area:t3}.dgc-top .dgc-a4{grid-area:t4}

/* الصف السفلي */
/* الصف السفلي: شريط واحد بيعمل swipe */
.dgc-rail{position:relative;margin-top:var(--dgc-gap);--dgc-show:4}
.dgc-track{display:grid;grid-auto-flow:column;gap:var(--dgc-gap);
  grid-auto-columns:calc((100% - (var(--dgc-show) - 1) * var(--dgc-gap)) / var(--dgc-show));
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.dgc-track::-webkit-scrollbar{display:none}
.dgc-track.dgc-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.dgc-track.dgc-dragging img{pointer-events:none}
.dgc-track .dgc-card{aspect-ratio:327/205;scroll-snap-align:start}
.dgc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(42,35,29,.18);background:rgba(250,248,244,.92);color:#2a231d;display:grid;place-items:center;
  cursor:pointer;padding:0;box-shadow:0 4px 14px rgba(42,35,29,.12);transition:opacity .2s}
.dgc-nav svg{width:18px;height:18px}
.dgc-nav[disabled]{opacity:0;pointer-events:none}
.dgc-prev{right:-14px}
.dgc-next{left:-14px}
.dgc-nav:focus-visible{outline:2px solid #2a231d;outline-offset:2px}

/* الكارت = صورة + رابط */
.dgc-card{display:block;position:relative;overflow:hidden;border-radius:var(--dgc-radius);min-height:0;min-width:0}
.dgc-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.dgc-card:hover img{transform:scale(1.03)}
.dgc-card:focus-visible{outline:2px solid #2a231d;outline-offset:3px}

/* الكارت الكبير: شكل القوس بالكود (الصورة مستطيل عادي) */
.dgc-hero{border-radius:50% 50% var(--dgc-radius) var(--dgc-radius) / 38% 38% var(--dgc-radius) var(--dgc-radius);overflow:hidden}
.dgc-hero img{object-fit:cover;object-position:center bottom}

@media (prefers-reduced-motion:reduce){.dgc-card img{transition:none}}

@media (max-width:1024px){.dgc-rail{--dgc-show:3}}

/* موبايل: عمود واحد بمقاس الصورة الطبيعي عشان الكلام المكتوب على الصور يفضل مقروء */
@media (max-width:768px){
  .dgc-top{display:flex;flex-direction:column;aspect-ratio:auto}
  .dgc-top .dgc-card img{height:auto}
  .dgc-rail{--dgc-show:1.2}
  .dgc-nav{display:none}
  .dgc-card:hover img{transform:none}
  .dgc-track{scroll-padding-inline:0}
}