/*
 * Consult block - one template part (parts/consult.html): 374:3166, 406:555, 418:1815.
 *
 * Read from 374:3166 (frame 1440):
 *   card x 50..1390, 477 tall; 58 px to the footer's rendered rule (59 to the drawn line)
 *   panel 523 wide, #054487 (C16), corners 15 on the left only
 *   title "Reikalinga konsultacija?" Geist 500 50/65 #F2F2F2 at 63 px in, 42 px down, 398 wide
 *   text Geist 500 16/24 #F2F2F2, 25 px under the title, a blank line between the two paragraphs
 *   button 311 x 53, at 383 px from the card top (43 under the drawn 143 px text box): fill #C69935 (C17), radius 47.19, label Geist 500
 *     20.64/29.49 white, stroke 1.47 inside, white 20 % at the top fading to 0 at the bottom
 *   photo 817 x 477, cover, square corners as drawn; play mark 110 x 110 centred (raster in the
 *     design, kept as drawn). The mark is linked to the live site's video (YouTube pfQtfxeyq8E,
 *     operator ruling at Gate A.5); video-modal.js opens it over the page (rules at the end).
 * Below 1024 px the panel and the photo stack (panel first) inside the 20 px gutter.
 */

.mn-consult {
	width: min(var(--mn-wide, 1340px), 100% - 40px);
	margin: 0 auto 58px;
}

.mn-consult__card {
	display: flex;
	min-height: 477px;
}

.mn-consult__panel {
	flex: 0 0 523px;
	box-sizing: border-box;
	padding: 42px 62px 41px 63px;
	border-radius: 15px 0 0 15px;
	background-color: var(--wp--preset--color--c-16);
	color: var(--wp--preset--color--c-06);
}

.mn-consult .mn-consult__title {
	margin: 0;
	max-width: 398px;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-16);
	line-height: 65px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-06);
}

.mn-consult .mn-consult__text {
	margin: 0;
	max-width: 398px;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 24px;
	color: var(--wp--preset--color--c-06);
}

.mn-consult .mn-consult__title + .mn-consult__text {
	margin-top: 25px;
}

.mn-consult .mn-consult__actions {
	/* drawn 43 px under a 143 px text box; the two paragraphs lay out at 144, so 42 here */
	margin: 42px 0 0;
	gap: 0;
}

/*
 * The pill is the button block's wrapper (the drawn frame "green 32"); the link is the label
 * ("Label", 203 x 29.5) and stretches its click area over the whole pill.
 */
.mn-consult .mn-consult__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 311px;
	max-width: 100%;
	height: 53px;
	margin: 0;
	padding: 11.8px 26.54px;
	border-radius: 47.19px;
	background-color: var(--wp--preset--color--c-17);
}

.mn-consult .mn-consult__button .wp-block-button__link {
	display: block;
	flex: 0 0 auto;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--c-01);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 20.64px;
	line-height: 29.49px;
	text-decoration: none;
	white-space: nowrap;
}

.mn-consult .mn-consult__button .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 47.19px;
}

/* the drawn 1.47 px inside stroke: white 20 % at the top, fading to nothing at the bottom */
.mn-consult .mn-consult__button::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.47px;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.mn-consult__media {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.mn-consult .mn-consult__photo {
	position: absolute;
	inset: 0;
	margin: 0;
}

.mn-consult .mn-consult__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: 50% 50%;
}

.mn-consult .mn-consult__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 110px;
	height: 110px;
	margin: 0;
	transform: translate(-50%, -50%);
}

.mn-consult .mn-consult__play img {
	display: block;
	width: 110px;
	height: 110px;
}

@media (max-width: 1023.98px) {
	.mn-consult__card {
		flex-direction: column;
		min-height: 0;
	}

	.mn-consult__panel {
		flex-basis: auto;
		padding: 40px 24px;
		border-radius: 15px 15px 0 0;
	}

	.mn-consult .mn-consult__title {
		font-size: var(--wp--preset--font-size--s-13);
		line-height: 46px;
	}

	.mn-consult__media {
		aspect-ratio: 817 / 477;
	}

	.mn-consult .mn-consult__play,
	.mn-consult .mn-consult__play img {
		width: 80px;
		height: 80px;
	}

	.mn-consult .mn-consult__button {
		width: 100%;
		max-width: 311px;
		padding-inline: 16px;
	}
}

/* the label needs 235 px at the drawn 20.64 px; below 360 px the panel has 232 */
@media (max-width: 359.98px) {
	.mn-consult .mn-consult__button .wp-block-button__link {
		font-size: var(--wp--preset--font-size--s-04);
	}
}

/* ---- The play marks and the video modal (assets/js/video-modal.js) ----
 *
 * Shared by the two drawn play marks: this block's and the Kas mes esame CTA's (499:419), both in a
 * media group with the class mn-video. The script turns the mark's link into a <button>; the photo
 * around it opens the video too. Not drawn in the design (Gate A.5 item 7: "make the play marks show
 * the video and make it look good"): the hover and focus states use the mark's own white and the
 * drawn blue C03, no new colour; the modal is the photo lightbox's look (base.css .mn-lb: the same
 * black at 90 % and the same close button), with the video at 16:9 inside the same 64 / 72 px margin
 * (12 px at the sides on a phone, so the video takes the screen's width).
 */

.mn-video.is-ready {
	cursor: pointer;
}

.mn-video .mn-video__play {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.mn-video .mn-video__play img {
	display: block;
	width: 100%;
	height: 100% !important;
}

@media (hover: hover) {
	.mn-video.is-ready:hover .mn-video__play {
		transform: scale(1.1);
	}
}

/* a blue ring inside a white one: visible on a dark photo and on a light one */
.mn-video .mn-video__play:focus-visible {
	transform: scale(1.1);
	outline: 3px solid var(--wp--preset--color--c-01);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--c-03);
}

@media (prefers-reduced-motion: reduce) {
	.mn-video .mn-video__play {
		transition: none;
	}
}

html.mn-vm-open {
	overflow: hidden;
}

.mn-vm {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.mn-vm[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mn-vm::backdrop {
	background-color: rgb(0 0 0 / 0.9);
}

/* as wide as fits, and no taller than the screen less the 64 px above and below */
.mn-vm .mn-vm__frame {
	width: min(100% - 144px, (100vh - 128px) * 16 / 9);
	width: min(100% - 144px, (100dvh - 128px) * 16 / 9);
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--c-11);
}

.mn-vm .mn-vm__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 781px) {
	.mn-vm .mn-vm__frame {
		width: min(100% - 24px, (100vh - 128px) * 16 / 9);
		width: min(100% - 24px, (100dvh - 128px) * 16 / 9);
	}
}