/* Block: Availability (acf/availability)
   ---------------------------------------------------------------------------
   Floor tabs, the selected suite and the building drawing. Phone first: bar,
   suite, then the drawing full width; from 992px the drawing sits at the
   section's right edge beside the suite, as the comp draws it. Notes:
   docs/availability-block.md.

   Comps (Figma 9eBn6GzkM1aHMg59Ck62cP, 1512 only): 254:232 (Floor 20), 333:8
   (Floor 17), 365:575 / 369:682 (Floor 3 open). At 1512, from the bar's
   bottom edge: pill +33, "SUITE" +123, the number +146 (124/125), the area
   +284 (48/48), the features column +159 at the suite's x + 353, "View Floor
   Plan" ending 132px above the drawing's foot. The drawing is the right 40%
   of a 1511 x 854 16:9 box (604 x 854), tucked 14px under the bar, and the
   Penthouse panel after it covers its last 23px.

   Two modes. Interactive (`I` below: html.lwh-js, set before first paint by
   the head script in functions.php, or the editor preview's is-preview-mod):
   the tabs and the pill show, and the suites stack in one grid cell with only
   the selected one visible, so the panel's height never moves as they change
   (the image band's caption trick). Without JS: no tabs, no pill, every suite
   one after another, all available floors tinted alike.

   Block stylesheets print BEFORE reset.min.css and style.css (header.md, "CSS
   order trap"), so every rule here wins on specificity, never on order. The
   global styles' :root :where(h2/h3/p) are (0,1,0) and print later too, hence
   the two-class selectors on the headings.
--------------------------------------------------------------------------- */

