/* Olexis Case Media: films, reels, carousels, card previews */
:root {
	--ocm-line: var(--line, rgba(245, 243, 239, .12));
	--ocm-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
	--ocm-gold: var(--wp--preset--color--gold, #C6A15B);
}

/* Landscape films: 16:9 frame; extra videos in a grid below */
body .case-media.ocm-landscape { aspect-ratio: 16 / 9 !important; }
body .case-media.ocm-landscape video { object-fit: contain; background: #000; }
.ocm-more { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }

/* Vertical reels: phone-shaped frames */
body .case-media.ocm-vertical { aspect-ratio: auto !important; background: none !important; overflow: visible !important; border-radius: 0 !important; padding: 8px 0 40px; }
.ocm-reels { display: flex; justify-content: center; gap: 24px; }
.ocm-reel {
	position: relative; flex: 0 0 auto; aspect-ratio: 9 / 16; width: min(340px, 100%);
	border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--ocm-line);
	box-shadow: 0 30px 70px -35px rgba(0, 0, 0, .9);
}
.ocm-count-2 .ocm-reel { width: min(320px, 46%); }
.ocm-count-3 .ocm-reel { width: min(300px, 31%); }
.ocm-count-4 .ocm-reel { width: min(260px, 23%); }
body .ocm-reel video, body .ocm-reel iframe {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; border: 0;
}

/* Case cards: muted preview over the thumbnail */
.card .has-preview { position: relative; }
.card .has-preview .card-preview {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
	opacity: 0; transition: opacity .5s var(--ocm-ease); pointer-events: none;
}
.card .has-preview .card-preview.is-playing { opacity: 1; }
.card .has-preview a::after {
	z-index: 2; place-items: end start !important; padding: 20px 22px;
	background: linear-gradient(0deg, rgba(11, 11, 12, .6), transparent 45%) !important;
}

/* Carousel galleries: uncropped, swipeable */
body .wp-block-gallery.is-carousel, body .wp-block-gallery.is-style-carousel {
	display: flex !important; flex-wrap: nowrap !important; gap: 20px !important; overflow-x: auto;
	scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
}
.wp-block-gallery.is-carousel::-webkit-scrollbar, .wp-block-gallery.is-style-carousel::-webkit-scrollbar { display: none; }
body .wp-block-gallery.is-carousel > figure.wp-block-image, body .wp-block-gallery.is-style-carousel > figure.wp-block-image {
	flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important;
	height: clamp(320px, 62vh, 560px); scroll-snap-align: start;
}
body .wp-block-gallery.is-carousel > figure.wp-block-image img, body .wp-block-gallery.is-style-carousel > figure.wp-block-image img {
	height: 100% !important; width: auto !important; max-width: none !important; object-fit: contain !important; border-radius: 6px; flex: none !important;
}
.ocm-carousel-ctrl { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; }
.ocm-count { margin-right: auto; font-size: 12px; letter-spacing: .2em; color: var(--wp--preset--color--muted, #8A8A8E); font-variant-numeric: tabular-nums; }
.ocm-count b { color: var(--ocm-gold); font-weight: 500; }
.ocm-btn {
	width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ocm-line); background: none; color: inherit;
	cursor: pointer; display: grid; place-items: center; padding: 0; transition: border-color .3s, color .3s, opacity .3s;
}
.ocm-btn:hover { border-color: var(--ocm-gold); color: var(--ocm-gold); }
.ocm-btn[disabled] { opacity: .35; cursor: default; border-color: var(--ocm-line); color: inherit; }
.ocm-btn svg { width: 16px; height: 10px; }

@media (max-width: 781px) {
	.ocm-more { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ocm-reels { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ocm-reels::-webkit-scrollbar { display: none; }
	.ocm-count-1 .ocm-reels { justify-content: center; }
	body .ocm-media .ocm-reel { width: 72vw; scroll-snap-align: start; }
	body .ocm-count-1 .ocm-reel { width: min(320px, 84vw); }
	body .wp-block-gallery.is-carousel > figure.wp-block-image, body .wp-block-gallery.is-style-carousel > figure.wp-block-image { height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
	.card .has-preview .card-preview { display: none; }
}