/**
 * Croc Play Button - centred and enlarged.
 *
 * Client asked for the play button on the crocodile swim feature image to be
 * centred and more prominent on desktop and mobile (Wrike 4538250924). It was a
 * 66px square tucked into the bottom right corner with the caption beside it.
 *
 * The button is the ::before pseudo-element of .croc-feature-media, declared in
 * Divi-child/style.css in the CROC block. Only the properties that move and
 * resize it are restated here; its colour, icon, hover and the
 * :has(.croc-play) guard all still come from that block.
 *
 * Selectors are one level deeper than the originals (.croc-feature-codewrap and
 * .croc-feature-media as ancestors) so these rules win on specificity and do
 * not depend on this stylesheet loading after the theme's.
 */

/* Desktop: dead centre of the image, 96px. */
.croc-feature-codewrap .croc-feature-media::before {
	right: auto;
	bottom: auto;
	left: 50%;
	top: 50%;
	width: 96px;
	height: 96px;
	background-size: 42px 42px;
	transform: translate(-50%, -50%);
}

/* Keep the centring in the hover transform, or the button jumps on hover. */
.croc-feature-codewrap .croc-feature-media:hover::before {
	transform: translate(-50%, -50%) scale(1.12);
}

/* Caption moves out from beside the button to centred on the bottom scrim. */
.croc-feature-media .croc-cap {
	right: auto !important;
	left: 0 !important;
	bottom: 30px !important;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	padding: 0 24px;
	text-align: center;
}

@media (max-width: 980px) {
	.croc-feature-codewrap .croc-feature-media::before {
		right: auto;
		bottom: auto;
		left: 50%;
		top: 50%;
		width: 78px;
		height: 78px;
		background-size: 34px 34px;
	}

	.croc-feature-media .croc-cap {
		right: auto !important;
		left: 0 !important;
		bottom: 22px !important;
		max-width: none;
		padding: 0 18px;
	}
}

/* Phones: the image is only 80vw tall here, so the square comes down slightly. */
@media (max-width: 767px) {
	.croc-feature-codewrap .croc-feature-media::before {
		width: 72px;
		height: 72px;
		background-size: 32px 32px;
	}
}