/* Rod Inspects: Wave D, the shared SERVICE-AREA (CITY) PAGE layout. Howard, 2026-10-07.
   Loaded AFTER site.css on the 10 /home-inspection-in-<city>-tx/ pages only. Every city page uses the
   same layout (generated from one spec): hero + crumbs, trust bar, AEO, local question-H2 sections
   (alternating white / off-white, photo or review column on the side), services band (navy, 6 cards),
   trust + review, booking, nearby areas + city map, GEO, FAQ, final CTA.
   Kept separate from site.css because the Week 2 page waves were built in parallel; Claude Code can fold
   these rules into site.css later (then drop the extra <link> and bump ?v= on every page).
   The split/side-column rules below repeat wave-b.css on purpose (wave-b.css is not loaded on city pages). */

/* Content split with the photo/review column aligned to the top of the text (long lists) */
.split-top{align-items:start}
.side-photos{display:grid;gap:20px;position:sticky;top:110px}
.side-photos .ph-photo,.side-reviews .ph-photo{min-height:300px;border-radius:18px}
.side-reviews{display:grid;gap:20px;position:sticky;top:110px}
.reviews.reviews-1{grid-template-columns:minmax(0,1fr)}
.sec .prose .checks li{line-height:1.55}

/* Numbered situations (Cibolo "three common situations") */
.steps{list-style:none;counter-reset:step;display:grid;gap:14px;margin:0 0 1.2em;padding:0}
.prose .steps{padding-left:0}
.steps li{counter-increment:step;position:relative;padding:16px 18px 16px 62px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);line-height:1.55}
.sec-off .steps li{background:#fff}
.steps li::before{content:counter(step);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:800 16px/1 var(--display)}

/* ── Services band (navy): the 6 service links as cards ── */
.sec-navy .sec-head{max-width:820px}
.sec-navy .sec-head p{color:rgba(255,255,255,.94);font-size:18px}
.city-svc-head{margin-bottom:8px}
.city-svc-head .sec-head{margin-bottom:0}
.city-svc{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:8px 0 0;padding:0}
.city-svc li{background:#fff;color:var(--body);border-radius:var(--radius);border-top:4px solid var(--river);padding:22px 22px 24px;box-shadow:0 10px 26px rgba(var(--shade),.30);font-size:16.5px;line-height:1.55}
.city-svc a{display:inline;font:700 18px/1.35 var(--display);color:var(--navy);text-decoration:underline;text-decoration-color:var(--river);text-decoration-thickness:2px;text-underline-offset:4px}
.city-svc a:hover{color:var(--link)}
.city-svc-foot{margin-top:26px}
.city-svc-foot p{margin:0;font-size:17px}
.sec-navy .city-svc-foot a{font-weight:700}
.sec-navy .side-photos .ph-photo{min-height:240px}

/* ── Nearby areas + city map ── */
.city-near{gap:40px}
.city-near .q-h2{margin-bottom:24px}
.city-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
.city-map{padding:8px;aspect-ratio:4/3}
.city-map iframe{width:100%;height:100%;min-height:280px}

@media (max-width:1079px){
  .city-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .side-photos,.side-reviews{position:static}
  .side-photos .ph-photo,.side-reviews .ph-photo{min-height:220px}
  .city-map{aspect-ratio:auto}
  .city-map iframe{height:320px}
}
@media (max-width:640px){
  .city-svc{grid-template-columns:minmax(0,1fr)}
  .steps li{padding:14px 14px 14px 56px}
  .steps li::before{left:12px}
}