/*****************************************************************/
/*  LANDING-PAGES.CSS                                               */
/*  Richiesto da Federico (11/07): le 5 pagine collegate ai bottoni  */
/*  "Come possiamo aiutarti" (Offerta Hotel, Offerta Negozi,        */
/*  AirBNB Host, Barche & Yacht, Partner & Brand) usavano il layout  */
/*  di default di GeneratePress con sidebar blog ("sembrava un      */
/*  blog"). Questo file definisce un layout da landing page che     */
/*  riusa l'identita visiva della homepage (colori, font Raleway,   */
/*  stile bottoni/card) ma con classi NUOVE e indipendenti           */
/*  (prefisso "lp-"), cosi da non toccare ne rischiare nulla su      */
/*  custom-home.css, che resta dedicato solo alla homepage.          */
/*                                                                    */
/*  REVISIONE (11/07, seconda versione): la prima versione usava     */
/*  dimensioni testo e colori "inventati" (es. #3a332c per i titoli, */
/*  bg scuro per la CTA finale). Federico ha segnalato che i testi   */
/*  non erano coerenti con la homepage. Questa versione riprende i   */
/*  valori ESATTI misurati in custom-home.css, cosi la landing page  */
/*  usa davvero la stessa "taglia" e gli stessi colori della home:   */
/*    - scala "hero" (h1.title-hero)      -> .lp-hero-title          */
/*    - scala "media" (h2/h3 titoli, es.                             */
/*      h2.title-benvenuti e h3.subtitle-perche, che condividono     */
/*      la stessa scala) -> .lp-eyebrow, i titoli di sezione e       */
/*      il titolo della CTA finale                                   */
/*    - scala "testo" (p.text-card-chisei) -> tutti i paragrafi      */
/*    - bottone (button.btn-brown)        -> .lp-btn                 */
/*  Colori: titoli/bottoni #AC9586 (brown brand), testo #505050,     */
/*  sfondo hero #F7F0E9 (uguale a .hero in homepage), sfondo CTA      */
/*  finale #AC9586 con testo #EDE6D9 (stesso schema di                */
/*  .chisei-shizen in homepage, invece del nero inventato).           */
/*  Caricato in modo condizionale in functions.php solo sulle 5      */
/*  pagine landing (vedi commento in functions.php).                 */
/*****************************************************************/

.lp-page{
	font-family:'Raleway', sans-serif;
	color:#505050;
}
.lp-page section{
	padding:12vw 6vw;
}

/* ---------------------------------------------------------------- */
/*  SCALA TESTO CONDIVISA                                            */
/*  Le tre classi qui sotto replicano le tre scale tipografiche      */
/*  reali della homepage (vedi commento in testa al file). Le uso    */
/*  come classi di utilita cosi ogni sezione le applica invece di    */
/*  ridefinire ogni volta gli stessi font-size nei breakpoint.       */
/* ---------------------------------------------------------------- */

/* Scala "hero": identica a h1.title-hero in custom-home.css */
.lp-scale-hero{
	font-size:40px;
}
@media (min-width:421px) and (max-width:550px){ .lp-scale-hero{ font-size:9vw; } }
@media (min-width:551px) and (max-width:766.9px){ .lp-scale-hero{ font-size:7.5vw; } }
@media (min-width:767px) and (max-width:899.9px){ .lp-scale-hero{ font-size:6vw; } }
@media (min-width:900px) and (max-width:1099.9px){ .lp-scale-hero{ font-size:3.4vw; } }
@media (min-width:1100px) and (max-width:1400px){ .lp-scale-hero{ font-size:3vw; } }
@media (min-width:1401px){ .lp-scale-hero{ font-size:3.4vw; } }

/* Scala "media": identica a h2.title-benvenuti / h3.subtitle-perche.
   Richiesta esplicita di Federico: "SHIZEN per l'hotellerie" (il
   nostro eyebrow) deve avere la stessa dimensione di "Scegli la
   migliore versione di te" (h3.subtitle-perche in homepage). */
.lp-scale-media{
	font-size:28px;
}
@media (min-width:421px) and (max-width:550px){ .lp-scale-media{ font-size:6.5vw; } }
@media (min-width:551px) and (max-width:766.9px){ .lp-scale-media{ font-size:5.5vw; } }
@media (min-width:767px) and (max-width:899.9px){ .lp-scale-media{ font-size:4vw; } }
@media (min-width:900px) and (max-width:1099.9px){ .lp-scale-media{ font-size:2.5vw; } }
@media (min-width:1100px) and (max-width:1400px){ .lp-scale-media{ font-size:2.5vw; } }
@media (min-width:1401px){ .lp-scale-media{ font-size:2.3vw; } }

/* Scala "testo": identica a p.text-card-chisei.
   Richiesta esplicita di Federico: il corpo del testo (es. "Lenzuola
   e teli certificati Bioagricert...") deve avere la stessa dimensione
   di "Una morbidezza che stupisce di giorno in giorno." */
