/* ==========================================================================
   INDIVIDUAL BRANCH LOCATION PAGES (/our-branches/water-purifiers-CITY/) —
   styles scoped to these 19 pages only. Reuses .branch-card from branches.css
   (same dark address-card component as the /our-branches/ locator grid) and
   .tech-hero / .tech-overview / .tech-products-grid / .tech-enquiry from
   tech.css for the rest of the page shell — this file only adds the handful
   of rules specific to a single full-page branch card rather than a grid of
   them, plus the "back to all branches" link at the foot of the page.
   ========================================================================== */

.branch-detail-card { max-width: 640px; }
.branch-detail-hours { font-size: var(--fs-sm); color: var(--text-on-dark-muted); padding-top: var(--space-2); border-top: 1px solid var(--border-on-dark); margin-top: var(--space-2); }
.branch-detail-hours strong { color: var(--white); }
.branch-detail-contact-person { font-size: var(--fs-sm); color: var(--white); margin-bottom: var(--space-3); }
.branch-detail-contact-person strong { color: var(--accent); }

.branch-back-cta { text-align: center; }

/* ==========================================================================
   RICH BRANCH PAGES — the 8 upgraded pages only (assets/js/branch-rich.js).
   .branch-stats-band is a new top-level section (rendered first); the rest
   overrides/extends .tech-hero (tech.css) rather than replacing it, so the
   other 11 published-address branch pages that also use .tech-hero are
   completely unaffected — everything here only fires where the matching
   .branch-rich-* class is also present on the element.
   ========================================================================== */

/* ===== Stats band — full-width, above everything else (client's stated
   order — see the sourcing note at the top of branch-rich.js for how this
   differs from what's actually live on production today) ===== */
.branch-stats-band { background: var(--navy-800); border-bottom: 1px solid var(--border-on-dark); padding-block: var(--space-6); }
.branch-stats-band-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.branch-stat-item { display: flex; align-items: center; gap: var(--space-3); }
.branch-stat-item svg { width: 32px; height: 32px; color: var(--accent); flex-shrink: 0; }
.branch-stat-item strong { display: block; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--white); line-height: 1; }
.branch-stat-item span { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== Call Now / WhatsApp — standalone full-width band, directly below
   the stats band and above the headline, buttons left-aligned within it.
   Two elements: .branch-rich-cta-band is the full-bleed gold strip;
   .branch-rich-cta-row (a .container) constrains the buttons to the page's
   normal content width inside it — same outer/inner split as
   .branch-stats-band above. ===== */
/* Same gold gradient this project already uses everywhere else it puts a
   gold surface behind content (.btn-primary, .trial-banner in styles.css)
   — not a custom shine effect, just the site's own established gold. */
.branch-rich-cta-band { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); }
.branch-rich-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-5); }
.branch-rich-cta-row .btn svg { width: 18px; height: 18px; }
/* Call Now: navy background + white text/icon (svg uses fill="currentColor",
   so it follows the button's own text color automatically) — needed once
   the band went gold, since the shared .btn-primary gold gradient would no
   longer contrast against a gold band. Scoped to this one button only;
   .btn-primary itself (used site-wide for Get a Quote / Enquire Now / etc.)
   is untouched. */
.branch-rich-call-btn { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.branch-rich-call-btn:hover { background: var(--navy-800); box-shadow: none; }
/* WhatsApp: left visually/functionally as-is per instruction — same green
   border/text/icon (#3fbf6f / #6be396), same size and position. The only
   addition is an explicit white background: it previously had none of its
   own (just showed through to the row's plain white page background) —
   now that the row itself is gold, an explicit white background is what
   actually keeps this button "the same white background" it already
   visually was, rather than it silently going transparent-on-gold. */
.branch-rich-whatsapp-btn { background: var(--white); border-color: #3fbf6f; color: #6be396; }
.branch-rich-whatsapp-btn:hover { border-color: #3fbf6f; background: #3fbf6f; color: var(--navy-950); }

.tech-hero.branch-rich-hero { min-height: 0; align-items: stretch; padding-block: var(--space-8); }
.branch-rich-hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: var(--space-8); align-items: start; }
.branch-rich-hero-main h1 { margin-top: var(--space-3); font-size: clamp(1.9rem, 4vw, var(--fs-3xl)); text-transform: none; }
.branch-rich-product-image { width: 100%; max-width: 460px; margin-top: var(--space-6); filter: drop-shadow(0 16px 24px rgba(0,0,0,0.35)); }

.branch-rich-form-card { background: var(--navy-800); border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6); }
.branch-rich-form-card h2 { font-size: var(--fs-lg); text-transform: uppercase; color: var(--white); margin-bottom: var(--space-4); }
.branch-rich-form .form-field { margin-bottom: var(--space-3); }
.branch-rich-form .form-field label .required { color: var(--accent); margin-left: 2px; }
/* Reassurance line beneath the submit button — matches production's copy. */
.branch-rich-form-note { font-size: var(--fs-xs); color: var(--text-on-dark-muted); text-align: center; margin-top: var(--space-3); }

@media (max-width: 900px) {
  .branch-rich-hero-grid { grid-template-columns: 1fr; }
  .branch-rich-product-image { max-width: 320px; margin-inline: auto; }
  .branch-stats-band-grid { gap: var(--space-6); }
}
@media (max-width: 560px) {
  .branch-stats-band-grid { flex-direction: column; align-items: center; gap: var(--space-4); }
}

/* ===== Client logo grid — 5 per row on desktop, matching production's
   density (default .clients-page-grid from clients.css is 4-up; this
   scoped override only applies where .branch-rich-logos wraps the grid,
   added directly on these 8 pages' own markup, so /clients/ and the other
   branch pages that reuse .clients-page-grid are unaffected). ===== */
.branch-rich-logos .clients-page-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1200px) { .branch-rich-logos .clients-page-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1024px) { .branch-rich-logos .clients-page-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) { .branch-rich-logos .clients-page-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px) { .branch-rich-logos .clients-page-grid { grid-template-columns: 1fr; } }

/* ===== "Why [City] Trusts Crossfields" 4-card grid ===== */
.why-city-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); }
.why-city-card { background: var(--card-light-bg); border: 1px solid var(--border-on-light); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--card-light-shadow); }
.why-city-card svg { width: 30px; height: 30px; color: var(--accent-hover); margin-bottom: var(--space-4); }
.why-city-card h3 { font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy-900); margin-bottom: var(--space-2); }
.why-city-card p { font-size: var(--fs-sm); color: var(--text-on-light-muted); line-height: var(--lh-normal); }
@media (max-width: 900px) { .why-city-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .why-city-grid { grid-template-columns: 1fr; } }