/* UI-06-S1 service-page body-layout layer (#sv-root, class uirh-service). Reviewed, hand-written, shared by every
   service page; loaded after pages/service.css. It brings the service family onto the same rules as the accepted Home,
   Fleet and yacht-detail layers (pages/home-layout.css, pages/fleet-layout.css, pages/yacht-layout.css):
     - 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 and the yacht pages); on phones its lower edge eases
       into the page over at most 24px, as on Home, Fleet and the yacht pages. The photograph, its crop and its position
       are unchanged;
     - one centred group per section: the heading group (eyebrow and heading) is centred; the section's text, lists,
       steps, notes and FAQ sit in the centred 760px reading column with their text start-aligned; card and package
       grids take the centred 1280px page column; the section photographs keep the 960px width they had (so their crop
       is unchanged), centred;
     - a standalone call to action (a group holding only its WhatsApp button) is centred on the page axis;
     - alternate sections use exactly the shared .ui-section--alt recipe (soft 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 (package cards, tiles, FAQ rows, tier cards) 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 service 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, as the yacht layer does. */
.uirh-service.uirh-service.uirh-service.uirh-service .pg-hero{margin-top:calc(-1 * var(--ui-header-mobile))}
@media (min-width:901px){
.uirh-service.uirh-service.uirh-service.uirh-service .pg-hero{margin-top:calc(-1 * var(--ui-header))}
}
/* Phones and tablets (through 900px): 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 (src/hero/hero.css .ui-hero__shade; pages/yacht-layout.css R3), and
   the heading starts where the photograph ends. */
@media (max-width:900px){
.uirh-service.uirh-service.uirh-service.uirh-service .pg-hero{--hoff:0px}
.uirh-service.uirh-service.uirh-service.uirh-service .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)}
}
/* The hero's lead paragraph starts on the heading's edge (its legacy rule centred a 520px block under a left-aligned
   heading, which left it indented on desktop); its width, size and wording are unchanged. Phones already showed it
   start-aligned (the block was as wide as the column). */
.uirh-service.uirh-service.uirh-service.uirh-service .pg-hero-in > p{margin-inline:0}
/* The hero call to action may wrap at enlarged text instead of running past the viewport; the icon keeps its size. */
.uirh-service.uirh-service.uirh-service.uirh-service .pg-hero .btn{white-space:normal;max-width:100%}
.uirh-service.uirh-service.uirh-service.uirh-service .pg-hero .btn svg{flex-shrink:0}

/* ---- Sections: shared gutter; bands ---- */
.uirh-service.uirh-service.uirh-service.uirh-service .sec{padding-inline:var(--ui-gutter)}
/* Base sections: transparent over the page surface (the page root paints it). */
.uirh-service.uirh-service.uirh-service.uirh-service .sec:not(.sec-alt){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-service.uirh-service.uirh-service.uirh-service .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 960px rail becomes the 1280px page column, so its children can take their roles ---- */
.uirh-service.uirh-service.uirh-service.uirh-service .sec > .sec-in{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 (a narrower heading group) still wins, and that group is centred. */
.uirh-service.uirh-service.uirh-service.uirh-service .sec > .sec-in > *{width:auto;max-width:var(--ui-container-reading);margin-inline:auto;text-align:start}
/* Wide column: package, upgrade, experience and tier grids take the centred 1280px page column. */
.uirh-service.uirh-service.uirh-service.uirh-service .sec > .sec-in > :is(.pkg-grid,.upgd-grid,.exp-grid,.tier-grid){max-width:var(--ui-container-page)}
/* Section photographs keep their legacy 960px width (the family sheet's rail), centred, so the crop is unchanged. */
.uirh-service.uirh-service.uirh-service.uirh-service .sec > .sec-in > .sec-img{max-width:960px}

/* ---- 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). ---- */
.uirh-service.uirh-service.uirh-service.uirh-service .sec-hd .lbl{justify-content:center}
.uirh-service.uirh-service.uirh-service.uirh-service .sec-hd .stit{text-align:center}
.uirh-service.uirh-service.uirh-service.uirh-service .sec > .sec-in > .sec-body{max-width:var(--ui-container-reading)}
/* Readable long text: consecutive paragraphs of a section's text are separated by the 14px the pages already give
   their own following paragraphs inline (Birthday), so a multi-paragraph introduction no longer runs together. A
   paragraph's own inline margin still wins. */
.uirh-service.uirh-service.uirh-service.uirh-service .sec-body > p + p{margin-top:14px}

/* ---- Standalone call to action: a group whose only content is its WhatsApp button is centred on the page axis
   (some pages centred these already, others started them at the left edge). ---- */
.uirh-service.uirh-service.uirh-service.uirh-service .sec > .sec-in > div:has(> a.btn:only-child){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-service.uirh-service.uirh-service.uirh-service .sec .btn{white-space:normal;max-width:100%}
.uirh-service.uirh-service.uirh-service.uirh-service .sec .btn svg{flex-shrink:0}
/* Upgrade tiles and extras on phones and tablets: the legacy column counts are kept at every breakpoint (two columns
   through 900px, one from 560px for the upgrade tiles and from 480px for the extras), but each column may shrink to the
   available width (minmax(0,1fr) instead of 1fr) and a long word wraps inside its tile, so enlarged text never forces a
   tile past the viewport (the legacy grid overflowed 109px at 390px with 200% text). At normal size nothing moves: no
   word is wider than its column. */
@media (max-width:900px){
.uirh-service.uirh-service.uirh-service.uirh-service :is(.upgd-grid,.extras-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
.uirh-service.uirh-service.uirh-service.uirh-service :is(.upgd-tile,.extras-item,.pkg-card){min-width:0;overflow-wrap:break-word}
/* The evening timeline on phones and tablets: the family sheet lays each row out as a two-column grid whose title column (at least 96px)
   takes its content's width, so at enlarged text a long title took the whole row and the description column collapsed
   to 0px (measured at 320px with 200% text; its text then ran past the viewport). Here each row wraps instead: the
   description stays beside its title (which keeps its 96px minimum) while it has about 9em of room and moves under the title when it has not. At
   normal size every row at 390px is unchanged; at 320px the longest titles' descriptions move under them. */
.uirh-service.uirh-service.uirh-service.uirh-service .tl-item{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;row-gap:4px}
.uirh-service.uirh-service.uirh-service.uirh-service .tl-title{flex:0 1 auto;min-width:min(96px,100%);overflow-wrap:break-word}
.uirh-service.uirh-service.uirh-service.uirh-service .tl-desc{flex:1 1 9em;min-width:0;overflow-wrap:break-word}
}
@media (max-width:560px){
.uirh-service.uirh-service.uirh-service.uirh-service .upgd-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
.uirh-service.uirh-service.uirh-service.uirh-service .extras-grid{grid-template-columns:minmax(0,1fr)}
}