/*
 * Opener (template-parts/blocks/opener.php), design draft V2.
 *
 *   --cover  the photograph framed within the page width; text over a soft
 *            shade on its left; the wayfinding links as white tabs that
 *            overlap the lower edge, each easing into burgundy while
 *            pointed at or focused
 *   --split    a portrait down the left third, edge to edge and deeper than
 *              the stone panel beside it; starred eyebrow, capitals; a
 *              burgundy serif tab in the corner
 *   --centred  words centred on white, the photograph below in a frame
 *   --contact  the invitation beside a framed photograph (details below)
 *   --plain  white; generous top space, label in the margin, then heading,
 *            standfirst and actions
 */
@layer blocks {
	/* The opener sets its own edges (no data-space; data-flush). */
	/* ---- Cover -------------------------------------------------------- */
	.site-main > .opener--cover {
		padding-bottom: var(--space-5);
	}

	.opener__stage {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: flex-end;
		min-height: 34rem;
		overflow: hidden;
	}

	.opener__media {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.opener__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(to top, rgb(17 12 12 / 0.6), rgb(17 12 12 / 0.12) 60%, rgb(17 12 12 / 0.06));
	}

	.opener__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.opener__content {
		width: 100%;
		max-width: 38rem;
		padding: var(--space-16) var(--space-6) var(--space-10);
	}

	.opener__eyebrow {
		margin-bottom: var(--space-3);
		color: var(--heading);
		letter-spacing: 0.36em;
	}

	.opener__eyebrow .eyebrow__divider {
		margin-left: -0.36em;
		background: currentColor;
	}

	/* Phones: closer tracking keeps "Private Family Office | Zurich" on one
	   line, so the rule never hangs at a line end. */
	@media (max-width: 39.99rem) {
		.opener__eyebrow:not(.eyebrow--stars) {
			letter-spacing: 0.2em;
			column-gap: var(--space-3);
		}

		.opener__eyebrow:not(.eyebrow--stars) .eyebrow__divider {
			margin-left: -0.2em;
		}
	}

	/* Inscriptional capitals, as in the draft. */
	.opener--cover .opener__title {
		max-width: 13em;
		text-transform: uppercase;
		text-wrap: balance;
	}

	.opener__standfirst {
		margin-top: var(--space-4);
		max-width: 28rem;
		color: color-mix(in srgb, var(--ramp-white) 84%, transparent);
	}

	.opener__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-4) var(--space-10);
		margin-top: var(--space-8);
	}

	.opener--cover .opener__actions .arrow-link {
		color: var(--ramp-white);
	}

	.opener__foot {
		display: grid;
		gap: var(--space-4);
	}

	/* Tabs: a label in widely spaced gold capitals, the title in the sans. */
	.opener__tabs {
		display: grid;
	}

	/* Every tab is as tall as the tallest, so the fill covers it completely. */
	.opener__tab-item {
		display: grid;
	}

	/* The tab eases into burgundy (motion.css, Tint). */
	.opener__tab {
		--rest-color: var(--background);
		--fill-color: var(--primary);

		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-content: center;
		column-gap: var(--space-4);
		row-gap: var(--space-2);
		height: 100%;
		padding: var(--space-6);
		box-shadow: inset 0 -1px var(--hairline);
		text-decoration: none;
	}

	.opener__tab-label,
	.opener__tab-title {
		grid-column: 1;
	}

	/* The site's link chevron: burgundy at rest, white with the burgundy
	   tab, nudged on hover (motion.css, Nudge). Level with the last line. */
	.opener__tab-arrow {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
		width: var(--space-4);
		height: 1.5rem;
		background: var(--primary);
		mask: var(--icon-arrow) center / var(--space-4) no-repeat;
	}

	.opener__tab:is(:hover, :focus-visible) .opener__tab-arrow {
		background: var(--primary-foreground);
	}

	.opener__tab:focus-visible {
		outline-offset: -4px;
		outline-color: var(--ramp-gold-300);
	}

	.opener__tab-label {
		font-size: var(--type-label-size);
		line-height: var(--type-label-line);
		letter-spacing: var(--type-label-tracking);
		font-weight: 600;
		text-transform: uppercase;
		color: var(--ornament);
	}

	.opener__tab:is(:hover, :focus-visible) .opener__tab-label {
		color: var(--ramp-gold-300);
	}

	.opener__tab-title {
		font-size: 1.125rem;
		line-height: 1.5rem;
		font-weight: 500;
		color: var(--ramp-neutral-800);
	}

	.opener__tab:hover .opener__tab-title,
	.opener__tab:focus-visible .opener__tab-title {
		color: var(--primary-foreground);
	}

	@media (min-width: 40rem) {
		.opener__stage {
			min-height: 36rem;
		}

		.opener__content {
			padding: var(--space-20) var(--space-12) var(--space-16);
		}
	}

	/*
	 * Desktop, measured from the draft (photograph 1376 x 621 px, the same
	 * width as ours at 1440 px): the text is not centred but anchored low,
	 * 64 px from the left edge and 64 px above the lower edge; the title in
	 * 56/64 capitals; the tabs 108 px tall, two thirds over the photograph
	 * (72 px), flush with its right edge; 160 px on to the next label. The
	 * tabs are wider than the draft's 232 px (288), so our longer titles
	 * and the chevron stay on one line.
	 */
	@media (min-width: 64rem) {
		.opener__stage {
			align-items: flex-end;
			min-height: 38.75rem;
		}

		.opener__media::after {
			background:
				linear-gradient(to right, rgb(17 12 12 / 0.55), rgb(17 12 12 / 0.22) 45%, rgb(17 12 12 / 0) 70%),
				linear-gradient(to top, rgb(17 12 12 / 0.35), rgb(17 12 12 / 0) 50%);
		}

		.opener__content {
			max-width: calc(39rem + var(--space-16) * 2);
			padding: var(--space-16);
		}

		.opener__eyebrow {
			margin-bottom: var(--space-4);
		}

		/* Narrower desktops: the tabs reach under the actions, so the text
		   block rises to clear them (tab overlap 72 px + 24 px). */
		@media (max-width: 89.99rem) {
			.opener__content {
				padding-bottom: var(--space-24);
			}
		}

		/* One line per sentence; the title sits above the tabs, so it may be wide. */
		.opener--cover .opener__title {
			max-width: none;
			font-size: 3.5rem;
			line-height: 4rem;
		}

		.opener__standfirst {
			margin-top: var(--space-5);
			max-width: 26rem;
		}

		.opener__actions {
			margin-top: var(--space-6);
		}

		/* Tabs overlap the lower edge of the photograph, on the right. */
		.opener__foot {
			justify-items: end;
		}

		.opener__index {
			position: relative;
			margin-top: -4.5rem;
		}

		.opener__tabs {
			grid-auto-flow: column;
			grid-auto-columns: 18rem;
		}

		.opener__tab {
			align-content: center;
			gap: var(--space-1) var(--space-2);
			min-height: 6.75rem;
			padding: var(--space-6) var(--space-6) var(--space-6) var(--space-10);
			box-shadow: none;
		}
	}



	/* ---- Starred eyebrow (split, centred, contact) ----------------------
	 * A small gold four-pointed star either side of the capitals, as in the
	 * reference; the capitals in the heading colour, a little heavier.
	 */
	.eyebrow--stars {
		column-gap: var(--space-1);
		font-weight: 600;
		letter-spacing: 0.3em;
		color: var(--heading);
	}

	.eyebrow--stars::before,
	.eyebrow--stars::after {
		content: "";
		flex: none;
		width: 0.5rem;
		height: 0.5rem;
		background: var(--ramp-gold-300);
		mask: var(--icon-star) center / contain no-repeat;
	}

	/* The tracking also follows the last letter; pull the closing star back. */
	.eyebrow--stars::after {
		margin-left: -0.3em;
	}

	.eyebrow--stars .eyebrow__divider {
		margin-inline: calc(var(--space-2) - 0.3em) var(--space-2);
	}

	/* ---- Split ---------------------------------------------------------
	 * Measured from the reference ("image copy 5", 1897 px wide):
	 *   panel         603 px high (ivory in the reference, white here: every
	 *                 hero opens on white); the portrait 619 px wide (32.6 %) and
	 *                 653 px high, edge to edge, so it reaches 50 px below
	 *                 the panel into the page
	 *   text          99 px right of the portrait, eyebrow caps 175 px from
	 *                 the top; column 564 px; title 54 px capitals on a
	 *                 54 px pitch; standfirst 15/26 px, about 400 px wide;
	 *                 button 36 px high, 30 px below
	 *   corner        291 x 88 px, flush with the panel's lower right
	 *                 corner; one serif line 18 px, 41 px in; a gold frame
	 *                 14 px from the top and 8 px from the right, fading
	 */
	/* Every hero opens on white: the panel is the page's white, the portrait
	   still reaches 50 px deeper than the panel's text area. */
	.opener--split {
		--split-overhang: 0rem;
		--split-text: 35.25rem;

		background: none;
	}

	.opener__split {
		position: relative;
		isolation: isolate;
	}

	/* The stone panel ends above the portrait's foot. */
	.opener__split::before {
		content: "";
		position: absolute;
		inset: 0 0 var(--split-overhang);
		z-index: -1;
		background: var(--background);
	}

	.opener__body {
		display: grid;
	}

	.opener__portrait {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--muted);
	}

	.opener__portrait .opener__image {
		position: absolute;
		inset: 0;
		animation: motion-settle calc(var(--duration-slow) * 1.8) var(--ease-out) both;
	}

	.opener__panel {
		padding: var(--space-12) var(--gutter) var(--space-10);
	}

	.opener--split .opener__content {
		max-width: var(--split-text);
		padding: 0;
	}

	.opener--split .opener__eyebrow {
		margin-bottom: var(--space-3);
	}

	/* Greedy wrapping, as in the reference: each line as full as it goes. */
	.opener--split .opener__title {
		text-transform: uppercase;
		text-wrap: wrap;
	}

	.opener--split .opener__standfirst {
		max-width: 27.5rem;
		margin-top: var(--space-3);
		text-wrap: wrap;
		color: var(--muted-foreground);
		line-height: 1.625rem;
	}

	.opener--split .opener__actions {
		margin-top: var(--space-7);
	}

	/* Corner: burgundy with the engraving and the fading gold frame; the tab
	   is transparent over it, one serif line and the chevron, easing into
	   white (motion.css, Tint). */
	.opener__corner {
		position: relative;
	}

	.opener__corner-frame {
		inset: 0.875rem 0.5rem 1rem 2.25rem;
	}

	.opener__corner .opener__tabs {
		display: grid;
	}

	.opener__corner .opener__tab {
		--rest-color: transparent;

		grid-template-columns: auto auto;
		justify-content: start;
		align-items: center;
		align-content: center;
		column-gap: 0.625rem;
		min-height: 5.5rem;
		padding: 0.625rem var(--space-6) 0 2.5625rem;
		box-shadow: inset 0 -1px var(--border);
	}

	.opener__corner .opener__tab-title {
		grid-column: auto;
		font-family: var(--font-heading);
		font-size: 1.125rem;
		line-height: 1.75rem;
		font-weight: 400;
		color: var(--heading);
		white-space: nowrap;
	}

	.opener__corner .opener__tab-arrow {
		grid-column: auto;
		grid-row: auto;
		align-self: center;
		height: 1rem;
	}

	.opener__corner .opener__tab:is(:hover, :focus-visible) .opener__tab-title {
		color: var(--primary-foreground);
	}

	@media (min-width: 64rem) {
		/* On white the portrait's extra depth would leave the corner tab
		   hanging; the panel and portrait end together, at the reference's
		   full 653 px. */
		.opener--split {
			--split-overhang: 0rem;
		}

		.opener__body {
			grid-template-columns: 32.625% minmax(0, 1fr);
		}

		.opener__portrait {
			aspect-ratio: auto;
			min-height: 40.8125rem;
		}

		/* The eyebrow's line box starts 171 px down (its capitals at 175). */
		.opener__panel {
			padding: 10.6875rem var(--space-16) calc(var(--split-overhang) + var(--space-10)) 6.1875rem;
		}

		.opener--split .opener__eyebrow {
			margin-bottom: 0.5625rem;
		}

		.opener--split .opener__title {
			font-size: 3.375rem;
			line-height: 3.375rem;
		}

		.opener--split .opener__standfirst {
			margin-top: 0.6875rem;
		}

		.opener--split .opener__actions {
			margin-top: 1.5rem;
		}

		.opener__corner {
			position: absolute;
			right: 0;
			bottom: var(--split-overhang);
			min-width: 18.1875rem;
		}

		/* Not the cover's overlap: the corner sits on the panel's edge. */
		.opener__corner .opener__index {
			margin-top: 0;
		}

		.opener__corner .opener__tab {
			box-shadow: none;
		}

		.opener__corner .opener__tab-item + .opener__tab-item {
			box-shadow: inset 1px 0 var(--border);
		}

		/* Each tab as wide as its one line (the cover's fixed tab width would clip it). */
		.opener__corner .opener__tabs {
			grid-auto-flow: column;
			grid-auto-columns: auto;
		}
	}

	/* ---- Centred -------------------------------------------------------
	 * Our own composition: the words centred on white under a starred
	 * eyebrow, the page's section links in one quiet row, then the
	 * photograph across the content width, a fine gold frame rising behind
	 * its upper right corner.
	 */
	.opener__centred {
		padding-block: var(--space-16) 0;
	}

	.opener__intro {
		display: grid;
		justify-items: center;
		max-width: 52rem;
		margin-inline: auto;
		text-align: center;
	}

	.opener--centred .opener__eyebrow {
		justify-content: center;
		margin-bottom: var(--space-5);
	}

	.opener--centred .opener__title {
		max-width: 18em;
		text-wrap: balance;
	}

	.opener--centred .opener__standfirst {
		max-width: 38rem;
		margin-top: var(--space-6);
		color: var(--muted-foreground);
	}

	.opener--centred .opener__actions {
		justify-content: center;
	}

	.opener--centred .opener__index {
		position: static;
		margin-top: var(--space-10);
	}

	.opener__index-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-3) var(--space-10);
	}

	.opener__view {
		position: relative;
		margin-top: var(--space-12);
	}

	.opener__view-frame {
		inset: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 50% 45%;
	}

	.opener__view-media {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--muted);
	}

	.opener__view-media .opener__image {
		position: absolute;
		inset: 0;
		animation: motion-settle calc(var(--duration-slow) * 1.8) var(--ease-out) both;
	}

	@media (min-width: 64rem) {
		.opener__centred {
			padding-top: var(--space-24);
		}

		.opener--centred .opener__title {
			font-size: 3.75rem;
			line-height: 4.25rem;
		}

		.opener__view {
			margin-top: var(--space-20);
		}

		.opener__view-frame {
			inset: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 50% 50%;
		}

		.opener__view-media {
			aspect-ratio: auto;
			height: clamp(24rem, 36vw, 34rem);
		}
	}

	/* ---- Contact -------------------------------------------------------
	 * The invitation alone, on white: starred eyebrow, heading, standfirst,
	 * the e-mail action and the telephone; beside it a Zurich photograph,
	 * a fine gold frame rising behind its upper right corner. The details
	 * follow in their own block below.
	 */
	.opener__contact {
		display: grid;
		gap: var(--space-12);
		padding-block: var(--space-12) var(--space-16);
	}

	.opener--contact .opener__eyebrow {
		margin-bottom: var(--space-4);
	}

	.opener--contact .opener__title {
		max-width: 12em;
		text-wrap: balance;
	}

	.opener--contact .opener__standfirst {
		max-width: 30rem;
		margin-top: var(--space-6);
		color: var(--muted-foreground);
	}

	.opener--contact .opener__actions {
		margin-top: var(--space-8);
	}

	.opener--contact .opener__actions .arrow-link {
		color: var(--heading);
	}

	.opener__contact-media {
		position: relative;
	}

	.opener__contact-frame {
		inset: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 35% 35%;
	}

	.opener__contact-photo {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--muted);
	}

	.opener__contact-photo .opener__image {
		position: absolute;
		inset: 0;
		animation: motion-settle calc(var(--duration-slow) * 1.8) var(--ease-out) both;
	}

	@media (min-width: 64rem) {
		.opener__contact {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			align-items: center;
			padding-block: var(--space-20) var(--space-24);
		}

		.opener__contact-text {
			grid-column: 1 / 7;
		}

		.opener--contact .opener__title {
			font-size: 3.5rem;
			line-height: 4rem;
		}

		.opener__contact-media {
			grid-column: 8 / -1;
		}

		.opener__contact-frame {
			inset: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 40% 40%;
		}

		.opener__contact-photo {
			aspect-ratio: 5 / 4;
		}
	}

	/* ---- Plain -------------------------------------------------------- */
	.opener--plain .opener__inner {
		padding-block: var(--space-16) var(--space-12);
	}

	.opener--plain .opener__label {
		padding-top: var(--space-2);
	}

	.opener--plain .opener__title {
		max-width: 14em;
	}

	.opener--plain .opener__standfirst {
		margin-top: var(--space-6);
		color: var(--muted-foreground);
	}

	.opener--plain .opener__actions {
		margin-top: var(--space-10);
	}

	.opener--plain .opener__foot {
		margin-top: var(--space-12);
		padding-top: var(--space-5);
		box-shadow: inset 0 1px var(--hairline);
	}

	.opener__index-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3) var(--space-10);
	}

	@media (min-width: 64rem) {
		.opener--plain .opener__inner {
			padding-block: var(--space-24) var(--space-16);
		}

		.opener--plain .opener__label {
			padding-top: var(--space-5);
		}

		.opener--plain .opener__standfirst {
			margin-top: var(--space-8);
		}
	}
}