/* ============================================================
   BRANCHES.CSS — page-specific styles for branches.php.
   Branch card base styles are loaded from contact.css (also
   linked in branches.php head). This file overrides the hero
   image, adjusts cards for the no-image layout, and adds the
   stats strip and city-badge element.
   ============================================================ */
:root{
  --hero-bg-image: url('../../assets/img/branches.jpeg');
}

/* ===== BRANCH STATS STRIP ===== */
.branch-stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  background:var(--ivory); border-radius:var(--radius);
  margin-bottom:40px; overflow:hidden;
}
.branch-stat{
  flex:1; min-width:130px; text-align:center;
  padding:28px 20px; border-right:1px solid var(--line);
}
.branch-stat:last-child{border-right:none;}
.branch-stat strong{
  display:block; font-size:38px; font-weight:800; line-height:1;
  color:var(--teal); font-family:var(--sans); margin-bottom:4px;
}
.branch-stat span{font-size:13px; color:var(--gray); font-weight:600;}

/* ===== CARDS: no branch image on this page ===== */
/* Extra top padding lets the absolute status badge float freely */
.branch-card{ padding-top:52px; }

/* City label at card top */
.branch-city-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal); margin-bottom:10px;
}
.branch-city-tag svg{
  width:13px; height:13px; stroke:var(--teal); flex-shrink:0;
}

/* Address line (reuses contact.php's <p> with pin icon) */
.branch-card > p{
  display:flex; align-items:flex-start; gap:8px;
  font-size:14px; color:var(--gray); line-height:1.55; margin-bottom:14px;
}
.branch-card > p svg{
  width:16px; height:16px; flex-shrink:0; margin-top:2px;
  stroke:var(--teal-bright);
}

/* Google Maps button: full-width at bottom (mirrors .btn-gold rule in contact.css) */
.branch-actions a.btn-google{flex:1 1 100%; justify-content:center;}

/* ===== NO-RESULTS ===== */
#noBranchResults{text-align:center; margin-top:28px; font-size:13px;}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  .branch-stat{flex:1 1 45%;}
  .branch-stat:nth-child(2n){border-right:none;}
  .branch-stat:nth-child(n+3){border-top:1px solid var(--line);}
}

/* ===== ARABIC / RTL ===== */
html[dir="rtl"] .branch-city-tag{flex-direction:row;}