/* =========================================================================
 * Hero 008 — Name and Facts over a Full Photo
 *
 * An independent copy of Hero 007, recomposed. The layout is the blocks'
 * (pattern.php has the tree):
 *
 *   Stack `hero-008`          the canvas; its Stack settings put the content
 *                             at the bottom, stretched across, a gap between
 *   ├─ Group `__media`        laid over the whole canvas
 *   │    └─ Image, "Fill"     fills the group (main.css §8a)
 *   ├─ Grid `__grid`          its column count; each child's Grid span
 *   │    ├─ Group `__copy`    kind, name, place (a wrapping Row)
 *   │    └─ Stack `__side`    aligned right: the facts and the button
 *   └─ Paragraph `__scroll`   pinned to the canvas's foot, centred (out of
 *                             the flow: the Stack's alignment never moves it)
 *
 * This stylesheet adds only what no block setting says:
 *   - the canvas: its height on every screen, the pull up under the header,
 *     its padding, and being the positioning context for the photo;
 *   - the photo's group laid over the canvas, and the shading over it;
 *   - the look of the words, the facts (a List has no layout setting) and
 *     the button;
 *   - below the lg breakpoint (64rem) the Grid in one column (a Grid block
 *     has no setting per screen width); the facts stay one row at every width.
 *
 * Where a rule meets a block's own layout it carries two classes: core writes
 * each block's layout as a generated class of one, and a tie goes by load
 * order, which is the other way round in the editor.
 * ========================================================================= */

/* ---- The canvas (the Stack) ---------------------------------------------- */

.hero-008.hero-008 {
	--hero-008-header: var(--wp--custom--header-height);
	--hero-008-rule: color-mix(in srgb, var(--color-on-dark) 40%, transparent);

	position: relative;
	isolation: isolate;
	/* svh, the screen's height with the browser's bars showing: it never
	   changes, so the hero does not resize while a phone's address bar and
	   toolbar slide away on scroll (dvh follows them, and the photo jumps).
	   A minimum, never a fixed height: where the words need more room (a
	   tablet, where the facts go under the name), the canvas grows and the
	   photo with it. A fixed height let the Stack overflow. */
	min-height: max(30rem, 90svh);
	margin-top: calc(var(--hero-008-header) * -1) !important;
	/* The sides line up with the header's logo and button. The foot keeps
	   room for "Scroll to discover", which is out of the flow (below): its
	   height (a line of its text, the step to its line, the line) and a gap
	   above it, so the Stack's content always ends clear of it. */
	--hero-008-cue: calc(var(--wp--preset--font-size--xs) * 1.6 + var(--space-xs) + 2.5rem);

	padding: var(--hero-008-header) var(--header-gutter) calc(var(--space-md) + var(--hero-008-cue) + var(--space-lg));
	overflow: hidden;
	color: var(--color-on-dark);
}

.hero-008.hero-008 > * {
	margin-block: 0;
}

/* Full screen: the modifier `hero-008--full` makes it the screen's whole
   height. On a tablet held upright a screen-tall photo would be a narrow
   portrait crop, so there it keeps a landscape screen's shape (16:9), and
   never less than its usual floor for the words. A phone (below 40rem) is
   full screen again: the hero is the whole first screen there. Each is a
   minimum, as above: the words always fit. */
.hero-008.hero-008--full {
	min-height: max(30rem, 100svh);
}

@media (orientation: portrait) {
	.hero-008.hero-008--full {
		/* From the width, not aspect-ratio: with the floor an aspect-ratio
		   widens the box past the screen instead. */
		min-height: max(30rem, calc(100vw * 9 / 16));
	}
}

@media (orientation: portrait) and (max-width: 40rem) {
	.hero-008.hero-008--full {
		min-height: max(30rem, 100svh);
	}
}

/* ---- The photo: its group laid over the canvas ----------------------------- */

/* Two classes: the editor makes every block `position: relative` with one. */
.hero-008__media.hero-008__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-008__media img {
		animation: hero-008-settle 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	}
}

