/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Embed Viewer — blocks/embed-viewer/style.css
 *
 * Auto-enqueued by WordPress via "style": "file:./style.css" in block.json.
 * Never enqueue this manually in functions.php.
 *
 * Depends on tokens from css/global.css.
 * =====================================================================================================================
 */

.embed-viewer {
	--ev-pad-block : var(--section-padding);
	--ev-radius    : 1.25rem;   /* 20px ÷ 16 */
	--ev-height    : 37.5rem;   /* 600px ÷ 16 — only used by the "Fixed height" shape,
	                               and overridden inline by render.php */

	box-sizing: border-box;
	padding: var(--ev-pad-block) var(--container-gutter);

	/*
	 * Containment. An embedded viewer sets its own dimensions inside the
	 * frame, and a few of them report a width wider than the frame they are
	 * given. clip stops that becoming a horizontal scrollbar on the page —
	 * it is overflow: hidden without creating a scroll container, so the
	 * frame cannot be scrolled sideways either.
	 */
	max-width: 100%;
	overflow-x: clip;
}


/*
 * Background colours
 * ---------------------------------------------------------------------------------------------------------------------
 */

.embed-viewer--bg-warm-beige { background: var(--clr-warm-beige); color: var(--clr-charcoal-black); }
.embed-viewer--bg-cream      { background: var(--clr-cream);      color: var(--clr-charcoal-black); }
.embed-viewer--bg-white      { background: var(--clr-white);      color: var(--clr-charcoal-black); }
.embed-viewer--bg-rich-gold  { background: var(--clr-rich-gold);  color: var(--clr-white); }
.embed-viewer--bg-brown      { background: var(--clr-brown);      color: var(--clr-white); }
.embed-viewer--bg-black      { background: var(--clr-black);      color: var(--clr-white); }

.embed-viewer--bg-gradient-beige {
	background: var(--gradient-beige);
	color: var(--clr-charcoal-black);
}

.embed-viewer--bg-gradient-beige-top {
	background: var(--gradient-beige-top);
	color: var(--clr-charcoal-black);
}


/*
 * Widths
 * ---------------------------------------------------------------------------------------------------------------------
 * The header always stays at container width so it lines up with the text in
 * the blocks above and below. Only the frame widens, and only as far as the
 * section's own padding allows — to get any real benefit from "Wide" or
 * "Edge to edge", the block's alignment also has to be set to Full Width,
 * otherwise the theme container is still the outer limit.
 */

.embed-viewer__header {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto 2.5rem;
	text-align: center;
}

.embed-viewer__frame-wrap {
	box-sizing: border-box;
	width: 100%;
	/* min() rather than a bare token: at "Container" width the frame is
	   held to the container, but it can never exceed the space actually
	   available, whatever the block's alignment is set to. */
	max-width: min( var(--container-width), 100% );
	margin-inline: auto;
}

.embed-viewer--width-wide .embed-viewer__frame-wrap {
	max-width: min( 100rem, 100% );   /* 1600px ÷ 16 */
}

.embed-viewer--width-full .embed-viewer__frame-wrap {
	max-width: 100%;
}

/* Edge to edge means exactly that — the section's side padding and the
   frame's corners both go, so it meets the viewport. */
.embed-viewer--width-full {
	padding-inline: 0;
}

.embed-viewer--width-full .embed-viewer__header {
	padding-inline: var(--container-gutter);
}

.embed-viewer--width-full .embed-viewer__frame {
	border-radius: 0;
	box-shadow: none;
}


/*
 * Header
 * ---------------------------------------------------------------------------------------------------------------------
 */

.embed-viewer__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow-lg);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: normal;
}

.embed-viewer__heading {
	max-width: 48rem;
	margin: 0 auto;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-heading);
	font-size: clamp(2rem, 3.6vw, var(--fs-heading-md));
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}

.embed-viewer__body {
	max-width: 44rem;
	margin: 1rem auto 0;
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-regular);
	line-height: var(--lh-loose);
}

