/* Home Fortress Roofing & Construction: styles for the elements tooling/build.mjs injects in post-processing
   (sprint 2026-10-02, plumbing lane). Design system tokens come from brand-tokens.css / hf-visual.css. */

/* captions on body photos (service + town pages): overlaid at the foot of the photo so the media box keeps its size */
figure.bb-media { margin: 0; }
.bb-media > .hf-media-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: var(--sp-2) 14px; font-size: .8rem; font-weight: 500; line-height: 1.4; color: #fff; background: linear-gradient(180deg, rgba(var(--navy-rgb),0) 0%, rgba(var(--navy-rgb),.82) 38%); padding-top: 22px; }

/* the town's own map ahead of the neighbour route cards */
.hf-town-map { margin: 0 auto var(--sp-7); max-width: 980px; border-radius: var(--radius, 14px); overflow: hidden; }
.hf-town-map iframe { display: block; width: 100%; height: 340px; border: 0; }

/* areas hub: card write-ups, service links, area map */
.place-intro { margin: 6px 0 var(--sp-3); font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.86); text-align: left; }
.hf-hub-services { margin-top: 36px; }
.hf-hub-services .bb-chips { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hf-area-map { margin-top: var(--sp-7); border-radius: var(--radius, 14px); overflow: hidden; }
.hf-area-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* /privacy/: a plain policy page, sections read as one column of short blocks */
.hf-privacy h2:first-child { margin-top: 0; }
.hf-privacy p { max-width: 75ch; }

/* areas hub: the ZIP list and the service links are panels inside the towns band, titled with H3 (row 243) */
.hf-panel-title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 14px; }

/* a hero sub over 200 characters reads left-aligned, also inside a centred hero (row 306) */
.hero-sub-long { text-align: left; }

/* one-line conversion moments and section links after proof blocks */
.hf-proof-cta { margin-top: 22px; text-align: center; }
.hf-section-link { margin-top: 18px; font-weight: 700; }
.bb-center-head .hf-section-link { text-align: center; }
.hf-local-resource { font-size: .95rem; }
.post-uplink { font-weight: 600; }

