/**
 * The Region — Media Indicators
 *
 * Opt-in class on tagDiv / Flex Block:
 *   trde-media-indicators
 *
 * Post classes supplied by PHP:
 *   trde-media-has-audio
 *   trde-media-has-video
 *
 * The SVG assets are the original 32x32 Figma icons.
 */

.trde-media-indicators {
	--trde-media-icon-size: 32px;
	--trde-media-icon-gap: 8px;
}

/*
 * In opted-in blocks the design uses the compact icon beside the title,
 * rather than tagDiv's native play overlay on the thumbnail.
 */
.trde-media-indicators
.trde-media-has-audio
.td-video-play-ico,
.trde-media-indicators
.trde-media-has-video
.td-video-play-ico {
	display: none !important;
}

/* Reserve the icon area at the right side of the title row. */
.trde-media-indicators
.trde-media-has-audio
.entry-title,
.trde-media-indicators
.trde-media-has-video
.entry-title {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--trde-media-icon-gap);
}

.trde-media-indicators
.trde-media-has-audio
.entry-title > a,
.trde-media-indicators
.trde-media-has-video
.entry-title > a {
	flex: 1 1 auto;
	min-width: 0;
}

.trde-media-indicators
.trde-media-has-audio
.entry-title::after,
.trde-media-indicators
.trde-media-has-video
.entry-title::after {
	content: "" !important;
	display: block !important;
	flex: 0 0 auto;
	height: var(--trde-media-icon-size) !important;

	/*
	 * Reset legacy Interview/category rules that used the same ::after
	 * pseudo-element with a CSS mask for the old speaker icon.
	 */
	margin: 0 !important;
	vertical-align: initial !important;
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;

	background-repeat: no-repeat !important;
	background-size: var(--trde-media-icon-size) var(--trde-media-icon-size) !important;
}

/* Audio only. */
.trde-media-indicators
.trde-media-has-audio:not(.trde-media-has-video)
.entry-title::after {
	width: var(--trde-media-icon-size) !important;
	background-image: url('icons/audio.svg') !important;
	background-position: center !important;
}

/* Video only. */
.trde-media-indicators
.trde-media-has-video:not(.trde-media-has-audio)
.entry-title::after {
	width: var(--trde-media-icon-size) !important;
	background-image: url('icons/video.svg') !important;
	background-position: center !important;
}

/* Audio + Video on the same post. */
.trde-media-indicators
.trde-media-has-audio.trde-media-has-video
.entry-title::after {
	width: calc((var(--trde-media-icon-size) * 2) + var(--trde-media-icon-gap)) !important;
	background-image: url('icons/audio.svg'), url('icons/video.svg') !important;
	background-position: left center, right center !important;
}


/*
 * Flex Loop Builder fallback.
 * Some tagDiv loop render paths do not expose td_composer_module_exclusive_class,
 * but they do keep the native media marker in the module markup. Modern browsers
 * can therefore render the correct icon immediately; media-indicator.js mirrors
 * this by adding the stable TRDE classes and also covers AJAX replacements.
 */
.trde-media-indicators
.td_module_wrap:has(.td-icon-audio-thumb-play)
.entry-title {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--trde-media-icon-gap);
}

.trde-media-indicators
.td_module_wrap:has(.td-icon-audio-thumb-play)
.entry-title > a {
	flex: 1 1 auto;
	min-width: 0;
}

.trde-media-indicators
.td_module_wrap:has(.td-icon-audio-thumb-play)
.entry-title::after {
	content: "" !important;
	display: block !important;
	flex: 0 0 var(--trde-media-icon-size) !important;
	width: var(--trde-media-icon-size) !important;
	height: var(--trde-media-icon-size) !important;
	margin: 0 !important;
	vertical-align: initial !important;
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	background-image: url('icons/audio.svg') !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: var(--trde-media-icon-size) var(--trde-media-icon-size) !important;
}


/*
 * Flex Loop Builder / Module Template.
 *
 * Unlike a regular Flex module, a Loop Builder item is assembled from separate
 * TDB elements, so the title itself receives the media classes after a scoped
 * server lookup based on its permalink.
 */
.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-audio,
.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-video {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--trde-media-icon-gap);
}

.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-audio > a,
.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-video > a {
	flex: 1 1 auto;
	min-width: 0;
}

.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-audio::after,
.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-video::after {
	content: "" !important;
	display: block !important;
	flex: 0 0 auto;
	height: var(--trde-media-icon-size) !important;
	margin: 0 !important;
	vertical-align: initial !important;
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	background-repeat: no-repeat !important;
	background-size: var(--trde-media-icon-size) var(--trde-media-icon-size) !important;
}

.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-audio:not(.trde-media-has-video)::after {
	width: var(--trde-media-icon-size) !important;
	background-image: url('icons/audio.svg') !important;
	background-position: center !important;
}

.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-video:not(.trde-media-has-audio)::after {
	width: var(--trde-media-icon-size) !important;
	background-image: url('icons/video.svg') !important;
	background-position: center !important;
}

.trde-media-indicators
.tdb_module_title.trde-media-loop-title.trde-media-has-audio.trde-media-has-video::after {
	width: calc((var(--trde-media-icon-size) * 2) + var(--trde-media-icon-gap)) !important;
	background-image: url('icons/audio.svg'), url('icons/video.svg') !important;
	background-position: left center, right center !important;
}

