/**
 * Pilot Mercury Atlas — Popup-from-Block modal styles.
 *
 * Targets the native <dialog> element. The backdrop is the dialog's own
 * ::backdrop pseudo. showModal() activates focus trap + ESC handling
 * natively.
 *
 * The modal is responsive: fluid width on small screens, capped on
 * large screens. Body content scrolls internally if it overflows.
 */

dialog.pilot-popup-block {
	position: fixed;
	inset: 0;
	margin: auto;
	width: fit-content;
	min-width: 280px;
	max-width: min(92vw, 900px);
	max-height: 90vh;
	padding: 0;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: inherit;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

dialog.pilot-popup-block::backdrop {
	background: rgba(20, 20, 20, 0.55);
}

/* Smooth open/close — native dialog doesn't transition for free, so we
   nudge with a fade. */
dialog.pilot-popup-block[open] {
	animation: pilot-popup-fade-in 180ms ease-out;
}

dialog.pilot-popup-block[open]::backdrop {
	animation: pilot-popup-backdrop-fade-in 180ms ease-out;
}

@keyframes pilot-popup-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pilot-popup-backdrop-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.pilot-popup-block__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #1c1c1b;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: background-color 0.15s ease;
	z-index: 2;
}

.pilot-popup-block__close:hover,
.pilot-popup-block__close:focus-visible {
	background: #ffffff;
	outline: none;
}

.pilot-popup-block__content {
	padding: 0;
	overflow-y: auto;
	max-height: 90vh;
	box-sizing: border-box;
}

/* Inner content should not blow out the modal */
.pilot-popup-block__content img,
.pilot-popup-block__content video {
	max-width: 100%;
	height: auto;
}

.pilot-popup-block__content > *:first-child {
	margin-top: 0;
}

.pilot-popup-block__content > *:last-child {
	margin-bottom: 0;
}

/* ========================================================================
   Drawer mode (≤ 800px) — switch the centered modal into a slide-up
   bottom sheet. Dialog gets pinned to the bottom of the viewport at
   full width with rounded top corners; opening slides it up from
   off-screen. Close still happens via the X / ESC / native dialog
   .close(). A "fancy" close animation is intentionally out of scope
   for v1 since the native <dialog> closes synchronously.
   ======================================================================== */
@media (max-width: 800px) {
	dialog.pilot-popup-block {
		position:      fixed;
		inset:         auto 0 0 0;
		margin:        0;
		width:         100vw;
		max-width:     100vw;
		height:        100dvh;
		max-height:    100dvh;
		border-radius: 16px 16px 0 0;
	}

	/* Override the desktop fade-up animation with a slide-up. The
	   .content node animates implicitly through the dialog wrapper. */
	dialog.pilot-popup-block[open] {
		animation: pilot-popup-drawer-slide-up 240ms ease-out;
	}

	.pilot-popup-block__content {
		padding: 56px 20px 24px;
	}
}

/* When the parent's fixed thumb menu is visible (≤ 768px in
   mercury_atlas_menu.css), reserve its height at the bottom so the
   drawer sits above the menu bar instead of behind / through it. */
@media (max-width: 768px) {
	dialog.pilot-popup-block {
		inset:      auto 0 var(--height-of-thumb-menu, 0px) 0;
		height:     calc(100dvh - var(--height-of-thumb-menu, 0px));
		max-height: calc(100dvh - var(--height-of-thumb-menu, 0px));
	}
}

@keyframes pilot-popup-drawer-slide-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}