/* thank-you: proof + offer */
.hf-ty-extra { display: grid; gap: 22px; margin: var(--sp-8) auto 0; max-width: 860px; grid-template-columns: 1fr; text-align: left; }
/* the proof box is a card (row 305: its text sits on the card's own edge, like the offer card beside it) */
.hf-ty-card { padding: var(--sp-5) 22px; border: 1px solid var(--line, #e2e6ee); border-radius: var(--radius, 14px); background: var(--tint, #f4f6fa); }
.hf-ty-proof p { margin: 0 0 var(--sp-2); }
.hf-ty-proof p:last-child { margin-bottom: 0; }
.hf-ty-rating .stars { color: var(--star, #f5b301); vertical-align: middle; }
.hf-ty-rating .stars .ic { width: 18px; height: 18px; }
.hf-ty-reg { font-size: .92rem; font-weight: 600; }
.hf-ty-offer { padding: 22px; border-radius: var(--radius, 14px); border: 1px solid var(--line, #e2e6ee); box-shadow: 0 6px 20px rgba(var(--navy-rgb),.08); }
@media (min-width: 760px) { .hf-ty-extra { grid-template-columns: 1fr 1fr; } }

/* services hub roof cards carry a real photo above the glyph */
.svc-card > img + .ic { margin-top: 0; }

@media (max-width: 640px) {
  .hf-town-map iframe { height: 260px; }
  .hf-area-map iframe { height: 300px; }
  .hf-hub-services .bb-chips { grid-template-columns: 1fr; }
}

/* founder byline on money pages (one line under the breadcrumb; home: under the hero) */
.hf-byline-wrap, .hf-updated-wrap { display: block; }
.hf-byline { margin-top: 10px; margin-bottom: 0; font-size: .88rem; font-weight: 500; color: var(--muted); }
.hf-byline a { font-weight: 700; }

/* images lane (rows 324/334): every <img> sits in a <picture> (WebP source + JPEG/PNG fallback). The picture box is
   taken out of layout so each img keeps the slot, sizing and cover rules it had as a direct child; the two rules
   written for a direct-child img are repeated for the picture form. */
picture { display: contents; }
.bb-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.svc-card > picture + .ic { margin-top: 0; }
/* Dylan ruling 2026-10-02, stock heroes: the visible "Illustration, not one of our jobs" line, bottom-right of the
   hero inside its bottom padding, and the re-homed real photo stacked under the why-us photo */
.hero:has(> .hf-hero-credit) { position: relative; }
.hf-hero-credit { position: absolute; right: 16px; bottom: 8px; z-index: 2; margin: 0; max-width: calc(100% - 32px); padding: 3px 10px; border-radius: var(--r-xs); background: rgba(var(--navy-rgb),.72); color: #fff; font-size: .74rem; font-weight: 500; line-height: 1.35; text-align: right; }
.hf-media-pair { display: grid; gap: var(--sp-4); align-content: start; }
.hf-media-pair > .bb-media { min-height: 300px; }
@media (max-width: 860px) { .hf-media-pair > .bb-media { min-height: 240px; } }
/* phones and tablets: the hero form card runs to the bottom of the hero, so the illustration line sits in flow under it */
@media (max-width: 860px) { .hf-hero-credit { position: static; display: block; width: fit-content; margin: var(--sp-4) var(--sp-4) 0 auto; } }

/* row 352: content-review date line on money pages (hand-set spec date) */
.hf-updated { font-size: .82rem; color: var(--muted, #5b6573); margin-top: var(--sp-1); margin-bottom: var(--sp-1); }

/* ---------- fixer pass 2026-10-02 ---------- */
/* row 165: one review-mined story per town page, inside the reviews band after the cards (verbatim quotes, labelled) */
.hf-review-story { max-width: 860px; margin: var(--sp-8) auto 0; padding: var(--sp-6) var(--sp-7); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 0 var(--r-card) var(--r-card) 0; box-shadow: var(--sh-1); text-align: left; }
.hf-story-kicker { margin: 0 0 var(--sp-3); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.hf-story-list { display: grid; gap: var(--sp-3); margin: 0; }
.hf-story-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-4); }
.hf-story-list dt { font-weight: 700; color: var(--navy); }
.hf-story-list dd { margin: 0; }
.hf-story-src { margin: var(--sp-4) 0 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 600px) { .hf-review-story { padding: var(--sp-5); } .hf-story-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } }

/* row 317: static trust marks directly above the home services band; wraps on phones, never animated */
.hf-marks-wrap { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.hf-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-4); }
.hf-marks li { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); box-shadow: var(--sh-1); color: var(--navy); font-weight: 700; font-size: .93rem; line-height: 1.3; }
.hf-marks .ic { width: 20px; height: 20px; flex: none; color: var(--orange); }
@media (max-width: 600px) { .hf-marks { justify-content: flex-start; } .hf-marks li { font-size: .86rem; } }

/* row 282: captions on the hub card photos and the /about/ team photo */
.hf-card-fig, .hf-team-fig { margin: 0; width: 100%; }
.svc-card .hf-card-fig img { margin-bottom: 0; }
.hf-card-cap { margin: 0; padding: var(--sp-2) var(--sp-4) 0; font-size: .78rem; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.74); text-align: left; }
.svc-card > .hf-card-fig + .ic { margin-top: var(--sp-3); }
.hf-team-cap { margin: calc(var(--sp-2) * -1) 0 var(--sp-4); font-size: .82rem; font-weight: 500; line-height: 1.4; color: var(--muted); }

/* row 243: the areas hub towns band has one H2; the place-card titles are H3 */
.hf-band-h2 { text-align: center; margin: 0 0 var(--sp-8); }
.place-body .place-title { color: var(--white); font-size: 1.15rem; margin: 0 0 var(--sp-3); letter-spacing: .04em; }

/* rows 243/244: an article body is one band with one heading group; each heading + its paragraphs is a unit and
   consecutive units sit two to a row from 1024 px (words untouched). Group titles and the opening run full width. */
.hf-post-kicker { margin-bottom: var(--sp-3); }
.bb-post-body .hf-post-h2 { margin: 0 0 var(--sp-6); }
.bb-post-body .hf-units h3 { font-size: 1.32rem; line-height: 1.3; margin: var(--sp-8) 0 var(--sp-3); }
.bb-post-body .hf-unit-head h3 { font-size: 1.55rem; }
.bb-post-body .hf-units h4 { font-size: 1.08rem; line-height: 1.35; margin: var(--sp-6) 0 var(--sp-2); }
@media (min-width: 1024px) {
  .bb-post-body:has(.hf-units) { max-width: 1120px; }
  .bb-post-body .hf-unit-lead { max-width: 820px; }
  .hf-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-10); align-items: start; }
  .hf-unit-head, .hf-unit-wide { grid-column: 1 / -1; }
  .hf-subunits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-9); align-items: start; }
}

/* row 276: in a run of 4+ paragraphs every third one is set as an accent card, so no block reads as a wall. Where each
   paragraph is already its own card or rule (the folded "More about" bodies, the triples), the wrapper adds nothing. */
.hf-pcard { background: rgba(var(--accent-rgb),.06); border-left: 4px solid var(--orange); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--sp-3) var(--sp-5); margin: 0 0 var(--sp-5); }
.hf-pcard > p { margin: 0; }
.bb-more-body .hf-pcard, .triples .hf-pcard { display: contents; }
.bb-dark .hf-pcard, .bb-card-dark .hf-pcard, .hero .hf-pcard { background: rgba(255,255,255,.06); border-left-color: var(--accent-on-dark); }
.bb-more-body .hf-pcard > p { margin-bottom: var(--sp-3); }
.triples .hf-pcard > p { margin-bottom: var(--sp-2); }

/* row 305: wave-6 article body is 1120px; keep the article CTA prose on the same edge */
body:has(.bb-post-body .hf-units) .bb-cta-in > :not(.cta-actions) { max-width: 1120px; }