/* Forge Skylights: Stage 4 templates (service, area, guide, answer, indexes). Same tokens and rules as main.css:
   grids name their minimums (7c.1), children placed explicitly (7c.2), one .on-dark mechanism (7c.3),
   no vertical margin on full-bleed bands (7c.4), no sticky element anywhere in the content. */

/* ---------------------------------------------------------------- inner photo hero (02-hero) */
.phero { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.phero-copy { padding: var(--s-6) var(--gutter) var(--s-7); min-width: 0; }
.phero-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); order: -1; }
.phero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero-h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.08; margin-bottom: var(--s-4); max-width: 14ch; }
.phero-tag { font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--s-5); max-width: 32ch; }
.phero-lede { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.7; max-width: 46ch; margin-bottom: var(--s-6); }
.phero .crumbs ol { margin-bottom: var(--s-5); }
@media (min-width: 900px) {
  .phero { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); min-height: clamp(460px, 38vw, 580px); }
  .phero-copy { grid-column: 1; grid-row: 1; align-self: center; padding: var(--s-8) var(--s-7) var(--s-8) var(--edge); }
  .phero-photo { grid-column: 2; grid-row: 1; aspect-ratio: auto; order: 0; min-height: 100%; }
}
@media (max-width: 899px) { .phero .hero-cta .btn { flex: 1 1 220px; } }

/* ---------------------------------------------------------------- ruled question rows (04-problem, 04-roofs) */
.problem--rows .problem-copy { align-self: center; }
.q-rows { list-style: none; margin-top: var(--s-5); max-width: 560px; }
.q-rows li { display: flex; gap: var(--s-5); align-items: flex-start; padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.q-rows li:first-child { padding-top: var(--s-2); }
.q-rows li:last-child { border-bottom: 0; }
.q-rows h3 { font-size: 21px; line-height: 1.3; margin: 0 0 6px; font-weight: 500; }
.q-rows p { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); }
.q-rows .ring { flex: none; width: 60px; height: 60px; }
.q-rows .ring .ico { width: 32px; height: 32px; }
.problem--rows .problem-photo img { object-position: 50% 100%; }
@media (min-width: 900px) { .problem--rows { min-height: 440px; } }

/* ---------------------------------------------------------------- service options (05) and process (07) */
.svc-options { background: var(--bg); border-top: 1px solid var(--hairline); padding-block: clamp(40px, 5vw, 72px); }
.svc-options .sec-h { margin-bottom: var(--s-5); }
.svc-options .sec-lede { margin-bottom: var(--s-5); }
.svc-options .opt-cards { gap: 0; border: 1px solid var(--hairline); border-top: 0; background: var(--white); }
.svc-options .opt-card { border-left: 1px solid var(--hairline); margin-left: -1px; padding: var(--s-5) var(--s-6); }
.svc-options .opt-head { font-size: 24px; }
@media (max-width: 699px) { .svc-options .opt-card + .opt-card { border-top: 2px solid var(--accent); } }
.svc-process { background: var(--bg); border-top: 1px solid var(--hairline); padding-block: clamp(40px, 5vw, 72px); }
.svc-process .process-steps { margin-top: var(--s-5); }

/* ---------------------------------------------------------------- FAQ band on the wide container */
.faq-band { background: var(--bg); border-top: 1px solid var(--hairline); padding-block: clamp(40px, 5vw, 72px); }
.faq-band .faq { margin-top: 0; }
.faq-band .faq-item { background: var(--white); border: 1px solid var(--hairline); border-bottom: 0; padding-inline: var(--s-5); }
.faq-band .faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-band .faq-item summary { font-size: 19px; }

