/*
 * Microcubo UI · sections
 * Page sections of the Figma designs. Classes:
 *   mc-topzone                               first section of a page with the grey top zone (the header follows it)
 *   mc-image--banner, mc-image--photo,
 *   mc-image--top                            image crops as in Figma
 *   mc-zoom                                  linked image or card: slight zoom on hover
 *   mc-carousel, mc-video                    banner carousel (Elementor's nested carousel) and its video slide
 *   mc-square                                container that stays square (its image is the background)
 *   mc-split, mc-split__text, __media        two columns: text + image (or form)
 *   mc-box                                   "Compromisso" / "Ética" boxes
 *   mc-values, __cell, __title, __text       "Os nossos valores" grid
 *   mc-contact                               contact block (Contactos)
 *
 * 1025-1365px ("small laptop"): still two columns but less room, so some layouts get their own proportions.
 */

/* the grey top zone of the Figma pages also covers the theme header */
body:has(.mc-topzone) #qodef-page-header,
body:has(.mc-topzone) #qodef-page-mobile-header {
	background-color: var(--mc-grey-bg);
}

/* ------------------------------------------------------------------ image crops (Figma masks) */

.mc-image--banner img {
	object-position: 50% 41%;
}

.mc-image--photo img {
	object-position: 50% 86%;
}

.mc-image--top img {
	object-position: 50% 0;
}

/* ------------------------------------------------------------------ linked images and cards */

.mc-zoom .mc-image,
.mc-image.mc-zoom {
	overflow: hidden;
}

.mc-zoom img {
	transition: transform .6s ease;
}

.mc-zoom:hover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.mc-zoom img {
		transition: none;
	}
}

/* an empty container has no height of its own: this one is as tall as it is wide */
.mc-square {
	aspect-ratio: 1;
}

/* ------------------------------------------------------------------ banner carousel (home) */

/* the images set the slide height (designed slides with text: never cropped); the video fills the same height,
   cropped rather than letterboxed. Elementor's "equal height" (on by default) gives every slide that height. */
.mc-carousel .mc-video {
	position: absolute;
	inset: 0;
}

.mc-carousel .mc-video :is(.elementor-widget-container, .elementor-wrapper) {
	height: 100%;
}

.mc-carousel .mc-video .elementor-wrapper {
	aspect-ratio: auto;
}

.mc-carousel .mc-video video {
	object-fit: cover;
}

/* Figma dots: 8px grey (Elementor's size, gap and colours), the current one 10px in the hover colour. Brok gives
   every swiper bullet margin: 5px !important and the current one scale(1.5), hence the longer selectors. */
.mc-carousel .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap) !important;
}

.mc-carousel .swiper-pagination-bullets .swiper-pagination-bullet:hover,
.mc-carousel .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--e-n-carousel-dots-hover-color, var(--mc-black));
}

.mc-carousel .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
	transform: scale(1.25);
}

/* ------------------------------------------------------------------ text + image rows */

/* small laptops: 45/55, the image column without the Figma right margin */
@media (min-width: 1025px) and (max-width: 1365px) {
	.mc-split__text {
		--width: 45% !important;
		--padding-right: 32px !important;
	}

	.mc-split__media {
		--width: 55% !important;
		--padding-right: 0px !important;
	}
}

/* desktop: the image follows the height of the text (at 1920 the Figma images are already taller) */
@media (min-width: 1025px) {
	.mc-split__media {
		--e-con-grid-template-rows: 1fr !important;
	}

	.mc-split__media .mc-image {
		flex-grow: 1 !important;
	}

	.mc-split__media .mc-image img {
		height: 100%;
		object-fit: cover;
	}
}

/* ------------------------------------------------------------------ boxes */

/* small laptops: 40px sides, so "Ética, transparência" stays on two lines */
@media (min-width: 1025px) and (max-width: 1365px) {
	.mc-box {
		--padding-left: 40px !important;
		--padding-right: 40px !important;
	}
}

/* ------------------------------------------------------------------ values grid */

/* four columns from 1366px, 2x2 on small laptops */
@media (min-width: 1025px) and (max-width: 1365px) {
	.mc-values {
		--e-con-grid-template-columns: 1fr 1fr !important;
	}

	.mc-values__cell {
		--padding-top: 44px !important;
		--padding-bottom: 40px !important;
		--padding-left: 28px !important;
		--padding-right: 28px !important;
	}
}

@media (min-width: 1366px) {
	/* two title lines reserved, so the four texts start on the same line (Figma: 65px below the title) */
	.mc-values__title :is(h1, h2, h3, h4, h5, h6, p) {
		min-height: 2.44em;
	}

	/* Figma text width: 320px at 17px */
	.mc-values__text p {
		max-width: 18.824em;
	}
}

/* ------------------------------------------------------------------ contact blocks */

/* Figma widths at 1920, never narrower than the text: without room, a block moves to the next line.
   Two classes: Elementor sets min-width: 0 on the widgets of a container. */
.mc-section .mc-contact {
	min-width: max-content;
}