/* ==========================================================================
   BlancOne Click+ — foglio di stile principale
   ==========================================================================

   COME È ORGANIZZATO
   Ogni blocco della pagina ha una sezione numerata che contiene TUTTO il suo
   stile: prima le regole desktop, subito sotto le varianti tablet e mobile.
   Per saltare a una sezione cerca il suo codice (es. "§06").

   INDICE
   §01  Font locali ................ @font-face
   §02  Design token ............... colori, font, scala tipografica, spazi  ← parti da qui
   §03  Base ....................... reset ed elementi HTML
   §04  Elementi condivisi ......... .prose  .section-title  .btn
   §05  Header ..................... .site-header
   §06  Hero ....................... .hero
   §07  Vantaggi ................... .benefits  .check-list
   §08  Contenuto principale ....... .content
   §09  Caratteristiche ............ .features  .feature
   §10  Divisore e video ........... .divider  .video
   §11  Prova in studio ............ .product-cta
   §12  Confezioni ................. .packages  .package
   §13  CTA finale ................. .cta
   §14  Footer ..................... .site-footer

   CONVENZIONI
   - Classi in stile BEM: .blocco, .blocco__elemento, .blocco--variante.
     Le classi servono solo allo stile; il JavaScript usa id e attributi data-*.
   - Le regole base sono per desktop. Le varianti usano due breakpoint:
       @media (max-width: 1024px)  → tablet
       @media (max-width: 767px)   → mobile
     I media query non accettano var(): per cambiare un breakpoint cerca
     "1024px" o "767px" in questo file e in css/cookie-banner.css.
   - Alcuni valori insoliti (es. 6px, calc(.9rem - 12px)) servono a replicare
     al pixel la pagina originale: sono spiegati nel commento accanto.
   - Banner e modale cookie hanno un file a parte: css/cookie-banner.css.
   ========================================================================== */


/* ==========================================================================
   §01  FONT LOCALI
   File in /fonts. Jost è un font variabile: un solo file per alfabeto copre
   tutti i pesi (100–900). Barlow è caricato solo nei pesi usati (700, 800).
   Ogni famiglia ha due file: "latin" (testo normale) e "latin-ext" (accenti
   dell'Europa centro-orientale), scelti dal browser tramite unicode-range.
   ========================================================================== */

/* Jost — latin-ext */
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-92zatbhpnqw73ord4iyl.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost — latin */
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-92zatbhpnqw73otd4g.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow 700 — latin-ext */
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-7chqv4kjgogqm7e3t-4s6vospt4.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Barlow 700 — latin */
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-7chqv4kjgogqm7e3t-4s51os.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow 800 — latin-ext */
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/barlow-7chqv4kjgogqm7e3q-0s6vospt4.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Barlow 800 — latin */
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/barlow-7chqv4kjgogqm7e3q-0s51os.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font Awesome 5 (solid): serve solo per l'icona "check" della lista in §07 */
@font-face {
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../fonts/fa-solid-900.woff2") format("woff2");
}


/* ==========================================================================
   §02  DESIGN TOKEN
   Unico punto in cui cambiare colori, font, dimensioni del testo e spazi:
   le sezioni sotto usano solo queste variabili. Accanto a ogni token è
   indicato dove viene usato.
   ========================================================================== */

