/*
 * Hero and Hero / Split covers, the Glass panel and the pointer sheen shared with Program cards.
 * Static look comes from inc/blocks/block-styles.php.
 * Hover-only effects sit inside (hover: hover) so touch devices never get stuck states.
 */

/* ---------- Hero ---------- */
.wp-block-cover:is(.is-style-hero, .is-style-hero-split) {
	overflow: hidden;
	padding-block: calc(var(--pqmd-header-height) + var(--wp--preset--spacing--s)) 5vh;
	background-color: var(--wp--preset--color--navy);
}

/*
 * Split hero (Cover style "Hero / Split", inner pages): navy ground with
 * the H1 on the left and the video on the right 60%, blended by the cover's
 * `navy-fade` gradient overlay. Below 900px the H1 sits over the foot of the video.
 */
.wp-block-cover.is-style-hero-split {
	align-items: center;
	padding-block: calc(var(--pqmd-header-height) + var(--wp--preset--spacing--xl)) var(--wp--preset--spacing--max);
}
/* Side padding = the page gutter (core gives a Cover 1em), so hero text lines up with the
   sections and the header at every width. */
@media (min-width: 901px) {
	.wp-block-cover:is(.is-style-hero, .is-style-hero-split) {
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	}
}
.is-style-hero-split > :is(.wp-block-cover__video-background, .wp-block-cover__image-background) {
	left: auto;
	width: 60%;
	object-position: center top;
}
/*
 * The H1 keeps the wide alignment (left edge lines up with the page) and its text
 * stops at 45% of the hero, where the video begins, at any screen width.
 * Right padding = box width - (45% - left offset); percentages are of the hero.
 */
.is-style-hero-split .wp-block-cover__inner-container h1 {
	--pqmd-wide: var(--wp--style--global--wide-size);
	margin-block: 0;
	box-sizing: border-box;
	padding-right: calc(min(var(--pqmd-wide), 100%) - 45% + max(0px, (100% - var(--pqmd-wide)) / 2));
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
}
/* Optional intro paragraph after the H1, on the same left edge and stopping at the same 45%. */
.is-style-hero-split .wp-block-cover__inner-container > p:not(.is-style-eyebrow) {
	--pqmd-wide: var(--wp--style--global--wide-size);
	max-width: var(--pqmd-wide);
	margin-block: var(--wp--preset--spacing--l) 0;
	box-sizing: border-box;
	padding-right: calc(min(var(--pqmd-wide), 100%) - 45% + max(0px, (100% - var(--pqmd-wide)) / 2));
	font-size: var(--wp--preset--font-size--large);
}

/* Optional eyebrow above the H1 (Membership pages), on the H1's wide left edge. */
.is-style-hero-split .wp-block-cover__inner-container > .is-style-eyebrow {
	max-width: var(--wp--style--global--wide-size);
	margin-block: 0 var(--wp--preset--spacing--l);
}


.is-style-panel-glass {
	position: relative;
	width: 50%;
	min-width: min(20rem, 100%);
	max-width: 100%;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: transform 480ms var(--wp--custom--motion--spring);
}
.is-style-panel-glass > .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--xs);
}

/* Pointer sheen, shared by the panel and Program cards. theme.js sets the position. */
:is(.is-style-panel-glass, .is-style-card-program)::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		32rem circle at var(--pqmd-mx, 50%) var(--pqmd-my, 50%),
		rgba(255, 255, 255, 0.2),
		rgba(255, 255, 255, 0.06) 34%,
		transparent 64%
	);
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.is-style-panel-glass:hover {
		transform: scale(1.015);
	}
	:is(.is-style-panel-glass, .is-style-card-program):hover::before {
		opacity: 1;
	}
}

/* Light outline button on the panel: white wash on hover instead of a white fill. */
.is-style-panel-glass .wp-block-button.is-style-inverse .wp-block-button__link {
	border-color: var(--wp--custom--on-dark-line);
}
.is-style-panel-glass .wp-block-button.is-style-inverse .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--wp--custom--on-dark-line);
	background-color: var(--wp--custom--on-dark-wash);
	color: var(--wp--preset--color--white);
}

/* Mobile: video on top, message below on navy, buttons full width. */
@media (max-width: 900px) {
	.wp-block-cover:is(.is-style-hero, .is-style-hero-split) {
		display: block;
		min-height: 0 !important;
		padding: var(--pqmd-header-height) 0 0;
		border-radius: 0;
	}
	.wp-block-cover:is(.is-style-hero, .is-style-hero-split) > .wp-block-cover__video-background,
	.wp-block-cover:is(.is-style-hero, .is-style-hero-split) > .wp-block-cover__image-background {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 13;
	}
	.wp-block-cover:is(.is-style-hero, .is-style-hero-split) > .wp-block-cover__inner-container {
		box-sizing: border-box;
		padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l) var(--wp--preset--spacing--xxl);
	}
	/* !important: the block style's generated rules outrank a plain class here. */
	.wp-block-cover:is(.is-style-hero, .is-style-hero-split) .is-style-panel-glass {
		width: auto;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none !important;
	}
	.is-style-panel-glass .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.is-style-panel-glass .wp-block-button__link {
		width: 100%;
		min-height: 3rem;
	}
}