.embed-viewer--bg-brown .embed-viewer__eyebrow,
.embed-viewer--bg-black .embed-viewer__eyebrow,
.embed-viewer--bg-rich-gold .embed-viewer__eyebrow,
.embed-viewer--bg-brown .embed-viewer__heading,
.embed-viewer--bg-black .embed-viewer__heading,
.embed-viewer--bg-rich-gold .embed-viewer__heading,
.embed-viewer--bg-brown .embed-viewer__body,
.embed-viewer--bg-black .embed-viewer__body,
.embed-viewer--bg-rich-gold .embed-viewer__body {
	color: inherit;
}


/*
 * The frame
 * ---------------------------------------------------------------------------------------------------------------------
 * Embedded pages hand back an iframe with hardcoded width and height
 * attributes, so the wrapper sets the shape and the iframe is stretched to
 * fill it absolutely. aspect-ratio means no fixed height is needed and the
 * frame stays the right shape from 320px up.
 */

.embed-viewer__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--ev-radius);
	overflow: hidden;

	/* Something to look at while a heavy viewer boots, instead of a white
	   hole in a beige page. */
	background: var(--clr-cream);
	box-shadow: var(--shadow-box);
}

.embed-viewer__frame--16-9  { aspect-ratio: 16 / 9; }
.embed-viewer__frame--16-10 { aspect-ratio: 16 / 10; }
.embed-viewer__frame--4-3   { aspect-ratio: 4 / 3; }
.embed-viewer__frame--1-1   { aspect-ratio: 1 / 1; }
.embed-viewer__frame--21-9  { aspect-ratio: 21 / 9; }

/* Fixed height — aspect-ratio is cleared so the height wins outright. */
.embed-viewer__frame--custom {
	aspect-ratio: auto;
	height: var(--ev-height);
}

.embed-viewer__iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* In the editor the frame would otherwise swallow every click meant to
   select the block. Inert in preview, live on the front end. */
.embed-viewer--preview .embed-viewer__iframe {
	pointer-events: none;
}


/*
 * The shield
 * ---------------------------------------------------------------------------------------------------------------------
 * A 360 tour listens for the wheel to zoom and for drags to pan. With the
 * pointer over it, scrolling the page zooms the tour instead — the page
 * appears to stop dead at this block.
 *
 * The shield is a frosted-glass button covering the frame. Wheel and touch
 * over it do what they always do, because it is an ordinary element in the
 * page; only a deliberate click hands control to the embed. It is built by
 * js/theme.js, so no JS means no shield and no way to be locked out.
 *
 * The frosting is doing a second job beyond looking better than a flat
 * scrim: a blurred frame plainly is not the live view, so the click reads
 * as necessary rather than as an obstacle in front of working content.
 *
 * js/theme.js also re-arms it whenever the frame leaves the viewport,
 * otherwise the embed keeps the pointer for the rest of the session and
 * scrolling back up gets caught all over again.
 */

.embed-viewer__frame--shielded .embed-viewer__iframe {
	pointer-events: none;
}

.embed-viewer__frame--shielded.is-active .embed-viewer__iframe {
	pointer-events: auto;
}

/*
 * Every rule here is scoped as `.embed-viewer button.embed-viewer__shield`
 * (0,2,1). Astra styles bare `button` elements with the global accent
 * colour, which is what was painting the shield blue — a single class
 * (0,1,0) loses to it.
 */
.embed-viewer button.embed-viewer__shield {
	position: absolute;
	inset: 0;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;

	/*
	 * Frosted glass. The blur is the effect; the tint stops it reading as
	 * grubby over a busy photograph, and the slight desaturation pushes
	 * the embed back so the label sits clearly in front of it.
	 */
	background-color: rgba( 250, 245, 239, 0.18 );
	-webkit-backdrop-filter: blur( 10px ) saturate( 0.9 );
	backdrop-filter: blur( 10px ) saturate( 0.9 );

	transition:
		opacity var(--motion-med) var(--ease-in-out-soft),
		-webkit-backdrop-filter var(--motion-med) var(--ease-in-out-soft),
		backdrop-filter var(--motion-med) var(--ease-in-out-soft),
		background-color var(--motion-med) var(--ease-in-out-soft);
}

/*
 * No backdrop-filter — Firefox before 103, and anything older. A flat
 * translucent wash over the embed does the same job: the label stays
 * readable and it is obvious the frame is not live yet.
 */
