/*
 * Size overlay UI from the poster frame width (not viewport).
 * cqw resolves against the nearest poster shell below — one scale for cards, blog, industries, etc.
 */
:where(
	.amm-card__video--video-modal.has-poster,
	.amm-blog-card__media--video-modal.has-poster,
	.amm-industry-expert__media--video-modal.has-poster,
	.amm-industries__card-media--video-modal,
	.amm-video-editor-preview--modal
) {
	container-type: inline-size;
	container-name: amm-video-modal-thumb;
}

/* Video modal trigger (thumbnail + overlay) */
.amm-video-modal__trigger {
	--amm-video-modal-label-size: clamp(1.1875rem, 4.25cqw, 2.5rem);
	--amm-video-modal-label-inset: clamp(0.75rem, 4.25cqw, 1.625rem);
	--amm-video-modal-label-accent-w: clamp(1.375rem, 9.5cqw, 2.75rem);
	--amm-video-modal-label-accent-h: clamp(0.15rem, 0.55cqw, 0.3rem);
	--amm-video-modal-play-size: clamp(2.5rem, 14cqw, 4.5rem);
	--amm-video-modal-play-label-size: clamp(1.125rem, 3.25cqw, 1.5rem);

	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
	background: transparent;
	overflow: hidden;
	text-align: left;
	line-height: 0;
	font-size: 0;
	-webkit-appearance: none;
	appearance: none;
}

@supports not (width: 1cqw) {
	.amm-video-modal__trigger {
		--amm-video-modal-label-size: clamp(1.1875rem, 2.35vw, 2.5rem);
		--amm-video-modal-label-inset: clamp(0.75rem, 1.85vw, 1.625rem);
		--amm-video-modal-label-accent-w: clamp(1.375rem, 7vw, 2.75rem);
		--amm-video-modal-label-accent-h: clamp(0.15rem, 0.4vw, 0.3rem);
		--amm-video-modal-play-size: clamp(2.5rem, 11.5vw, 4.5rem);
		--amm-video-modal-play-label-size: clamp(1.125rem, 1.85vw, 1.5rem);
	}

	.amm-video-modal__play {
		gap: clamp(0.35rem, 0.85vw, 0.625rem);
	}

	.amm-video-modal__label {
		gap: clamp(0.25rem, 0.65vw, 0.4rem);
	}
}

.amm-video-modal__thumb {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 0.45s ease;
}

.amm-video-modal__trigger:hover .amm-video-modal__thumb,
.amm-video-modal__trigger:focus-visible .amm-video-modal__thumb {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.amm-video-modal__thumb {
		transition: none;
	}

	.amm-video-modal__trigger:hover .amm-video-modal__thumb,
	.amm-video-modal__trigger:focus-visible .amm-video-modal__thumb {
		transform: scale(1);
	}
}

.amm-video-modal__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.35) 45%,
		rgba(0, 0, 0, 0.65) 100%
	);
	pointer-events: none;
}

.amm-video-modal__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.35rem, 1.5cqw, 0.625rem);
	pointer-events: none;
	z-index: 1;
}

.amm-video-modal__play-icon {
	display: block;
	width: var(--amm-video-modal-play-size);
	height: var(--amm-video-modal-play-size);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	position: relative;
}

.amm-video-modal__play-icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-35%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: clamp(0.45rem, 2.9cqw, 0.75rem) 0 clamp(0.45rem, 2.9cqw, 0.75rem)
		clamp(0.7rem, 4.9cqw, 1.25rem);
	border-color: transparent transparent transparent var(--amm-palette-primary-1, #005762);
}

.amm-video-modal__play-label {
	font-family: var(--amm-content-font, var(--amm-font-sans));
	font-size: var(--amm-video-modal-play-label-size);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #fff;
	text-transform: uppercase;
	line-height: 1;
}

.amm-video-modal__label {
	position: absolute;
	left: var(--amm-video-modal-label-inset);
	bottom: var(--amm-video-modal-label-inset);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.25rem, 1.15cqw, 0.4rem);
	pointer-events: none;
	max-width: calc(100% - (var(--amm-video-modal-label-inset) * 2));
}

.amm-video-modal__label-text {
	font-family: var(--amm-content-font, var(--amm-font-sans));
	font-size: var(--amm-video-modal-label-size);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	text-transform: uppercase;
	line-height: 1.1;
}

.amm-video-modal__trigger--editor {
	cursor: default;
	pointer-events: auto;
}

.amm-video-modal__label-text--editable {
	display: block;
	min-width: 6rem;
	cursor: text;
	pointer-events: auto;
	text-transform: uppercase;
}

.amm-video-modal__trigger--editor .amm-video-modal__label {
	pointer-events: none;
}

.amm-video-modal__trigger--editor .amm-video-modal__label-text--editable {
	pointer-events: auto;
}

.amm-video-modal__label-accent {
	display: block;
	width: var(--amm-video-modal-label-accent-w);
	height: var(--amm-video-modal-label-accent-h);
	background: #fff;
	border-radius: 1px;
}

/* Modal shell */
body.amm-video-modal-open {
	overflow: hidden;
}

.amm-video-modal[hidden] {
	display: none !important;
}

.amm-video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.amm-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	cursor: pointer;
}

.amm-video-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 56rem);
	max-height: calc(100vh - 3rem);
	display: flex;
	flex-direction: column;
	background: #000;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.amm-video-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	appearance: none;
	border: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 150ms ease;
}

.amm-video-modal__close:hover,
.amm-video-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.3);
}

.amm-video-modal__close .material-icons {
	font-size: 1.5rem;
}

.amm-video-modal__body {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.amm-video-modal__body > video,
.amm-video-modal__body > .amm-video-modal__embed {
	width: 100%;
	height: 100%;
	display: block;
}

.amm-video-modal__body > .amm-video-modal__embed iframe,
.amm-video-modal__body > .amm-video-modal__embed video {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.amm-video-modal__body > video {
	object-fit: contain;
}

/* Block editor: media panel actions */
.amm-media-panel__field {
	margin-bottom: 1rem;
}

.amm-media-panel__label {
	display: block;
	margin: 0 0 0.5rem;
	font-weight: 600;
	font-size: 11px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #1e1e1e;
}

.amm-media-panel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.amm-media-panel__actions .components-button {
	margin: 0;
}

.amm-media-panel__field .amm-media-panel__actions + .components-base-control,
.amm-media-panel__field > .components-toggle-control {
	margin-top: 0.25rem;
}

.amm-media-panel__field .components-base-control__help {
	margin-top: 0.25rem;
}

/* Block editor: spacing between video file control and thumbnail options */
.amm-video-modal__panel-options {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #dcdcde;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.amm-video-modal__panel-video-file {
	margin-bottom: 0;
}

@supports not (width: 1cqw) {
	.amm-video-modal__play-icon::after {
		border-width: 0.5rem 0 0.5rem 0.85rem;
	}
}