/**
 * MediaCatalogOutput.css — default styling for [media] shortcode output.
 *
 * Framework-free on purpose. A site either restyles these classes, selects a custom
 * class map in module config, or overrides a kind entirely with a view file in
 * site/templates/media-catalog/.
 *
 * Also the default stylesheet loaded into the rich text editor so inserted media
 * previews resemble the front end — so keep it self-contained and low-specificity.
 */

/* ---- shared wrapper ---------------------------------------------------- */

.mc-block {
	box-sizing: border-box;
	margin: 0 0 1.25rem;
	max-width: 100%;
}
.mc-block *, .mc-block *::before, .mc-block *::after { box-sizing: inherit; }

.mc-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.mc-caption {
	font-size: .8125rem;
	line-height: 1.4;
	color: #64748b;
	margin-top: .4rem;
}

/* ---- alignment --------------------------------------------------------- */

.mc-align-left  { float: left;  margin-right: 1.5rem; }
.mc-align-right { float: right; margin-left: 1.5rem; }
.mc-align-center { margin-left: auto; margin-right: auto; }
.mc-align-full  { width: 100%; clear: both; }

/* Stack floats on narrow viewports — a 1/3 float is unreadable on a phone. */
@media (max-width: 640px) {
	.mc-align-left, .mc-align-right {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.mc-block[class*="mc-width-"] { width: 100%; }
}

/* ---- widths ------------------------------------------------------------ */

.mc-width-1-1 { width: 100%; }
.mc-width-1-2 { width: 50%; }
.mc-width-1-3 { width: 33.3333%; }
.mc-width-2-3 { width: 66.6666%; }
.mc-width-1-4 { width: 25%; }
.mc-width-3-4 { width: 75%; }

/* ---- video ------------------------------------------------------------- */

.mc-poster {
	position: relative;
	display: block;
	line-height: 0;
	background: #0f172a;
}
.mc-poster .mc-noposter {
	display: block;
	padding-bottom: 56.25%;
	background: #0f172a;
}
.mc-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: rgba(15, 23, 42, .75);
	color: #fff;
	font-size: 1.35rem;
	line-height: 3.5rem;
	text-align: center;
	text-indent: .2rem;
	pointer-events: none;
}
/* Element-scoped on purpose. The wrapper <figure> also carries `mc-video` (the
   kind class), so a bare `.mc-video { width:100% }` overrode `.mc-width-1-2` on it
   by source order and every video rendered full width regardless of its width
   attribute. Same applies to audio below. */
video.mc-video { display: block; width: 100%; height: auto; background: #000; }

/* ---- audio ------------------------------------------------------------- */

audio.mc-audio { width: 100%; display: block; margin-top: .35rem; }

.mc-track-title { font-weight: 600; font-size: .875rem; }
.mc-track-num {
	display: inline-block;
	min-width: 1.5rem;
	color: #94a3b8;
	font-variant-numeric: tabular-nums;
}

.mc-tracklist { list-style: none; margin: 0; padding: 0; }
.mc-track {
	padding: .5rem 0;
	border-top: 1px solid #e2e8f0;
}
.mc-track:first-child { border-top: 0; }

/* ---- documents --------------------------------------------------------- */

.mc-doc-link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .9rem;
	border: 1px solid #cbd5e1;
	border-radius: 5px;
	text-decoration: none;
	color: inherit;
	line-height: 1.2;
}
.mc-doc-link:hover { background: #f1f5f9; }
.mc-doc-ext {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: .2rem .4rem;
	border-radius: 3px;
	background: #334155;
	color: #fff;
}
.mc-doc-label { font-weight: 600; }
.mc-doc-size { font-size: .75rem; color: #94a3b8; }

/* ---- embed ------------------------------------------------------------- */

.mc-embed iframe,
.mc-embed video,
.mc-embed object { max-width: 100%; }

/* ---- editor-preview-only states ---------------------------------------- */
/* These never appear on the front end — they are what the RTE shows in place of
   a live iframe, an uninitialised player, or a broken reference. */

.mc-embed-preview,
.mc-player-stub,
.mc-problem {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mc-embed-preview {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 1.25rem;
	border: 1px dashed #94a3b8;
	border-radius: 5px;
	background: #f8fafc;
	color: #475569;
}
.mc-embed-kind {
	font-size: .625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .2rem .45rem;
	border-radius: 3px;
	background: #334155;
	color: #fff;
}
.mc-embed-title { font-size: .875rem; }

.mc-player-stub {
	display: inline-block;
	margin-left: .5rem;
	padding: .1rem .5rem;
	border-radius: 3px;
	background: #e2e8f0;
	color: #475569;
	font-size: .75rem;
}

.mc-problem {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1rem;
	border: 1px solid #fca5a5;
	border-radius: 5px;
	background: #fef2f2;
	color: #991b1b;
	font-size: .8125rem;
}
.mc-problem-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: #991b1b;
	color: #fff;
	font-weight: 700;
	font-size: .75rem;
	flex: 0 0 auto;
}