@keyframes hero-008-settle {
	from { transform: scale(1.06); }
}

/* ---- The shading (over the photo, under the words) -------------------- */

/* Both bands on one ::before, as two gradients: the block editor draws its
   selection outline on a block's own ::after (stretched with inset: 0), so a
   shading there turned the selected Cover into a half-height tinted box.
   The top band carries the header's words; the foot band the name, the
   facts and the scroll cue. */
.hero-008::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--color-shade) 55%, transparent),
			transparent
		) top / 100% 30% no-repeat,
		linear-gradient(
			0deg,
			color-mix(in srgb, var(--color-shade) 90%, transparent),
			color-mix(in srgb, var(--color-shade) 50%, transparent) 50%,
			transparent
		) bottom / 100% 55% no-repeat;
}

/* ---- The Grid: the name and the facts ------------------------------------ */

/* Its children sit on its foot, so the name and the facts end level. */
.hero-008__grid.hero-008__grid {
	align-items: end;
}

/* ---- The name: kind, name, place ------------------------------------------- */

/* A container, so the name can be sized by the width its columns give it. */
.hero-008 .hero-008__copy {
	container-type: inline-size;
}

/* Two classes: core's flow-layout gap, (0,1,0), ties one and wins it in the
   editor, where its sheet comes later. */
.hero-008 .hero-008__copy > * {
	margin-block: 0;
}

