/* Block: Amenities (acf/amenities) --------------------------------------------------------------------------- The photographic panel between the two image bands. Like the intro panel and the bands it is `position: relative; z-index: 1` so it paints over the sticky hero (`z-index: 0`) as the page scrolls up. It ABUTS its neighbours — no negative margin, no overlap (style.css already zeroes the flow margin via `:root .wp-block-acf-amenities`). Height is content-driven. The comp draws 1512x533 desktop and 402x808 mobile; those are wildly different proportions and there is no photo ratio to explain them, because this is a text panel whose height is whatever the copy needs. So the block ships the comp's padding as custom properties and lets the height fall out. The background photo is absolutely positioned and never contributes to it. The block declares `spacing.padding` for the top/bottom sides only, and those defaults sit on `.amenities--section` — the same element the native padding slider writes its inline style to — so an editor's value REPLACES the default rather than stacking on top of it. Vertical values are the comp's gaps converted from its (padded) Figma text frames to real CSS line boxes, then tuned against the rendered page. Comp reference — desktop 77:16 @1512, mobile 122:294 region @402. --------------------------------------------------------------------------- */ .amenities--section { /* Mobile (comp panel 402x808 at y=1860) */ --amenities-pad-top: 60px; /* +15 over the comp-tuned 81: the last mark used to end with ~15px of its own transparent padding below the artwork, which read as part of this gap. Trimmed files put that space where it belongs. See --amenities-logo-height. */ --amenities-pad-bottom: 96px; --amenities-gap-eyebrow: 42px; /* eyebrow → headline */ --amenities-gap-heading: 24px; /* headline → body copy */ /* body copy → logo row. The comp's gap from the paragraph FRAME to the logo is 57px, but that frame (190px for 7 lines) is tighter than the CSS box the same 7 lines occupy (203px) — Figma crops to the ink, CSS carries the full leading. Measured ink-bottom to logo-top, the comp gap is 52px and an uncorrected 57 renders 65. 44 put the logos and the panel's total height within 1px of the comp — then +13, the transparent padding above the artwork in the old theme PNGs, which the trimmed uploads no longer carry. */ --amenities-gap-body: 57px; /* Between marks, and now the real distance between artwork rather than whatever survived two files' padding: the stacked 24 sat between two paddings totalling ~28, and the desktop row's 35 between two totalling ~22. Both resolve to the same ~52 once the files are cropped tight, so one value covers the column and the row. */ --amenities-logo-gap: 52px; /* Every mark renders at this height, its width following from its own aspect ratio — see the logo rules below. 69px splits the two seeded marks' previous artwork heights (73.1 and 65.2, before trimming), so the row's overall footprint is unchanged and neither partner grows or shrinks by more than ~6%. */ --amenities-logo-height: 69px; /* Extra inset on the copy only: the comp wraps the paragraph at 305px (frame 122:295 is x=51 w=305) against .theme-container's 372px content box, while the headline runs full-bleed. Worth hitting exactly — at 300px the line "senses and center yourself. Second" misses by under a pixel and the whole paragraph re-wraps away from the comp. */ --amenities-copy-inset: min(8.33vw, 33.5px); --amenities-col-gap: 0px; position: relative; z-index: 1; padding-top: var(--amenities-pad-top); padding-bottom: var(--amenities-pad-bottom); /* Shows through before the photo paints. */ background-color: var(--wp--preset--color--deep-sea, #1b2632); color: var(--wp--preset--color--linen, #d7d0c7); } /* --- Background ---------------------------------------------------------- Absolutely positioned, so it has no say in the panel's height. Decorative: the copy on top of it describes the amenities, so the wrapper is aria-hidden and the image carries alt="" (hero.php does the same). */ .amenities--media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .amenities--media > img, .amenities--media > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--amenities-media-position, center center); } .amenities--bg-video { pointer-events: none; } /* Opacity comes from the ACF range field as --amenities-overlay-opacity (0–1). The 0.3 fallback is --lwh-scrim-strong: the copy sits directly on the photo here, so this panel takes the strong scrim rather than the bands' soft 0.2. */ .amenities--section.has-overlay .amenities--media::after { content: ""; position: absolute; inset: 0; background-color: #000; opacity: var(--amenities-overlay-opacity, 0.3); pointer-events: none; } /* --- Content ------------------------------------------------------------- Above the photo. Every rule below is written twice over, through `:is()`, because the block renders in two DOM shapes. ACF normally wraps InnerBlocks output in an extra
; the front end opts out (see lwh_unwrap_block_innerblocks in blocks/register-blocks.php) so [data-reveal-group] can see the real children and stagger them, but the block editor still adds the wrapper client-side. `:is()` also pins all of these at the same specificity, so they cascade in source order. In the editor shape the wrapper is `display: contents` (below), which lifts the eyebrow/headline/copy back out to be grid items of .amenities--content — so the desktop two-column layout survives in the editor canvas too. */ .amenities--container { position: relative; z-index: 1; } .amenities--content { display: grid; grid-template-columns: 1fr; column-gap: var(--amenities-col-gap); row-gap: 0; } .amenities--content > .acf-innerblocks-container { display: contents; } /* Reset the flow margins core and the reset stylesheet apply, then lay the comp's rhythm back on in DOM order. */ :is(.amenities--content, .amenities--content > .acf-innerblocks-container) > * { margin-top: 0; margin-bottom: 0; } :is(.amenities--content, .amenities--content > .acf-innerblocks-container) > .amenities--heading { margin-top: var(--amenities-gap-eyebrow); /* Runs to the full width of .theme-container's BOX, not its content box — the comp draws the headline at 1283 wide against a 1220 content column (403 against 372 on mobile). Cancelling the container's own padding lands it at 1280/402, within 3px of the comp at both breakpoints. Deliberately expressed against --theme-content-padding rather than a vw calculation: the container is sized by the layout width, so this can never exceed the viewport and cannot introduce a horizontal scrollbar, whatever the window width or whether a classic scrollbar is showing. */ margin-left: calc(-1 * var(--theme-content-padding)); margin-right: calc(-1 * var(--theme-content-padding)); text-wrap: balance; } /* Child combinator, not the bare class: style.css loads AFTER every block stylesheet, so at equal specificity its utilities win. This has to out-rank the `.h1–.h6 { margin: 0 }` reset and theme.json's `:root :where(h2)` element styles, which land later still in `global-styles-inline`. */ :is(.amenities--content, .amenities--content > .acf-innerblocks-container) > .amenities--body { margin-top: var(--amenities-gap-heading); padding-left: var(--amenities-copy-inset); padding-right: var(--amenities-copy-inset); /* Mobile centres everything; desktop restores the left column below. */ text-align: center; /* Caps the measure while the panel is stacked. Without this the stacked layout runs the paragraph the full width of the container, which is fine at 402 but gives a ~1070px single centred line just below the two-column breakpoint. 576px is the comp's own copy width. */ max-width: 576px; margin-left: auto; margin-right: auto; } /* --- Logos --------------------------------------------------------------- Media-library attachments from the block's `logos` repeater — see the block's file header. The panel has no say in WHICH marks it shows or how many, so nothing here may key off a count or a position: one height rule sizes every row, and the flex row lays out however many the editor added. Sizing by height rather than width is what lets an arbitrary upload sit next to the seeded pair and read as the same size. Two wordmarks of the same width look nothing alike when one is a single script line and the other a two-line lockup; matched heights is how a logo row is normally set. It does assume the uploads are cropped tight to the artwork — the field instructions say so, and the seeded files were trimmed. A row with a Link wraps its mark in , which is then the flex item in place of the image — so the image rule below matches through either parent, and the link takes over the overflow guards. Whether that link opens a lightbox or navigates is amenities.php's call. */ :is(.amenities--content, .amenities--content > .acf-innerblocks-container) > .amenities--logos { display: flex; flex-direction: column; align-items: center; gap: var(--amenities-logo-gap); margin-top: var(--amenities-gap-body); /* Both of these exist to make a horizontal scrollbar structurally impossible, not to style anything. A grid item defaults to `min-width: auto`, which floors its track at the item's min-content width — for a nowrap flex row of the two seeded marks that is 176 + 52 + 278 = 506px, and a floor that big forces the whole grid wider than its container. It only grows as the editor adds rows, which is the reason this is a rule and not a measurement. `wrap` is the other half: once the track can be narrower than the row, the marks stack instead of spilling out. */ min-width: 0; flex-wrap: wrap; } :is(.amenities--logos, .amenities--logo-link) > .amenities--logo { display: block; height: var(--amenities-logo-height, 69px); width: auto; /* A mark wide enough to overflow its container is clamped by max-width, and `contain` is what keeps that from squashing the artwork: the image scales down inside the shorter box rather than being drawn to a height it no longer has the width for. Unreachable for the seeded pair (278px against a 372px content box at the narrowest), but the editor picks the uploads now, so that failure has to be a graceful one and not a horizontal scrollbar. */ max-width: 100%; object-fit: contain; object-position: center; } /* The link is the flex item now, so the two guards travel with it: `min-width: 0` so the row can't be floored at the artwork's intrinsic width, and `max-width: 100%` so the image's own max-width has a box to resolve against and the clamp above still engages. */ .amenities--logos > .amenities--logo-link { display: block; min-width: 0; max-width: 100%; transition: opacity 0.2s ease; } .amenities--logos > .amenities--logo-link:hover { opacity: 0.7; } /* Keyboard focus only. Clicking the link focuses it, and Chrome paints its own default ring on that plain `:focus` however the author rule is scoped — so clear it first. Same specificity as the rule below, which therefore has to stay second to win. Linen, to match the theme's buttons and the band track. */ .amenities--logos > .amenities--logo-link:focus { outline: none; } .amenities--logos > .amenities--logo-link:focus-visible { outline: 2px solid var(--wp--preset--color--linen, #d7d0c7); outline-offset: 6px; } @media (prefers-reduced-motion: reduce) { .amenities--logos > .amenities--logo-link { transition: none; } } /* GLightbox 3.3 quirk: it marks the arrows `glightbox-button-hidden` on a one-slide gallery, but its `.glightbox-button-hidden { display: none }` is out-ranked by the `.gclose, .gnext, .gprev { display: flex }` that follows it, so the "hidden" arrows linger at the edges at 10% opacity (the `.disabled` style). Three classes beat its two without an !important. Every linked mark here is its own one-slide gallery, so this only ever hides arrows that lead nowhere. */ .glightbox-container .gbtn.glightbox-button-hidden { display: none; } /* Editor-only, shown in place of the row while the repeater is empty. */ .amenities--placeholder { margin-top: var(--amenities-gap-body); text-align: center; opacity: 0.7; } /* --- Desktop ------------------------------------------------------------- Copy left, logos right, side by side; eyebrow and headline centred across both columns. Comp 77:16 @1512: copy column x=123 w=576, logos x=790 → 1316. The gutter decision (Phase 3, binds this phase) reuses .theme-container as-is, so content starts at x=146 rather than the comp's 123 and the whole row rides ~23px right of the comp. Accepted, for consistency with intro/copy/section. The two columns need 576 + 91 + 506 = 1173px of content, i.e. a 1233px window, to stand up at their design sizes. They engage at the theme's 1200px breakpoint — where the fluid gap has given back enough for the row to fit — and below that the panel uses the stacked, centred layout. The track sizing below then makes overflow impossible at any width rather than merely unlikely at the ones that got tested — which matters more now that the editor chooses the marks and the 506 is only today's pair. */ @media (min-width: 1200px) { .amenities--section { /* comp panel 1512x533 at y=1983 */ --amenities-pad-top: 90px; --amenities-pad-bottom: 89px; --amenities-gap-eyebrow: 39px; --amenities-gap-heading: 33px; /* Reads as 13px MORE than --amenities-gap-heading, and has to. The copy and the logo row are two items in the same grid row and a grid item's margin offsets it inside the row box, so equal values align their BOXES — which is what the comp aligns (both frames at y≈2296) only because the comp's logo frames were the padded PNGs. Trimmed files start at the artwork, so holding the artwork where the comp draws it means adding back the 13px of padding that used to sit above it. */ --amenities-gap-body: 46px; --amenities-copy-inset: 0px; /* 91px is the comp's gap (790 − (123 + 576)); it yields space before the copy column does as the window narrows. */ --amenities-col-gap: clamp(40px, 7vw, 91px); } .amenities--content { /* Both tracks have a zero minimum, so neither can floor the grid wider than its container: the logo track never exceeds what the marks actually need, and the copy column absorbs whatever is left over and may shrink to nothing. At 1512 today's pair resolves to 576 + 506 with 47px spare; a third mark would eat that and then start taking width off the copy column rather than off the viewport. */ grid-template-columns: minmax(0, 576px) minmax(0, max-content); } /* Auto-placement puts the copy in row 3 column 1 and the logos in row 3 column 2 — the first cell free in that column, since the two spanning rows above it are taken. Left to auto-place rather than pinned to `grid-row: 3` so removing the eyebrow in the editor doesn't strand the logos in an empty row. */ :is(.amenities--content, .amenities--content > .acf-innerblocks-container) > .amenities--eyebrow, :is(.amenities--content, .amenities--content > .acf-innerblocks-container) > .amenities--heading { grid-column: 1 / -1; } :is(.amenities--content, .amenities--content > .acf-innerblocks-container) > .amenities--body { grid-column: 1; text-align: left; /* The track is the column now — drop the stacked layout's centring cap. */ max-width: none; margin-left: 0; margin-right: 0; } :is(.amenities--content, .amenities--content > .acf-innerblocks-container) > .amenities--logos { grid-column: 2; flex-direction: row; /* Moot while every mark is --amenities-logo-height tall, but it is the right answer for the case that isn't: a logo clamped by max-width (see above) hangs from the same top line as the rest of the row instead of floating in the middle of it. The comp top-aligns too (both at y=2296). */ align-items: flex-start; justify-content: flex-start; } }