/*
 * Modal Overlay Block - Styles.
 *
 * Loaded in the editor via block.json and manually enqueued on the frontend
 * (the block renders in wp_footer via a template part, after WordPress's
 * normal block stylesheet enqueueing).
 */

/* CSS Custom Properties for theming */
:root {
	--modal-max-width: 1024px;
	--modal-max-width-small: 500px;
	--modal-max-width-large: 1200px;
	--modal-panel-width: 420px;
	--modal-panel-width-narrow: 320px;
	--modal-panel-width-wide: 600px;
	--modal-video-max-height: 75vh;
	--modal-focus-color: #3b82f6;
}

/* Dialog container — editor preview */
.wp-block-pikari-gutenberg-modals-modal-overlay {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Modal overlay — fixed fullscreen container rendered by BlockSupport.php */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}

/* Open state with enter animation */
.modal-overlay.is-open {
	display: flex;
	animation: modal-fade-in 300ms ease-out forwards;
}
.modal-overlay.is-open .modal-content {
	animation: modal-scale-in 300ms ease-out forwards;
}

/* Closing state with exit animation */
.modal-overlay.is-closing {
	display: flex;
	animation: modal-fade-out 200ms ease-in forwards;
}
.modal-overlay.is-closing .modal-content {
	animation: modal-scale-out 200ms ease-in forwards;
}

/* Overlay background elements — rendered by this block's render.php */
.modal-overlay-image,
.modal-overlay-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
.modal-overlay-image {
	z-index: 0;
}
.modal-overlay-background {
	z-index: 1;
}

/* Dialog container — frontend structural wrapper */
.modal-content {
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--modal-max-width, 1024px);
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Chrome wrapper — flex bridge for scroll architecture.
   display: flex + flex-direction: column provided by WordPress layout system
   via the Group's layout: { type: "flex", orientation: "vertical" }. */
