/**
 * PP Malaga - Hero Slider (front end).
 *
 * Two scopes live here:
 *   .pp-hero-carousel - the full-bleed carousel widget (Vista 1, and the side
 *                       carousel of Vista 2, which opts in by carrying the
 *                       same class).
 *   .pp-hero-view-2   - the two-column "featured + side carousel" layout. The
 *                       class is the plugin's own view contract, so the layout
 *                       glue for it belongs here and travels between sites.
 *
 * Specificity note for the whole file: Elementor ships its swiper rules at
 * 0,3,0 (for example
 *   .elementor-element .swiper ~ .elementor-swiper-button { display: inline-flex }
 * ). Pairing `.elementor-element` with our own class on the same node takes
 * these rules to 0,4,0, so they win on specificity alone and never depend on
 * stylesheet load order. That is why there is no !important anywhere here.
 */

/* ------------------------------------------------------------------ *
 * Carousel (Vista 1, and Vista 2's side carousel)
 * ------------------------------------------------------------------ */

/*
 * Equal height slides, copy pinned to the bottom.
 *
 * Each slide is sized by its own copy, so a two-line headline and a four-line
 * headline produce different heights (572px vs 585px at 375px wide). Swiper
 * sizes the wrapper to the tallest one, which left the shorter slide 13px
 * short of the bottom - and since the slide container justifies its content to
 * flex-end, that gap pushed the copy off the real bottom edge.
 *
 * Stretching every slide to the wrapper height and letting the slide container
 * grow into it puts every slide on the same baseline.
 */
.elementor-element.pp-hero-carousel .swiper-slide {
	height: auto;
	align-self: stretch;
}

.elementor-element.pp-hero-carousel .swiper-slide > .e-con {
	flex-grow: 1;
}

/*
 * Lift the bullets off the bottom edge.
 *
 * Two traps here, both found by measuring rather than guessing:
 *
 * 1. `bottom` does nothing. Elementor positions the pagination with
 *    `position: absolute` AND `top: 100%`, and when an absolutely positioned
 *    box has a resolved `top`, `bottom` is ignored outright - even inline and
 *    even with !important.
 * 2. `transform` is already taken. Elementor uses it to centre the bullets and
 *    pull them back inside the slide (translate(-18px, -7px) at 375px wide),
 *    so overwriting it would knock them out of centre.
 *
 * The standalone `translate` property composes with the existing `transform`
 * instead of replacing it, so it shifts the bullets up while leaving the
 * horizontal centring alone.
 *
 * Scoped to Vista 1 on purpose. That layout is a full-bleed hero with 80px of
 * empty padding under the copy, so lifting the bullets lands them in clear
 * space. Vista 2's carousels sit inside a card whose buttons finish at the
 * bottom edge, where the same lift would drop the bullets on top of them.
 */
.pp-hero-view-1 .elementor-element.pp-hero-carousel .swiper-pagination-bullets {
	translate: 0 -32px;
}

/*
 * No arrows on phones.
 *
 * The Loop Carousel `arrows` control is a plain switcher with no responsive
 * variants, so the breakpoint decision cannot live in the widget settings -
 * this is the only place it can be expressed. Below 768px the slide copy uses
 * the full width and the arrows end up sitting on top of it; swipe and the
 * bullet pagination still cover navigation.
 */
@media (max-width: 767px) {
	.elementor-element.pp-hero-carousel .swiper ~ .elementor-swiper-button,
	.elementor-element.pp-hero-carousel .swiper .elementor-swiper-button {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Vista 2 - featured card + side carousel
 * ------------------------------------------------------------------ */

/*
 * Make the featured card fill its column.
 *
 * The row now stretches both columns to a single height (the container's
 * `flex_align_items` is `stretch`), but a Loop Grid does not pass that height
 * down on its own: the widget, its container, the grid and the loop item all
 * stay content-sized, so the featured card stopped short of the side carousel
 * and the two columns read as misaligned. Each level has to opt in.
 *
 * Scoped to the `pp-hero-featured` class rather than to a view, because only
 * the FEATURED grid should fill: Vista 3's right column is a Loop Grid too, but
 * it stacks several cards, and stretching each of those to the column height
 * would be nonsense. The side carousel needs nothing here - it carries
 * `pp-hero-carousel` and is already stretched by the slide rules above.
 */
.elementor-element.pp-hero-featured,
.elementor-element.pp-hero-featured > .elementor-widget-container,
.elementor-element.pp-hero-featured .elementor-loop-container,
.elementor-element.pp-hero-featured .e-loop-item,
.elementor-element.pp-hero-featured .e-loop-item > .e-con {
	height: 100%;
}

/*
 * Clamp the description to three lines on phones.
 *
 * Vista 2 stacks two full cards on mobile, so a long entradilla pushes the hero
 * past two screen heights before the visitor reaches anything else. The copy is
 * untouched - it stays whole in the markup, on tablet and desktop, and on the
 * article itself.
 *
 * The clamp sits on the widget element itself, not on an inner wrapper:
 * Elementor 4's optimised markup drops the old `.elementor-widget-container`,
 * so the paragraph is a direct child of the widget. Clamping the widget (rather
 * than the paragraph) keeps a description written as several paragraphs clamped
 * as one block instead of three lines per paragraph.
 */
@media (max-width: 767px) {
	.elementor-element.pp-hero-view-2 .pp-hero-slide__text,
	.elementor-element.pp-hero-view-3 .pp-hero-slide__text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}

	/*
	 * The clamp measures the whole box, so the paragraph's own margins would
	 * otherwise be counted as part of the three lines.
	 */
	.elementor-element.pp-hero-view-2 .pp-hero-slide__text > :first-child,
	.elementor-element.pp-hero-view-3 .pp-hero-slide__text > :first-child {
		margin-top: 0;
	}

	.elementor-element.pp-hero-view-2 .pp-hero-slide__text > :last-child,
	.elementor-element.pp-hero-view-3 .pp-hero-slide__text > :last-child {
		margin-bottom: 0;
	}
}

/*
 * Vista 3: the stacked list fills its column.
 *
 * A Loop Grid is a CSS grid whose rows are content-sized, so two short cards
 * left a gap under them while the featured card next door ran the full height.
 * Giving the grid the column height and equal rows lines both columns up.
 */
.elementor-element.pp-hero-stack,
.elementor-element.pp-hero-stack > .elementor-widget-container,
.elementor-element.pp-hero-stack .elementor-loop-container {
	height: 100%;
}

.elementor-element.pp-hero-stack .elementor-loop-container {
	grid-auto-rows: 1fr;
}

/* The row is now the right height; the card inside still has to take it. */
.elementor-element.pp-hero-stack .e-loop-item,
.elementor-element.pp-hero-stack .e-loop-item > .e-con {
	height: 100%;
}

/*
 * Horizontal card on phones: fill the card.
 *
 * The card is a row on desktop, where `align-items: stretch` makes the copy
 * panel match the image height for free. On phones it switches to a column, so
 * the vertical axis becomes the MAIN axis and stretch no longer governs it:
 * each panel stopped at its own content, which left every card a different
 * visible height inside identical slide boxes. flex-grow is the column-
 * direction equivalent of that stretch.
 *
 * It has to be CSS rather than the container's `_flex_size` control, because
 * that control has no responsive variants - setting it would also make the
 * panel grow horizontally on desktop and destroy the 38/62 split.
 */
@media (max-width: 767px) {
	.elementor-element.pp-hero-card__body {
		flex-grow: 1;
	}
}