/* ---------------------------------------------------------------- spoke cards and card variants */
.spokes { background: var(--bg); border-top: 1px solid var(--hairline); padding-block: clamp(40px, 5vw, 72px); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.card .rel-k { margin-bottom: 2px; }
.card-grid--feat { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
@media (min-width: 1100px) {
  .card-grid--feat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid--feat .feat-lead { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .card-grid--feat .feat-lead .card-img { aspect-ratio: 16 / 10; }
  .card-grid--feat .feat-lead .card-t { font-size: 28px; }
  .card-grid--feat .feat-lead .card-s { font-size: 17.5px; }
}
.card-grid--feat > li { min-width: 0; }
/* Services index: ten cards as two rows of five (no orphan row), the homepage tile rhythm. */
.card-grid--svc { --g: var(--s-5); gap: var(--g); grid-template-columns: repeat(auto-fit, minmax(min(max(220px, calc((100% - 4 * var(--g)) / 5)), 100%), 1fr)); }
.card-grid--svc .card-body { padding: var(--s-4); }
.card-grid--svc .card-t { font-size: 19px; }
.card-grid--svc .card-s { font-size: 15px; }

/* ---------------------------------------------------------------- long read: lighter form (area) and peek */
.lr--light { border-top: 1px solid var(--hairline); padding-block: clamp(32px, 4vw, 56px); }
.lr--light .lr-ch { padding-top: 0; }
.lr--light .lr-ch + .lr-ch { padding-top: var(--s-7); }
.lr--light .ol-n { display: none; }
.lr--light .ol-wrap { padding-block: 0; }
.lr--light .opt-line { margin-bottom: 0; border: 1px solid var(--hairline); border-bottom: 0; }
.lr--light .tile-row { background: var(--panel); margin-bottom: 0; padding: var(--s-5); border: 1px solid var(--hairline); border-top: 1px solid var(--rule); }
.lr--light .tile-row + .tile-row { border-top: 0; padding-top: 0; }
.lr--light .tile--text { background: transparent; }
.lr--light .tile--panel { background: transparent; padding: 0; }
.lr--light .tile-row:has(.check-strip) { padding-block: var(--s-5); }
@media (max-width: 599px) {
  .lr--light .tile-row { padding: var(--s-2) 0; }
  .lr--light .tile--text { padding: var(--s-5) var(--s-4); }
  .lr--light .tile--panel { padding: 0 var(--s-2); }
}
.lr--peek { padding-block: var(--s-6); }
.lr--full.lr--peek { padding-bottom: var(--s-7); }
.lr-peek .ol-wrap { padding-block: 0 var(--s-2); }
.lr-more { padding-top: var(--s-6); }
.lr-more ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.lr-more a { font-weight: 500; }

/* ---------------------------------------------------------------- area: facts (03-local) */
.facts { background: var(--panel); border-bottom: 0; padding-block: clamp(36px, 3.6vw, 52px); }
.facts .facts-list { display: grid; gap: var(--s-4) 0; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin: 0; }
.facts .fact { border-left: 0; padding: var(--s-2) var(--s-6); border-right: 1px solid var(--rule); min-width: 0; }
.facts .fact:first-child { padding-left: 0; }
.facts .fact:last-child { border-right: 0; }
.facts .fact dt { font-size: 17px; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.facts .fact dd { font-size: 17px; color: var(--ink-soft); line-height: 1.55; max-width: 34ch; }
@media (max-width: 599px) { .facts .fact { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--rule); padding-bottom: var(--s-4); } .facts .fact:last-child { border-bottom: 0; } }

/* ---------------------------------------------------------------- area: town map (06-map) and nearby (07-nearby) */
.town-map { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--panel); border-top: 1px solid var(--hairline); padding: 0; gap: 0; align-items: stretch; }
.town-map-copy { padding: var(--s-7) var(--gutter); min-width: 0; align-self: center; }
.town-map-copy p { max-width: 34ch; margin: 0; font-size: 18px; }
.town-map-fig { min-width: 0; position: relative; }
.town-map .map-fig { min-height: 340px; }
@media (min-width: 900px) {
  .town-map { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); min-height: 460px; }
  .town-map-copy { grid-column: 1; padding: var(--s-7) var(--s-6) var(--s-7) var(--edge); }
  .town-map-fig { grid-column: 2; }
  .town-map .map-fig { position: absolute; inset: 0; min-height: 0; }
}
.town-map-fig { --map-land: #ECEDEB; }
.map-fig--town, .map-fig--town .leaflet-container { background: var(--map-land); }
.map-fig--town .fsb-town > a, .map-fig--town .fsb-town > span { font-size: 18px; }
.map-fig--town .fsb-town--home > span { font-size: 21px; }
.fsb-town--green > span { transform: translate(-50%, -50%); color: #355E2E; font-weight: 500; text-shadow: none; pointer-events: none; }
.fsb-town--near > a { color: var(--ink-soft); }
.nearby { background: var(--bg); border-top: 1px solid var(--hairline); padding-block: clamp(36px, 3.6vw, 52px); }
.nearby-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.nearby-h { font-family: var(--f-body); font-size: 19px; font-weight: 500; margin: 0; flex: none; }
.nearby-list { list-style: none; display: grid; flex: 1 1 520px; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); min-width: 0; }
.nearby-list a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 6px 12px; background: var(--white); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 16.5px; line-height: 1.3; }
.nearby-list a:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---------------------------------------------------------------- indexes */
.cluster-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); border-bottom: 2px solid var(--accent); margin-bottom: var(--s-4); }
.cluster-head .cluster-h { border-bottom: 0; margin-bottom: var(--s-2); padding-bottom: 0; }
.cluster-hub { font-size: 15.5px; font-weight: 500; margin-bottom: var(--s-2); }
.entry-list a { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
.entry-m { flex: none; font-size: 14.5px; color: var(--ink-soft); }
.index-entries .sec-h, .index-cards .sec-h { margin-bottom: var(--s-5); }
.index-cards + .index-entries { border-top: 1px solid var(--hairline); }
.index-cards .rel-k { font-size: 14px; }

.article .check-strip, .answer .check-strip, .flow .check-strip { margin-bottom: var(--s-5); }

/* A check strip in a tile narrower than two thirds stacks its items (never a 2 + 1 grid). */
.tile--narrow .check-strip { grid-template-columns: minmax(0, 1fr); }
.tile--narrow .check-strip li { border-left: 0; margin-left: 0; border-top: 1px solid var(--hairline); padding: var(--s-5); }
.tile--narrow .check-strip li:first-child { border-top: 0; }

/* Footer: the services column carries the longest names, so it gets the widest track (no wrapped names). */
@media (min-width: 1000px) { .ftr-cols { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr); } }