/*
 * Module Template shortcode path (preferred for Flex Loop Builder).
 * The shortcode renders a real marker per post; JS only moves it into the
 * corresponding Module Title. This avoids using a pseudo-element and is not
 * affected by legacy Interview title masks.
 */
.trde-media-indicators
.tdb_module_title.trde-media-shortcode-title {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--trde-media-icon-gap);
}

.trde-media-indicators
.tdb_module_title.trde-media-shortcode-title > a {
	flex: 1 1 auto;
	min-width: 0;
}

.trde-media-shortcode-marker {
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: var(--trde-media-icon-gap);
	flex: 0 0 auto;
	width: auto;
	height: var(--trde-media-icon-size, 32px);
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	vertical-align: top;
}

.trde-media-shortcode-icon {
	display: block;
	flex: 0 0 var(--trde-media-icon-size, 32px);
	width: var(--trde-media-icon-size, 32px);
	height: var(--trde-media-icon-size, 32px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.trde-media-shortcode-icon--audio {
	background-image: url('icons/audio.svg');
}

.trde-media-shortcode-icon--video {
	background-image: url('icons/video.svg');
}

/* =========================================================
 * OPTIONAL PLACEMENT: FEATURED IMAGE / BOTTOM RIGHT
 *
 * Add to the same tagDiv/Flex/Loop Builder element:
 *   trde-media-placement-image-bottom-right       (default 32px)
 *   trde-media-placement-image-bottom-right-25    (25px)
 *   trde-media-placement-image-bottom-right-20    (20px)
 *
 * A numeric suffix is parsed by media-indicator.js and also implies the base
 * bottom-right placement class. `trde-media-indicators` without any placement
 * modifier keeps the existing title placement.
 * ======================================================= */

.trde-media-indicators.trde-media-placement-image-bottom-right {
	--trde-media-image-right: 10px;
	--trde-media-image-bottom: 10px;
}

/*
 * Image placement replaces, rather than duplicates, the title placement.
 * These overrides also neutralize any legacy Interview ::after mask that may
 * still target the title.
 */
.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-audio
.entry-title,
.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-video
.entry-title,
.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_title.trde-media-loop-title.trde-media-has-audio,
.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_title.trde-media-loop-title.trde-media-has-video {
	display: block !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-audio
.entry-title::after,
.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-video
.entry-title::after,
.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_title.trde-media-loop-title.trde-media-has-audio::after,
.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_title.trde-media-loop-title.trde-media-has-video::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: none !important;
	-webkit-mask: none !important;
	mask: none !important;
}

/* Standard Flex modules: the post-level media classes sit on .td_module_wrap. */
.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-audio
.td-image-container,
.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-video
.td-image-container {
	position: relative !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-audio
.td-image-container::after,
.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-video
.td-image-container::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	right: var(--trde-media-image-right) !important;
	bottom: var(--trde-media-image-bottom) !important;
	z-index: 5 !important;
	height: var(--trde-media-icon-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
	background-repeat: no-repeat !important;
	background-size: var(--trde-media-icon-size) var(--trde-media-icon-size) !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-audio:not(.trde-media-has-video)
.td-image-container::after {
	width: var(--trde-media-icon-size) !important;
	background-image: url('icons/audio.svg') !important;
	background-position: center !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-video:not(.trde-media-has-audio)
.td-image-container::after {
	width: var(--trde-media-icon-size) !important;
	background-image: url('icons/video.svg') !important;
	background-position: center !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.trde-media-has-audio.trde-media-has-video
.td-image-container::after {
	width: calc((var(--trde-media-icon-size) * 2) + var(--trde-media-icon-gap)) !important;
	background-image: url('icons/audio.svg'), url('icons/video.svg') !important;
	background-position: left center, right center !important;
}

/*
 * Flex Loop Builder / Module Template: PHP 1.3.58+ classifies the actual
 * `tdb_module_img` shortcode output, so the indicator can live directly on the
 * featured-image anchor and survives tagDiv numbered AJAX pagination.
 */
.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_img.trde-media-loop-image {
	position: relative !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_img.trde-media-loop-image.trde-media-has-audio::after,
.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_img.trde-media-loop-image.trde-media-has-video::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	right: var(--trde-media-image-right) !important;
	bottom: var(--trde-media-image-bottom) !important;
	z-index: 5 !important;
	height: var(--trde-media-icon-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
	background-repeat: no-repeat !important;
	background-size: var(--trde-media-icon-size) var(--trde-media-icon-size) !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_img.trde-media-loop-image.trde-media-has-audio:not(.trde-media-has-video)::after {
	width: var(--trde-media-icon-size) !important;
	background-image: url('icons/audio.svg') !important;
	background-position: center !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_img.trde-media-loop-image.trde-media-has-video:not(.trde-media-has-audio)::after {
	width: var(--trde-media-icon-size) !important;
	background-image: url('icons/video.svg') !important;
	background-position: center !important;
}

.trde-media-indicators.trde-media-placement-image-bottom-right
.tdb_module_img.trde-media-loop-image.trde-media-has-audio.trde-media-has-video::after {
	width: calc((var(--trde-media-icon-size) * 2) + var(--trde-media-icon-gap)) !important;
	background-image: url('icons/audio.svg'), url('icons/video.svg') !important;
	background-position: left center, right center !important;
}