/*
=========================================================
MAHEDI ALTAYS — البوّابتان — 4.75
=========================================================

بابان متساويان في العرض والوزن البصري.

فالتساوي هنا ليس ذوقًا بل معنًى: الباب الأعرض نصيحةٌ
مبطَّنة، ونحن لا نعرف من يقف على العتبة — الباحث عن
الشخص أم الباحث عن العمل.
=========================================================
*/

.doors-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}

.door{
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  gap:8px;

  padding:34px 30px 30px;

  background:var(--brand-surface-2);
  border:1px solid var(--brand-line);
  border-radius:20px;

  text-decoration:none;
  color:inherit;

  transition:
    transform var(--motion-base) var(--motion-emphasis),
    border-color var(--motion-base) var(--motion-ease);
}

/*
الوهج يتبع المؤشّر لا يسبقه.

طبقةٌ ساكنة تحت المحتوى، شفّافة حتى يقترب الزائر. وهي
عنصر زائف لا صورة ولا تنسيق يُحقن — فسياسة الأمان تمنع
الحقن، وهذا أخفّ منه على كل حال.
*/
.door::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background:radial-gradient(
    120% 90% at 50% 0%,
    rgba(var(--brand-bronze-rgb), .13),
    transparent 62%
  );

  opacity:0;
  transition:opacity var(--motion-base) var(--motion-ease);
}

.door:hover,
.door:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(var(--brand-bronze-rgb), .48);
}

.door:hover::before,
.door:focus-visible::before{ opacity:1; }

.door > *{ position:relative; z-index:1; }

.door__mark{
  display:grid;
  place-items:center;

  width:52px;
  height:52px;
  margin-block-end:8px;

  background:rgba(var(--brand-bronze-rgb), .12);
  border:1px solid rgba(var(--brand-bronze-rgb), .30);
  border-radius:16px;

  color:var(--brand-bronze);
  font-size:20px;
}

.door__label{
  color:var(--brand-bronze);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.door__title{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(26px, 3.4vw, 38px);
  font-weight:700;
  line-height:1.15;
}

.door__lead{
  color:var(--brand-muted);
  font-size:15px;
  line-height:1.7;
}

/* الأرقام: صفٌّ صغير بفواصل تُبنى من الموجود لا من المتوقّع */
.door__facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;

  margin-block-start:14px;
  padding-block-start:14px;
  border-block-start:1px solid var(--brand-line);

  color:var(--brand-soft);
  font-size:13px;
}

.door__facts span + span::before{
  content:"·";
  margin-inline-end:8px;
  color:var(--brand-bronze);
}

/*
على الهاتف يصير البابان فوق بعض.

والتساوي يبقى: الأول ليس أهمّ من الثاني، لكنّ الشاشة لا
تتّسع لجنبٍ إلى جنب — وضغطُهما عرضًا يجعل العنوان يتكسّر
على ثلاثة أسطر فيسوء الاثنان معًا.
*/
@media (max-width: 820px){
  .doors-grid{ grid-template-columns:1fr; }
  .door{ padding:26px 22px 24px; }
}

@media (prefers-reduced-motion: reduce){
  .door{ transition:none; }
  .door:hover,
  .door:focus-visible{ transform:none; }
  .door::before{ transition:none; }
}