/* Holmes Roofing — Tranche 3 (location pages) page-specific CSS.
   Owned by Agent F. Additive only — every rule below is new selectors
   built from existing site.css tokens (--ink/--steel/--azure/--line/
   --bg-tint/--dark/--gstar, Poppins/Open Sans). Nothing here overrides a
   site.css rule; components already shipped (.page-hero, .pg-intro/
   .why-grid, .svc-section/.svc-grid/.svc-card, .chip) are reused verbatim
   on these 30 pages. Two component families below are duplicated from
   Tranche 2c's pages-2c.css (.faq-list/.faq-item, byte-identical) since
   agent-owned CSS files are not a dependency other agents should share --
   see Tranche 2 build brief §6. */

/* ---- FAQ list (same visual language as faq/page.json) ---- */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:0; }
.faq-item{ padding:26px 0; border-bottom:1px solid var(--line); }
.faq-item:first-child{ padding-top:0; }
.faq-item h3{ font-size:18.5px; margin-bottom:10px; }
.faq-item p{ color:var(--ink-soft); font-size:15px; line-height:1.7; margin-bottom:10px; }
.faq-item p:last-child{ margin-bottom:0; }
.faq-item ul{ margin:0 0 10px 22px; color:var(--ink-soft); font-size:15px; line-height:1.7; }
.faq-item a{ color:var(--azure); text-decoration:underline; text-underline-offset:2px; }

/* ---- nearby-communities pill links (city pages): a simple wrapping row
   of link chips under the "Nearby Communities" heading. ---- */
.nearby-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.nearby-links a{
  display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line-strong); background:#fff; font-family:'Poppins',sans-serif;
  font-weight:600; font-size:13px; color:var(--ink); transition:border-color .2s, color .2s, box-shadow .2s;
}
.nearby-links a:hover, .nearby-links a:focus-visible{ border-color:var(--azure); color:var(--azure); box-shadow:0 10px 22px -16px rgba(42,107,232,.4); }

/* ---- location directory grid (/locations/ hub + /service-areas/): a
   card per city, reusing .svc-card's bordered/shadowed language at a
   lighter weight (no icon, just name + link). ---- */
.loc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.loc-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:1px solid var(--line-strong); border-radius:12px;
  padding:18px 20px; box-shadow:0 16px 34px -26px rgba(21,24,29,.2);
  transition:border-color .2s, box-shadow .2s;
}
.loc-card:hover, .loc-card:focus-within{ border-color:var(--azure); box-shadow:0 18px 38px -20px rgba(42,107,232,.3); }
.loc-card a{ font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); }
.loc-card a:hover, .loc-card a:focus-visible{ color:var(--azure); }
.loc-card svg{ width:16px; height:16px; color:var(--azure); flex:0 0 auto; }
.loc-cluster-head{ margin:44px 0 16px; }
.loc-cluster-head:first-child{ margin-top:0; }

/* ---- recent-work mini gallery (city pages): 2-3 photo strip reusing
   .gal-card's bordered/shadowed language at a smaller fixed count. ---- */
.loc-work-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.loc-work-grid img{ width:100%; height:200px; object-fit:cover; border-radius:12px; border:1px solid var(--line-strong); display:block; }
@media (max-width:640px){ .loc-work-grid img{ height:180px; } }