.availability--section {
	--availability-ink: var(--wp--preset--color--deep-sea, #1b2632);
	/* Every Ember here is text (the heading, "SUITE", "FEATURES", the selected
	   floor and suite, "View Floor Plan" and its hover fill under the Linen
	   label), so it is the AA shade (2026-10-17, DR-5; style.css): 3.62 ->
	   4.62:1 on the Linen bar, 3.65 -> 4.66 on the drawing ground. */
	--availability-accent: var(--lwh-ember-on-linen, #8a4530);
	--availability-btn-hover-fg: var(--wp--preset--color--linen, #d7d0c7);
	/* The drawing's own flat ground (216, 209, 199), one level off Linen
	   (215, 208, 199). The section is painted in it so no edge of the image
	   ever shows: the comp's panel is this colour too. */
	--availability-ground: #d8d1c7;
	/* Tints, drawn with mix-blend-mode: multiply over the drawing, measured off
	   Dapper's renders (identical in all three comp states). The hover tint
	   is ours: the comps have no hover. */
	--availability-tint: #8bb1b0;
	--availability-tint-hover: #6e9a98;
	--availability-tint-current: #3a5d57;
	/* .theme-container's 15px phone gutter, plus this, is the comps' 43px. */
	--availability-inset: 28px;
	/* Space under the drawing that the next section's rounded top rides over
	   (below). 0 unless a panel follows. */
	--availability-tail: 0px;

	position: relative;
	isolation: isolate;
	background-color: var(--availability-ground);
	color: var(--availability-ink);
}

/* The Penthouse panel after the drawing covers its last 23px, as in the comp
   (254:232: drawing to 3273, panel from 3250). A panel lifts by its own
   overlap (feature.css: 60px on phones, 73 from 992), so the section keeps
   that much less 23 below the drawing (37px from 768, 50 from 992, below).
   Without :has() the panel simply covers more of it.

   Phones have no drawing (since 2026-10-17, below), so the panel would ride
   up over the suite itself: with the container's 48px under it, "View Floor
   Plan" would end 25px above the panel's edge. 72px keeps it 60px clear,
   the clearance feature.css keeps above a panel on phones (its 60px bottom
   padding, plus the overlap, on a Feature a panel follows), so the Overview,
   this section and the Penthouse panel step down the page alike. */
.availability--section:has(+ .feature--section.panel-mod) {
	--availability-tail: 72px;
}

/* --- The bar ----------------------------------------------------------------
   Linen with the comp's shadow, over the drawing (z-index), the heading and
   the tabs centred. Desktop rhythm (157px, 254:232): heading ink centre 45px
   down, tab ink centre 106, bottom 51 below it. */

.availability--bar {
	position: relative;
	z-index: 2;
	padding: 24px 0 16px;
	background-color: var(--wp--preset--color--linen, #d7d0c7);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
	text-align: center;
}

.availability--bar .availability--eyebrow,
.availability--suite .availability--suite-label,
.availability--suite .availability--features-label {
	margin: 0;
	color: var(--availability-accent);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--eyebrow, 18px);
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* The tabs: hidden without JS, where every suite is listed instead. */
.availability--floors {
	display: none;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/* With the Heading field cleared the tabs open the bar, so they lose the gap
   under it at every tier (two classes, over the tiers' margin-top). */
.availability--floors:first-child {
	margin-top: 0;
}

:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--floors {
	display: grid;
	/* Three a row on phones: "FLOOR 21" is 97px, a column 124 at 402. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.availability--floor-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Floor and suite tabs: the comp's 18px Tags style, Deep Sea, the selected
   one Ember. The horizontal padding is cancelled by a negative margin, so the
   label's ink sits where the comp puts it and the focus ring still has air. */
.availability--section .availability--floor,
.availability--section .availability--suite-tab {
	display: block;
	margin: 0 -8px;
	padding: 12.5px 8px;
	border: 0;
	border-radius: var(--lwh-clip-corner-sm, 10px) var(--lwh-clip-corner-sm, 10px) 0 var(--lwh-clip-corner-sm, 10px);
	background: none;
	color: var(--availability-ink);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--eyebrow, 18px);
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

/* A suite row is 39px, 50px below its floor's centre (365:575). */
.availability--section .availability--suite-tab {
	padding-top: 8.5px;
	padding-bottom: 8.5px;
}

/* 44px on a touch screen, a tap target's size (2026-10-15, Phase 7 audit
   AV-6). The open floor's list grows by 5px a row; js/availability.js keeps
   the pressed control still as the bar grows, as it always has. */
@media (pointer: coarse) {
	.availability--section .availability--suite-tab {
		padding-top: 11px;
		padding-bottom: 11px;
	}
}

.availability--section .availability--floor[aria-current="true"],
.availability--section .availability--suite-tab[aria-current="true"] {
	color: var(--availability-accent);
}

/* Hover: an Ember underline (our call; the comps have no hover). */
@media (hover: hover) {
	.availability--section .availability--floor:hover,
	.availability--section .availability--suite-tab:hover {
		text-decoration: underline;
		text-decoration-color: var(--availability-accent);
		text-decoration-thickness: 1px;
		text-underline-offset: 6px;
	}
}

/* Keyboard focus: the site's 2px ring, in Deep Sea on Linen, following the
   clipped corner like the header's. */
.availability--section .availability--floor:focus-visible,
.availability--section .availability--suite-tab:focus-visible {
	outline: 2px solid var(--availability-ink);
	outline-offset: 0;
}

/* A floor's suites, under its tab while it is selected (the bar grows). */
.availability--suite-tabs {
	display: none;
	margin: 7px 0 0;
	padding: 0;
	list-style: none;
}

.availability--floor-item.is-open-mod > .availability--suite-tabs {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.availability--suite-tabs > li {
	margin: 0;
	padding: 0;
}

/* --- The body ------------------------------------------------------------------ */

.availability--body {
	position: relative;
	padding-bottom: var(--availability-tail);
}

.availability--container.theme-container {
	position: relative; /* keeps the hidden live region inside */
	z-index: 1;
	padding-top: 32px;
	padding-bottom: 48px;
	padding-left: calc(var(--theme-content-padding) + var(--availability-inset));
	padding-right: calc(var(--theme-content-padding) + var(--availability-inset));
	text-align: left;
}

/* --- The pill --------------------------------------------------------------------
   The image band's arrow pill (100.4 x 48, the small clipped corner), in Deep
   Sea on the ground as the comp draws it (border at 80%). Hidden without JS. */

.availability--nav {
	display: none;
	align-items: center;
	gap: 17.6px;
	width: max-content;
	margin: 0 0 32px;
	padding: 9.8px 14px;
	border: 1px solid rgba(27, 38, 50, 0.8);
	border-radius: var(--lwh-clip-corner-sm, 10px) var(--lwh-clip-corner-sm, 10px) 0 var(--lwh-clip-corner-sm, 10px);
	color: var(--availability-ink);
}

:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--nav {
	display: flex;
}

.availability--section .availability--arrow {
	position: relative;
	display: block;
	width: 26.4px;
	height: 26.4px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* The tap target (2026-10-15, Phase 7 audit F1): an invisible box takes each
   26.4px arrow out to its half of the pill, 50.2 x 48, as on the band's and
   the feature's pills. Nothing changes on screen. */
.availability--section .availability--arrow::before {
	content: "";
	position: absolute;
	top: -10.8px;
	bottom: -10.8px;
	left: -15px;
	right: -8.8px;
}

.availability--section .availability--arrow.is-next::before {
	left: -8.8px;
	right: -15px;
}

.availability--section .availability--arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

.availability--chevron {
	display: block;
	width: 100%;
	height: 100%;
}

.availability--arrow.is-prev .availability--chevron {
	transform: rotate(180deg);
}

/* --- The suites ------------------------------------------------------------------ */

.availability--suites {
	min-width: 0;
}

/* Without JS every suite shows, one after another. */
.availability--suite {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.availability--suite + .availability--suite {
	margin-top: 64px;
}

/* Interactive: one cell, only the selected suite visible. visibility (not
   display) keeps every suite's height in the cell, so nothing below moves
   when the selection changes; hidden suites are out of the tab order and the
   accessibility tree all the same. A class, never [hidden], which the reset
   makes impossible to override (feature-block.md, "Traps"). */
:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--suites {
	display: grid;
}

:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--suite {
	grid-area: 1 / 1;
	margin-top: 0;
	visibility: hidden;
}

:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--suite.is-current-mod {
	visibility: visible;
}

/* Below 992 the drawing sits under the copy, so the cell takes the selected
   suite's own height instead of the tallest one's: a short suite (a
   placeholder like 1900) doesn't leave a gap above the drawing (Dmitriy,
   2026-10-15). The other suites collapse to nothing; overflow: hidden also
   zeroes a grid item's automatic minimum height. When the height changes,
   js/availability.js scrolls by the difference so a tapped floor shape stays
   under the finger. From 992 the drawing sits beside the copy and grows with
   it, so the tallest suite holds the height there and nothing moves. */
:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--suite:not(.is-current-mod) {
	height: 0;
	overflow: hidden;
}

@media (min-width: 992px) {
	:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--suite:not(.is-current-mod) {
		height: auto;
		overflow: visible;
	}
}

.availability--suite .availability--suite-title {
	margin: 0;
	color: var(--availability-ink);
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.availability--suite-label {
	display: block;
}

/* The suite number: the H2 size (124px at 1512, fluid below), Deep Sea. */
.availability--suite .availability--suite-number {
	display: block;
	margin-top: 1px;
	color: var(--availability-ink);
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: var(--wp--preset--font-size--h-2, 124px);
	font-weight: 300;
	line-height: 1.01;
	letter-spacing: 0;
}

/* The rentable area: the 48px Subhead, black as drawn, from 992. Below 992
   it is 34px (2026-10-16, Phase 7 audit AV-8): on a phone the suite number
   is the fluid H2's 54.5px, and a 48px area read as its equal. */
.availability--suite .availability--area {
	margin: 13px 0 0;
	color: var(--wp--preset--color--black, #000);
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
}

.availability--features {
	margin-top: 40px;
}

/* Rig Sans Bold 20px, Deep Sea: 29px lines, 37px from item to item. 32px
   under the label (26 until 2026-10-16, Phase 7 audit AV-4: the list sat
   6px higher than the comp draws it). */
.availability--suite .availability--features-list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	color: var(--availability-ink);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 29px;
	letter-spacing: 0;
}

.availability--features-list > li {
	margin: 0;
	padding: 0;
	/* No lone last word ("of / Floor"; 2026-10-15, Phase 7 audit AV-4). */
	text-wrap: pretty;
}

.availability--features-list > li + li {
	margin-top: 8px;
}

/* The floor-plan button drops to the foot of the suite (level across suites,
   whatever their copy), with at least 47px above it. */
.availability--plan {
	margin-top: auto;
	padding-top: 47px;
}

/* The button: a flat Ember outline on the ground, filled Ember on hover and
   keyboard focus (feature.css's Linen backgrounds do the same), not the Sunset
   label, which would read 1.2:1 here. Its type is buttons.css's: no `font`
   shorthand here, which at this specificity would reset the label to the
   body's 20px light (feature.css's `font: inherit` is only (0,1,0), so
   buttons.css overrides it there). */
.availability--section .availability--plan-open {
	border-color: var(--availability-accent);
	background-color: transparent;
	background-image: none;
	color: var(--availability-accent);
	-webkit-background-clip: border-box;
	background-clip: border-box;
}

.availability--section .availability--plan-open:hover,
.availability--section .availability--plan-open:focus-visible {
	background-color: var(--availability-accent);
	background-image: none;
	color: var(--availability-btn-hover-fg);
}

/* buttons.css rings in Linen, invisible on this ground. */
.availability--section .availability--plan-open:focus-visible {
	outline: 2px solid var(--availability-ink);
	outline-offset: 3px;
}

/* --- The drawing -------------------------------------------------------------------
   The canvas holds the image and the SVG in one box of the slice's exact
   ratio (1600 x 2250), so the floor shapes stay on their floors at any crop.

   Not on phones (2026-10-17, Dapper's review DR-4: "redundant on mobile"):
   below 768 the floor tabs and the pill are the way to choose, and the
   drawing is display: none. Its image is loading="lazy", and a lazy image
   with no box is never fetched, so phones don't download it either (checked
   in Chrome and WebKit). The shapes stay in the markup, harmless while
   hidden; js/availability.js only toggles their classes.

   Tablets (768-991): full width under the suite, min(175vw, 720px) tall and
   anchored right, so the canvas is narrower than the box and the ground
   shows to its left. The slice's top edge is a hard cut through the
   buildings behind the tower, so it fades in. (On phones, until 2026-10-17,
   the same box cropped the slice's faded left edge below ~410px wide.) */

.availability--art {
	display: none;
	position: relative;
	z-index: 0;
	height: min(175vw, 720px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
}

.availability--art-canvas {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	aspect-ratio: 1600 / 2250;
	/* The SVG multiplies onto the drawing only, never the ground behind. */
	isolation: isolate;
}

.availability--art-img,
.availability--art-shapes {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.availability--art-shapes {
	overflow: visible;
	mix-blend-mode: multiply;
}

.availability--shape {
	fill: var(--availability-tint);
	-webkit-tap-highlight-color: transparent;
	transition: fill 0.2s ease;
}

/* The selected floor, only where something can select it. Without JS every
   available floor is tinted alike. */
:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--shape.is-current-mod {
	fill: var(--availability-tint-current);
}

/* A floor is a click target (js/availability.js). Hover hints so on pointer
   devices; touch just taps. */
@media (hover: hover) and (pointer: fine) {
	html.lwh-js .availability--section .availability--shape {
		cursor: pointer;
	}

	html.lwh-js .availability--section .availability--shape:not(.is-current-mod):hover {
		fill: var(--availability-tint-hover);
	}
}

@media (prefers-reduced-motion: reduce) {
	.availability--shape {
		transition: none;
	}
}

/* --- Editor ---------------------------------------------------------------------- */

.availability--placeholder {
	margin: 0;
	padding: 40px 30px;
	border: 1px dashed currentColor;
	text-align: center;
	opacity: 0.7;
}

/* --- Tablet: one row of tabs, and the drawing ------------------------------------ */

@media (min-width: 768px) {
	.availability--art {
		display: block;
	}

	.availability--section:has(+ .feature--section.panel-mod) {
		--availability-tail: 37px;
	}

	:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--floors {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	/* The row starts and ends where the copy does (2026-10-16, Phase 7 audit
	   AV-10): at 768-991 the tabs ran nearly edge to edge (ink 15-753) while
	   the suite below starts at 43. From 992 the inset is 0, so nothing
	   changes there; below 768 the three-a-row grid needs the full width. */
	.availability--bar-container.theme-container {
		padding-left: calc(var(--theme-content-padding) + var(--availability-inset));
		padding-right: calc(var(--theme-content-padding) + var(--availability-inset));
	}
}

/* --- Desktop --------------------------------------------------------------------
   The drawing at the section's right edge, min(40vw, 605px) wide (the comp's
   604 at 1512), from 14px under the bar to the section's foot less the tail.
   The section is at least that tall; when the copy runs taller (992-1199,
   where it is one column, or a suite with a long list) the drawing grows with
   it, still anchored right, its faded left edge reaching further left, so its
   top and bottom edges are never seen. Copy in .theme-container, the gutter
   every block shares (figma-comps.md): x 146 at 1512 where the comp has 71. */

@media (min-width: 992px) {
	.availability--section {
		--availability-inset: 0px;
		--availability-art-w: min(40vw, 605px);
	}

	.availability--section:has(+ .feature--section.panel-mod) {
		--availability-tail: 50px;
	}

	.availability--bar {
		padding: 34px 0 28px;
	}

	.availability--suite .availability--area {
		font-size: var(--wp--preset--font-size--h-3, 48px);
	}

	.availability--floors {
		margin-top: 26px;
	}

	.availability--body {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: calc(var(--availability-art-w) * 1.40625 - 14px + var(--availability-tail));
	}

	/* The container lies over the drawing's left part (it is above it, so the
	   copy is never covered), so it lets clicks through to the floor shapes;
	   only the copy itself takes them. */
	.availability--container.theme-container {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding-top: 33px;
		/* "View Floor Plan" ends 132px above the drawing's foot. */
		padding-bottom: 132px;
		pointer-events: none;
	}

	.availability--nav,
	.availability--suite > * {
		pointer-events: auto;
	}

	.availability--nav {
		margin-bottom: 42px;
	}

	.availability--suites {
		flex: 1 1 auto;
	}

	/* One column beside the drawing at 992-1199; two from 1200 (below). The
	   drawing here is sized by the section's height, so its faded left edge
	   reaches back towards the copy: at 456px the longest feature line ran 38px
	   over it at 992. 35vw keeps every suite's text at least 28px clear of the
	   drawing across 992-1199 (swept in Chrome, 2026-10-15). */
	.availability--suite {
		max-width: min(456px, 35vw);
	}

	/* Without JS the suites are a long list, so the drawing keeps its own size
	   at the top right and fades out at its foot instead of stretching. */
	.availability--art {
		position: absolute;
		top: -14px;
		right: 0;
		height: calc(var(--availability-art-w) * 1.40625);
		aspect-ratio: 1600 / 2250;
		-webkit-mask-image: linear-gradient(to top, transparent 0, #000 15%);
		mask-image: linear-gradient(to top, transparent 0, #000 15%);
	}

	:is(html.lwh-js .availability--section, .availability--section.is-preview-mod) .availability--art {
		height: calc(100% + 14px - var(--availability-tail));
		-webkit-mask-image: none;
		mask-image: none;
	}

	.availability--art-canvas {
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

@media (min-width: 1200px) {
	/* The comp's two columns: the suite, then the features 353px on (x 424
	   against 71), at most 456 wide (its text frame), narrower below ~1370
	   so the longest lines stay clear of the tower. The button sits under the
	   suite at the foot. */
	.availability--suite {
		display: grid;
		grid-template-columns: 353px minmax(0, min(456px, 33.3vw));
		grid-template-rows: auto 1fr auto;
		max-width: none;
	}

	.availability--summary {
		grid-column: 1;
		grid-row: 1;
	}

	.availability--features {
		grid-column: 2;
		grid-row: 1 / span 2;
		/* "FEATURES" 36px below "SUITE" (2592 against 2556). */
		margin-top: 36px;
	}

	.availability--plan {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}