/* ==========================================================
   branches.css - branch-locations.php and head-office.php
   (banner, blocks, buttons come from pages.css; info cards from contact.css)
   ========================================================== */
.branch-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.branch-card { display: flex; flex-direction: column; padding: 24px; background: var(--white); border: 1px solid var(--border-color); border-top: 5px solid var(--primary-color); border-radius: 14px; transition: transform var(--transition), box-shadow var(--transition), border-top-color var(--transition); }
.branch-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .1); border-top-color: var(--secondary-color); }
.branch-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; }
.branch-head .ico { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: var(--primary-light); color: var(--primary-color); }
.branch-head h2 { flex: 1; margin: 0; font-family: var(--font-heading); font-size: 1.25rem; min-width: 0; }
.branch-tag { padding: 3px 12px; border-radius: 12px; background: var(--secondary-color); color: #1f2937; font-size: .75rem; font-weight: 700; }
.branch-info { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.branch-info li { display: flex; align-items: flex-start; gap: 12px; color: var(--muted-color); overflow-wrap: anywhere; }
.branch-info svg { margin-top: 2px; color: var(--primary-color); }
.branch-info a { color: var(--primary-color); font-weight: 600; text-decoration: none; }
.branch-info a:hover { text-decoration: underline; }
.branch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
@media (min-width: 700px)  { .branch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .branch-grid { grid-template-columns: repeat(3, 1fr); } }

/* head office: details + map side by side */
.ho-grid { display: grid; gap: 32px; align-items: start; }
.ho-map { overflow: hidden; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); line-height: 0; }
.ho-map iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (min-width: 992px) { .ho-grid { grid-template-columns: 5fr 6fr; gap: 48px; } .ho-map iframe { height: 460px; } }
.block .branch-note { max-width: 720px; margin: 28px auto 0; text-align: center; color: var(--muted-color); }
.branch-note a { color: var(--primary-color); font-weight: 600; }