/**
 * Page sections composed in Elementor.
 *
 * Only what the panel has no control for. Every size, colour, spacing and
 * background on these sections is set on the element itself, where it can be
 * changed; these rules are the few arrangements Elementor cannot express. The
 * classes are the ones the sections carry in their CSS Classes control.
 *
 * @package BajoCielo
 */

/*
 * The header lies over a page's hero, as the reference draws it on the
 * homepage: any page whose layout carries a `.bc-hero` section. Elementor has
 * no overlay setting for a Theme Builder header, so it is taken out of the flow
 * here. The body is the containing block so the header starts below the admin
 * bar when one is showing.
 */

body:has( .bc-hero ) {
	position: relative;
}

body:has( .bc-hero ) .elementor-location-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: var( --bc-z-header );
}

/*
 * The rails in Explore.
 *
 * The picture's proportion differs between the two rails because the reference
 * draws both rows of pictures to one height in columns of different widths.
 * On a phone the rails scroll sideways, two cards in view, as the reference's
 * phone frame shows; Elementor's grid controls have no horizontal scroll.
 */

.bc-rail--lodging {
	--bc-media-ratio: 27 / 25;
}

.bc-rail--experiences {
	--bc-media-ratio: 15 / 16;
}

@media ( max-width: 767px ) {

	.bc-rail {
		--bc-media-ratio: 7 / 5;
	}

	.bc-rail .bc-rooms-rail,
	.bc-rail .bc-grid {
		grid-auto-columns: calc( 50% - 6px );
		grid-auto-flow: column;
		grid-template-columns: none;
		margin-inline: calc( -1 * var( --bc-gutter ) );
		padding-inline: var( --bc-gutter );
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var( --bc-gutter );
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.bc-rail .bc-rooms-rail::-webkit-scrollbar,
	.bc-rail .bc-grid::-webkit-scrollbar {
		display: none;
	}

	.bc-rail .mphb-room-type,
	.bc-rail .bc-card {
		scroll-snap-align: start;
	}
}

/*
 * A listing's photographs, as a mosaic.
 *
 * MotoPress's accommodation gallery and our listing gallery both print
 * WordPress's standard gallery markup, so one layout serves both: one large
 * picture beside four smaller ones, as the PWA's detail page draws it. The
 * first five are in the mosaic; every one of them stays in the markup, so the
 * lightbox steps through the whole set from any picture. On a phone the set
 * becomes a strip that scrolls sideways.
 */

.bc-gallery-mosaic .gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: repeat( 2, 214px );
	gap: 8px;
	margin: 0;
	overflow: hidden;
	border-radius: var( --bc-radius-3 );
}

.bc-gallery-mosaic .gallery .gallery-item {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.bc-gallery-mosaic .gallery .gallery-item:first-child {
	grid-row: span 2;
}

.bc-gallery-mosaic .gallery .gallery-item:nth-child( n + 6 ) {
	display: none;
}

.bc-gallery-mosaic .gallery-icon,
.bc-gallery-mosaic .gallery-icon a {
	display: block;
	height: 100%;
}

.bc-gallery-mosaic .gallery-icon img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	transition: filter var( --bc-duration-fast ) var( --bc-ease );
}

.bc-gallery-mosaic .gallery-icon a:hover img,
.bc-gallery-mosaic .gallery-icon a:focus-visible img {
	filter: brightness( 0.9 );
}