@media (max-width: 900px) {
	.wp-block-cover.is-style-hero-split {
		padding: var(--pqmd-header-height) 0 0;
	}
	.is-style-hero-split > :is(.wp-block-cover__video-background, .wp-block-cover__image-background) {
		width: 100%;
	}
	/* !important: the gradient preset class sets its background with !important. */
	.wp-block-cover.is-style-hero-split > .wp-block-cover__background {
		background: var(--wp--preset--gradient--navy-rise) !important;
	}
	.wp-block-cover.is-style-hero-split > .wp-block-cover__inner-container {
		position: absolute;
		inset: auto 0 0;
		padding: 0 var(--wp--preset--spacing--l) var(--wp--preset--spacing--l);
	}
	.is-style-hero-split .wp-block-cover__inner-container h1 {
		padding-right: 0;
		font-size: var(--wp--preset--font-size--title);
	}
	/* Line breaks in the H1 are for the wide layout only; below 900px each reads as a space. */
	.is-style-hero-split .wp-block-cover__inner-container h1 br {
		content: "";
	}
	.is-style-hero-split .wp-block-cover__inner-container h1 br::after {
		content: " ";
	}
}

@media (max-width: 900px) {
	.wp-block-cover:is(.is-style-hero, .is-style-hero-split) > .pqmd-motion-toggle {
		top: calc(var(--pqmd-header-height) + var(--wp--preset--spacing--s));
		bottom: auto;
	}
}

/*
 * Split hero with photos: put a Slideshow group after the H1. theme.js moves it
 * behind the navy fade on the right 60% (below 900px: on top, 16:13). The cover's
 * own image is the fallback without JavaScript, so set it to the first photo.
 */
.wp-block-cover.is-style-hero-split > .is-style-slideshow {
	position: absolute;
	inset: 0 0 0 auto;
	width: 60%;
	aspect-ratio: auto;
	border-radius: 0;
	box-shadow: none;
}
.wp-block-cover.is-style-hero-split:has(> .is-style-slideshow) > .wp-block-cover__image-background {
	display: none;
}
.wp-block-cover.is-style-hero-split > .is-style-slideshow > .pqmd-motion-toggle {
	right: var(--wp--custom--header--gutter);
	bottom: calc(var(--wp--preset--spacing--max) + var(--wp--preset--spacing--l));
	border-color: var(--wp--custom--glass--panel-border);
	background: var(--wp--custom--glass--panel);
	color: var(--wp--preset--color--white);
}
.wp-block-cover.is-style-hero-split > .is-style-slideshow > .pqmd-motion-toggle:focus-visible {
	outline-color: var(--wp--preset--color--yellow);
}
/* Not moved yet (no JavaScript): the cover image shows instead. The editor keeps it visible. */
.is-style-hero-split > .wp-block-cover__inner-container > .is-style-slideshow {
	display: none;
}
.editor-styles-wrapper .is-style-hero-split > .wp-block-cover__inner-container > .is-style-slideshow {
	display: grid;
	width: 50%;
	margin-top: var(--wp--preset--spacing--l);
}

/*
 * The section after a split hero tucks its ground under the hero's curve, so the
 * curve reads against that section's color. A transparent top border of the curve's
 * depth keeps the section's content where it was.
 */
@media (min-width: 901px) {
	.wp-block-cover.is-style-hero-split {
		z-index: 1;
	}
	.wp-block-cover.is-style-hero-split + * {
		margin-top: calc(-1 * var(--wp--custom--hero--tuck)) !important;
		border-top: var(--wp--custom--hero--tuck) solid transparent;
	}
}

@media (max-width: 900px) {
	.wp-block-cover.is-style-hero-split > .is-style-slideshow {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 16 / 13;
	}
	.wp-block-cover.is-style-hero-split > .is-style-slideshow > .pqmd-motion-toggle {
		top: var(--wp--preset--spacing--s);
		bottom: auto;
	}
}

@media (max-width: 900px) {
	.is-style-hero-split .wp-block-cover__inner-container > p:not(.is-style-eyebrow) {
		padding-right: 0;
		font-size: var(--wp--preset--font-size--body);
	}
	/* A split hero with no photo or video (Events Calendar): the text sits in the flow on navy. */
	.wp-block-cover.is-style-hero-split:not(:has(> .wp-block-cover__image-background, > .wp-block-cover__video-background)) > .wp-block-cover__inner-container {
		position: relative;
		padding-top: var(--wp--preset--spacing--xxl);
		padding-bottom: var(--wp--preset--spacing--xxl);
	}
}