@supports not ( ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) ) {

	.embed-viewer button.embed-viewer__shield {
		background-color: rgba( 250, 245, 239, 0.55 );
	}

}

/* Easing the blur back on hover previews what is underneath */
.embed-viewer button.embed-viewer__shield:hover,
.embed-viewer button.embed-viewer__shield:focus-visible {
	background-color: rgba( 250, 245, 239, 0.12 );
	-webkit-backdrop-filter: blur( 6px ) saturate( 0.95 );
	backdrop-filter: blur( 6px ) saturate( 0.95 );
}

.embed-viewer__frame--shielded.is-active .embed-viewer__shield {
	opacity: 0;
	pointer-events: none;
	-webkit-backdrop-filter: blur( 0 );
	backdrop-filter: blur( 0 );
}

/*
 * The pill. Sits centred rather than at the bottom edge — with the frame
 * frosted there is no longer any reason to keep out of the way, and centred
 * reads as a deliberate invitation rather than a caption.
 */
.embed-viewer__shield-inner {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;   /* 10px ÷ 16 */

	padding: 0.75rem 1.5rem 0.75rem 1.125rem;
	border-radius: var(--radius-pill);

	background: rgba( 255, 255, 255, 0.82 );
	box-shadow: var(--shadow-box);
	color: var(--clr-espresso);

	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-normal);

	transition:
		transform var(--motion-med) var(--ease-out-soft),
		box-shadow var(--motion-med) var(--ease-out-soft),
		background var(--motion-med) var(--ease-in-out-soft);
}

.embed-viewer button.embed-viewer__shield:hover .embed-viewer__shield-inner,
.embed-viewer button.embed-viewer__shield:focus-visible .embed-viewer__shield-inner {
	transform: translateY( -2px );
	background: rgba( 255, 255, 255, 0.95 );
	box-shadow: var(--shadow-box-hover);
}

/* The four-way arrow says "drag to look around", which is what the tour
   actually wants from the visitor. */
.embed-viewer__shield-icon {
	display: inline-flex;
	color: var(--clr-copper-deep);
}

.embed-viewer__shield-icon svg {
	width: 1.25rem;    /* 20px ÷ 16 */
	height: 1.25rem;
	display: block;
}

.embed-viewer button.embed-viewer__shield:focus-visible {
	outline: 2px solid var(--clr-copper-deep);
	outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {

	.embed-viewer button.embed-viewer__shield,
	.embed-viewer__shield-inner {
		transition: none;
	}

	.embed-viewer button.embed-viewer__shield:hover .embed-viewer__shield-inner,
	.embed-viewer button.embed-viewer__shield:focus-visible .embed-viewer__shield-inner {
		transform: none;
	}

}


/*
 * Responsive
 * ---------------------------------------------------------------------------------------------------------------------
 */

@media only screen and (max-width: 48em) {   /* 768px */

	.embed-viewer {
		--ev-pad-block: 3rem;
		--ev-radius: 0.75rem;
	}

	.embed-viewer__header {
		margin-bottom: 2rem;
	}

	.embed-viewer__heading br {
		display: none;
	}

	/* A 21:9 frame is 160px tall on a phone — unusable for a tour you are
	   meant to look around inside. Cinematic and widescreen both fall back
	   to 4:3, which gives the viewer something to work with. */
	.embed-viewer__frame--21-9,
	.embed-viewer__frame--16-9 {
		aspect-ratio: 4 / 3;
	}

	/* Likewise cap a tall fixed height so the frame can't run past the
	   viewport and trap the page scroll inside it. */
	.embed-viewer__frame--custom {
		height: min(var(--ev-height), 70svh);
	}

	/* A lighter blur and a smaller pill on a phone — a heavy blur across a
	   small frame leaves nothing of the tour recognisable underneath. */
	.embed-viewer button.embed-viewer__shield {
		-webkit-backdrop-filter: blur( 7px ) saturate( 0.92 );
		backdrop-filter: blur( 7px ) saturate( 0.92 );
	}

	.embed-viewer__shield-inner {
		padding: 0.625rem 1.125rem 0.625rem 0.875rem;
		font-size: var(--fs-body);
	}

}