/* Mythica Media — storefront. Mobile-first, themeable via --mm-* vars, no framework.
   Grid + facade + built-in lightbox (retires FooBox) + wall filter chips. */

.mm-grid,
.mm-wall,
.mm-embed,
.mm-lightbox { --mm-gap: 14px; --mm-radius: 10px; --mm-min: 150px;
	--mm-fg: currentColor;
	--mm-accent: var(--mm-accent-color, #b8894a);
	--mm-scrim: rgba(12,10,16,.92);
	--mm-card-bg: rgba(0,0,0,.04);
	box-sizing: border-box; }
.mm-grid *, .mm-wall *, .mm-embed *, .mm-lightbox * { box-sizing: border-box; }

/* -- Grid + cards -------------------------------------------------------- */
.mm-grid {
	display: grid;
	grid-template-columns: repeat(var(--mm-cols, auto-fill), minmax(var(--mm-min), 1fr));
	gap: var(--mm-gap);
	margin: 1em 0;
}
@media (max-width: 480px) { .mm-grid { --mm-min: 42%; --mm-gap: 10px; } }

.mm-card {
	appearance: none; border: 0; padding: 0; margin: 0; background: none;
	cursor: pointer; text-align: left; width: 100%;
	display: flex; flex-direction: column; gap: 6px;
	color: inherit; font: inherit;
}
.mm-card .mm-thumb {
	position: relative; display: block; width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--mm-card-bg) center/cover no-repeat;
	border-radius: var(--mm-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.mm-card:hover .mm-thumb,
.mm-card:focus-visible .mm-thumb { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.mm-card .mm-card-title {
	font-size: 13px; line-height: 1.3; opacity: .82;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mm-card.is-hidden { display: none; }

/* the play glyph on video tiles / embeds */
.mm-play {
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--mm-scrim);
	display: grid; place-items: center;
	transition: transform .2s ease, background .2s ease;
}
.mm-play::after { content: ""; margin-left: 3px;
	border-style: solid; border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff; }
.mm-card:hover .mm-play, .mm-embed-poster:hover .mm-play { transform: scale(1.08); background: var(--mm-accent); }

/* staged (compositor) badge — an interactive composition, not a flat photo */
.mm-stage-badge {
	position: absolute; top: 8px; right: 8px;
	width: 26px; height: 26px; border-radius: 6px;
	background: var(--mm-scrim); color: #fff;
	display: grid; place-items: center; font-size: 14px; line-height: 1;
}
.mm-card.is-stage .mm-thumb { outline: 2px solid transparent; }
.mm-card.is-stage:hover .mm-thumb { outline-color: var(--mm-accent); outline-offset: -2px; }

/* -- Single inline embed ------------------------------------------------- */
.mm-embed { margin: 1em 0; }
.mm-embed.is-image img { display: block; width: 100%; height: auto; border-radius: var(--mm-radius); }
.mm-embed-frame { width: 100%; background: #000 center/cover no-repeat; border-radius: var(--mm-radius); overflow: hidden; }
.mm-embed-poster {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border: 0; padding: 0; cursor: pointer;
	background: var(--mm-card-bg) center/cover no-repeat;
}
.mm-embed-frame iframe, .mm-embed-frame video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000;
}
.mm-embed-title { display: block; font-size: 13px; opacity: .75; margin-top: 6px; }

/* -- Wall filter chips --------------------------------------------------- */
.mm-filters {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	margin: 0 0 16px;
}
.mm-facet-group { display: contents; }
.mm-chip {
	appearance: none; cursor: pointer;
	font: inherit; font-size: 13px; line-height: 1;
	padding: 7px 13px; border-radius: 999px;
	border: 1px solid rgba(128,128,128,.35);
	background: transparent; color: inherit; opacity: .72;
	transition: all .18s ease;
}
.mm-chip:hover { opacity: 1; border-color: var(--mm-accent); }
.mm-chip.is-active { opacity: 1; color: #fff; background: var(--mm-accent); border-color: var(--mm-accent); }

.mm-empty { opacity: .6; font-style: italic; padding: 1em 0; }
.mm-gallery-title, .mm-page-intro { margin: 0 0 .5em; }

/* -- Lightbox ------------------------------------------------------------ */
.mm-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	display: none; align-items: center; justify-content: center;
	background: var(--mm-scrim);
	padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
	opacity: 0; transition: opacity .2s ease;
}
.mm-lightbox.is-open { display: flex; opacity: 1; }
.mm-lightbox-stage {
	position: relative; max-width: min(1100px, 96vw); max-height: 90vh; width: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mm-lightbox-media { position: relative; width: 100%; display: flex; justify-content: center; }
.mm-lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 8px; }
.mm-lightbox .mm-lb-frame { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 82vh; background: #000; border-radius: 8px; overflow: hidden; }
.mm-lightbox .mm-lb-stage { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 82vh; background: #000; border-radius: 8px; overflow: hidden; }
.mm-lightbox .mm-lb-frame iframe, .mm-lightbox .mm-lb-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mm-lightbox-cap { color: rgba(255,255,255,.85); font-size: 14px; text-align: center; max-width: 70ch; }
.mm-lb-close {
	position: absolute; top: -6px; right: -6px; transform: translate(40%,-40%);
	width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
	background: #fff; color: #111; font-size: 22px; line-height: 40px;
}
@media (max-width: 600px) { .mm-lb-close { transform: none; top: 4px; right: 4px; } }

/* prev / next — arrow-key or click through the gallery (retires FooBox nav) */
.mm-lb-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.9); color: #111; font-size: 30px; line-height: 46px;
	padding: 0; display: grid; place-items: center;
}
.mm-lb-nav:hover { background: #fff; }
.mm-lb-prev { left: 14px; }
.mm-lb-next { right: 14px; }
@media (max-width: 600px) { .mm-lb-nav { width: 40px; height: 40px; font-size: 24px; } .mm-lb-prev { left: 5px; } .mm-lb-next { right: 5px; } }

/* the relational panel — "tells all the other things" */
.mm-lightbox-relations { width: 100%; max-width: min(1100px, 96vw); display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.mm-rel-record { color: var(--mm-accent); text-decoration: none; font-size: 14px; font-weight: 600; }
.mm-rel-record:hover { text-decoration: underline; }
.mm-rel-threads { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-rel-thread { font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.9); text-decoration: none; }
a.mm-rel-thread:hover { border-color: var(--mm-accent); color: #fff; }
.mm-rel-note { font-size: 12px; color: rgba(255,255,255,.55); }
.mm-rel-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); margin-top: 4px; }
.mm-rel-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mm-rel-thumb { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 8px; border: 0; cursor: pointer; background: #222 center/cover no-repeat; position: relative; }
.mm-rel-thumb.is-video::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
img.mm-zoomable { cursor: zoom-in; }