.hero-008__kind {
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* The display size: from the screen's width, so it keeps growing on a big
   screen (it stopped at 120px from about 1840px wide) and stays generous on
   a laptop; never under a phone's 3.25rem. It is capped at 19% of the width
   its columns give it (cqi, the container above): at that size a name of
   "Casa Vida"'s length still fits one line, whatever the column count and
   span, and a longer one ("Casa Marmelo") wraps to a second line rather than
   run into the next column. Bespoke: the ratio of the display face's
   letters to their width. Set as typed (normal case), not in capitals. */
.hero-008 h1 {
	margin-top: var(--space-xs) !important;
	color: inherit;
	font-size: min(clamp(3.25rem, 2rem + 6.5vw, 13rem), 19cqi);
	text-wrap: balance;
}

/* A Row block (wrapping, its gaps the block's): only the type here. */
.hero-008 .hero-008__place.hero-008__place {
	margin-top: var(--space-md);
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hero-008__coords {
	font-weight: 600;
}

/* ---- The facts and the button (a Stack, aligned right) ---------------------- */

/* A container, so the facts are sized by the width their column gives them:
   small enough on a laptop that four labels fit one line each, larger on a
   big screen beside a larger name. Each size runs between two of the site's
   steps (the tokens are the bounds; cqi only moves between them). */
.hero-008 .hero-008__side {
	container-type: inline-size;
}

/* A row of facts, a thin line before each and after the last. A List block
   has no layout setting, so this one is the stylesheet's. Two classes: core's
   list rules weigh one. It is as wide as its column allows; when the column
   is narrower than the facts, the labels wrap. */
.hero-008 .hero-008__facts.hero-008__facts {
	display: flex;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-008__facts li {
	min-width: 0;
	margin: 0;
	padding-inline: clamp(var(--space-sm), 2.4cqi, var(--space-lg));
	border-left: 1px solid var(--hero-008-rule);
	font-size: clamp(var(--wp--preset--font-size--xs), 2.3cqi, var(--wp--preset--font-size--base));
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hero-008__facts li:last-child {
	border-right: 1px solid var(--hero-008-rule);
}

/* The figure, above its label, never broken. */
.hero-008__facts strong {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: clamp(var(--wp--preset--font-size--xl), 4.6cqi, var(--heading-2, 3.5rem));
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
}

/* Its unit, small beside it (written as emphasis so the editor keeps it). */
.hero-008__facts strong em {
	font-size: 0.55em;
	font-style: normal;
}

/* The button: the header's white button over a photo (site.css §3a), so the
   two read as one family. Three classes beat the secondary style's (0,2,0)
   and its hover's (0,3,0). */
.hero-008 .hero-008__actions .wp-block-button__link {
	--button-bg: color-mix(in srgb, var(--color-on-dark) 12%, transparent);
	--button-color: var(--color-on-dark);
	--button-border-color: var(--color-on-dark);
}

.hero-008 .hero-008__actions .wp-block-button__link:hover,
.hero-008 .hero-008__actions .wp-block-button__link:focus-visible {
	--button-bg: var(--color-on-dark);
	--button-color: var(--color-text);
	--button-border-color: var(--color-on-dark);
}

/* ---- "Scroll to discover": pinned to the canvas's foot, centred ------------ */

/* Out of the Stack's flow, so changing how the Stack lines up its content
   (top, middle, bottom; left, centre, stretch) never moves it. The canvas
   keeps room for it in its padding (--hero-008-cue, above). Three classes:
   the editor makes every block `position: relative` with one. */
.hero-008 .hero-008__scroll.hero-008__scroll {
	position: absolute;
	bottom: var(--space-md);
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.6;
	white-space: nowrap;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.hero-008__scroll a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	color: inherit;
	text-decoration: none;
}

.hero-008__scroll a::after {
	content: "";
	width: 1px;
	height: 2.5rem;
	background: linear-gradient(currentColor, transparent);
	transform-origin: top;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-008__scroll a::after {
		animation: hero-008-drip 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}
}

@keyframes hero-008-drip {
	0%   { transform: scaleY(0); opacity: 1; }
	60%  { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* ---- A tablet: the Grid in one column -------------------------------------- */
/* A Grid block has no setting per screen width, so below lg the stylesheet
   takes over: one column, every child across it (whatever its span), the
   facts and the button aligned left under the name. */
@media (max-width: 64rem) {
	.hero-008__grid.hero-008__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero-008__grid.hero-008__grid > * {
		grid-column: 1 / -1;
	}

	.hero-008 .hero-008__side.hero-008__side {
		align-items: flex-start;
	}

	/* The first fact starts at the name's edge. */
	.hero-008__facts li:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.hero-008__facts li:last-child {
		border-right: 0;
	}
}

/* ---- A phone: the header is shorter; the facts one row, tighter -------- */
@media (max-width: 40rem) {
	.hero-008.hero-008 {
		--hero-008-header: var(--wp--custom--header-height-sm);

		padding-inline: var(--gutter);
	}

	.hero-008__kind {
		font-size: var(--wp--preset--font-size--base);
	}

	/* The scroll cue lower, its line running into the hero's foot. The
	   content keeps its place (the canvas's padding is unchanged), so the
	   cue only gains room above it. */
	.hero-008 .hero-008__scroll.hero-008__scroll {
		bottom: 0;
	}

	.hero-008 .hero-008__place.hero-008__place {
		margin-top: var(--space-sm);
		font-size: var(--wp--preset--font-size--sm);
	}

	/* Still one row, across the whole width: each fact takes a share of what
	   is left, with a narrower gap at each line. A long label wraps under its
	   figure rather than pushing a fact to a second row. */
	.hero-008 .hero-008__facts.hero-008__facts {
		width: 100%;
	}

	/* Never narrower than its longest word ("Bedrooms"), so a label cannot
	   run into the next line; the tracking a little tighter, so the four
	   still fit a small phone (320 px). The labels a touch under the smallest
	   step (xs), so a two-word label ("Heated pool") stays on one line:
	   bespoke, the hero's labels only, and tied to the scale. */
	.hero-008__facts li {
		flex: 1 1 auto;
		min-width: min-content;
		padding-inline: var(--space-xs);
		font-size: calc(var(--wp--preset--font-size--xs) * 0.9);
		letter-spacing: 0.02em;
	}

	.hero-008__facts li:first-child {
		padding-left: 0;
	}

	.hero-008__facts strong {
		font-size: var(--wp--preset--font-size--lg);
	}
}

/* In the editor there is no pinned header to slip under. */
.editor-styles-wrapper .hero-008.hero-008 {
	margin-top: 0 !important;
}