/*
 * Layer: components. Block style variations for surfaces: group glass-island / deep / glass-panel,
 * image plate-round, quote porcelain, separator ornament-wave, cover living (shared parts only;
 * the hero's layout is in templates/front-page.css). Motion for all of them is in motion.css.
 */
@layer components {

	/* Glass island (kit .nd-island). A card with one link: its ::after covers the card. */
	.is-style-glass-island {
		position: relative;
		box-sizing: border-box;
		padding: 40px 36px 36px;
		border: 1px solid var(--wp--custom--glass--island-border);
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--wp--custom--glass--island);
		box-shadow: var(--wp--preset--shadow--island);
		color: var(--wp--preset--color--ink);
		-webkit-backdrop-filter: var(--wp--custom--blur--card);
		backdrop-filter: var(--wp--custom--blur--card);
		transition:
			transform var(--wp--custom--duration--base) var(--wp--custom--ease),
			box-shadow var(--wp--custom--duration--base);
	}

	.is-style-glass-island > * {
		margin-block: 0;
	}

	/* Only the front page's three rooms lift (owner, 2026-10-27); rail islands stay put. */
	.nd-islands > .is-style-glass-island:is(:hover, :focus-within) {
		box-shadow: var(--wp--preset--shadow--island-hover);
		transform: translateY(-8px);
	}

	.is-style-glass-island:has(:focus-visible) {
		box-shadow: var(--wp--custom--focus-ring);
	}

	.is-style-glass-island .wp-block-button__link::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	/*
	 * A transform on the link would shrink its ::after to the link (dead clicks on the rest of the
	 * card): the card lifts instead. Outranks the text-link button's hover scale (buttons.css).
	 */
	.is-style-glass-island .wp-block-button.is-style-text-link .wp-block-button__link:is(:hover, :focus-visible),
	.is-style-glass-island .wp-block-button__link:is(:hover, :focus-visible) {
		box-shadow: none;
		transform: none;
	}

	/*
	 * Hovering anywhere on the card is hovering the link (its ::after), so the text grows from its
	 * own label, raised above that cover so only the pointer on the words triggers it.
	 */
	.nd-island__label {
		position: relative;
		z-index: 1;
		display: inline-block;
		transform-origin: left center;
		transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease);
	}

	.nd-island__label:hover,
	.is-style-glass-island .wp-block-button__link:focus-visible .nd-island__label {
		transform: scale(1.08);
	}

	/* Glyph row: the CJK character left, the red dot right (kit .nd-island__head). Brand, not brand-deep (Mike, M15: too heavy at 60px). */
	.nd-island__glyph {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 44px;
		color: var(--wp--preset--color--brand);
		font-size: 60px;
		font-weight: 700;
		line-height: 1;
	}

	.nd-island__glyph::after {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: var(--wp--preset--color--cinnabar);
	}

	/* Kit .nd-display-s on the card is 36px at every width (the display-s preset is 30–40). */
	.is-style-glass-island .nd-island__title {
		margin-bottom: 10px;
		font-size: 36px;
		line-height: var(--wp--custom--line-height--display-s);
	}

	.is-style-glass-island .nd-island__text {
		margin-bottom: 22px;
		color: var(--wp--preset--color--ink-soft);
		line-height: var(--wp--custom--line-height--small);
	}

	/* Plate (kit .nd-plate): white card with the porcelain double rim. */
	.wp-block-group.is-style-plate {
		box-sizing: border-box;
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--wp--preset--color--paper);
		box-shadow:
			0 0 0 1px var(--wp--preset--color--line),
			0 0 0 7px var(--wp--preset--color--porcelain),
			0 0 0 8px color-mix(in srgb, var(--wp--preset--color--glass-border) 30%, var(--wp--preset--color--line));
	}

	/* Deep surface (kit .nd-surface-deep + .nd-on-dark). */
	.is-style-deep {
		position: relative;
		overflow: hidden;
		background-color: var(--wp--preset--color--cobalt);
		color: var(--wp--preset--color--paper);
	}

	.is-style-deep :where(h1, h2, h3, h4, h5, h6) {
		color: var(--wp--preset--color--paper);
	}

	.is-style-deep :where(p:not(.nd-eyebrow)) {
		color: var(--wp--preset--color--cobalt-light);
	}

	/* Glass panel on the deep surface (kit .nd-panel-glass); the shimmer runs in motion.css. The utils newsletter block is one. */
	.is-style-glass-panel,
	.nd-news {
		position: relative;
		overflow: hidden;
		display: grid;
		gap: 18px;
		padding: 36px;
		border: 1px solid var(--wp--custom--glass--panel-border);
		border-radius: var(--wp--preset--border-radius--panel);
		background: var(--wp--custom--glass--panel);
		box-shadow: var(--wp--preset--shadow--glass-dark);
		-webkit-backdrop-filter: var(--wp--custom--blur--panel);
		backdrop-filter: var(--wp--custom--blur--panel);
	}

	.is-style-glass-panel::before,
	.nd-news::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--wp--preset--color--paper) 16%, transparent) 50%, transparent 65%);
		background-size: 250% 100%;
		pointer-events: none;
	}

	.is-style-glass-panel > *,
	.nd-news > * {
		position: relative;
		margin-block: 0;
	}

	/* Round plate (kit .nd-plate--round): the picture is cropped into the rim. */
	.wp-block-image.is-style-plate-round {
		overflow: hidden;
		aspect-ratio: 1;
		border-radius: 50%;
		box-shadow: var(--wp--preset--shadow--plate);
		transition: transform 1.4s var(--wp--custom--ease);
	}

	.wp-block-image.is-style-plate-round img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1.1);
	}

	/* Quote, porcelain (kit testimonial .nd-quote + byline); sizes come from theme.json. */
	.wp-block-quote.is-style-porcelain {
		margin: 0;
		padding: 0;
		border: 0;
		color: var(--wp--preset--color--ink);
		text-wrap: balance;
	}

	.wp-block-quote.is-style-porcelain > p {
		margin: 0;
	}

	.wp-block-quote.is-style-porcelain cite {
		display: block;
		margin-top: 32px;
	}

	/* Ornament wave (kit .nd-ornament) as a separator: the wave is a mask, so currentColor paints it. */
	.wp-block-separator.is-style-ornament-wave {
		box-sizing: border-box;
		width: 380px;
		max-width: 100%;
		height: 41px;
		margin-inline: auto;
		border: 0;
		background-color: currentColor;
		color: var(--wp--preset--color--brand-deep);
		opacity: 1;
		-webkit-mask: var(--porcelain-ornament-wave) center / contain no-repeat;
		mask: var(--porcelain-ornament-wave) center / contain no-repeat;
		--porcelain-ornament-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 56' fill='none' stroke='black' stroke-linecap='round'%3E%3Cpath stroke-width='1.4' d='M0 30 C20 10 40 10 60 30 S100 50 120 30 S160 10 180 30 S220 50 240 30 S280 10 300 30 S340 50 360 30 S400 10 420 30 S460 50 480 30 S500 20 520 30'/%3E%3Cpath stroke-width='1' d='M0 40 C20 22 40 22 60 40 S100 56 120 40 S160 22 180 40 S220 56 240 40 S280 22 300 40 S340 56 360 40 S400 22 420 40 S460 56 480 40 S500 32 520 40'/%3E%3Ccircle stroke-width='1' cx='260' cy='6' r='3'/%3E%3C/svg%3E");
	}

	/* Living cover (assets/js/hero.js): the loop iframe sits over the poster, transparent until loaded. */
	.wp-block-cover.is-style-living .nd-living {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
		opacity: 0;
		pointer-events: none;
	}

	.wp-block-cover.is-style-living .nd-living.is-loaded {
		opacity: 1;
	}
}