/* TJW — spoke composition: the ten repairs spokes and the remodelling page.
 *
 * Ported from the prototype layer
 * (repairs-spokes-prototype-2026-09-26/site/prototype-refresh.css), where every
 * rule was scoped `.prototype .entry-content …` so it could only ever apply inside
 * the preview server. That ancestor does not exist in WordPress, so the rules are
 * re-scoped here to classes the pages themselves carry.
 *
 * NOT ported, deliberately:
 *   - `.tjw h2{font-weight:400}` — a no-op. section-patterns.css already sets every
 *     h2 rule to font-weight:400.
 *   - `@media(prefers-reduced-motion:reduce){.tjw *{…}}` — it targets every element
 *     on the site, which is too broad to ship from a spoke stylesheet. Reduced-motion
 *     handling belongs with the carousel component that needs it.
 *   - the `.pv-switch` rules — preview chrome, not part of the design.
 *
 * SCOPING. Every rule is prefixed `.wp-block-group.tjw` — the wrapper group the spoke
 * content sits in — and the class it targets exists only on these eleven pages. The
 * prefix is not decoration, and it is two classes in ONE compound on purpose.
 *
 * The prototype layer's rules read `.prototype .entry-content .X` and so scored (0,3,0).
 * Dropping both ancestor classes for the port left these rules at (0,1,0), and the theme
 * quietly won wherever its own rules were more specific: the related-services row lost its
 * top margin altogether (`.tjw .wp-block-group > *` is (0,2,0)), the price note fell from
 * 16px to 13px (`.tjw .shead__note`, also (0,2,0)) and the postal note inside the enquiry
 * band stayed at 18px (`.tjw .dark .enq__aside p`, (0,3,1)).
 *
 * `.tjw` alone restores only (0,2,0) — enough for the first two, not the third. Because
 * the wrapper is `<div class="wp-block-group alignfull tjw">`, `.wp-block-group.tjw` is
 * (0,2,0) for the prefix and puts every rule on exactly the prototype's (0,3,0). Same
 * element, and the same markup in the block editor, so the editor styles go on applying.
 * _wp/probe-styles.js diffs the computed result against the prototype; it has to be empty.
 *
 * The only shared component here is `.hero-split`, and it is never targeted alone: both
 * rules name it under `.repairs-open`, a class only these pages carry, so no other page
 * using hero-split is affected. install-spoke-css.php enforces both properties.
 *
 * No new design language. This composes the theme's own components and consumes the
 * shared tokens (--sp-*, --fs-*, --fd-*, --ink*, --line-d, --r-sm), which inherit
 * from the .tjw wrapper the spoke content sits in.
 */

.wp-block-group.tjw .repairs-open{padding-block:var(--sp-16)}
.wp-block-group.tjw .repairs-open .hero__title{padding:0;margin:0 0 var(--sp-8)}
.wp-block-group.tjw .repairs-open h1{font-size:var(--fd-1);font-weight:400}
.wp-block-group.tjw .repair-summary{margin-top:var(--sp-6);font-size:var(--fs-md);color:var(--ink)}
.wp-block-group.tjw .repairs-open .hero-split__text .story__body{grid-column:auto}
.wp-block-group.tjw .repairs-open .hero-split__media img{max-height:560px;object-fit:cover}

/* ---- the remodel opening, at display scale ----
   The site keeps --fd-1 (34–48px) for interior heroes and keeps a much larger tier
   above it: --fd-display (56–96px), defined in editorial.css as "the page opening —
   h1" and already used by .chero--ed on /contact-us/. The remodel page opens the
   bespoke workstream, so it takes the display tier — same tokens, same tracking, no
   new scale invented. Weight 400 is the site's own heading weight; a 300 serif reads
   faint at 96px rather than fine. Scoped .repairs-open.hero-lead (0,4,1):
   .repairs-open alone is shared by all eleven spokes and its h1 rule sits at (0,3,1). */
.wp-block-group.tjw .repairs-open.hero-lead h1{font-size:var(--fd-display);letter-spacing:var(--tr-display);line-height:1.02;font-weight:400}
/* Kicker ABOVE the headline, not under it — the site's hero grammar in all three of
   its openings (.chero--ed, .cover-copy, .compact-head). Small mono against 96px
   serif is the contrast that makes the headline land, and the price stays legible at
   the house 11px floor. */
