/*
 * Landing Promo (page-templates/landing-promo-page.php).
 * Solo ciò che non è già coperto da style.css: pulsanti (.button), box
 * (.bg-gray), menu (#navbar-spy), finiture (.btn-color) e slider
 * (.swiper-product) arrivano dal tema.
 */

/* sopra 20px: il body delle landing aggiunge già ~20px sotto il menu, così sopra e sotto il logo restano uguali (~40px) */
.lp-logo-wrap { padding: 20px 0 40px; }
.lp-logo { width: 190px; max-width: 50%; }

.lp-text > *:last-child { margin-bottom: 0; }
.lp-cover { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Pulsanti: varianti del .button del tema */
.lp-button-wide { min-width: 320px; text-align: center; }
.lp-button-upper { min-width: 180px; text-transform: uppercase; }
#landing-promo-wrapper a.button.orange:hover,
#landing-promo-wrapper a.button.orange:focus { background-color: transparent; color: #000; }

/* Pulsante invio del form HubSpot della landing: come gli altri pulsanti (arancione, all'hover solo bordo).
   Solo dentro .lp-hubspot-form: gli altri form HubSpot del sito non cambiano. */
.lp-hubspot-form input[type="submit"].hs-button { /* specifica più di .hbspt-form input[type="submit"] del tema */
	cursor: pointer;
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #ff6d2d;
	border-radius: 20px;
	background-color: #ff6d2d;
	color: #fff;
	font-size: 20px;
	line-height: 1.1;
	-webkit-appearance: none;
	appearance: none;
	transition: all .3s linear;
}
.lp-hubspot-form input[type="submit"].hs-button:hover,
.lp-hubspot-form input[type="submit"].hs-button:focus { background-color: transparent; color: #000; }

/* Box grigi */
.lp-box { padding: 50px 60px; }

/* HERO: immagine con box testo semitrasparente in basso a sinistra */
.lp-hero { position: relative; }
/* le foto ambiente sono quasi quadrate: taglio panoramico; come da note cliente
   si taglia la parte alta (stessa base di prima, circa il 20% di altezza in meno) */
.lp-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 23 / 10; object-fit: cover; object-position: center 74%; }
.lp-hero__box {
	position: absolute;
	left: 3%;
	bottom: 7%;
	width: 48%;
	padding: 30px 32px;
	background: rgba(255, 255, 255, .88);
}
.lp-hero__box p { margin: 0; }
/* testi ridotti rispetto all'XD: con il banner più basso (note cliente) il box deve starci dentro */
.lp-hero__title { margin-bottom: 15px; font-size: 36px; font-weight: 400; line-height: 1.1; }
.lp-hero__subtitle { font-size: 36px; line-height: 1.25; }
.lp-hero__price { margin-top: 15px !important; font-size: 36px; line-height: 1.1; }
.lp-hero__text { margin-top: 15px !important; }
.lp-hero__note {
	position: absolute;
	right: 5%;
	bottom: 3.5%;
	margin: 0;
	color: #fff;
	font-size: 18px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

/* PROMO */
.lp-promo__subtitle { margin-bottom: 20px; }
.lp-promo__img { max-height: 420px; width: auto; }

/* VANTAGGI: immagine e box della stessa altezza; da desktop comanda il box
   (la foto, verticale, viene ritagliata invece di allungare il box) */
.lp-split__media,
.lp-split__content { display: flex; flex-direction: column; }
.lp-split .lp-cover { min-height: 100%; }
@media (min-width: 992px) {
	.lp-split__media { position: relative; min-height: 480px; }
	.lp-split__media .lp-cover {
		position: absolute; top: 0; left: 15px; width: calc(100% - 30px); height: 100%; min-height: 0;
		object-position: 50% 85%; /* tiene la stufa intera (piedini compresi) */
	}
}

/* FORM */
.lp-form-intro p { font-size: 30px; line-height: 1.3; }

/* PRODOTTO: stessi elementi di single-products.php */
.lp-product { border-top: 1px solid #000; }
.lp-product .swiper-product .swiper-slide figure img { height: 100%; object-fit: cover; }
/* Foto ridotta come da note cliente: si taglia la parte alta (linea a ~1/3), resta un formato 13:10
   con stufa e pavimento interi. Non segue l'altezza della colonna dei testi. */
.lp-product__media .swiper-product { aspect-ratio: 13 / 10; height: auto; }
.lp-product__media .swiper-slide figure img { object-position: 50% 100%; }
.lp-product__summary { padding: 50px 30px 30px 50px; }
.lp-product .nominal-power { position: absolute; top: 0; right: 0; z-index: 2; min-width: 130px; padding: 12px 20px; }
.lp-product .energy-rating-img { top: 14px; right: 150px; }
@media (min-width: 992px) {
	.lp-product__summary .title-prod { padding-right: 220px; }
}
.lp-product__content p { font-size: 18px; }
.lp-tech { margin-right: -10px; margin-left: -10px; }
.lp-tech .col-icon-prod { padding: 0 10px; max-width: 25%; flex-basis: 25%; } /* 4 per riga, come nel mockup */
.lp-tech .col-icon-prod p { font-size: 14px; line-height: 1.2; hyphens: auto; overflow-wrap: break-word; } /* parole lunghe tedesche: a capo invece di sbordare */
.lp-tech img.icon-feature { width: 56px; }

/* FINITURE */
.lp-finish-img { max-height: 520px; width: auto; max-width: 100%; }

/* AZIENDA ("Made in Italy", proporzioni misurate sulla preview del cliente):
   foto al 74% a sinistra, testo piccolo a destra (poco spazio tra i due),
   mappa agganciata al fondo della foto: si sovrappone all'angolo della foto (~37px a sinistra)
   e scende 60px sotto di lei. */
.lp-company {
	display: grid;
	grid-template-columns: 74% 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 15px;
	align-items: start;
	padding-bottom: 60px; /* spazio per la parte di mappa che scende sotto la foto */
}
.lp-company__img { grid-column: 1; grid-row: 1 / span 2; }
.lp-company__img .lp-cover { aspect-ratio: 815 / 437; height: auto; }
.lp-company__text { grid-column: 2; grid-row: 1; padding-bottom: 15px; }
.lp-company__text p { margin-bottom: 1.2em; font-size: 18px; line-height: 1.2; } /* 18px come la descrizione prodotto, riga vuota tra i paragrafi */
@media (min-width: 992px) and (max-width: 1439.98px) {
	/* schermi medi: colonna testo più larga, così il testo a 18px resta più basso della foto e la mappa ci si sovrappone */
	.lp-company { grid-template-columns: 66% 1fr; }
}
.lp-company__map { grid-column: 2; grid-row: 2; align-self: end; position: relative; z-index: 1; margin: 0 0 -60px -52px; }
.lp-company__map .lp-cover { aspect-ratio: 317 / 255; height: auto; }

.lp-company__cta { margin-top: 40px; }

/* PROPOSTA */
.lp-swiper-proposta { aspect-ratio: 545 / 480; }

/* --- Breakpoint del tema --- */
@media (max-width: 1199.98px) {
	.lp-hero__title, .lp-hero__subtitle, .lp-hero__price { font-size: 32px; }
	.lp-hero__box { width: 55%; padding: 22px 24px; }
	.lp-hero__note { font-size: 14px; } /* con il banner più basso non deve toccare il box */
	.lp-hero__title, .lp-hero__price, .lp-hero__text { margin-bottom: 12px; margin-top: 12px !important; }
	.lp-tech .col-icon-prod { max-width: 33.333%; flex-basis: 33.333%; }
	.lp-product__summary { padding: 40px 15px 20px 30px; }
	.lp-form-intro p { font-size: 24px; }
}

@media (max-width: 991.98px) {
	.lp-box { padding: 40px 30px; }
	.lp-split .lp-cover { min-height: 0; height: auto; aspect-ratio: 4 / 3; margin-bottom: 15px; }

	/* Hero: il box esce dall'immagine e va sotto */
	.lp-hero__box { position: static; width: 100%; padding: 25px 0 0; background: none; }
	.lp-hero__note { position: static; padding-top: 10px; color: inherit; font-size: 14px; text-shadow: none; }

	.lp-product__summary { padding: 30px 0 0; }
	.lp-product .energy-rating-img { position: relative; top: unset; right: unset; float: right; }
	.lp-product .nominal-power { position: relative; min-width: unset; padding: 0; }

	.lp-company { display: block; padding-bottom: 0; }
	.lp-company__text { padding: 25px 0; }
	.lp-company__map { margin: 0; }
	.lp-company__cta { margin-top: 30px; }
	.lp-hero__img { aspect-ratio: 4 / 3; }
}

@media (max-width: 767.98px) {
	.lp-hero__title, .lp-hero__subtitle, .lp-hero__price { font-size: 26px; }
	.lp-box { padding: 30px 20px; }
	.lp-button-wide { min-width: 0; width: 100%; }
	.lp-tech .col-icon-prod { max-width: 50%; flex-basis: 50%; }
	.lp-form-intro p { font-size: 20px; }
	.lp-finish-img { max-height: 360px; margin-bottom: 20px; }
}