/* =========================================================================
   Pagine interne (verticali, casi studio, portfolio, calcolatore, legali).
   Classi id-* da usare nel campo "Classe CSS aggiuntiva" dei blocchi.
   ========================================================================= */

/* ---------- Layout sezioni ---------- */
.id-section {
	position: relative;
	padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 40px) !important;
	margin: 0 !important;
}
.id-section > * { max-width: 1180px; margin-left: auto !important; margin-right: auto !important; }
.id-section > .id-narrow, .id-narrow { max-width: 820px; }
.id-section--hero { padding-top: calc(88px + clamp(48px, 8vw, 110px)) !important; }
.id-section--tight { padding-top: 32px !important; padding-bottom: 32px !important; }
.id-section + .id-section { border-top: 1px solid rgba(255, 255, 255, .04); }
.id-center { text-align: center; }
.id-center > * { margin-left: auto !important; margin-right: auto !important; }
.id-center .wp-block-buttons { justify-content: center; }
.id-section .wp-block-columns.id-cols { gap: 18px; margin-top: 40px; align-items: stretch; }
.id-section .wp-block-columns.id-cols > .wp-block-column { display: flex; flex-direction: column; }
.id-section .wp-block-columns.id-cols > .wp-block-column > .id-card { flex: 1; }

/* ---------- Tipografia ---------- */
.id-h1, body.id-theme h1.id-h1 {
	font-size: clamp(2.7rem, 7.2vw, 5.8rem) !important;
	line-height: .98 !important;
	font-weight: 900 !important;
	letter-spacing: -0.05em !important;
	margin-top: 22px !important; margin-bottom: 0 !important;
	max-width: 960px;
}
.id-h2, body.id-theme h2.id-h2 {
	font-size: clamp(2.2rem, 5.4vw, 4.6rem) !important;
	line-height: 1 !important;
	font-weight: 850 !important;
	letter-spacing: -0.045em !important;
	margin-top: 18px !important; margin-bottom: 0 !important;
	max-width: 980px;
}
.id-title-xl { font-size: clamp(3rem, 9vw, 7rem) !important; line-height: .95 !important; font-weight: 900 !important; letter-spacing: -0.055em !important; }
.id-h3, body.id-theme h3.id-h3 { font-size: clamp(1.4rem, 2.4vw, 2rem) !important; line-height: 1.08 !important; font-weight: 850 !important; margin: 0 0 12px !important; }
.id-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 0 14px !important;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: rgba(255, 255, 255, .05);
	color: rgba(255, 255, 255, .82) !important;
	font-size: .74rem !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 0 !important; margin-bottom: 0 !important;
	width: auto !important;
}
.id-eyebrow::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 5px rgba(46, 210, 122, .14);
}
.id-center .id-eyebrow, .id-section > .id-eyebrow { display: flex !important; width: fit-content !important; }
.id-lead {
	margin-top: 26px !important; margin-bottom: 0 !important;
	max-width: 680px;
	color: var(--fg-2) !important;
	font-size: clamp(1.02rem, 1.6vw, 1.24rem) !important;
	font-weight: 500;
	line-height: 1.55 !important;
}
.id-copy { margin-top: 18px !important; color: var(--fg-2) !important; font-size: 1.06rem !important; line-height: 1.6 !important; max-width: 720px; }
.id-muted { color: var(--fg-3) !important; }
.id-small { font-size: .85rem !important; }
.id-quote {
	border-left: 3px solid var(--id-magenta);
	padding: 6px 0 6px 18px !important;
	color: #fff !important;
	font-style: italic;
	font-size: 1.1rem !important;
}

/* ---------- Card glass ---------- */
.id-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line-1);
	border-radius: var(--r-xl);
	padding: clamp(22px, 3vw, 32px) !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.id-card > *:first-child { margin-top: 0 !important; }
.id-card p { color: var(--fg-2); line-height: 1.58; }
.id-card--accent::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--id-rainbow);
}
.id-card--green {
	border-color: rgba(46, 210, 122, .28);
	background: linear-gradient(135deg, rgba(46, 210, 122, .09), rgba(255, 255, 255, .04));
}
.id-card .wp-block-buttons { margin-top: auto; padding-top: 22px; }
.id-dashboard { border-color: rgba(255, 255, 255, .18); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045)); }