@media ( max-width: 767px ) {

	.bc-gallery-mosaic .gallery {
		display: flex;
		gap: 8px;
		margin-inline: calc( -1 * var( --bc-gutter ) );
		padding-inline: var( --bc-gutter );
		border-radius: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.bc-gallery-mosaic .gallery::-webkit-scrollbar {
		display: none;
	}

	.bc-gallery-mosaic .gallery .gallery-item,
	.bc-gallery-mosaic .gallery .gallery-item:nth-child( n + 6 ) {
		display: block;
		flex: 0 0 86%;
		height: 250px;
		scroll-snap-align: start;
	}

	.bc-gallery-mosaic .gallery-icon img {
		border-radius: var( --bc-radius-2 );
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.bc-gallery-mosaic .gallery-icon img {
		transition: none;
	}
}

/*
 * An iframe an editor embeds in an accommodation's description, scaled to
 * the column rather than printed at a fixed 600 by 450. The tour and the map
 * have fields of their own (bc_embed).
 */

.bc-acc-content iframe {
	display: block;
	width: 100%;
	height: auto;
	margin: var( --bc-space-4 ) 0;
	border: 0;
	border-radius: var( --bc-radius-3 );
	aspect-ratio: 16 / 10;
}

/*
 * The footer: light, so the logo keeps its own colours. Menus as plain
 * links, the copyright row ruled off beneath.
 */

.bc-footer-band {
	color: var( --bc-ink-soft );
}

.bc-footer-band .widget-title,
.bc-footer-band h5 {
	margin: 0 0 var( --bc-space-3 );
	color: var( --bc-sky-deep-ink );
	font-family: var( --bc-font-display );
	font-size: var( --bc-text-md );
	font-weight: var( --bc-weight-semibold );
}

.bc-footer-band .menu {
	display: grid;
	gap: var( --bc-space-2 );
	margin: 0 0 var( --bc-space-5 );
	padding: 0;
	list-style: none;
}

.bc-footer-band .menu a {
	color: var( --bc-ink-soft );
	text-decoration: none;
	transition: color var( --bc-duration-fast ) var( --bc-ease );
}

.bc-footer-band .menu a:hover,
.bc-footer-band .menu a:focus-visible {
	color: var( --bc-sky-deep );
	text-decoration: underline;
}

.bc-footer-band .gt_selector {
	max-width: 16rem;
	min-height: 42px;
	margin-bottom: var( --bc-space-5 );
	padding: 0 var( --bc-space-3 );
	border: 1px solid var( --bc-paper-rule );
	border-radius: var( --bc-radius-1 );
	background-color: var( --bc-paper );
	color: var( --bc-ink );
}

.bc-footer-band + .bc-footer-band > .elementor-container {
	padding-top: var( --bc-space-4 );
	border-top: 1px solid var( --bc-paper-rule );
}

/* The booking path's title band. */

.bc-strip .elementor-heading-title {
	margin: 0;
}

/*
 * Long text the business wrote — terms, the guarantee, partner
 * instructions — set for reading.
 */

.bc-prose {
	color: var( --bc-ink );
	font-size: var( --bc-text-base );
	line-height: var( --bc-leading-normal );
}

.bc-prose h1,
.bc-prose h2,
.bc-prose h3,
.bc-prose h4 {
	margin: var( --bc-space-6 ) 0 var( --bc-space-3 );
	color: var( --bc-sky-deep-ink );
	font-family: var( --bc-font-display );
	font-size: var( --bc-text-lg );
	line-height: var( --bc-leading-tight );
}

.bc-prose p {
	margin: 0 0 var( --bc-space-4 );
}

.bc-prose ul,
.bc-prose ol {
	margin: 0 0 var( --bc-space-4 );
	padding-left: var( --bc-space-5 );
}

.bc-prose li {
	margin-bottom: var( --bc-space-2 );
}

.bc-prose li > p {
	margin: 0;
}

.bc-prose strong {
	color: var( --bc-sky-deep-ink );
	font-weight: var( --bc-weight-semibold );
}

.bc-prose a {
	color: var( --bc-sky-deep );
}

/*
 * A words-and-form band whose form is not shown — the private journey
 * request before any journey is published — gives the words the whole band.
 */

.bc-split--form:not( :has( .bc-form ) ) > .elementor-container > .elementor-column:first-child {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.bc-split--form:not( :has( .bc-form ) ) > .elementor-container > .elementor-column:first-child .elementor-icon-list-items {
	display: inline-grid;
	text-align: left;
}

.bc-split--form:not( :has( .bc-form ) ) > .elementor-container > .elementor-column:last-child:not( :first-child ) {
	display: none;
}

/*
 * Elementor Pro's WooCommerce widgets — cart, checkout, account — ship with
 * Roboto written into their stylesheet. They take the site's body face.
 */

body .elementor-widget-woocommerce-cart .woocommerce,
body .elementor-widget-woocommerce-checkout-page .woocommerce,
body .elementor-widget-woocommerce-my-account .woocommerce {
	font-family: var( --bc-font-body );
}

/*
 * The one-page purchase asks for no address and no order notes, so the
 * checkout's second column of customer fields holds nothing. Elementor Pro
 * still draws its box; it is not shown while it has no field in it.
 */

.elementor-widget-woocommerce-checkout-page .col-2:not(:has(input, select, textarea)) {
	display: none;
}

body .elementor-widget-woocommerce-my-account .woocommerce h2 {
	color: var( --bc-sky-deep-ink );
	font-family: var( --bc-font-display );
	font-size: var( --bc-text-xl );
}

/*
 * "Publica con nosotros" in the main menu is drawn as a button: the menu item
 * carries `bc-menu-cta` in its CSS Classes field. Elementor's nav menu
 * has no per-item style, and its own item rules are five classes deep, so
 * these are six.
 */

/*
 * The gap before the pill sits on the item, not the link, so the item is
 * exactly the pill. Its submenu then spans the pill edge to edge: SmartMenus
 * pins the left edge inline, and the right edge here sets the width, so the
 * card sits centred under the button whatever its label.
 */
.bc-site-header .elementor-nav-menu--main .elementor-nav-menu > li.bc-menu-cta {
	margin-inline-start: var( --bc-space-3 );
}

.bc-site-header .elementor-nav-menu--main .elementor-nav-menu > li.bc-menu-cta > .sub-menu {
	right: 0;
	overflow: hidden;
}

.bc-site-header .elementor-nav-menu--main .elementor-nav-menu > li.bc-menu-cta > a.elementor-item.elementor-item {
	padding: var( --bc-space-2 ) var( --bc-space-4 );
	border-radius: var( --bc-radius-pill );
	background-color: var( --bc-sky-deep );
	color: var( --bc-paper );
	transition: background-color 0.2s ease;
}

.bc-site-header .elementor-nav-menu--main .elementor-nav-menu > li.bc-menu-cta > a.elementor-item.elementor-item:hover,
.bc-site-header .elementor-nav-menu--main .elementor-nav-menu > li.bc-menu-cta > a.elementor-item.elementor-item:focus-visible {
	background-color: var( --bc-sky-deep-ink );
	color: var( --bc-paper );
}

.bc-site-header .elementor-nav-menu--main .elementor-nav-menu > li.bc-menu-cta > a.elementor-item.elementor-item::after {
	display: none;
}

/* In the phone menu it leads the list in the same colour. */
.bc-site-header .elementor-nav-menu--dropdown .elementor-nav-menu > li.bc-menu-cta > a.elementor-item.elementor-item {
	background-color: var( --bc-sky-deep );
	color: var( --bc-paper );
	font-weight: 600;
}

@media ( prefers-reduced-motion: reduce ) {
	.bc-site-header .elementor-nav-menu--main .elementor-nav-menu > li.bc-menu-cta > a.elementor-item.elementor-item {
		transition: none;
	}
}