.lp-scale-testo{
	font-size:20px;
}
@media (min-width:421px) and (max-width:550px){ .lp-scale-testo{ font-size:3.6vw; } }
@media (min-width:551px) and (max-width:766.9px){ .lp-scale-testo{ font-size:3vw; } }
@media (min-width:767px) and (max-width:899.9px){ .lp-scale-testo{ font-size:2vw; } }
@media (min-width:900px) and (max-width:1099.9px){ .lp-scale-testo{ font-size:1.5vw; } }
@media (min-width:1100px) and (max-width:1400px){ .lp-scale-testo{ font-size:1.4vw; } }
@media (min-width:1401px){ .lp-scale-testo{ font-size:1.05vw; } }

/* ---------------------------------------------------------------- */
/*  HERO                                                             */
/* ---------------------------------------------------------------- */
.lp-hero{
	background-color:#F7F0E9;
	text-align:center;
}
.lp-eyebrow{
	letter-spacing:0.1em;
	color:#AC9586;
	font-weight:bold;
	text-transform:uppercase;
	margin-bottom:1.5vw;
}
.lp-hero-title{
	line-height:1.25;
	color:#AC9586;
	font-weight:bold;
	margin-bottom:2vw;
}
.lp-hero-subtitle{
	line-height:1.6;
	color:#505050;
	max-width:640px;
	margin:0 auto 4vw;
}

/* Bottone CTA landing: stessi valori (colori, font-size, padding) di
   button.btn-brown in custom-home.css, con classe propria .lp-btn
   per restare indipendente da custom-home.css. Angoli stondati 8px
   coerenti con la modifica gia applicata sitewide a tutti i bottoni. */
.lp-btn{
	display:inline-block;
	background-color:#AC9586;
	color:#fff !important;
	font-family:'Raleway', sans-serif;
	font-weight:bold;
	text-decoration:none;
	border:1px solid #AC9586;
	border-radius:8px;
	padding:10px 20px;
	font-size:15px;
	cursor:pointer;
}
.lp-btn:hover{
	background-color:transparent;
	color:#AC9586 !important;
}
@media (min-width:1401px){
	.lp-btn{
		font-size:20px;
		padding:15px 35px;
	}
}

/* ---------------------------------------------------------------- */
/*  VANTAGGI (griglia di card, come .chisei-shizen in homepage)      */
/* ---------------------------------------------------------------- */
.lp-vantaggi{
	background-color:#fff;
}
.lp-vantaggi-title{
	color:#AC9586;
	font-weight:bold;
	text-align:center;
	margin-bottom:6vw;
}
.lp-grid-vantaggi{
	display:grid;
	grid-template-columns:1fr;
	gap:8vw;
}
.lp-card-vantaggio{
	text-align:center;
}
.lp-icon-vantaggio{
	width:12vw;
	height:12vw;
	border-radius:50%;
	background-color:#AC9586;
	margin:0 auto 4vw;
}
.lp-title-vantaggio{
	color:#AC9586;
	font-weight:bold;
	margin-bottom:1.5vw;
}
.lp-text-vantaggio{
	color:#505050;
	line-height:1.6;
}

/* ---------------------------------------------------------------- */
/*  COME FUNZIONA (step numerati)                                    */
/* ---------------------------------------------------------------- */
.lp-come-funziona{
	background-color:#F1F1F1;
}
.lp-come-funziona-title{
	color:#AC9586;
	font-weight:bold;
	text-align:center;
	margin-bottom:6vw;
}
.lp-grid-step{
	display:grid;
	grid-template-columns:1fr;
	gap:6vw;
}
.lp-step-number{
	color:#AC9586;
	font-weight:bold;
	margin-bottom:1vw;
}
.lp-step-title{
	color:#AC9586;
	font-weight:bold;
	margin-bottom:1vw;
}
.lp-step-text{
	color:#505050;
	line-height:1.6;
}

/* ---------------------------------------------------------------- */
/*  CTA FINALE                                                       */
/*  Stesso schema colori di .chisei-shizen in homepage (sfondo       */
/*  #AC9586 con testo #EDE6D9), invece del nero inventato nella      */
/*  prima versione: cosi il contrasto finale resta dentro alla       */
/*  palette reale del sito.                                          */
/* ---------------------------------------------------------------- */
.lp-cta-finale{
	background-color:#AC9586;
	text-align:center;
}
.lp-cta-finale-title{
	color:#EDE6D9;
	font-weight:bold;
	margin-bottom:1.5vw;
}
.lp-cta-finale-text{
	color:#EDE6D9;
}

/* ---------------------------------------------------------------- */
/*  BREAKPOINT DESKTOP PER LAYOUT (griglie, padding sezioni)         */
/*  Le dimensioni testo sono gia gestite dalle classi lp-scale-*     */
/*  sopra; qui resta solo cio' che riguarda il layout (colonne,      */
/*  padding), coerente con l'approccio mobile-first del resto del    */
/*  tema.                                                            */
/* ---------------------------------------------------------------- */
@media (min-width:768px){
	.lp-page section{
		padding:5vw 10vw;
	}
	.lp-grid-vantaggi, .lp-grid-step{
		grid-template-columns:repeat(3, 1fr);
		gap:3vw;
	}
	.lp-icon-vantaggio{
		width:4vw;
		height:4vw;
	}
}