.modal-content .modal-chrome {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Content area — flex chain for scrolling.
   Bridges .modal-content (90vh cap) → .modal-body (overflow-y: auto). */
.modal-content .wp-block-pikari-gutenberg-modals-content-area {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* Size variations — applied via data-size on .modal-overlay */
.modal-overlay[data-size="small"] .modal-content {
	max-width: var(--modal-max-width-small, 500px);
}
.modal-overlay[data-size="large"] .modal-content {
	max-width: var(--modal-max-width-large, 1200px);
}
.modal-overlay[data-size="fullscreen"] .modal-content {
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	border-radius: 0;
}
.modal-overlay[data-size="fullscreen"] .modal-content .modal-chrome {
	border-radius: 0 !important;
}

/* Fit to media — applied via data-fit on .modal-overlay, with the ratio
   carried in --modal-video-ratio.

   The default chain (.modal-chrome, the content area and .modal-body are all
   `flex: 1` off a zero basis with `min-height: 0`) exists so a page in an
   iframe can stretch to fill the dialog. It contributes no intrinsic height,
   which is exactly wrong for media that should size the dialog around itself:
   the ancestors collapse and the iframe gets clipped. Fit mode makes the same
   chain content-driven and gives the iframe a definite size instead. */
.modal-overlay[data-fit="video"] .modal-content {
	width: fit-content;
	height: auto;
}
.modal-overlay[data-fit="video"] .modal-chrome,
.modal-overlay[data-fit="video"] .wp-block-pikari-gutenberg-modals-content-area,
.modal-overlay[data-fit="video"] .modal-body,
.modal-overlay[data-fit="video"] .modal-entry--iframe {
	flex: 0 0 auto;
	overflow: visible;
}

/* Width is derived from the height budget rather than the other way round.
   A 9:16 video at `width: 100%` of a 1200px dialog asks for 2133px of height
   and is clipped by the 90vh cap; deriving width from height is what makes a
   portrait video work at all. --modal-video-max-height leaves room inside
   that cap for the author's own chrome — close row, padding, border. */
.modal-overlay[data-fit="video"] .modal-entry--iframe iframe {
	display: block;
	flex: 0 0 auto;
	width: min(
		90vw,
		calc(var(--modal-video-max-height, 75vh) * var(--modal-video-ratio, 16 / 9))
	);
	max-width: 100%;
	aspect-ratio: var(--modal-video-ratio, 16 / 9);
	height: auto;
	min-height: 0;
}

/* Placement — applied via data-placement on .modal-overlay.
   Geometry belongs to the container; the chrome Group inside fills it.
   Author-set background, padding and shadow are untouched. */
.modal-overlay[data-placement="left"],
.modal-overlay[data-placement="right"] {
	align-items: stretch;
}
.modal-overlay[data-placement="left"] {
	justify-content: flex-start;
}
.modal-overlay[data-placement="right"] {
	justify-content: flex-end;
}
/* Each panel width is followed by the breakpoint below which it gives up and
   fills the viewport — a panel narrower than the screen by less than a margin
   leaves an unusable strip of page beside it. A media query cannot read a
   custom property, so the breakpoints are hardcoded at the default width plus
   48px: overriding --modal-panel-width* moves the panel but not the point at
   which it goes full width. */
.modal-overlay[data-placement="left"] .modal-content,
.modal-overlay[data-placement="right"] .modal-content {
	width: var(--modal-panel-width, 420px);
	max-width: 100%;
	max-height: 100%;
	height: 100%;
}

@media (max-width: 468px) {
	.modal-overlay[data-placement="left"] .modal-content,
	.modal-overlay[data-placement="right"] .modal-content {
		width: 100%;
	}
}
.modal-overlay[data-placement="left"][data-size="narrow"] .modal-content,
.modal-overlay[data-placement="right"][data-size="narrow"] .modal-content {
	width: var(--modal-panel-width-narrow, 320px);
}

@media (max-width: 368px) {
	.modal-overlay[data-placement="left"][data-size="narrow"] .modal-content,
	.modal-overlay[data-placement="right"][data-size="narrow"] .modal-content {
		width: 100%;
	}
}
.modal-overlay[data-placement="left"][data-size="wide"] .modal-content,
.modal-overlay[data-placement="right"][data-size="wide"] .modal-content {
	width: var(--modal-panel-width-wide, 600px);
}

@media (max-width: 648px) {
	.modal-overlay[data-placement="left"][data-size="wide"] .modal-content,
	.modal-overlay[data-placement="right"][data-size="wide"] .modal-content {
		width: 100%;
	}
}

/* Square off the corners against the viewport edge, the same way
   fullscreen and mobile already beat the Group's inline radius. */
.modal-overlay[data-placement] .modal-content .modal-chrome {
	border-radius: 0 !important;
}

/* Panels slide in from their edge rather than scaling from the centre. */
.modal-overlay[data-placement="left"].is-open .modal-content {
	animation: modal-slide-in-left 300ms ease-out forwards;
}
.modal-overlay[data-placement="right"].is-open .modal-content {
	animation: modal-slide-in-right 300ms ease-out forwards;
}
.modal-overlay[data-placement="left"].is-closing .modal-content {
	animation: modal-slide-out-left 200ms ease-in forwards;
}
.modal-overlay[data-placement="right"].is-closing .modal-content {
	animation: modal-slide-out-right 200ms ease-in forwards;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
	.modal-overlay {
		padding: 0;
	}
	.modal-content {
		max-width: 100%;
		max-height: 100%;
		height: 100%;
		border-radius: 0;
	}
	.modal-content .modal-chrome {
		border-radius: 0 !important;
	}
}

/* Print styles */
@media print {
	.modal-overlay {
		display: none !important;
	}
}

/* Keyframe animations */
@keyframes modal-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes modal-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes modal-scale-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes modal-scale-out {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	to {
		opacity: 0;
		transform: scale(0.95) translateY(-10px);
	}
}

@keyframes modal-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes modal-slide-out-left {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(-100%);
	}
}

@keyframes modal-slide-in-right {
	from {
		opacity: 0;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes modal-slide-out-right {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(100%);
	}
}

/* Accessibility — disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.modal-overlay,
	.modal-content {
		transition: none;
	}
	.modal-overlay.is-open,
	.modal-overlay.is-closing {
		animation: none;
	}
	.modal-overlay.is-open .modal-content,
	.modal-overlay.is-closing .modal-content {
		animation: none;
	}
	.modal-overlay[data-placement="left"].is-open .modal-content,
	.modal-overlay[data-placement="right"].is-open .modal-content,
	.modal-overlay[data-placement="left"].is-closing .modal-content,
	.modal-overlay[data-placement="right"].is-closing .modal-content {
		animation: none;
	}
}