/* UI-06-Y1-R2 yacht-detail body-layout layer (#yd-root, class uirh-yacht). Reviewed, hand-written, shared by every
   yacht-detail page; loaded after pages/yacht.css and any page stylesheet. It brings the yacht family onto the same
   rules as the accepted Home and Fleet layers (pages/home-layout.css, pages/fleet-layout.css, UI-02c R1-R4 and the
   Fleet owner R1 editorial arrangement):
     - the hero photograph runs behind the shared clear header (the shared hero extension owns the header's
       over-hero state, its readability layer and the switch to the solid header after 50px; without scripting the
       solid header stays and simply covers the photograph's top, as on Home);
     - one centred group per section: the heading group (eyebrow and heading) is centred, the section's content sits
       in the centred 760px reading column with its text start-aligned, and grids of photographs or cards take the
       centred 1280px page column;
     - alternate sections use exactly the shared .ui-section--alt recipe (soft 32px feathered edges, no border);
     - scoped text-fit rules so enlarged text wraps instead of clipping (no smaller text, no hidden overflow).
   Only horizontal containers, outer-group alignment, section backgrounds and the named text-fit rules change.
   Component interiors (forms, FAQ rows, cards, the price card, the gallery viewer) are not positioned here. Every
   selector starts from the page root with the four-class prefix the other layers use; only existing --ui-* tokens. */

/* ---- Hero: the photograph starts at the top of the viewport, under the clear header ----
   The yacht hero already reserves the header's height inside its own geometry (photograph height + --hh, copy
   padding + --hh), drawn for a header that sits over it. Pulling the hero up by the shared header height restores
   exactly that geometry under the shared sticky header, the same way the shared hero (.ui-hero) does on Home. */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .pg-hero{margin-top:calc(-1 * var(--ui-header-mobile))}
@media (min-width:901px){
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .pg-hero{margin-top:calc(-1 * var(--ui-header))}
}
/* ---- UI-06-Y1-R3: the phone and tablet photograph edge (through 900px; desktop unchanged) ----
   The accepted Home and Fleet treatment (src/hero/hero.css, .ui-hero__shade): the photograph's lower edge eases into
   the page surface over at most 24px, in the same profile and the theme's own surface colour, and the heading starts
   where the photograph ends (no overlap). This replaces the family's older wash, which covered the lower two thirds
   of the photograph and left its lowest quarter as solid surface. The photograph, its crop and its position are
   unchanged. */
@media (max-width:900px){
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .pg-hero{--hoff:0px}
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .pg-hero-overlay{background:linear-gradient(to top,var(--ui-surface) 0,var(--ui-surface) calc(24px * .18),rgba(var(--ui-surface-rgb),.88) calc(24px * .32),rgba(var(--ui-surface-rgb),.5) calc(24px * .55),rgba(var(--ui-surface-rgb),0) 24px)}
/* A photograph its page fits to the screen width (Diamond Dust's page stylesheet: background-size 100% auto, the
   whole yacht in view) gets a box of its own proportions (1600 x 902), so it fills the box from the top of the page,
   under the clear header, to the short edge, with no hard edge and no empty band. Its scale and framing are those of
   R2. */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .pg-hero:has(> .pg-hero-bg[style*="/yacht-assets/majesty-77/"]){--ph:calc(100vw * 902 / 1600 - var(--hh))}
}

/* ---- Sections: shared gutter; bands ---- */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec,
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .pdf-cta{padding-inline:var(--ui-gutter)}
/* Base sections: transparent over the page surface (the page root paints it). */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec:not(.sec-alt),
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .pdf-cta{background-color:transparent;background-image:none;border-top:0;border-bottom:0}
/* Alternate sections: exactly the shared .ui-section--alt recipe, no hard edge. Each page keeps its own sequence. */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec-alt{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}

/* ---- The 960/820px rails become the 1280px page column, so their children can take the two roles ---- */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec > :is(.sec-in,.sec-in-tight){max-width:var(--ui-container-page);margin-inline:auto}

/* ---- Reading column: every outer group of a section occupies the centred 760px column, start-aligned ----
   An inline max-width in the pinned body (the Explore more action, 320px) still wins, and that group is centred. */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec > :is(.sec-in,.sec-in-tight) > *{width:auto;max-width:var(--ui-container-reading);margin-inline:auto;text-align:start}
/* Wide column: the photograph grid and the related-yacht cards take the centred 1280px page column. */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec > :is(.sec-in,.sec-in-tight) > :is(.gal-grid,.rel-grid){max-width:var(--ui-container-page)}

/* ---- Heading group: the eyebrow and the heading are centred on the page axis; the section's own paragraphs keep
   their start alignment and prose measure (long paragraphs read better left-aligned). The gallery's one-line
   standfirst is centred with its heading, like the Fleet editorial standfirsts. ---- */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec-hd .lbl{justify-content:center}
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec-hd .stit{text-align:center}
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec-hd .sec-body{max-width:var(--ui-container-prose)}
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht #gallery .sec-hd .sec-body{margin-inline:auto;text-align:center}

/* ---- Explore more: the closing group is centred as one call: its introduction, the yacht-options link, the
   enquiry action and the related-yacht sub-heading sit on the page axis above the centred card grid. ---- */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht #explore-more > :is(.sec-in,.sec-in-tight) > :is(.wpb-p,.wpb-link,.wpc-sub){text-align:center}

/* ---- Text fit (enlarged text; normal-size layout unchanged) ----
   Buttons inside sections may wrap instead of running past the viewport (the legacy .btn is nowrap); the icon keeps
   its size. Only the line breaking changes: a label that fits keeps its single line. */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec .btn{white-space:normal;max-width:100%}
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .sec .btn svg{flex-shrink:0}
@media (max-width:900px){
/* Inclusions: two columns while two items of about 11 characters' width fit side by side, otherwise one column, so
   enlarged text never forces an item past the viewport. The basis is in em, so it grows with the text. */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .inc-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,11em),1fr))}
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .inc-i{min-width:0;overflow-wrap:break-word}
/* Quick specification: a tile needs room for its value on one line (about 8.5em); where two tiles of that width do
   not fit side by side, each takes its own row instead of breaking the price inside "4,500/hour". */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .qs-i{min-width:min(100%,8.5em)}
}

@media (min-width:901px){
/* Quick specification on desktop: the four tiles share the strip by their content (flex-basis auto) instead of four
   equal quarters, so the hourly price ("AED 4,500/hour") keeps one line beside the shorter facts; the strip's width,
   order, separators and type are unchanged, and enlarged text still wraps. */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .qs-i{flex:1 1 auto}
}

/* ---- Gallery viewer: horizontal swipes belong to the viewer (yacht.js), vertical panning and pinch zoom stay with
   the browser. ---- */
.uirh-yacht.uirh-yacht.uirh-yacht.uirh-yacht .lbox{touch-action:pan-y pinch-zoom}