/**
 * isjac/media-tile — poster; play overlay only when a video URL is set.
 * A wrapping .isjac-media-tiles group lays tiles out in a wrapping row.
 */

.entry-content .isjac-media-tiles,
.editor-styles-wrapper .isjac-media-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--isjac-space-6);
}

.entry-content .isjac-media-tile,
.editor-styles-wrapper .isjac-media-tile {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-3);
	flex: 1 1 calc((100% - (2 * var(--isjac-space-6))) / 3);
	max-width: calc((100% - (2 * var(--isjac-space-6))) / 3);
	min-width: min(100%, 16rem);
}

.entry-content .isjac-media-tile__eyebrow,
.editor-styles-wrapper .isjac-media-tile__eyebrow {
	margin: 0;
	font-family: var(--isjac-eyebrow-font-family);
	font-size: var(--isjac-eyebrow-font-size);
	font-weight: var(--isjac-eyebrow-font-weight);
	letter-spacing: var(--isjac-eyebrow-letter-spacing);
	text-transform: uppercase;
	color: var(--isjac-text-muted);
}

.entry-content .isjac-media-tile__title,
.editor-styles-wrapper .isjac-media-tile__title {
	margin: 0;
	font-family: var(--isjac-font-family);
	font-size: var(--isjac-font-size-lg);
	font-weight: var(--isjac-font-weight-bold);
	line-height: var(--isjac-line-height-tight);
	color: var(--isjac-color-ink);
}

.entry-content .isjac-media-tile__media,
.editor-styles-wrapper .isjac-media-tile__media {
	--isjac-media-tile-play-size: 4.5rem;
	--isjac-media-tile-play-ring: 0.28rem;
	--isjac-media-tile-play-tri-block: 0.7rem;
	--isjac-media-tile-play-tri-inline: 1.15rem;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--isjac-radius-md);
	background-color: var(--isjac-color-ink);
	box-shadow: var(--isjac-shadow-card);
}

.entry-content .isjac-media-tile__media img,
.editor-styles-wrapper .isjac-media-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.entry-content .isjac-media-tile__play,
.editor-styles-wrapper .isjac-media-tile__play {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--isjac-color-paper);
}

.entry-content .isjac-media-tile__play::before,
.entry-content .isjac-media-tile__play::after,
.editor-styles-wrapper .isjac-media-tile__play::before,
.editor-styles-wrapper .isjac-media-tile__play::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.entry-content .isjac-media-tile__play::before,
.editor-styles-wrapper .isjac-media-tile__play::before {
	inset: 50% auto auto 50%;
	width: var(--isjac-media-tile-play-size);
	height: var(--isjac-media-tile-play-size);
	margin: calc(var(--isjac-media-tile-play-size) / -2) 0 0 calc(var(--isjac-media-tile-play-size) / -2);
	border: var(--isjac-media-tile-play-ring) solid currentColor;
	border-radius: var(--isjac-radius-pill);
	box-shadow: var(--isjac-shadow-overlay);
}

.entry-content .isjac-media-tile__play::after,
.editor-styles-wrapper .isjac-media-tile__play::after {
	inset: 50% auto auto 50%;
	margin: calc(var(--isjac-media-tile-play-tri-block) * -1) 0 0 calc(var(--isjac-media-tile-play-tri-inline) / -3);
	border-style: solid;
	border-width: var(--isjac-media-tile-play-tri-block) 0 var(--isjac-media-tile-play-tri-block) var(--isjac-media-tile-play-tri-inline);
	border-color: transparent transparent transparent currentColor;
}

.entry-content .isjac-media-tile__play:focus-visible {
	outline: 2px solid var(--isjac-color-paper);
	outline-offset: calc(-1 * var(--isjac-space-2));
}

.entry-content .isjac-media-tile__dialog {
	width: min(56rem, calc(100vw - (2 * var(--isjac-space-6))));
	padding: var(--isjac-space-4);
	border: 0;
	border-radius: var(--isjac-radius-md);
	background: var(--isjac-color-paper);
	box-shadow: var(--isjac-shadow-overlay);
}

.entry-content .isjac-media-tile__dialog::backdrop {
	background: color-mix(in srgb, var(--isjac-color-ink) 78%, transparent);
}

/* Title left, close right — the dialog needs its own visible heading
 * because the poster caption is covered once the dialog opens. */
.entry-content .isjac-media-tile__dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--isjac-space-3);
	margin: 0 0 var(--isjac-space-3);
}

.entry-content .isjac-media-tile__dialog-title {
	font-family: var(--isjac-h4-font-family);
	font-size: var(--isjac-h4-font-size);
	font-weight: var(--isjac-h4-font-weight);
	color: var(--isjac-color-ink);
	margin: 0;
}

/* Self-contained secondary-button chrome: the dialog is always a light
 * paper panel, so this button deliberately does NOT carry
 * .isjac-btn--secondary (surface-variant rules would repaint it per
 * ancestor surface — paper-on-paper inside a dark hero). */
.entry-content .isjac-media-tile__dialog .isjac-media-tile__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--isjac-button-min-height);
	padding: 0.5rem 1.1rem;
	border-radius: var(--isjac-radius-md);
	border: 1px solid var(--isjac-color-brand-deep);
	background: transparent;
	color: var(--isjac-color-brand-deep);
	font-family: var(--isjac-font-family);
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-bold);
	cursor: pointer;
}

.entry-content .isjac-media-tile__dialog .isjac-media-tile__close:hover,
.entry-content .isjac-media-tile__dialog .isjac-media-tile__close:focus-visible {
	background: var(--isjac-color-brand-wash);
	color: var(--isjac-color-brand-deep);
}

.entry-content .isjac-media-tile__player {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--isjac-radius-sm);
	background: var(--isjac-color-ink);
}

.entry-content .isjac-media-tile__player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.editor-styles-wrapper .isjac-media-tile__empty {
	margin: 0;
	padding: var(--isjac-space-6);
	color: var(--isjac-text-muted);
}

@media (max-width: 699px) {
	.entry-content .isjac-media-tile,
	.editor-styles-wrapper .isjac-media-tile {
		flex-basis: 100%;
		max-width: none;
	}
}