/* ==========================================================================
   map-card.css — بطاقة الموقع/الخريطة (Map + branch info card)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   تُستخدم في: الرئيسية (قسم "موقعنا")، صفحة الفروع (خريطة الفرع المميّز).
   الخريطة الآن iframe تفاعلي حقيقي لكل فرع (بلا مفتاح API — راجع
   absolute_speed_branch_map_embed_url في inc/pages.php) بدل صورة
   jeddah-map.png الثابتة المشتركة. حُذف معها .map-pin-card: بطاقة مثبّتة عند
   إزاحة ثابتة 16%/24% كانت صحيحة فوق لقطة شاشة واحدة فقط، وفوق خريطة قابلة
   للتحريك ستطفو فوق أدوات التحكّم وتشير إلى لا شيء. علامة جوجل نفسها هي
   الدبوس الحقيقي الآن.
   ========================================================================== */

.map-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 768px) {
  .map-card {
    grid-template-columns: 1fr 1.2fr; /* معلومات (يمين) : خريطة (يسار، أعرض) */
    align-items: stretch;
  }
}

/* الخريطة التفاعلية */
.map-card__map {
  min-height: 300px;
}
/* الـ iframe يملأ خليّة الشبكة كاملةً في الاتجاهين. لا يرث ارتفاعًا من
   الأب لأن .map-card__map خليّة grid ممتدة (align-items: stretch)، لذا
   height: 100% وحده يكفي بلا نسبة أبعاد مفروضة. */
.map-card__map iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  display: block;
}

/* عمود المعلومات — الأحجام مبنية للجوال أولًا ثم تكبر على سطح المكتب */
.map-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* يمين في RTL */
  gap: var(--space-8);
  padding: var(--space-24);
}
.map-info__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-transform: uppercase;
}
.map-info__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
}
.map-info__branch {
  font-size: var(--fs-md);
  color: var(--color-gradient-end);
}
.map-info__street {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
}

/* سطح المكتب — أحجام الخط والحشوة الأكبر (من التصميم) */
@media (min-width: 768px) {
  .map-card__info {
    padding: var(--space-48);
  }
  .map-info__label {
    font-size: var(--fs-3xl);
  }
  .map-info__title {
    font-size: var(--fs-5xl);
  }
  .map-info__branch {
    font-size: var(--fs-2xl);
  }
  .map-info__street {
    font-size: var(--fs-section-cta);
  }
}