/* ============================================================
   2026-09-23 — Drones Hub: بطاقات أنواع الدرونز (/drone-types/)
   نفس بنية بطاقات الموقع الرئيسي dronesuae.com (صور المنتجات
   الحقيقية type-*.webp على منصّة ضوئية بحلقات + حبّات + زر بعرض
   البطاقة)، لكن بألوان Hub: عاجي/ذهبي شمبانيا مع لمسة كهرمانية
   أقرب إلى الموقع الرئيسي، وبيج أقل داخل البطاقة نفسها.
   يُحمَّل بعد logo-theme.css على هذه الصفحة فقط، ولا يمسّ الرئيسية
   أو الهيدر أو التنقّل أو أي صفحة أخرى.
   ============================================================ */
:root{
  --hub-accent:#c98a3a;        /* بين ذهبي الشعار #c0975b وكهرماني الموقع الرئيسي #d97706 */
  --hub-accent-deep:#a86b22;
  --hub-accent-ink:#6f4716;
}

.tcard{
  display:flex; flex-direction:column;
  background:linear-gradient(160deg,#FFFFFF 0%,#FDFBF7 100%);   /* أبيض مع لمسة عاجية خفيفة بدل البيج */
  border:1px solid #E6E0D6; border-radius:22px;
  padding:1rem 1.1rem 1.15rem;
  box-shadow:0 10px 28px rgba(75,65,51,.08), 0 1px 0 rgba(255,255,255,.9) inset;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tcard:hover{ transform:translateY(-4px); border-color:rgba(201,138,58,.5); box-shadow:0 18px 40px rgba(75,65,51,.14) }

/* المنصّة الضوئية خلف الطائرة */
.tcard-art{
  position:relative; height:200px; margin:-.15rem -.2rem .85rem; border-radius:16px; overflow:hidden;
  background:
    radial-gradient(ellipse 48% 14% at 50% 84%, rgba(201,138,58,.22), rgba(201,138,58,0) 72%),
    linear-gradient(120deg,#FFFFFF 0%,#F9F7F3 48%,#FBF5EA 100%);
}
.tcard-art::before,.tcard-art::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); border-radius:50%; pointer-events:none }
.tcard-art::before{ bottom:11%; width:72%; height:44px; border:1.5px solid rgba(201,138,58,.38) }   /* حلقة خارجية */
.tcard-art::after { bottom:15%; width:46%; height:26px; border:1.5px dashed rgba(201,138,58,.32) }  /* حلقة داخلية */
.tcard-art img{
  position:relative; z-index:1; display:block; width:88%; height:100%; margin:0 auto; object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(48,47,44,.22));
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.tcard:hover .tcard-art img{ transform:translateY(-7px) scale(1.035) }

/* الخط والعناوين — Cairo كما في رئيسية Hub */
.tcard h3{ font-family:"Cairo","Segoe UI","Tahoma","Noto Kufi Arabic",sans-serif; font-weight:800; font-size:1.22rem; letter-spacing:-.01em; color:#302f2c; margin:.1rem 0 .35rem }
.tcard p{ font-size:.92rem; line-height:1.75 }

/* الحبّات — رمادية دافئة، ذهبية، خضراء Hub */
.tcard .pillrow{ gap:.45rem; margin:.35rem 0 .6rem }
.tcard .tag{ padding:.32rem .85rem; font-size:.78rem; font-weight:600; border-radius:999px; background:#EFEEEA; border:1px solid #DDD9D1; color:#57524a; margin:0 }
.tcard .tag.a{ background:#FBEDD8; border-color:#EFD3A6; color:#7d5324 }
.tcard .tag.c{ background:#F7EFE0; border-color:#E6D5B4; color:#6f4716 }
.tcard .tag.g{ background:#E9F1EB; border-color:#C5D9CB; color:#306c4c }

/* الزر — متدرّج ذهبي/كهرماني بعرض البطاقة، نص داكن كأزرار Hub */
.tcard .btn.tcard-btn{
  display:block; width:100%; margin-top:auto; padding:.82rem 1rem;
  font-family:"Cairo","Segoe UI","Tahoma",sans-serif; font-weight:800; font-size:1rem; letter-spacing:.01em;
  color:#2b2117; border:1px solid #b98a45; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg,#EDC98A 0%,#D9A050 52%,#C4842F 100%);
  box-shadow:0 8px 18px rgba(201,138,58,.30), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(111,71,22,.22);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.tcard .btn.tcard-btn:hover{
  transform:translateY(-1px); filter:brightness(1.04); border-color:#a8792f;
  background:linear-gradient(180deg,#E8BF78 0%,#D3963F 52%,#B87824 100%);
  box-shadow:0 12px 22px rgba(201,138,58,.36), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(111,71,22,.22);
}
.tcard .btn.tcard-btn:active{ transform:translateY(0); filter:brightness(.97) }
.tcard .btn.tcard-btn:focus-visible{ outline:3px solid rgba(201,138,58,.55); outline-offset:2px }

@media (max-width:620px){ .tcard-art{ height:170px } .tcard h3{ font-size:1.1rem } }
@media (prefers-reduced-motion:reduce){ .tcard, .tcard-art img, .tcard .btn.tcard-btn{ transition:none } }

/* إصلاح الجوال: طبقة 3D في Hub تحوّل #pg-types إلى شبكة لوحات (.duae-panel)
   بعرض min-content، فيمدّ جدولُ المقارنة (6 أعمدة) كلَّ اللوحات خارج الشاشة.
   السماح للوحات بالانكماش يجعل الجدول يتمرّر داخل إطاره (قاعدة Hub الموجودة
   .duae-panel table{overflow-x:auto}). مقيّد بهذه الصفحة فقط. */
#pg-types.duae-page-shell{ grid-template-columns:minmax(0,1fr) }
#pg-types > .duae-panel{ min-width:0 }