:root {
	/* --- Colori (palette del brand) --- */
	--color-navy: #152B7F;         /* testi e titoli, fondo header e footer, fine gradiente hero */
	--color-cyan: #009FE3;         /* icone check, divisore, bordo footer, inizio gradiente hero */
	--color-link: #008CDC;         /* link nel footer */
	--color-link-hover: #008CDC99; /* link al passaggio del mouse (60% di opacità) */
	--color-orange: #EE7D00;       /* bottoni "ask for a free demonstration" */
	--color-white: #FFFFFF;        /* testi su fondo scuro */
	--color-light: #F8F8F8;        /* fondo delle sezioni grigie */
	--color-body: #333333;         /* colore di default del testo non stilizzato */

	/* --- Famiglie di font --- */
	--font-heading: "Barlow", sans-serif; /* titoli e bottoni, sempre in 700/800 */
	--font-text: "Jost", sans-serif;      /* paragrafi, liste, didascalie */
	--font-icon: "Font Awesome 5 Free";   /* solo icona check */
	--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	/* --- Scala tipografica (dimensioni del testo) --- */
	--text-display: 48px; /* titolo hero */
	--text-xl: 32px;      /* sottotitolo hero, titoli "Try it directly in your office" */
	--text-lg: 28px;      /* paragrafo statistico (.prose--large) */
	--text-md: 24px;      /* lista vantaggi, titoli caratteristiche e confezioni */
	--text-base: 20px;    /* testo corrente, bottoni, descrizioni confezioni, footer */
	--text-sm: 16px;      /* descrizioni delle caratteristiche */

	/* --- Spaziature --- */
	--space-2xs: 10px;
	--space-xs: 20px;     /* gap standard tra elementi vicini */
	--space-s: 40px;      /* gap tra i blocchi della colonna centrale */
	--space-m: 80px;      /* padding verticale delle sezioni (desktop) */
	--space-l: 120px;     /* padding del footer */

	/* --- Layout --- */
	--width-narrow: 600px;        /* colonna centrale di testo (§08, §13) */
	--width-wide: 1200px;         /* contenitore di hero e footer (§06, §14) */
	--section-min-height: 480px;  /* altezza minima di hero e vantaggi */

	/* --- Forme e movimento --- */
	--radius-pill: 40px;  /* bottoni arrotondati */
	--duration: .3s;      /* durata standard delle transizioni */
	--scale-grow: 1.1;    /* ingrandimento dei bottoni al passaggio del mouse */
}


/* ==========================================================================
   §03  BASE
   Reset minimo (dal tema WordPress "Hello Elementor" dell'originale).
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--color-white);
	color: var(--color-body);
	font-family: var(--font-system);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Tutte le immagini della pagina sono blocchi fluidi */
img {
	display: block;
	max-width: 100%;
	height: auto;
	border-style: none;
}

h1,
h2,
h3,
figure {
	margin: 0;
}

p {
	margin: 0 0 .9rem;
}

strong {
	font-weight: bolder;
}

/* ® e + in apice senza alterare l'interlinea */
sup {
	position: relative;
	top: -.5em;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

a {
	color: var(--color-link);
	text-decoration: none;
}

a:hover,
a:active {
	color: var(--color-link-hover);
}


/* ==========================================================================
   §04  ELEMENTI CONDIVISI
   Componenti riutilizzati in più sezioni.
   ========================================================================== */

/* --- Testo corrente: blocchi di paragrafi ed elenchi puntati --- */
.prose {
	color: var(--color-navy);
	font-family: var(--font-text);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 28px;
}

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

.prose ul {
	margin: 0;
	padding-left: 40px;
}

/* nessun margine dopo l'ultimo elemento: lo spazio lo gestisce il contenitore */
.prose > :last-child {
	margin-bottom: 0;
}

/* Variante più grande, usata per il paragrafo con le statistiche */
.prose--large {
	font-size: var(--text-lg);
	line-height: 32px;
}

/* --- Titolo di sezione centrato (es. "Try it directly in your office") --- */
.section-title {
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 800;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

/* --- Bottone CTA arancione con effetto "grow" al passaggio del mouse ---
   .btn-wrap centra il bottone; su mobile il testo va a capo da solo. */
.btn-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

.btn {
	display: inline-block;
	padding: 20px 60px;
	border-radius: var(--radius-pill);
	background-color: var(--color-orange);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	transition: all var(--duration);
}

.btn:hover,
.btn:focus,
.btn:active {
	color: var(--color-white);
	transform: scale(var(--scale-grow));
}


/* ==========================================================================
   §05  HEADER
   Fascia blu con il logo centrato.
   ========================================================================== */

.site-header {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	padding: var(--space-xs);
	background-color: var(--color-navy);
}

.site-header__logo {
	width: 180px;
}


/* ==========================================================================
   §06  HERO
   Gradiente azzurro → blu. Due colonne affiancate su desktop (testo |
   immagine prodotto), una sotto l'altra da tablet in giù.
   L'immagine prodotto è uno sfondo CSS: per cambiarla modifica url() qui.
   ========================================================================== */

.hero {
	display: flex;
	min-height: var(--section-min-height);
	padding: var(--space-m);
	background-image: linear-gradient(180deg, var(--color-cyan) 0%, var(--color-navy) 100%);
}

.hero__inner {
	display: flex;
	gap: var(--space-m);
	width: 100%;
	max-width: var(--width-wide);
	margin: 0 auto;
}

.hero__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-xs);
	min-width: 0;
}

