/* ============================================================================
   css-add-servicehub.css
   Additions for template-v2-servicehub.php / parts/v2-servicehub-body.php.

   MERGE TARGET: v2-service.css, appended the same way parts/css-add-<service>.css
   were merged on 2026-08-04. Kept separate here only because several builds are
   editing that file's neighbourhood at once. Nothing below overrides an existing
   v2-service.css rule; every selector is new, or is scoped to .mhp-v2-servicehub.

   Two blocks:
     1. .towns  -- the route-grouped town routing section. New, hub only.
     2. .router / .rcard  -- PORTED VERBATIM from v2-home.css lines 316-353 so the
        /services/ index cards match the home page's service router exactly. The hub
        template loads v2-service.css, not v2-home.css, which is why it is duplicated
        rather than referenced. If these two files are ever merged into one stylesheet,
        DELETE this block instead of keeping two copies.
   ========================================================================== */

/* ================= TOWN ROUTING ================= */
.towns{
  background:var(--card);
  border-top:1px solid var(--hairline);
  padding:clamp(90px,11vw,150px) 0;
}
.towns-head{ max-width:840px; margin-bottom:clamp(40px,5vw,64px); }
.towns-head h2{ max-width:18ch; }
.towns-head .dek{
  margin-top:20px; font-family:var(--body); font-style:italic;
  font-size:19px; color:var(--ink-soft); max-width:52ch;
}
/* Multi-column, not grid: the five route groups hold 3 to 14 towns each, and a grid
   leaves a hole under the short ones (Highway 88 has three towns). Columns pack the
   cards by height instead, so the block reads as one dense list. */
.route-grid{
  columns:3;
  column-gap:clamp(22px,2.6vw,34px);
}
.route{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 clamp(22px,2.6vw,34px);
  background:var(--ground); border:1px solid var(--hairline); border-radius:4px;
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px) clamp(18px,2vw,24px);
  min-width:0;
}
.route-name{
  font-family:var(--disp); font-weight:800; font-size:15px;
  letter-spacing:.02em; line-height:1.25; color:var(--navy);
  padding-bottom:14px; margin-bottom:6px;
  border-bottom:2px solid var(--gold);
}
.town-list{ list-style:none; margin:0; padding:0; }
.town-list li{ border-bottom:1px solid var(--hairline); }
.town-list li:last-child{ border-bottom:none; }
.town-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:10px 0; text-decoration:none;
  font-family:var(--disp); font-weight:600; font-size:15.5px; color:var(--navy);
  transition:color .18s ease, padding-left .18s ease;
}
.town-list a::after{ content:"\2192"; color:var(--teal); font-weight:600; opacity:.5; transition:transform .2s ease, opacity .2s ease; }
.town-list a:hover{ color:var(--teal-deep); padding-left:8px; }
.town-list a:hover::after{ transform:translateX(4px); opacity:1; }
.towns-foot{
  margin-top:clamp(30px,3.4vw,44px);
  font-family:var(--body); font-size:16.5px; color:var(--ink-soft);
}
.towns-foot a{ color:var(--teal-deep); font-weight:600; }

@media (max-width:980px){ .route-grid{ columns:2; } }
@media (max-width:620px){ .route-grid{ columns:1; } }

/* ================= /services/ INDEX CARDS =================
   Ported from v2-home.css (.router / .rcard / .rc-*). See the header note. */
.router{ background:var(--ground-2); border-top:1px solid var(--hairline); padding:clamp(90px,11vw,150px) 0; }
.router-head{ max-width:840px; margin-bottom:clamp(40px,5vw,64px); }
.router-head .dek{ margin-top:20px; font-size:19px; color:var(--ink-soft); max-width:54ch; }
.router-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); }
.rcard{
  background:var(--card); border:1px solid var(--hairline); border-radius:4px;
  overflow:hidden; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.rcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
  background:var(--teal); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.rcard:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -28px rgba(15,29,45,.35); }
.rcard:hover::before{ transform:scaleX(1); }
.rc-media{ position:relative; height:clamp(180px,19vw,216px); overflow:hidden; background:var(--navy); }
.rc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.rcard:hover .rc-media img{ transform:scale(1.04); }
.rc-body{ padding:clamp(22px,2.4vw,28px); display:flex; flex-direction:column; gap:10px; flex:1; }
.rc-body h3{ font-weight:800; font-size:clamp(19px,1.8vw,22px); line-height:1.2; letter-spacing:-0.01em; }
.rc-body p{ font-size:16px; color:var(--ink-soft); flex:1; }
.rc-cta{
  font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--teal-deep);
  display:inline-flex; align-items:center; gap:8px;
}
.rc-cta::after{ content:"\2192"; transition:transform .2s ease; }
.rcard:hover .rc-cta::after{ transform:translateX(4px); }

/* .rcard--nolink / .rc-cta--plain lived here for the log card while it had no hub page
   to point at. /log-home-staining/ exists now and the card is an ordinary <a>, so those
   rules were removed rather than left behind as dead selectors. */

@media (max-width:880px){ .router-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .router-grid{ grid-template-columns:minmax(0,1fr); } }

/* ================= HUB-ONLY TWEAKS ================= */
/* The hub H1s are shorter than the town ones ("Interior Painting" vs "Interior
   Painting in Sutter Creek"), so the 13ch cap in v2-service.css would wrap the
   two-word hubs oddly. Widen it for hubs only. */
.mhp-v2-servicehub .hero h1{ max-width:18ch; }
/* Commercial and /services/ use the type-forward hero, whose H1 runs long. */
.mhp-v2-servicehub .hero--type h1{ max-width:15ch; }