.wp-block-group.tjw .hero-lead .hero__title .kicker{margin-bottom:var(--sp-6)}
/* The bench photograph leaves the hero split. At 3:2 inside .hero-split__media's
   .85fr track it rendered ~290px tall beside a full column of prose, which is the
   imbalance the split had; full width beneath the copy it carries the opening
   instead. .story__photo already owns width/radius/caption. */
.wp-block-group.tjw .hero-lead__media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:600px){
  .wp-block-group.tjw .repairs-open.hero-lead h1{font-size:var(--fd-1)}
}

.wp-block-group.tjw .repair-panorama{margin-top:var(--sp-10)}
.wp-block-group.tjw .repair-panorama img{width:100%;aspect-ratio:12/5;object-fit:cover}
.wp-block-group.tjw .repair-section-title h2{margin:0 0 var(--sp-4)}
.wp-block-group.tjw .repair-section-title p{max-width:30ch}
.wp-block-group.tjw .repair-pricing > p{max-width:65ch;margin-block:var(--sp-6)}
/* 64px, not the 40px that matched the surrounding rhythm: this row closes its band and
   has to read as an element in its own right. On most of these pages it follows the FAQ
   <details> list, whose own row rhythm is ~50px, so anything at or under that reads as
   one more question. --sp-16 is the token the band's own padding uses (.repairs-open), so
   no new value enters the system. The prototype layer carries the same rule; the scope
   prefix is what makes it stick — see SCOPING above. */
.wp-block-group.tjw .repair-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-4) var(--sp-8);margin-top:var(--sp-16)}
.wp-block-group.tjw .repair-links > span{font-size:var(--fs-sm);color:var(--ink-60)}
.wp-block-group.tjw .repair-postal{margin-top:var(--sp-8);border-top:1px solid var(--line-d);padding-top:var(--sp-4)}
.wp-block-group.tjw .repair-postal summary{cursor:pointer;font-size:var(--fs-md);color:var(--bg)}
.wp-block-group.tjw .repair-postal p{font-size:var(--fs-sm);line-height:1.65}

/* ---- Remodel page — the design lead-in and the finished-piece carousel ----
   The carousel is built from the site's OWN parts. The wrapper carries
   .bespoke-carousel so the theme's dot component styles the markup verbatim:
   .pgn.numbers > .pgn_numbers > a > .pgn_number plus .pgn_current
   (section-patterns.css) gives the 30x2px bar dots, the active state and the 32px
   margin.

   What this block supplies is ONLY the no-JS fallback: the preview server runs
   script-src 'none', so a JS slider cannot move, and a scroll-snap track stands in.
   In WordPress this slot is the Greyd query carousel — the track becomes
   .bespoke-carousel__stage, each slide .bespoke-carousel__slide wrapping a
   .bespoke-carousel__image, and the dots become role="button" data-pagelink
   controls. Every .remodel-* rule then drops away. */
.wp-block-group.tjw .remodel-carousel{margin-top:var(--sp-10)}
.wp-block-group.tjw .remodel-track{display:flex;gap:var(--sp-8);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:var(--sp-2)}
.wp-block-group.tjw .remodel-track::-webkit-scrollbar{display:none}
.wp-block-group.tjw .remodel-slide{flex:0 0 min(72%,420px);margin:0;scroll-snap-align:center}
.wp-block-group.tjw .remodel-slide img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:var(--r-sm)}
.wp-block-group.tjw .remodel-slide figcaption{margin-top:var(--sp-4);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-60)}
.wp-block-group.tjw .remodel-slide figcaption b{display:block;font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--fs-md);letter-spacing:var(--tr-snug);color:var(--ink);margin-bottom:var(--sp-1)}
/* Each piece name links to its portfolio entry, as the site's own carousel titles
   do. The base theme rule strips the underline, so the hover affordance is stated. */
.wp-block-group.tjw .remodel-slide figcaption a:hover b{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}

@media(max-width:860px){
  .wp-block-group.tjw .remodel-slide{flex-basis:86%}
  .wp-block-group.tjw .repairs-open{padding-block:var(--sp-10)}
  .wp-block-group.tjw .repair-panorama img{aspect-ratio:3/2}
  .wp-block-group.tjw .repairs-open .hero-split__media img{max-height:400px}
  .wp-block-group.tjw .repair-links{gap:var(--sp-4) var(--sp-6)}
}