/**
 * Shared modal primitive styles for the `<dialog class="nr-modal">` contract
 * (see assets/modal.js). Consumed by nr/photo-gallery (Task 10) and
 * nr/work-card (Task 11).
 *
 * Every `<dialog class="nr-modal">` a consuming block renders MUST carry:
 *   - `aria-modal="true"`
 *   - `aria-labelledby` pointing at that dialog's own heading id
 *   - a `.nr-modal__close` button with a visible label or an `aria-label`
 * modal.js supplies open/close behaviour and focus handling; it cannot
 * supply these attributes, since they are specific to each dialog's markup.
 */

dialog.nr-modal {
	box-sizing: border-box;
	width: min(90vw, 900px);
	max-height: 85vh;
	margin: auto;
	padding: 32px;
	border: none;
	border-radius: var( --radius-lg, 20px );
	background: var( --wp--preset--color--ink, #1a1a1a );
	color: var( --wp--preset--color--off-white, #f5f5f0 );
	box-shadow: var( --shadow-card, 0 12px 24px -8px rgba( 0, 0, 0, .4 ) );
	overflow-y: auto;
}

dialog.nr-modal[open] {
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: nr-modal-in 220ms cubic-bezier( .22, .61, .36, 1 );
}

dialog.nr-modal::backdrop {
	background: rgba( 26, 26, 26, .72 );
}

dialog.nr-modal img,
dialog.nr-modal iframe,
dialog.nr-modal video {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: var( --radius-md, 6px );
}

/*
 * Round 3, Finding 6: this modal is ours, not the design's — the artboard
 * never draws a video player — so it needs its own judgement call rather
 * than a vendored value. An `<iframe>` with no explicit height renders at
 * the HTML spec's own default (150px) regardless of its `width:100%`
 * above, which is the entire "video tiny" symptom: the frame was already
 * full width, just not tall enough to match. `aspect-ratio:16/9` fixes
 * the height to the video's own ratio instead of that default, and
 * `dialog.nr-modal:has([data-nr-embed])` widens the dialog itself for a
 * video specifically — a photo-caption dialog keeps the narrower default
 * width above it, unaffected.
 */
dialog.nr-modal:has( [data-nr-embed] ) {
	width: min( 90vw, 1200px );
}

dialog.nr-modal [data-nr-embed] {
	width: 100%;
}

dialog.nr-modal [data-nr-embed] iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/*
 * A photo's dialog (PhotoRenderer::render_dialog()): the full-resolution
 * image fitted to the viewport — never taller than 80vh, never wider than
 * the dialog, its own ratio kept — centred, the caption under it, and the
 * story (if any) below that, scrolling with the dialog when it is long.
 * The image's `sizes` (PhotoRenderer::DIALOG_SIZES) assumes this width.
 */
dialog.nr-modal--photo {
	width: min(94vw, 1600px);
	max-height: 94vh;
	padding: 20px;
}

.nr-modal__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
}

dialog.nr-modal .nr-modal__image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
}

/* With a story under it, the image leaves room for the story's heading
   to show without scrolling. */
dialog.nr-modal--photo:has(.nr-modal__story) .nr-modal__image {
	max-height: 60vh;
}

.nr-modal__caption {
	font-family: var(--font-body, inherit);
	font-size: 0.9375rem;
	color: var(--text-muted-on-ink, rgba(245, 245, 240, 0.6));
	text-align: center;
}

.nr-modal__story {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
}

.nr-modal__story > * {
	margin: 0;
}

/*
 * A photo with a story, on desktop: side by side — the photo (3fr) fitted
 * to the dialog's height, the story (2fr) in its own scrolling column — so
 * neither squeezes the other. Below 900px the stacked layout above applies.
 * The image's `sizes` (PhotoRenderer::DIALOG_SPLIT_SIZES) assumes this split.
 */
@media (min-width: 900px) {

	dialog.nr-modal--photo:has(.nr-modal__story)[open] {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
		grid-template-rows: auto minmax(0, 1fr);
		gap: 16px 40px;
		width: min(94vw, 1400px);
		height: min(90vh, 900px);
		padding: 24px 32px 32px;
		overflow: hidden;
	}

	dialog.nr-modal--photo:has(.nr-modal__story) .nr-modal__close {
		grid-column: 1 / -1;
		justify-self: end;
	}

	dialog.nr-modal--photo:has(.nr-modal__story) .nr-modal__figure {
		min-height: 0;
		align-self: center;
	}

	dialog.nr-modal--photo:has(.nr-modal__story) .nr-modal__image {
		max-height: calc(min(90vh, 900px) - 140px);
	}

	dialog.nr-modal--photo .nr-modal__story {
		align-self: start;
		max-width: none;
		max-height: 100%;
		margin: 0;
		overflow-y: auto;
	}
}

dialog.nr-modal h2 {
	margin: 0;
	font-family: var( --font-display, inherit );
	font-size: var( --wp--preset--font-size--medium, 1.25rem );
}

.nr-modal__close {
	align-self: flex-end;
	background: transparent;
	border: 1px solid var( --wp--preset--color--off-white, #f5f5f0 );
	border-radius: 999px;
	padding: 6px 16px;
	font-family: var( --font-body, inherit );
	color: inherit;
	cursor: pointer;
}

.nr-modal__close:hover,
.nr-modal__close:focus-visible {
	background: rgba( 245, 245, 240, .12 );
}

@keyframes nr-modal-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	dialog.nr-modal[open] {
		animation: none;
	}
}