/*
 * Image previews that open an attached video in the Fancybox lightbox
 * (inc/video-preview.php + parts/icons/icon-play.php).
 *
 * .ice-video takes the place of the <picture> the layout used to contain, so
 * it deliberately sets no size of its own — the section's existing class
 * (.services__card-image, or the grid column in .article__gallery) keeps
 * driving the box, exactly as it did for the <picture>. Everything else here
 * is the play badge stacked on top.
 */

.ice-video {
	position: relative;
	display: block;
	color: #ff0080;
	cursor: pointer;
}

.ice-video picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Video attached without a picture — keep a clickable box instead of nothing. */
.ice-video--empty {
	aspect-ratio: 16/9;
	min-height: 12rem;
	background: rgba(255, 255, 255, 0.2);
}

.ice-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	width: 4.8rem;
	height: 4.8rem;
	pointer-events: none;
	-webkit-transition: -webkit-transform 0.25s ease, color 0.25s ease;
	transition: transform 0.25s ease, color 0.25s ease;
}

@media (min-width: 1200px) {
	.ice-video__play {
		width: 7.2rem;
		height: 7.2rem;
	}
}

/* Two classes deep so it beats ".services__card-image svg" from app.css. */
.ice-video .ice-video__play svg {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-filter: drop-shadow(0 0.2rem 1rem rgba(0, 0, 0, 0.25));
	filter: drop-shadow(0 0.2rem 1rem rgba(0, 0, 0, 0.25));
}

.ice-video__play svg circle {
	fill: currentColor;
}

.ice-video__play svg path {
	fill: #fff;
	stroke: #fff;
}

.ice-video:hover .ice-video__play {
	color: #fff;
	-webkit-transform: translate(-50%, -50%) scale(1.08);
	transform: translate(-50%, -50%) scale(1.08);
}

.ice-video:hover .ice-video__play svg path {
	fill: #ff0080;
	stroke: #ff0080;
}

/*
 * Service cards: the picture is a small decorative tile pinned to the
 * top-right corner and painted below the card text (z-index: -1 in app.css).
 * To be clickable it has to come out from under the card background, while
 * the text keeps painting above it — and stops swallowing the clicks aimed at
 * the tile, which the title overlaps on desktop.
 */
.services__card--video .services__card-image {
	z-index: 1;
}

.services__card--video .services__card-title,
.services__card--video .services__card-text {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

/* The tile is 8rem/16rem — a full-size badge would cover it completely. */
.services__card--video .services__card-image .ice-video__play {
	width: 3.2rem;
	height: 3.2rem;
}

@media (min-width: 1200px) {
	.services__card--video .services__card-image .ice-video__play {
		width: 5.6rem;
		height: 5.6rem;
	}
}