/* UI-02c body-layout layer: homepage (#hp-root, class uirh). Reviewed, hand-written; loaded after pages/home.css.
   Plan: docs/ui-system/evidence/UI-02C-PREP-R1/IMPLEMENTATION-PLAN.md (rules R1-R4); outer groups:
   SECTION-AUDIT-ADDENDUM.md section 2. Only horizontal containers, outer-group alignment and section backgrounds
   and edges change. Component interiors, the review carousel (e1), the phone yacht strip (e2), the phone advisor
   chips (e3) and the fixed advisor bar (e5) are not positioned here. Every selector starts from the page root;
   only existing --ui-* tokens are used; no opacity, filter, mask or blur. Two !important declarations answer
   inline styles in the pinned body (#hiw heading width, #hiw action row alignment). */

/* ---- Sections: shared gutter; bands (R4, explicit sequence) ---- */
.uirh.uirh.uirh.uirh .trust,
.uirh.uirh.uirh.uirh #yachts,
.uirh.uirh.uirh.uirh #hiw,
.uirh.uirh.uirh.uirh #charter-advisor,
.uirh.uirh.uirh.uirh #how-we-choose,
.uirh.uirh.uirh.uirh #special-event-bookings,
.uirh.uirh.uirh.uirh #faq{padding-inline:var(--ui-gutter)}
/* Base sections: transparent over the page surface (the body root paints --ui-surface). The trust strip keeps its
   hairlines; the other base sections lose their hard top rule. */
.uirh.uirh.uirh.uirh .trust{background-color:transparent;background-image:none}
.uirh.uirh.uirh.uirh #yachts,
.uirh.uirh.uirh.uirh #hiw,
.uirh.uirh.uirh.uirh #how-we-choose,
.uirh.uirh.uirh.uirh #faq{background-color:transparent;background-image:none;border-top:0;border-bottom:0}
/* Alternate sections: exactly the shared .ui-section--alt recipe, no hard edge. */
.uirh.uirh.uirh.uirh #guest-reviews,
.uirh.uirh.uirh.uirh #charter-advisor,
.uirh.uirh.uirh.uirh #special-event-bookings{background-color:var(--ui-section-alt);background-image:linear-gradient(to bottom,var(--ui-surface),var(--ui-section-alt) var(--ui-section-feather),var(--ui-section-alt) calc(100% - var(--ui-section-feather)),var(--ui-surface));border-top:0;border-bottom:0}
/* #pbar: the photographic feature band stays exactly as it is (proposed exception, owner visual review). */

/* ---- Wrappers become full-width so their children can take the two columns ---- */
.uirh.uirh.uirh.uirh #charter-advisor > .cha-in,
.uirh.uirh.uirh.uirh #how-we-choose > .hwsl-in,
.uirh.uirh.uirh.uirh #faq > .faq-in{max-width:none;margin-inline:0}

/* ---- Reading column: outer groups occupy the centred 760px column, start-aligned ---- */
.uirh.uirh.uirh.uirh #yachts > .sec-hd,
.uirh.uirh.uirh.uirh #yachts > .occ-banner,
.uirh.uirh.uirh.uirh #pbar > .pbar-in,
.uirh.uirh.uirh.uirh #hiw > .hiw-list,
.uirh.uirh.uirh.uirh #charter-advisor .cha-hd,
.uirh.uirh.uirh.uirh #charter-advisor .cha-result,
.uirh.uirh.uirh.uirh #charter-advisor .cha-guide,
.uirh.uirh.uirh.uirh #how-we-choose .hwsl-hd,
.uirh.uirh.uirh.uirh #how-we-choose .hwsl-cta,
.uirh.uirh.uirh.uirh #special-event-bookings > .sev-hd,
.uirh.uirh.uirh.uirh #faq .faq-hd,
.uirh.uirh.uirh.uirh #faq .faq-list{width:auto;max-width:var(--ui-container-reading);margin-inline:auto;text-align:start}
.uirh.uirh.uirh.uirh #hiw > .sec-hd{width:auto;max-width:var(--ui-container-reading) !important;margin-inline:auto;text-align:start}
.uirh.uirh.uirh.uirh #hiw > .reveal-d3{max-width:var(--ui-container-reading);margin-inline:auto;text-align:start !important}
/* Paragraph groups: start at the reading column's edge, prose measure kept. */
.uirh.uirh.uirh.uirh #yachts > .yacht-note,
.uirh.uirh.uirh.uirh #how-we-choose .hwsl-close{max-width:min(var(--ui-container-prose),var(--ui-container-reading));margin-inline:max(0px,calc((100% - var(--ui-container-reading)) / 2)) auto;text-align:start}
/* The review heading row and footer sit in the full-bleed carousel section (no section padding). */
.uirh.uirh.uirh.uirh #guest-reviews > .rvw-hd,
.uirh.uirh.uirh.uirh #guest-reviews > .rvw-foot{max-width:none;width:min(var(--ui-container-reading),calc(100% - 2 * var(--ui-gutter)));margin-inline:auto;padding-inline:0}
.uirh.uirh.uirh.uirh #guest-reviews > .rvw-hd{text-align:start}
/* Heading-group interiors that were centred become start-aligned (R3); the review footer stays centred. */
.uirh.uirh.uirh.uirh #special-event-bookings > .sev-hd .lbl{justify-content:flex-start}
.uirh.uirh.uirh.uirh #special-event-bookings > .sev-hd .sev-intro,
.uirh.uirh.uirh.uirh #charter-advisor .cha-hd .cha-rule{margin-inline:0 auto}
.uirh.uirh.uirh.uirh #how-we-choose .hwsl-cta{justify-content:flex-start}