/* Numero grande (es. "1h cabina vuota") */
.id-bignum {
	display: inline-grid !important;
	place-items: center;
	min-width: 150px; min-height: 150px;
	border-radius: var(--r-md);
	background: #fff;
	color: #050505 !important;
	font-size: 3rem !important;
	line-height: .95 !important;
	font-weight: 950 !important;
	text-align: center;
	padding: 18px !important;
	margin: 0 0 20px !important;
}
.id-bignum small { display: block; color: rgba(5, 5, 5, .56); font-size: .76rem; font-weight: 850; text-transform: uppercase; margin-top: 8px; letter-spacing: .04em; }

/* ---------- Metriche ---------- */
.id-metrics {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 22px !important;
}
.id-metrics.id-metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.id-metric {
	border: 1px solid var(--line-1);
	border-radius: var(--r-md);
	padding: 16px !important;
	background: rgba(0, 0, 0, .25);
	margin: 0 !important;
}
.id-metric p { margin: 0 !important; }
.id-metric__value { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; line-height: 1 !important; font-weight: 900 !important; color: #fff !important; letter-spacing: -0.03em; }
.id-metric__label { margin-top: 8px !important; color: var(--fg-3) !important; font-size: .8rem !important; line-height: 1.3 !important; }
.id-metric__change { margin-top: 6px !important; color: var(--success) !important; font-size: .8rem !important; font-weight: 800; }
.id-metric--big .id-metric__value { font-size: clamp(2.4rem, 5vw, 3.8rem) !important; }
@media (max-width: 781px) {
	.id-metrics.id-metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Elenco con spunte ---------- */
ul.id-check { list-style: none !important; padding: 0 !important; margin: 22px 0 0 !important; display: grid; gap: 12px; }
ul.id-check li { position: relative; padding-left: 30px; color: rgba(255, 255, 255, .8); line-height: 1.45; font-size: 1rem; }
ul.id-check li::before {
	content: "";
	position: absolute; left: 0; top: 2px;
	width: 20px; height: 20px; border-radius: 50%;
	background: rgba(46, 210, 122, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ED27A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Step numerati ---------- */
.wp-block-columns.id-steps { counter-reset: idstep; gap: 14px; margin-top: 40px; }
.wp-block-columns.id-steps > .wp-block-column {
	counter-increment: idstep;
	border: 1px solid var(--line-1);
	border-radius: var(--r-xl);
	padding: 24px !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}
.wp-block-columns.id-steps > .wp-block-column::before {
	content: "0" counter(idstep);
	display: inline-grid; place-items: center;
	width: 36px; height: 36px; border-radius: 12px;
	margin-bottom: 24px;
	background: var(--id-rainbow);
	font-size: .78rem; font-weight: 900; color: #fff;
}
.wp-block-columns.id-steps h3 { font-size: 1.2rem !important; font-weight: 850 !important; margin: 0 0 10px !important; }
.wp-block-columns.id-steps p { color: var(--fg-2); font-size: .96rem; line-height: 1.5; margin: 0; }
.wp-block-columns.id-steps .id-small { color: var(--fg-3) !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 8px !important; }

/* ---------- Chip / loghi ---------- */
.id-chips { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 20px !important; }
.id-chips > p, .id-chip {
	border: 1px solid var(--line-1);
	border-radius: 999px;
	padding: 8px 13px !important;
	background: rgba(255, 255, 255, .055);
	color: rgba(255, 255, 255, .8) !important;
	font-size: .86rem !important;
	font-weight: 700;
	margin: 0 !important;
}
/* ---------- Tabella confronto ---------- */
.wp-block-table.id-compare { margin-top: 40px !important; overflow-x: auto; }
.wp-block-table.id-compare table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line-1);
	border-radius: var(--r-xl);
	overflow: hidden;
	background: rgba(255, 255, 255, .03);
}
.wp-block-table.id-compare th, .wp-block-table.id-compare td {
	border: 0 !important;
	border-bottom: 1px solid var(--line-1) !important;
	padding: 18px 20px !important;
	text-align: left;
	vertical-align: top;
	color: var(--fg-2);
	font-size: .98rem;
}
.wp-block-table.id-compare thead th { color: #fff; font-weight: 800; font-size: 1rem; background: rgba(255, 255, 255, .04); }
.wp-block-table.id-compare td:first-child { color: #fff; font-weight: 700; }
.wp-block-table.id-compare td:last-child, .wp-block-table.id-compare th:last-child { background: rgba(106, 55, 235, .12); color: #fff; }
.wp-block-table.id-compare tr:last-child td { border-bottom: 0 !important; }

/* ---------- CTA finale ---------- */
.id-section--cta .id-card {
	text-align: center;
	padding: clamp(36px, 6vw, 72px) !important;
	background:
		linear-gradient(135deg, rgba(2, 168, 246, .16), transparent 34%),
		linear-gradient(315deg, rgba(252, 146, 2, .16), transparent 38%),
		linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
}
.id-section--cta .id-card > * { margin-left: auto !important; margin-right: auto !important; }
.id-section--cta .wp-block-buttons { justify-content: center; }

/* ---------- Immagini ---------- */
.id-mascotte img { max-width: 340px; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(106, 55, 235, .45)); }
.id-photo img { border-radius: var(--r-xl); border: 1px solid var(--line-2); }
.id-shot img { border-radius: var(--r-md); border: 1px solid var(--line-1); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }

.id-calc { padding: 0 !important; }
.id-calc .container { max-width: 1180px; margin: 0 auto; }

/* ---------- Pagine legali / articoli ---------- */
.id-legal { max-width: 820px; margin: 0 auto !important; }
.id-legal h2 { font-size: 1.5rem !important; font-weight: 800 !important; margin: 44px 0 14px !important; }
.id-legal h3 { font-size: 1.15rem !important; font-weight: 750 !important; margin: 28px 0 10px !important; }
.id-legal p, .id-legal li { color: var(--fg-2); line-height: 1.7; font-size: 1rem; }
.id-legal ul, .id-legal ol { padding-left: 1.3em; }
.id-legal strong { color: #fff; }
.id-legal .wp-block-table table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.id-legal .wp-block-table td, .id-legal .wp-block-table th { border: 1px solid var(--line-2) !important; padding: 10px 12px; color: var(--fg-2); }
.id-legal .wp-block-table th { color: #fff; background: rgba(255, 255, 255, .05); }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.id-section { padding-left: 16px !important; padding-right: 16px !important; }
	.wp-block-table.id-compare th, .wp-block-table.id-compare td { padding: 12px !important; font-size: .86rem; }
}

/* ---------- Aggiunte ---------- */
.id-metrics.id-metrics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.id-metrics.id-metrics--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 781px) { .id-metrics.id-metrics--3, .id-metrics.id-metrics--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.id-bignum--emoji { min-width: 64px !important; min-height: 64px !important; font-size: 1.8rem !important; background: rgba(255, 255, 255, .08) !important; }
.id-center .id-card, .id-center .wp-block-details, .id-center .wp-block-table, .id-center .id-steps { text-align: left; }
.id-center .id-card .wp-block-buttons { justify-content: flex-start; }
.id-section--cta .id-card { text-align: center !important; }
.id-section--cta .id-card .wp-block-buttons { justify-content: center !important; }
.id-section .wp-block-columns.id-cols.id-hero-cols { align-items: center; margin-top: 0; }
.id-hero-cols .wp-block-column:last-child { align-items: center; }
.id-section > .id-legal { max-width: 820px; }
.id-card .id-metrics .id-metric__value { font-size: 1.5rem !important; }
.id-card .id-metric--big .id-metric__value, .id-metrics--4 .id-metric--big .id-metric__value { font-size: clamp(2rem, 4vw, 3.2rem) !important; }

/* Eyebrow: centrato nelle sezioni centrate, allineato al contenuto nelle altre */
.id-center > .id-eyebrow, .id-section--cta .id-card > .id-eyebrow { margin-left: auto !important; margin-right: auto !important; }
.id-section:not(.id-center) > .id-eyebrow { margin-left: max(0px, calc((100% - 1180px) / 2)) !important; }
mark.id-rainbow { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.id-theme .menu li.current-menu-item > a { color: #fff !important; }
.id-center > .id-h1, .id-center > .id-h2, .id-center > .id-copy, .id-center > .id-lead, .id-center > .wp-block-heading, .id-center > p,
.id-section--cta .id-card > .id-h2, .id-section--cta .id-card > .id-lead, .id-section--cta .id-card > p {
	margin-left: auto !important; margin-right: auto !important; text-align: center !important;
}
.id-section:not(.id-center) > .id-h1, .id-section:not(.id-center) > .id-h2, .id-section:not(.id-center) > .id-copy, .id-section:not(.id-center) > .id-lead {
	margin-left: max(0px, calc((100% - 1180px) / 2)) !important;
}
.id-metrics--5 .id-metric__value { font-size: 1.05rem !important; line-height: 1.25 !important; letter-spacing: -0.01em; }
.id-section > .id-legal { margin-left: max(0px, calc((100% - 1180px) / 2)) !important; margin-top: 32px !important; }