/* المسافة العلوية = ارتفاع الشريط تقريباً */
.cards-page{
  padding:2.5rem 1rem;   /* تحل مشكلة البطاقة فوق الشريط عند تصغير الشاشة  */
  box-sizing:border-box;
  cursor: pointer; /* يجعل الصفحة قابلة للنقر */
}

/* صندوق البطاقات – يحافظ على النسبة 2:3 دائماً */
.card-stack{
  position:relative;
  width:clamp(300px,65vw,500px);
  aspect-ratio:2/3;
  perspective:1000px;
}

/* كل بطاقة داخل الكومة */
.card{
  position:absolute;
  inset:0;                    /* = top:0; right:0; bottom:0; left:0 */
  border-radius:var(--box-radius);
  transform-style:preserve-3d;
  transition:transform .6s,box-shadow .3s;
  box-shadow:var(--box-shadow);
  cursor: pointer;
}

/* البطاقتان الخلفيتان للزينة */
/* البطاقة الاولى */
.back-card{
  background:var(--nav-bg-color);
  opacity:0.5;
  transform:rotate(-4deg);
  top:0.6rem; left:-0.6rem;
  z-index:1;
}


/* البطاقة الثانية */
.back-card.rotated{
  transform:rotate(-8deg);
  top:1.4rem; left:-1.4rem;
  z-index:0;
}

/* البطاقة الأمامية */
.front-card{z-index:3; background: var(--white-color);}
.front-card.flipped{ transform:rotateY(180deg);}

/* وجها البطاقة */
.card-face{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:inherit;
  backface-visibility:hidden;
  overflow:hidden;               /* يمنع التمدد */
  display:flex;                  /* يضبط التوسيط */
  align-items:flex-start;        /* يبدأ من الأعلى */
  justify-content:center;
  
}

/* صورة الوجه الأمامي */
.front img{
  width:100%;height:100%;
  object-fit:cover;
  
}

/* الوجه الخلفي */
.back{
  background:var(--nav-bg-color);
  color:var(--text-color);
  transform:rotateY(180deg);
  padding:1.5rem;               /* قللنا البادينغ ليصغر المحتوى */
  box-sizing:border-box;
  overflow:hidden;               /* لا تتمدّد */
  direction:rtl;
}

.card-back-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* حتى لا تعيق الضغط */
  z-index: 1;
}



/* النص داخل البطاقة */
.card-text{
  width:100%;
  max-height:100%;
  overflow-y:auto;
  font:clamp(.9rem,2vw,1.05rem)/1.6 ;
  text-align:justify;
  padding:1.5rem;
}

/* ========== الموبايل ========== */
@media(max-width:768px){
  .card-stack{
    width:clamp(220px,85vw,320px);
  }
  /* حرّكي البطاقتين الخلفيتين نسبةً لعرض أصغر */
  .back-card{top:.3rem;left:-.3rem;}
  .back-card.rotated{top:.7rem;left:-.7rem;}
 
}