/* ---- Wide column: grids and strips occupy the centred 1280px column ---- */
.uirh.uirh.uirh.uirh .trust > .trust-in,
.uirh.uirh.uirh.uirh #how-we-choose .hwsl-grid,
.uirh.uirh.uirh.uirh #special-event-bookings > .sev-grid{width:auto;max-width:var(--ui-container-page);margin-inline:auto}
@media (min-width:768px){
.uirh.uirh.uirh.uirh #yachts > .fleet-wrap{width:auto;max-width:var(--ui-container-page);margin-inline:auto}
}
@media (min-width:781px){
.uirh.uirh.uirh.uirh #charter-advisor .cha-grid{width:auto;max-width:var(--ui-container-page);margin-inline:auto}
}

/* ---- Prose measure: a reading group's direct paragraphs keep the shared 68ch measure (start-aligned) ---- */
.uirh.uirh.uirh.uirh #yachts > .sec-hd > p,
.uirh.uirh.uirh.uirh #yachts > .occ-banner > p,
.uirh.uirh.uirh.uirh #hiw > .sec-hd > p,
.uirh.uirh.uirh.uirh #charter-advisor .cha-hd > p,
.uirh.uirh.uirh.uirh #charter-advisor .cha-result > p,
.uirh.uirh.uirh.uirh #charter-advisor .cha-guide > p,
.uirh.uirh.uirh.uirh #how-we-choose .hwsl-hd > p,
.uirh.uirh.uirh.uirh #special-event-bookings > .sev-hd > p,
.uirh.uirh.uirh.uirh #faq .faq-hd > p{max-width:var(--ui-container-prose)}

/* ---- UI-02C-IMPL-R2 planner interior corrections (named exceptions; the outer .pbar-in keeps the centred reading
   column). F1: the date and time fields wrap onto their own lines when their labels would not fit side by side; the
   basis is in em, so it grows with the text (placeholders "Select a date"/"Select a time" are the longest values).
   F2: the planner group titles use the band's existing light text colour (--l1) instead of gold on the photo. ---- */
.uirh.uirh.uirh.uirh #pbar .pbar-dt{flex-wrap:wrap}
.uirh.uirh.uirh.uirh #pbar .pbar-dt .pf{flex:1 1 11em}
.uirh.uirh.uirh.uirh #pbar .uirh-group-t{color:var(--l1)}

/* ---- UI-02C-OWNER-R1 (owner corrections, 2026-09-30; local candidate, pending review) ----
   Appended to the R2 homepage layer. Choosing your yacht: the Help me choose action is centred on the page axis
   inside the section's centred reading column (it was start-aligned by the R2 rule above). Its target and tracking
   are unchanged; the closing paragraph keeps its R2 start alignment. */
.uirh.uirh.uirh.uirh #how-we-choose .hwsl-cta{justify-content:center}

/* UI-02C-OWNER-R1 revision 2 (owner request): How to book your yacht (#hiw) takes the corrected Fleet editorial
   arrangement. The eyebrow, heading and WhatsApp action are centred on the page axis; the three numbered steps stay
   in the same centred 760px reading column (R2 rule above) with their text start-aligned. Group spacing follows the
   Fleet groups: 12px eyebrow to heading, clamp(26px,3vw,36px) heading group to steps. The action row is centred with
   flex (its inline start/centre text-align is irrelevant to a flex item); its 36px top margin is an inline style in
   the pinned body and is kept, because overriding it would need !important. Wording, link and behaviour unchanged. */
.uirh.uirh.uirh.uirh #hiw > .sec-hd{text-align:center;margin-bottom:clamp(26px,3vw,36px)}
.uirh.uirh.uirh.uirh #hiw > .sec-hd .lbl{justify-content:center;margin-bottom:12px}
.uirh.uirh.uirh.uirh #hiw > .reveal-d3{display:flex;justify-content:center}