.hero__logo {
	width: 240px;
}

.hero__title {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--text-display);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.hero__subtitle {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-text);
	font-size: var(--text-xl);
	font-weight: 400;
	line-height: 1;
}

.hero__media {
	flex: 1 1 0;
	min-width: 0;
	background: url("../img/prodotto-click-.webp") center center / cover no-repeat;
}

@media (max-width: 1024px) {
	.hero__inner {
		flex-direction: column;
		gap: var(--space-s);
	}

	.hero__text,
	.hero__media {
		flex: none;
	}

	.hero__media {
		min-height: 400px;
	}
}

@media (max-width: 767px) {
	.hero {
		padding: var(--space-s) var(--space-xs);
	}

	.hero__media {
		min-height: 200px;
	}
}


/* ==========================================================================
   §07  VANTAGGI
   Due metà affiancate: foto (sfondo CSS) | lista con icone check.
   Su mobile la foto va sopra la lista.
   ========================================================================== */

.benefits {
	display: flex;
	min-height: var(--section-min-height);
}

.benefits__photo,
.benefits__body {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--space-m);
}

.benefits__photo {
	background: url("../img/happy-woman-taking-selfie-bed-morning-copia-scaled.webp") center right / cover no-repeat;
}

.benefits__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--color-light);
}

/* --- Lista con icona check (Font Awesome, carattere \f00c) --- */
.check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.check-list__item {
	display: flex;
	align-items: center;
}

/* 10px sotto ogni voce + 10px sopra la successiva = 20px tra le voci */
.check-list__item:not(:last-child) {
	padding-bottom: calc(var(--space-xs) / 2);
}

.check-list__item:not(:first-child) {
	margin-top: calc(var(--space-xs) / 2);
}

.check-list__icon {
	display: flex;
}

.check-list__icon::before {
	content: "\f00c";
	display: inline-block;
	width: 1.25em; /* 50px: l'icona da 40px più un piccolo margine a destra */
	color: var(--color-cyan);
	font-family: var(--font-icon);
	font-size: 40px;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
}

.check-list__text {
	align-self: center;
	padding-left: 5px;
	color: var(--color-navy);
	font-family: var(--font-text);
	font-size: var(--text-md);
	font-weight: 600;
	line-height: 24px;
}

@media (max-width: 1024px) {
	.benefits__photo,
	.benefits__body {
		padding: var(--space-s);
	}

	.check-list__text {
		font-size: var(--text-base);
	}
}

@media (max-width: 767px) {
	.benefits {
		flex-direction: column;
	}

	.benefits__photo,
	.benefits__body {
		flex: none;
	}

	.benefits__photo {
		min-height: 200px;
	}

	.benefits__body {
		padding: var(--space-s) var(--space-xs);
	}
}


/* ==========================================================================
   §08  CONTENUTO PRINCIPALE
   Colonna centrale da 600px. Tutti i blocchi al suo interno (testi, bottone,
   immagini, §09–§12) sono distanziati automaticamente di 40px dal "gap":
   per aggiungere un blocco basta inserirlo nell'HTML, senza margini.
   ========================================================================== */

.content {
	padding: var(--space-m);
}

.content__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	max-width: var(--width-narrow);
	margin: 0 auto;
}

.content__image {
	width: 100%;
}

/* Logo "BlancOne Click" sopra le confezioni */
.content__logo {
	width: 240px;
	margin-top: var(--space-m); /* sostituisce lo spacer dell'originale: 40px di gap + 80px = 120px dal blocco sopra */
}

@media (max-width: 767px) {
	.content {
		padding: var(--space-s) var(--space-xs);
	}
}


/* ==========================================================================
   §09  CARATTERISTICHE
   Elenco icona + titolo + descrizione. Icona a sinistra su desktop/tablet,
   centrata sopra il testo su mobile.
   ========================================================================== */

