/* =====================================================================
   branches.css — أنماط صفحة «فروعنا» فقط
   (كل الألوان والمسافات من التوكنز في base.css)
   ===================================================================== */

/* ---- شريط الانتقال السريع تحت الهيرو ---- */
.branch-nav { background: var(--paper); border-block-end: 1px solid var(--line); }
.branch-nav__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-4); padding-block: var(--s-3);
}
/* .branch-nav__label = نمط العناوين الصغيرة الموحّد في base.css (القسم 17) */
.branch-nav__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.branch-nav__list a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 14px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.branch-nav__list a:hover { border-color: var(--orange-deep); color: var(--orange-deep); background: var(--orange-tint); }
.branch-nav__list a small { font-size: var(--fs-xs); font-weight: 500; color: var(--orange-deep); }

/* ---- الفرع الرئيسي (المنار) ---- */
.branch-main {
  display: grid; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--sh-2);
}
.branch-main__photo { position: relative; aspect-ratio: 1; background: var(--concrete); }
.branch-main__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.branch-main__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(29, 21, 18, .72), transparent 45%);
}
.branch-main__caption {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  padding: var(--s-4) var(--s-5); color: var(--white); font-size: var(--fs-sm); font-weight: 500;
}
.branch-main__body { padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.branch-main__title { font-size: var(--fs-2xl); }
@media (min-width: 900px) {
  .branch-main {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "photo body" "map map";
  }
  .branch-main__photo { grid-area: photo; aspect-ratio: 4 / 5; }
  .branch-main__body { grid-area: body; padding: var(--s-7) var(--s-7) var(--s-6); }
  .branch-main__map { grid-area: map; }
  .branch-main__map iframe { min-height: 320px; }
}

/* ---- خرائط قوقل المدمجة ---- */
.branch-map { position: relative; background: var(--concrete); border-block-start: 1px solid var(--line); }
.branch-map iframe { display: block; width: 100%; height: auto; min-height: 240px; border: 0; }
.branch-map__note {
  position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); z-index: 1;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--orange-light);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); line-height: 1.6;
  box-shadow: var(--sh-2); pointer-events: none;
}

@media (min-width: 900px) {
  .branch-main .branch-main__map iframe { min-height: 320px; }
}

/* ---- بطاقات بقية الفروع ---- */
.branch-card__anchor { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 0; block-size: 0; }
.branch-card { position: relative; }
.branch-grid { --grid-gap: var(--s-5); }
@media (min-width: 1024px) { .branch-grid { --grid-gap: var(--s-6); } }
.branch-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.branch-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.branch-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-block-end: 1px solid var(--line);
}
/* .branch-card__kicker = نمط العناوين الصغيرة الموحّد في base.css (القسم 17) */
.branch-card__kicker { margin-block-end: 2px; }
.branch-card__title { font-size: var(--fs-xl); line-height: 1.3; }
.branch-card__head .badge { margin-block-start: 4px; }
.branch-card__body { padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.branch-card__note {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-1);
  background: var(--orange-tint); border: 1px dashed rgba(242, 106, 27, .45);
  font-size: var(--fs-sm); color: var(--steel); line-height: 1.6;
}
.branch-card__map { margin-block-start: auto; }

/* ---- الأرقام والأزرار داخل البطاقات ---- */
.branch-phones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.branch-phones a { font-weight: 600; color: var(--ink); }
.branch-phones a:hover { color: var(--orange-deep); }
.branch-phones .sep { color: var(--line-strong); }
.branch-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 479px) {
  .branch-actions .btn { flex: 1 1 auto; }
}

/* ---- حركة (GSAP، js/motion-about.js) ---- */
/* توهج برتقالي يظهر مرة واحدة حول الفرع الرئيسي: GSAP تحرّك --glow من 0 إلى 1 ثم 0 (بدون JS = 0 = لا شيء).
   position: relative بلا إزاحة لا يغيّر التخطيط؛ العنصر الزائف absolute لا يأخذ خلية في الشبكة */
.branch-main { position: relative; }
.branch-main::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--orange), inset 0 0 48px rgba(242, 106, 27, .28);
  opacity: var(--glow, 0);
}
/* «افتح في خرائط Google»: الدبوس يرتفع قليلًا وسهم الرابط الخارجي يتحرك نحو اتجاهه عند المرور (transform فقط) */
.btn[data-branch-map] .icon { transition: transform var(--dur) var(--ease); }
.btn[data-branch-map]:hover .icon:first-child { transform: translateY(-2px); }
.btn[data-branch-map]:hover .icon:last-child:not(:first-child) { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .btn[data-branch-map] .icon { transition: none; }
  .btn[data-branch-map]:hover .icon { transform: none; }
}