.features {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.feature {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.feature__icon {
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
}

.feature__body {
	flex-grow: 1;
	width: 100%;
}

.feature__title {
	margin-top: .5rem;
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-size: var(--text-md);
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

.feature__text {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-text);
	font-size: var(--text-sm);
	font-weight: 400;
	line-height: 20px;
}

@media (max-width: 767px) {
	.features {
		gap: var(--space-s);
	}

	.feature {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xs);
		text-align: center;
	}

	.feature__icon {
		align-self: center;
	}

	.feature__title {
		margin-bottom: 5px;
		line-height: 24px;
	}
}


/* ==========================================================================
   §10  DIVISORE E VIDEO
   Il video mostra un'anteprima statica (poster + titolo + play in stile
   YouTube); il player vero viene caricato al click da js/video.js.
   ========================================================================== */

/* Linea azzurra da 1px con 1px di respiro sopra e sotto (3px in totale) */
.divider {
	height: 0;
	margin: 1px 0;
	border: 0;
	border-top: 1px solid var(--color-cyan);
}

/* Riquadro 16:9; contiene prima l'anteprima, poi l'iframe del player */
.video {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	background-color: #000;
}

.video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* L'anteprima è un unico <button> che copre tutto il riquadro */
.video__facade {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
}

/* sfumatura scura in alto, sotto il titolo */
.video__facade::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 60px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video__title {
	position: absolute;
	top: 12px;
	right: 16px;
	left: 16px;
	overflow: hidden;
	color: #fff;
	font-family: Roboto, Arial, sans-serif;
	font-size: 18px;
	line-height: 24px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 0 0 2px rgba(0, 0, 0, .5);
}

/* Pulsante play: grigio semitrasparente, rosso YouTube al passaggio del mouse */
.video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
}

.video__play-bg {
	fill: #212121;
	fill-opacity: .8;
	transition: fill .1s cubic-bezier(.4, 0, 1, 1), fill-opacity .1s cubic-bezier(.4, 0, 1, 1);
}

.video__facade:hover .video__play-bg,
.video__facade:focus-visible .video__play-bg {
	fill: #f00;
	fill-opacity: 1;
}


/* ==========================================================================
   §11  PROVA IN STUDIO
   Immagine prodotto + titolo + bottone, centrati.
   ========================================================================== */

.product-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-m); /* sostituisce lo spacer dell'originale: 40px di gap + 80px = 120px dal video */
}

.product-cta__image {
	width: 100%;
}


/* ==========================================================================
   §12  CONFEZIONI
   Righe immagine | testo su desktop/tablet; immagine sopra il testo su mobile.
   ========================================================================== */

.packages__title {
	margin-bottom: var(--space-xs);
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-size: var(--text-md);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.package {
	display: flex;
	align-items: center;
	text-align: start;
}

.package + .package {
	margin-top: 1px;
}

/* width 50% + testo al 100%: restringendosi in proporzione l'immagine
   arriva a circa 193px su 600, come nell'originale */
.package__media {
	width: 50%;
	margin-right: var(--space-xs);
}

.package__media img {
	width: 100%;
}

.package__body {
	width: 100%;
}

.package__title {
	margin-top: .5rem;
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1.2;
}

.package__text {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-text);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 24px;
}

@media (max-width: 767px) {
	.package {
		display: block;
	}

	.package + .package {
		margin-top: var(--space-2xs);
	}

	/* immagine a tutta larghezza sopra al testo. I 6px replicano lo spazio
	   lasciato dall'originale; è un padding (non un margin) per non farlo
	   fondere con il margine superiore del titolo */
	.package__media {
		width: 100%;
		margin: 0;
		padding-bottom: 6px;
	}
}


/* ==========================================================================
   §13  CTA FINALE
   Fascia grigia con immagine, titolo e bottone centrati.
   ========================================================================== */

.cta {
	padding: var(--space-m);
	background-color: var(--color-light);
}

.cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	max-width: var(--width-narrow);
	margin: 0 auto;
}

.cta__image {
	width: 100%;
}

@media (max-width: 767px) {
	.cta {
		padding: var(--space-s) var(--space-xs);
	}
}


/* ==========================================================================
   §14  FOOTER
   Dati aziendali + logo, centrati su fondo blu.
   ========================================================================== */

.site-footer {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 80px;
	padding: var(--space-l);
	border-top: 1px solid var(--color-cyan);
	background-color: var(--color-navy);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	width: 100%;
	max-width: var(--width-wide);
	margin: 0 auto;
}

.site-footer__text {
	margin: 0 0 calc(.9rem - 12px); /* = 2.4px, come il margine netto dell'originale */
	color: var(--color-white);
	font-family: var(--font-text);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

.site-footer__logo {
	width: 280px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.site-footer {
		padding: 0;
	}

	.site-footer__inner {
		padding: var(--space-l) 60px;
	}
}