/**
 * YIC Design System — Componenti riutilizzabili.
 *
 * Linguaggio "Heritage Modern Institutional": superfici chiare, bordi sottili al
 * posto di ombre pesanti, bordeaux come unico accento interattivo, micro
 * animazioni conservative. Tutto basato sui design token (var(--yic-*)), quindi
 * segue colori/font del Pannello Tema e resta coerente tra tema e plugin.
 *
 * Convenzione classi: prefisso .yic-  (BEM: blocco__elemento--modificatore).
 * Componenti interattivi (accordion/tab/modale/alert) usano assets/js/components.js.
 *
 * INDICE
 *  1. Utility di layout (grid, section, divider, eyebrow)
 *  2. Section header
 *  3. Bottoni (varianti)
 *  4. Icone (cerchio)
 *  5. Card (+ varianti)
 *  6. Hero / Banner
 *  7. Badge / Pill
 *  8. CTA banner
 *  9. Stat / KPI
 * 10. Timeline
 * (form, tabelle, alert, box, download, skeleton, spinner, tooltip,
 *  accordion, tab, modale, pagination: sezioni successive nello stesso file)
 */

/* =============================================================
 * 1. Utility di layout
 * ============================================================= */
.yic-section {
	padding-block: var(--yic-space-xl);
}
.yic-section--tight {
	padding-block: var(--yic-space-lg);
}
.yic-section--alt {
	background: var(--yic-surface-container-low);
}
.yic-section--dark {
	background: var(--yic-tertiary-container);
	color: var(--yic-on-tertiary-container);
}

.yic-grid {
	display: grid;
	gap: var(--yic-space-lg);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.yic-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.yic-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.yic-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.yic-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.yic-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.yic-divider {
	border: 0;
	border-top: 1px solid var(--yic-outline-variant);
	margin-block: var(--yic-space-lg);
}

.yic-eyebrow {
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-label-md);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--yic-primary-container);
}

/* =============================================================
 * 2. Section header
 * ============================================================= */
.yic-section-header {
	margin-bottom: var(--yic-space-xl);
}
.yic-section-header--center {
	text-align: center;
}
.yic-section-header__title {
	font-family: var(--yic-font-headline);
	font-size: var(--yic-text-headline-lg);
	line-height: var(--yic-leading-heading);
	color: var(--yic-primary);
	margin: 0 0 var(--yic-space-sm);
}
.yic-section-header__sub {
	color: var(--yic-on-surface-variant);
	max-width: 42rem;
	margin: 0;
}
.yic-section-header--center .yic-section-header__sub {
	margin-inline: auto;
}
.yic-section-header__rule {
	height: 4px;
	width: 96px;
	background: var(--yic-primary);
	border-radius: var(--yic-radius-full);
	margin-top: var(--yic-space-md);
}
.yic-section-header--center .yic-section-header__rule {
	margin-inline: auto;
}
/* Variante con barra verticale a sinistra */
.yic-section-header--bar {
	border-left: 4px solid var(--yic-primary);
	padding-left: var(--yic-space-md);
}

/* =============================================================
 * 3. Bottoni (varianti che estendono .yic-btn di theme.css)
 * ============================================================= */
.yic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--yic-space-sm);
	line-height: 1.2;
	border: 1px solid transparent;
	/* background/transform ok; color/border/shadow in transition → non-composited. */
	transition: background 0.2s ease, transform 0.2s ease;
}
.yic-btn--secondary,
.yic-btn--outline {
	background: var(--yic-btn-outline-bg, transparent);
	color: var(--yic-btn-outline-fg, var(--yic-primary));
	border: var(--yic-btn-outline-border, 1px) solid var(--yic-btn-outline-fg, var(--yic-primary));
}
.yic-btn--secondary:hover,
.yic-btn--secondary:focus-visible,
.yic-btn--outline:hover,
.yic-btn--outline:focus-visible {
	background: var(--yic-btn-outline-bg-hover, rgb(var(--yic-primary-rgb) / 0.06));
	color: var(--yic-btn-outline-fg-hover, var(--yic-primary));
	border-color: var(--yic-btn-outline-fg-hover, var(--yic-primary));
}
.yic-btn--ghost {
	background: transparent;
	color: var(--yic-on-surface);
	border-color: var(--yic-outline-variant);
}
.yic-btn--ghost:hover,
.yic-btn--ghost:focus-visible {
	border-color: var(--yic-primary-container);
	color: var(--yic-primary);
}
/* Bottone su sfondo scuro / hero */
.yic-btn--on-dark {
	background: var(--yic-on-primary);
	color: var(--yic-primary-container);
	box-shadow: var(--yic-shadow-md);
}
.yic-btn--on-dark:hover,
.yic-btn--on-dark:focus-visible {
	background: var(--yic-primary-fixed);
}
/* Link con freccia */
.yic-btn--link {
	background: transparent;
	border: 0;
	padding-inline: 0;
	color: var(--yic-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.yic-btn--link:hover .yic-btn__arrow,
.yic-btn--link:focus-visible .yic-btn__arrow {
	transform: translateX(4px);
}
.yic-btn__arrow {
	transition: transform 0.2s ease;
}
/* Dimensioni */
.yic-btn--sm { padding: 6px 14px; font-size: var(--yic-text-caption); }
.yic-btn--lg { padding: 14px 28px; font-size: var(--yic-text-body-md); }
.yic-btn--block { display: flex; width: 100%; }

/* =============================================================
 * 4. Icone in cerchio
 * ============================================================= */
.yic-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--yic-radius-full);
	background: rgb(var(--yic-primary-rgb) / 0.06);
	color: var(--yic-primary);
	flex: 0 0 auto;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.yic-icon-circle--lg { width: 72px; height: 72px; }
.yic-icon-circle--outline {
	background: transparent;
	border: 1px solid var(--yic-outline-variant);
}
/* Hover se dentro un gruppo interattivo */
.yic-hover-group:hover .yic-icon-circle {
	background: var(--yic-primary);
	color: var(--yic-on-primary);
}

/* =============================================================
 * 5. Card
 * ============================================================= */
.yic-card {
	display: flex;
	flex-direction: column;
	background: var(--yic-card-bg, var(--yic-surface-container-lowest));
	border: 1px solid var(--yic-card-border, var(--yic-outline-variant));
	border-radius: var(--yic-card-radius, var(--yic-radius-lg));
	box-shadow: var(--yic-card-shadow, none);
	overflow: hidden;
}
.yic-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--yic-surface-variant);
}
.yic-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.yic-card__body {
	padding: var(--yic-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--yic-space-sm);
	flex: 1;
}
.yic-card__title {
	font-family: var(--yic-font-headline);
	font-size: var(--yic-text-headline-md);
	line-height: var(--yic-leading-heading);
	color: var(--yic-primary);
	margin: 0;
}
.yic-card__text {
	color: var(--yic-on-surface-variant);
	margin: 0;
}
.yic-card__footer {
	margin-top: auto;
	padding-top: var(--yic-space-sm);
}
/* Hover: sollevamento + ombra + zoom immagine */
.yic-card--hover {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.yic-card--hover:hover {
	transform: translateY(var(--yic-card-hover-lift, -4px));
	box-shadow: var(--yic-card-hover-shadow, var(--yic-shadow-lg));
	border-color: var(--yic-primary-container);
}
.yic-card--hover:hover .yic-card__media img {
	transform: scale(1.05);
}
/* Featured: bordo superiore accento */
.yic-card--featured {
	border-top: 4px solid var(--yic-primary-container);
}
/* Icona in evidenza */
.yic-card--icon .yic-card__body {
	align-items: flex-start;
}
/* Orizzontale (immagine a sinistra) */
@media (min-width: 768px) {
	.yic-card--horizontal {
		flex-direction: row;
	}
	.yic-card--horizontal .yic-card__media {
		aspect-ratio: auto;
		width: 42%;
		flex: 0 0 42%;
	}
}
/* Badge assoluto (es. "Più popolare") */
.yic-card__badge {
	position: absolute;
	top: var(--yic-space-md);
	left: var(--yic-space-md);
	z-index: 2;
}

/* =============================================================
 * 6. Hero / Banner
 * ============================================================= */
.yic-hero {
	position: relative;
	overflow: hidden;
	background: var(--yic-surface-container-low);
}
.yic-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(2.5rem, 6vw, 5rem);
}
.yic-hero__eyebrow {
	font-family: var(--yic-font-label);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--yic-primary-container);
	font-weight: 600;
	margin: 0 0 var(--yic-space-sm);
}
.yic-hero__title {
	font-family: var(--yic-font-headline);
	font-size: var(--yic-text-headline-xl);
	line-height: var(--yic-leading-tight);
	color: var(--yic-primary);
	margin: 0 0 var(--yic-space-md);
}
.yic-hero__text {
	font-size: var(--yic-text-body-lg);
	color: var(--yic-on-surface-variant);
	max-width: 40rem;
	margin: 0 0 var(--yic-space-lg);
}
.yic-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yic-space-md);
}
/* Split testo + immagine */
.yic-hero--split .yic-hero__inner {
	display: grid;
	gap: var(--yic-space-xl);
	align-items: center;
}
@media (min-width: 1024px) {
	.yic-hero--split .yic-hero__inner {
		grid-template-columns: 1fr 1fr;
	}
}
.yic-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--yic-radius-xl);
	box-shadow: var(--yic-shadow-lg);
	display: block;
}
/* Full-bleed con immagine di sfondo + overlay scuro */
.yic-hero--cover {
	color: var(--yic-on-primary);
}
.yic-hero--cover .yic-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
}
.yic-hero--cover .yic-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(var(--yic-on-surface-rgb) / 0.78), rgb(var(--yic-on-surface-rgb) / 0.30));
}
.yic-hero--cover .yic-hero__eyebrow { color: var(--yic-primary-fixed); }
.yic-hero--cover .yic-hero__title { color: var(--yic-on-primary); }
.yic-hero--cover .yic-hero__text { color: rgb(var(--yic-on-primary-rgb) / 0.9); }
/* Pill/badge glass nella hero */
.yic-hero__pill {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid rgb(var(--yic-on-primary-rgb) / 0.4);
	border-radius: var(--yic-radius-full);
	backdrop-filter: blur(6px);
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-label-md);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--yic-space-md);
}

/* =============================================================
 * 7. Badge / Pill
 * ============================================================= */
.yic-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: var(--yic-badge-radius, var(--yic-radius-full));
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
	background: var(--yic-surface-variant);
	color: var(--yic-on-surface);
}
.yic-badge--primary { background: var(--yic-primary-container); color: var(--yic-on-primary); }
.yic-badge--soft { background: rgb(var(--yic-primary-rgb) / 0.08); color: var(--yic-primary); }
.yic-badge--success { background: #e6f4ea; color: #15702e; }
.yic-badge--warning { background: #fff4e5; color: #9a5b00; }
.yic-badge--error { background: var(--yic-error-container); color: var(--yic-on-error-container); }
.yic-badge--outline { background: transparent; border: 1px solid var(--yic-outline-variant); color: var(--yic-on-surface-variant); }

/* =============================================================
 * 8. CTA banner (full-width) — impatto visivo + illustrazioni
 * ============================================================= */
.yic-cta-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--yic-ui-card-radius, var(--yic-card-radius, 24px));
	padding: clamp(2.25rem, 3.2vw, 3.5rem) clamp(1.75rem, 3.5vw, 3.25rem);
	min-height: 0;
	background: linear-gradient(
		125deg,
		var(--yic-primary-container, #ea580c) 0%,
		var(--yic-primary, #c2410c) 46%,
		color-mix(in srgb, var(--yic-primary, #c2410c) 72%, #000) 100%
	);
	color: var(--yic-on-primary, #fff);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	align-self: stretch;
	width: 100%;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	/* Niente box-shadow qui: con figli animati Lighthouse lo segnala come
	   animazione non composite; l'ombra era già molto soft. */
	box-shadow: none;
}
/* CTA con illustrazione: stessa altezza minima. */
.yic-cta-banner--visual {
	min-height: clamp(10.5rem, 9rem + 2.5vw, 12.5rem);
}
.yic-cta-banner__glow {
	/* Alone chiaro a sinistra: a destra sporcava il bottone bianco (sfumatura). */
	position: absolute;
	inset: -25% auto auto -15%;
	width: min(48%, 24rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, #fff 14%, transparent) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
	animation: yic-cta-glow 6s ease-in-out infinite;
}
.yic-cta-banner__glow::after {
	content: "";
	position: absolute;
	left: -55%;
	bottom: -70%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, #fff 10%, transparent) 0%, transparent 70%);
}
.yic-cta-banner__main {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2rem);
	flex: 1 1 22rem;
	min-width: 0;
}
.yic-cta-banner__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--yic-on-primary, #fff);
	line-height: 0;
}
.yic-cta-banner__illu {
	display: block;
	width: clamp(6.75rem, 5rem + 3.5vw, 9.5rem);
	height: auto;
	aspect-ratio: 1;
	overflow: visible;
	filter: drop-shadow(0 12px 24px color-mix(in srgb, #000 28%, transparent));
}

/*
 * CTA fotografica — stesso linguaggio del digispot:
 * card chiara, media arrotondato, copy scuro, bottone primary.
 */
.yic-cta-banner--photo {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 1.15rem;
	padding: 1.1rem;
	min-height: 0;
	overflow: hidden;
	background: var(--yic-surface-container-lowest, #fff);
	color: var(--yic-on-surface, #1a1c1c);
	border: 1px solid var(--yic-ui-card-border, var(--yic-surface-container-low, #f4f3f3));
	border-radius: 22px;
	box-shadow: none;
}
.yic-cta-banner--photo .yic-cta-banner__glow { display: none; }
.yic-cta-banner--photo .yic-cta-banner__media {
	position: relative;
	align-self: stretch;
	min-height: 0;
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	overflow: hidden;
	background: var(--yic-surface-container-low, #f4f3f3);
}
.yic-cta-banner--photo .yic-cta-banner__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.yic-cta-banner--photo:hover .yic-cta-banner__photo {
	transform: scale(1.03);
}
.yic-cta-banner--photo .yic-cta-banner__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .7rem;
	padding: 0;
	min-width: 0;
}
.yic-cta-banner--photo .yic-cta-banner__copy {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	min-width: 0;
}
.yic-cta-banner--photo .yic-cta-banner__label {
	margin: 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--yic-primary-container, #ea580c);
}
.yic-cta-banner--photo .yic-cta-banner__title {
	margin: 0;
	font-size: clamp(1.2rem, 4.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--yic-on-surface, #1a1c1c);
	text-wrap: balance;
}
.yic-cta-banner--photo .yic-cta-banner__text {
	margin: 0;
	max-width: 36rem;
	font-size: .98rem;
	line-height: 1.55;
	color: var(--yic-on-surface-variant, #584142);
}
.yic-cta-banner--photo .yic-cta-banner__actions {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	margin-top: .25rem;
}
.yic-cta-banner--photo .yic-cta-banner__actions .yic-btn {
	width: 100%;
	justify-content: center;
	min-height: 2.85rem;
}
@media (min-width: 601px) {
	.yic-cta-banner--photo {
		padding: 1.35rem;
		border-radius: 28px;
		gap: 1.35rem;
	}
	.yic-cta-banner--photo .yic-cta-banner__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.yic-cta-banner--photo .yic-cta-banner__actions .yic-btn {
		width: auto;
	}
}
@media (min-width: 801px) {
	.yic-cta-banner--photo {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(1.75rem, 3.5vw, 3rem);
		padding: clamp(1.35rem, 2.8vw, 2rem);
		border-radius: var(--yic-ui-card-radius, var(--yic-card-radius, 24px));
		min-height: 0;
	}
	.yic-cta-banner--photo .yic-cta-banner__media {
		min-height: 18rem;
		aspect-ratio: 4 / 3;
		height: 100%;
		border-radius: calc(var(--yic-ui-card-radius, 24px) - 10px);
	}
	.yic-cta-banner--photo .yic-cta-banner__body {
		padding: .35rem .25rem .35rem 0;
		gap: .85rem;
	}
	.yic-cta-banner--photo .yic-cta-banner__title {
		font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	}
}
@media (prefers-reduced-motion: reduce) {
	.yic-cta-banner--photo:hover .yic-cta-banner__photo {
		transform: none;
	}
}
.yic-cta-banner__ico .material-symbols-outlined {
	font-size: clamp(2.5rem, 3.5vw, 3.15rem);
	line-height: 1;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}
.yic-cta-banner__copy {
	min-width: 0;
	flex: 1 1 auto;
}
.yic-cta-banner__title {
	font-family: var(--yic-font-headline);
	font-size: clamp(1.65rem, 1.35rem + 1.15vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--yic-on-primary, #fff);
	margin: 0 0 0.65rem;
	text-wrap: balance;
}
.yic-cta-banner__text {
	margin: 0;
	color: color-mix(in srgb, var(--yic-on-primary, #fff) 84%, transparent);
	max-width: 38rem;
	font-size: clamp(1rem, 0.94rem + 0.25vw, 1.1rem);
	line-height: 1.6;
}
.yic-cta-banner > .yic-btn {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	margin-left: auto;
	transition: transform .22s ease, gap .22s ease, background .22s ease;
}
/* Bottone bianco su CTA scura: niente ombra (con overflow:hidden diventa alone sporco). */
.yic-cta-banner > .yic-btn--on-dark {
	box-shadow: none;
	background: #fff;
	color: var(--yic-primary-container, #ea580c);
	isolation: isolate;
}
.yic-cta-banner > .yic-btn--on-dark:hover,
.yic-cta-banner > .yic-btn--on-dark:focus-visible {
	box-shadow: none;
	background: var(--yic-primary-fixed, #ffedd5);
}
.yic-cta-banner:hover > .yic-btn {
	transform: translateY(-1px);
}
.yic-cta-banner:hover > .yic-btn .yic-btn__arrow {
	animation: yic-cta-arrow .7s ease-in-out infinite;
}

/* Micro-animazioni illustrazione sicurezza */
@keyframes yic-cta-glow {
	0%, 100% { opacity: .7; transform: translate3d(0, 0, 0) scale(1); }
	50% { opacity: 1; transform: translate3d(-2%, 3%, 0) scale(1.05); }
}
@keyframes yic-cta-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}
@keyframes yic-cta-spark {
	0%, 100% { opacity: .55; transform: scale(.9); }
	50% { opacity: 1; transform: scale(1.1); }
}
@keyframes yic-cta-ring {
	to { transform: rotate(360deg); }
}
@keyframes yic-cta-arrow {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(3px); }
}
.yic-cta-illu__float {
	animation: yic-cta-float 3.4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}
.yic-cta-illu__spark {
	animation: yic-cta-spark 2.6s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}
.yic-cta-illu__spark--sm { animation-delay: .45s; }
.yic-cta-illu__ring {
	animation: yic-cta-ring 18s linear infinite;
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}
.yic-cta-banner--visual:hover .yic-cta-banner__illu {
	transform: scale(1.04);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
	.yic-cta-banner__glow,
	.yic-cta-illu__float,
	.yic-cta-illu__spark,
	.yic-cta-illu__ring,
	.yic-cta-banner:hover > .yic-btn .yic-btn__arrow {
		animation: none;
	}
	.yic-cta-banner:hover > .yic-btn,
	.yic-cta-banner--visual:hover .yic-cta-banner__illu {
		transform: none;
	}
}

/* =============================================================
 * 9. Stat / KPI
 * ============================================================= */
.yic-stat {
	text-align: center;
}
.yic-stat__value {
	font-family: var(--yic-font-headline);
	font-size: var(--yic-text-headline-lg);
	font-weight: 700;
	color: var(--yic-primary);
	line-height: 1.1;
}
.yic-stat__label {
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-label-md);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--yic-secondary);
	margin-top: var(--yic-space-xs);
}

/* =============================================================
 * 10. Timeline
 * ============================================================= */
.yic-timeline {
	position: relative;
	padding-left: 32px;
}
.yic-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: linear-gradient(to bottom, var(--yic-primary-container), rgb(var(--yic-primary-container-rgb) / 0.2));
}
.yic-timeline__item {
	position: relative;
	padding-bottom: var(--yic-space-xl);
}
.yic-timeline__item:last-child {
	padding-bottom: 0;
}
.yic-timeline__dot {
	position: absolute;
	left: -32px;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: var(--yic-radius-full);
	background: var(--yic-primary-container);
	box-shadow: 0 0 0 4px var(--yic-surface-container-lowest);
}
.yic-timeline__date {
	font-family: var(--yic-font-label);
	font-weight: 700;
	color: var(--yic-primary-container);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--yic-text-label-md);
	margin-bottom: var(--yic-space-xs);
}
.yic-timeline__card {
	background: var(--yic-surface-container-lowest);
	border: 1px solid var(--yic-outline-variant);
	border-radius: var(--yic-radius-lg);
	padding: var(--yic-space-lg);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yic-timeline__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--yic-shadow-md);
}

/* =============================================================
 * 11. Form (input, select, textarea, checkbox, radio, search)
 * ============================================================= */
.yic-field {
	margin-bottom: var(--yic-space-md);
}
.yic-label {
	display: block;
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-label-md);
	font-weight: 600;
	color: var(--yic-secondary);
	margin-bottom: 6px;
}
.yic-label__req {
	color: var(--yic-error);
}
/* Help testo campi form (p.yic-help). Non usare .yic-help nudo:
   collide con la banda builder help_cards (<section class="yic-help">). */
p.yic-help {
	font-size: var(--yic-text-caption);
	color: var(--yic-secondary);
	margin-top: 4px;
}
.yic-field--error p.yic-help {
	color: var(--yic-error);
}

/* I campi usano variabili "field" sovrascrivibili dal modulo Form (pannello). */
.yic-input,
.yic-select,
.yic-textarea {
	width: 100%;
	padding: var(--yic-field-pad-y, 11px) var(--yic-field-pad-x, 14px);
	font-family: var(--yic-font-body);
	font-size: var(--yic-text-body-md);
	color: var(--yic-field-fg, var(--yic-on-surface));
	background: var(--yic-field-bg, var(--yic-surface-container-lowest));
	border: 1px solid var(--yic-field-border, #767676);
	border-radius: var(--yic-field-radius, var(--yic-radius-lg));
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.yic-input::placeholder,
.yic-textarea::placeholder {
	color: var(--yic-secondary);
	opacity: 0.7;
}
.yic-input:focus,
.yic-select:focus,
.yic-textarea:focus {
	outline: none;
	border-color: var(--yic-field-focus, var(--yic-primary-container));
	box-shadow: 0 0 0 3px var(--yic-field-focus-ring, rgb(var(--yic-primary-container-rgb) / 0.15));
}

/* --- Campi nativi (ricerca, commenti, form plugin): stesso look --- */
.yic-entry input[type="text"],
.yic-entry input[type="email"],
.yic-entry input[type="url"],
.yic-entry input[type="tel"],
.yic-entry input[type="number"],
.yic-entry input[type="password"],
.yic-entry input[type="search"],
.yic-entry textarea,
.yic-entry select,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form input[type="search"],
.wp-block-search__input {
	font-family: var(--yic-font-body);
	font-size: var(--yic-text-body-md);
	color: var(--yic-field-fg, var(--yic-on-surface));
	background: var(--yic-field-bg, var(--yic-surface-container-lowest));
	border: 1px solid var(--yic-field-border, #767676);
	border-radius: var(--yic-field-radius, var(--yic-radius-lg));
	padding: var(--yic-field-pad-y, 11px) var(--yic-field-pad-x, 14px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.yic-entry input:focus,
.yic-entry textarea:focus,
.yic-entry select:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.search-form input[type="search"]:focus,
.wp-block-search__input:focus {
	outline: none;
	border-color: var(--yic-field-focus, var(--yic-primary-container));
	box-shadow: 0 0 0 3px var(--yic-field-focus-ring, rgb(var(--yic-primary-container-rgb) / 0.15));
}
.yic-textarea {
	min-height: 120px;
	resize: vertical;
}
.yic-field--error .yic-input,
.yic-field--error .yic-select,
.yic-field--error .yic-textarea {
	border-color: var(--yic-error);
}
.yic-field--error .yic-input:focus,
.yic-field--error .yic-select:focus,
.yic-field--error .yic-textarea:focus {
	box-shadow: 0 0 0 3px rgb(186 26 26 / 0.15);
}
/* Select: freccia custom */
.yic-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5e63' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 40px;
}

/* Checkbox / Radio */
.yic-check {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: var(--yic-text-body-md);
	color: var(--yic-on-surface);
	margin-bottom: 8px;
}
.yic-check input[type="checkbox"],
.yic-check input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
	border: 2px solid var(--yic-outline);
	background: var(--yic-surface-container-lowest);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	position: relative;
}
.yic-check input[type="checkbox"] { border-radius: var(--yic-radius); }
.yic-check input[type="radio"] { border-radius: var(--yic-radius-full); }
.yic-check input:focus-visible {
	outline: 3px solid var(--yic-primary-container);
	outline-offset: 2px;
}
.yic-check input:checked {
	background: var(--yic-primary-container);
	border-color: var(--yic-primary-container);
}
.yic-check input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid var(--yic-on-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.yic-check input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: var(--yic-radius-full);
	background: var(--yic-on-primary);
}

/* Search input con icona */
.yic-search {
	position: relative;
}
.yic-search .yic-input,
.yic-search input[type="search"],
.yic-search input[type="text"] {
	padding-left: 44px;
}
.yic-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--yic-secondary);
	pointer-events: none;
	display: inline-flex;
}

/* Pill filter (gruppo di filtri a pillola) */
.yic-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yic-space-sm);
}
.yic-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: var(--yic-radius-full);
	border: 1px solid var(--yic-outline-variant);
	background: var(--yic-surface-container-lowest);
	color: var(--yic-on-surface-variant);
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-label-md);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}
.yic-filter-pill:hover {
	border-color: var(--yic-primary-container);
	color: var(--yic-primary);
}
.yic-filter-pill.is-active {
	background: var(--yic-primary-container);
	border-color: var(--yic-primary-container);
	color: var(--yic-on-primary);
}

/* =============================================================
 * 12. Tabelle responsive / comparative
 * ============================================================= */
.yic-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--yic-outline-variant);
	border-radius: var(--yic-radius-lg);
	-webkit-overflow-scrolling: touch;
}
.yic-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--yic-text-body-md);
}
.yic-table th,
.yic-table td {
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
}
.yic-table thead th {
	background: var(--yic-surface-container-low);
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-label-md);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--yic-primary);
	border-bottom: 1px solid var(--yic-outline-variant);
	white-space: nowrap;
}
.yic-table tbody tr + tr td {
	border-top: 1px solid var(--yic-outline-variant);
}
.yic-table--striped tbody tr:nth-child(even) td {
	background: var(--yic-surface-container-low);
}
.yic-table--hover tbody tr:hover td {
	background: rgb(var(--yic-primary-rgb) / 0.03);
}
.yic-table__yes { color: #15702e; font-weight: 700; }
.yic-table__no { color: var(--yic-secondary); }
/* Colonna evidenziata (comparativa) */
.yic-table__col-highlight {
	background: rgb(var(--yic-primary-rgb) / 0.04);
}
/* Tabella "stacked" su mobile: usa data-label sulle celle */
@media (max-width: 640px) {
	.yic-table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.yic-table--stack tbody tr {
		display: block;
		border-bottom: 2px solid var(--yic-outline-variant);
		padding: var(--yic-space-sm) 0;
	}
	.yic-table--stack tbody td {
		display: flex;
		justify-content: space-between;
		gap: var(--yic-space-md);
		border: 0;
		padding: 8px 16px;
	}
	.yic-table--stack tbody td::before {
		content: attr(data-label);
		font-family: var(--yic-font-label);
		font-weight: 700;
		color: var(--yic-primary);
		text-transform: uppercase;
		font-size: var(--yic-text-caption);
	}
}

/* =============================================================
 * 13. Alert / Notifiche
 * ============================================================= */
.yic-alert {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	border: 0;
	border-radius: var(--yic-alert-radius, 8px);
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 6%, #fff);
	color: var(--yic-on-surface);
	box-shadow: none;
}
.yic-alert__icon {
	flex: 0 0 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	max-width: 2.5rem;
	max-height: 2.5rem;
	aspect-ratio: 1;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 12%, #fff);
	color: var(--yic-primary, #c2410c);
	font-size: 1.35rem;
	line-height: 1;
}
.yic-alert__body { flex: 1; min-width: 0; }
.yic-alert__title {
	font-family: var(--yic-font-headline, inherit);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	margin: 0 0 0.25rem;
	color: var(--yic-on-surface, #1c1416);
}
.yic-alert__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--yic-on-surface-variant, #584142);
}
.yic-alert__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.65rem;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--yic-primary, #c2410c);
	text-decoration: none;
}
.yic-alert__link:hover { text-decoration: underline; }
/* CTA alert: bottone outline allineato al testo (non link grezzo). */
.yic-alert__actions {
	margin: 0.85rem 0 0;
}
.yic-alert__cta.yic-btn {
	margin: 0;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	gap: 0.4rem;
}
.yic-alert__cta .material-symbols-outlined {
	font-size: 1.15rem;
	line-height: 1;
}
.yic-alert__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	background: transparent;
	border: 0;
	border-radius: var(--yic-radius);
	cursor: pointer;
	color: var(--yic-secondary);
	font-size: 20px;
	line-height: 1;
	padding: 0 4px;
}
.yic-alert--info {
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 6%, #fff);
}
.yic-alert--info .yic-alert__icon {
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 12%, #fff);
	color: var(--yic-primary, #c2410c);
}
.yic-alert--success { background: #eef8f1; }
.yic-alert--success .yic-alert__icon { background: #d8f0df; color: #15702e; }
.yic-alert--warning { background: #fff6e8; }
.yic-alert--warning .yic-alert__icon { background: #ffe8c2; color: #8a4b00; }
.yic-alert--error { background: color-mix(in srgb, var(--yic-error, #b3261e) 8%, #fff); }
.yic-alert--error .yic-alert__icon {
	background: color-mix(in srgb, var(--yic-error, #b3261e) 14%, #fff);
	color: var(--yic-error, #b3261e);
}
.yic-alert[hidden] { display: none; }

/* =============================================================
 * 14. Box informativo / Disclaimer / Lead
 * ============================================================= */
.yic-infobox {
	padding: var(--yic-space-lg);
	background: var(--yic-surface-container-low);
	border-left: 4px solid var(--yic-primary);
	border-radius: 0 var(--yic-radius-lg) var(--yic-radius-lg) 0;
}
.yic-infobox--quote {
	font-style: italic;
	color: var(--yic-on-surface-variant);
}
.yic-lead {
	font-size: var(--yic-text-body-lg);
	font-weight: 600;
	color: var(--yic-primary);
	border-left: 4px solid var(--yic-primary);
	padding-left: var(--yic-space-md);
	margin-block: var(--yic-space-lg);
}
.yic-disclaimer {
	font-size: var(--yic-text-caption);
	line-height: 1.6;
	color: var(--yic-secondary);
	background: var(--yic-surface-container-low);
	border-radius: var(--yic-radius-lg);
	padding: var(--yic-space-md) var(--yic-space-lg);
}

/* =============================================================
 * 15. Lista documenti / Download
 * ============================================================= */
.yic-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--yic-space-sm);
}
.yic-doc {
	display: flex;
	align-items: center;
	gap: var(--yic-space-md);
	padding: var(--yic-space-md);
	border: 1px solid var(--yic-outline-variant);
	border-radius: var(--yic-radius-lg);
	text-decoration: none;
	color: var(--yic-on-surface);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.yic-doc:hover {
	border-color: var(--yic-primary);
	box-shadow: var(--yic-shadow-sm);
}
.yic-doc__icon {
	flex: 0 0 auto;
	color: var(--yic-primary);
	font-size: 2rem;
	display: inline-flex;
}
.yic-doc__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yic-doc__label { font-weight: 700; line-height: 1.3; }
.yic-doc__meta {
	font-size: var(--yic-text-caption);
	color: var(--yic-secondary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.yic-doc__dl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--yic-radius);
	background: var(--yic-primary);
	color: var(--yic-on-primary);
}

/* =============================================================
 * 16. Skeleton loader
 * ============================================================= */
.yic-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--yic-surface-variant);
	border-radius: var(--yic-radius);
}
.yic-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent);
	animation: yic-shimmer 1.4s infinite;
}
.yic-skeleton--text { height: 0.9em; margin-bottom: 0.5em; }
.yic-skeleton--title { height: 1.4em; width: 60%; margin-bottom: 0.75em; }
.yic-skeleton--line-short { width: 40%; }
.yic-skeleton--block { height: 160px; }
.yic-skeleton--circle { width: 56px; height: 56px; border-radius: var(--yic-radius-full); }
@keyframes yic-shimmer {
	100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
	.yic-skeleton::after { animation: none; }
}

/* =============================================================
 * 17. Spinner
 * ============================================================= */
.yic-spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid var(--yic-outline-variant);
	border-top-color: var(--yic-primary);
	border-radius: var(--yic-radius-full);
	animation: yic-spin 0.8s linear infinite;
}
.yic-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.yic-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
@keyframes yic-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.yic-spinner { animation-duration: 2s; }
}

/* =============================================================
 * 18. Tooltip (CSS, via attributo data-yic-tooltip)
 * ============================================================= */
.yic-tooltip {
	position: relative;
}
.yic-tooltip::after {
	content: attr(data-yic-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--yic-inverse-surface);
	color: var(--yic-inverse-on-surface);
	padding: 6px 10px;
	border-radius: var(--yic-radius);
	font-size: var(--yic-text-caption);
	white-space: nowrap;
	max-width: 240px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 50;
}
.yic-tooltip:hover::after,
.yic-tooltip:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* Chiuso con Escape: nasconde il tooltip visivo finché non si ri-attiva. */
.yic-tooltip.yic-tooltip-dismissed::after {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* =============================================================
 * 19. Paginazione numerica
 * ============================================================= */
.yic-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--yic-space-xl);
}
.yic-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 4px;
	border: 1px solid var(--yic-outline-variant);
	border-radius: var(--yic-radius-lg);
	color: var(--yic-on-surface);
	text-decoration: none;
	font-family: var(--yic-font-label);
	transition: all 0.2s ease;
}
.yic-pagination .page-numbers:hover {
	border-color: var(--yic-primary-container);
	color: var(--yic-primary);
}
.yic-pagination .page-numbers.current {
	background: var(--yic-primary-container);
	border-color: var(--yic-primary-container);
	color: var(--yic-on-primary);
}
.yic-pagination .page-numbers.dots {
	border-color: transparent;
}

/* =============================================================
 * 20. Sticky subnav / anchor nav
 * ============================================================= */
.yic-subnav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgb(var(--yic-surface-container-lowest-rgb) / 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--yic-outline-variant);
}
.yic-subnav__list {
	display: flex;
	gap: var(--yic-space-lg);
	overflow-x: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}
.yic-subnav__link {
	display: block;
	padding: var(--yic-space-md) 2px;
	white-space: nowrap;
	color: var(--yic-secondary);
	text-decoration: none;
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-label-md);
	border-bottom: 3px solid transparent;
}
.yic-subnav__link:hover,
.yic-subnav__link.is-active {
	color: var(--yic-primary-container);
	border-bottom-color: var(--yic-primary-container);
}

/* =============================================================
 * 21. Accordion / FAQ (JS: .yic-accordion__trigger[aria-expanded])
 * ============================================================= */
.yic-accordion {
	border: 1px solid var(--yic-outline-variant);
	border-radius: var(--yic-radius-lg);
	overflow: hidden;
	background: var(--yic-surface-container-lowest);
}
.yic-accordion__item + .yic-accordion__item {
	border-top: 1px solid var(--yic-outline-variant);
}
.yic-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yic-space-md);
	padding: var(--yic-space-md) var(--yic-space-lg);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--yic-font-headline);
	font-size: var(--yic-text-body-lg);
	font-weight: 600;
	color: var(--yic-primary);
	transition: background 0.2s ease;
}
.yic-accordion__trigger:hover {
	background: var(--yic-surface-container-low);
}
.yic-accordion__icon {
	flex: 0 0 auto;
	transition: transform 0.3s ease;
	color: var(--yic-primary-container);
	display: inline-flex;
}
.yic-accordion__trigger[aria-expanded="true"] .yic-accordion__icon {
	transform: rotate(180deg);
}
.yic-accordion__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}
.yic-accordion__panel-inner {
	padding: 0 var(--yic-space-lg) var(--yic-space-lg);
	color: var(--yic-on-surface-variant);
}
@media (prefers-reduced-motion: reduce) {
	.yic-accordion__panel { transition: none; }
}

/* =============================================================
 * 22. Tab (JS: [role="tab"][aria-selected], [role="tabpanel"])
 * ============================================================= */
.yic-tabs__list {
	display: flex;
	gap: var(--yic-space-lg);
	overflow-x: auto;
	border-bottom: 1px solid var(--yic-outline-variant);
	margin-bottom: var(--yic-space-lg);
}
.yic-tabs__tab {
	background: transparent;
	border: 0;
	border-bottom: 4px solid transparent;
	padding: var(--yic-space-md) 2px;
	margin-bottom: -1px;
	cursor: pointer;
	white-space: nowrap;
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-label-md);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--yic-secondary);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.yic-tabs__tab:hover {
	color: var(--yic-primary);
}
.yic-tabs__tab[aria-selected="true"] {
	color: var(--yic-primary-container);
	border-bottom-color: var(--yic-primary-container);
}
.yic-tabs__panel[hidden] { display: none; }

/* =============================================================
 * 23. Modale / Dialog (JS: apre/chiude .is-open)
 * ============================================================= */
.yic-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--yic-space-lg);
}
.yic-modal.is-open {
	display: flex;
}
.yic-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgb(var(--yic-on-surface-rgb) / 0.55);
	animation: yic-fade 0.2s ease;
}
.yic-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(92vw, 640px);
	max-height: 88vh;
	overflow-y: auto;
	background: var(--yic-surface-container-lowest);
	border-radius: var(--yic-radius-xl);
	box-shadow: var(--yic-shadow-lg);
	animation: yic-modal-in 0.2s ease;
}
.yic-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yic-space-md);
	padding: var(--yic-space-lg);
	border-bottom: 1px solid var(--yic-outline-variant);
}
.yic-modal__title {
	font-family: var(--yic-font-headline);
	font-size: var(--yic-text-headline-md);
	color: var(--yic-primary);
	margin: 0;
}
.yic-modal__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--yic-secondary);
	font-size: 26px;
	line-height: 1;
	padding: 0 4px;
}
.yic-modal__body { padding: var(--yic-space-lg); }
.yic-modal__footer {
	padding: var(--yic-space-lg);
	border-top: 1px solid var(--yic-outline-variant);
	display: flex;
	justify-content: flex-end;
	gap: var(--yic-space-sm);
}
body.yic-modal-open { overflow: hidden; }
@keyframes yic-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes yic-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
	.yic-modal__overlay,
	.yic-modal__dialog { animation: none; }
}

/* =============================================================
 * 24. Reveal on scroll (attivato da components.js)
 * ============================================================= */
.yic-reveal {
	opacity: 0;
	transform: translateY(var(--yic-reveal-dist, 20px));
	transition: opacity var(--yic-reveal-dur, 0.6s) ease, transform var(--yic-reveal-dur, 0.6s) ease;
	will-change: opacity, transform;
}
.yic-reveal--zoom {
	transform: scale(0.94);
}
.yic-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.yic-reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
 * 26. Gradienti (opzionali, dal pannello Effetti)
 * ============================================================= */
/* Applicati come background-image: se la variabile non e' impostata,
 * "none" lascia intatto il colore di sfondo pieno. */
.yic-btn--primary { background-image: var(--yic-btn-gradient, none); }
.yic-hero { background-image: var(--yic-hero-gradient, none); }

/* =============================================================
 * 25. Lightbox (self-hosted, GDPR) — vedi assets/js/lightbox.js
 * ============================================================= */
.yic-lb {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--yic-space-md);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgb(var(--yic-on-surface-rgb) / 0.9);
}
.yic-lb.is-open { display: flex; animation: yic-fade 0.2s ease; }
body.yic-lb-open { overflow: hidden; }
.yic-lb__fig {
	margin: 0;
	max-width: 92vw;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--yic-space-sm);
}
.yic-lb__img {
	max-width: 92vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--yic-radius-md);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	background: var(--yic-surface-container-lowest);
}
.yic-lb__cap {
	color: rgb(var(--yic-on-primary-rgb) / 0.92);
	font-size: var(--yic-text-label-md);
	text-align: center;
	max-width: 60ch;
}
.yic-lb__close,
.yic-lb__nav {
	background: rgb(255 255 255 / 0.12);
	color: #fff;
	border: 1px solid rgb(255 255 255 / 0.3);
	cursor: pointer;
	border-radius: var(--yic-radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	flex: 0 0 auto;
}
.yic-lb__close:hover,
.yic-lb__nav:hover { background: rgb(255 255 255 / 0.25); }
.yic-lb__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 46px;
	height: 46px;
	font-size: 28px;
	line-height: 1;
}
.yic-lb__nav {
	width: 52px;
	height: 52px;
	font-size: 22px;
}
.yic-lb__count {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: rgb(255 255 255 / 0.85);
	font-family: var(--yic-font-label);
	font-size: var(--yic-text-caption);
	letter-spacing: 0.05em;
}
@media (max-width: 640px) {
	.yic-lb__nav { width: 42px; height: 42px; }
}
/* Cursore "ingrandibile" sui link immagine gestiti dal lightbox */
.yic-entry a[href$=".jpg"] img,
.yic-entry a[href$=".jpeg"] img,
.yic-entry a[href$=".png"] img,
.yic-entry a[href$=".webp"] img { cursor: zoom-in; }


/* --------------------------------------------------------------------------
 * Zona blocchi (page.php / hub): ospita sezioni istituzionali full-width con
 * wrap interno (servizi digitali, omnicanalita', ...). I container/colonne del
 * builder aggiungerebbero boxing + gutter laterale, lasciando spazi bianchi ai
 * lati: qui li azzeriamo cosi' le sezioni arrivano ai bordi come da design.
 *
 * NB: il reset vale SOLO per i container a piena larghezza (--full). I container
 * "boxed" (es. il Messaggio pubblicitario) devono invece restare confinati alla
 * larghezza-sito con il padding laterale del tema, quindi NON vengono azzerati.
 * -------------------------------------------------------------------------- */
/* Full-bleed solo per container "full" puro (colonne dirette, senza rail).
 * full-boxed condivide la classe --full ma ha .yic-container interno: il rail
 * sito deve restare (altrimenti digispot/associazioni diventano edge-to-edge). */
.yic-page-blocks,
.yic-page-blocks .yic-builder-content,
.yic-page-blocks .yic-builder-container--full { max-width: none; margin-left: 0; margin-right: 0; }
.yic-page-blocks .yic-builder-container--full:not(:has(> .yic-container)) > .yic-builder-cols {
	margin-left: 0;
	margin-right: 0;
}
.yic-page-blocks .yic-builder-container--full:not(:has(> .yic-container)) > .yic-builder-cols > .yic-builder-col {
	padding-left: 0;
	padding-right: 0;
}
/* Evita scroll orizzontale; NON togliere max-width a .yic-container (boxed/full-boxed). */
.yic-page-blocks {
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}
.yic-page-blocks .yic-builder-container--boxed,
.yic-page-blocks .yic-builder-container--full:has(> .yic-container) {
	box-sizing: border-box;
}
.yic-page-blocks .yic-builder-container--full > .yic-container {
	max-width: var(--yic-container-max, 1280px);
	margin-inline: auto;
	padding-inline: var(--yic-gutter, 24px);
	box-sizing: border-box;
}
/*
 * CTA marketing: il blocco globale è `full`
 * (per non doppiare il rail in Home). In .yic-page-blocks non c'è il wrapper
 * full-boxed → senza questo fix la banda va a tutto schermo.
 */
.yic-page-blocks .yic-builder-container--full:has(.yic-cta-banner):not(:has(> .yic-container)) {
	background: var(--yic-surface-container-low, #f4f3f3);
	padding-block: clamp(2rem, 3.5vw, 3.25rem);
	box-sizing: border-box;
}
.yic-page-blocks .yic-builder-container--full:has(.yic-cta-banner):not(:has(> .yic-container)) > .yic-builder-cols {
	max-width: var(--yic-container-max, 1280px);
	margin-inline: auto;
	padding-inline: var(--yic-gutter, 24px);
	box-sizing: border-box;
}
.yic-page-blocks .yic-builder-container--full:has(.yic-cta-banner):not(:has(> .yic-container)) > .yic-builder-cols > .yic-builder-col {
	padding-inline: 0;
}
.yic-page-blocks .yic-builder-el,
.yic-page-blocks .yic-disclaimer,
.yic-page-blocks p {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-wrap: break-word;
}
@media (max-width: 640px) {
	.yic-disclaimer {
		padding: 0.85rem 0;
		font-size: 0.8rem;
		line-height: 1.55;
	}
}


/* =============================================================
 * Riduzione movimento — azzera gli spostamenti/zoom DECORATIVI al hover/focus
 * (card, prodotti, hub, icone e frecce). Si attiva sia con la preferenza di
 * sistema "riduci movimento", sia con il widget di accessibilità
 * ("Ferma animazioni" / profilo Epilessia → classe html.yicacc-stopmotion).
 * NON tocca i transform di posizionamento (tooltip, centrature, chevron
 * accordion, animazioni di reveal): quelli restano invariati.
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
	.yic-btn--link:hover .yic-btn__arrow,
	.yic-btn--link:focus-visible .yic-btn__arrow,
	.yic-card--hover:hover,
	.yic-card--hover:hover .yic-card__media img,
	.yic-timeline__card:hover,
	.yic-prod-card:hover,
	.yic-hub-cat:hover,
	.yic-hub-cat:hover .yic-hub-cat__ico,
	.yic-hub-cat:hover .yic-hub-cat__more .material-symbols-outlined {
		transform: none !important;
	}
}
html.yicacc-stopmotion .yic-btn--link:hover .yic-btn__arrow,
html.yicacc-stopmotion .yic-btn--link:focus-visible .yic-btn__arrow,
html.yicacc-stopmotion .yic-card--hover:hover,
html.yicacc-stopmotion .yic-card--hover:hover .yic-card__media img,
html.yicacc-stopmotion .yic-timeline__card:hover,
html.yicacc-stopmotion .yic-prod-card:hover,
html.yicacc-stopmotion .yic-hub-cat:hover,
html.yicacc-stopmotion .yic-hub-cat:hover .yic-hub-cat__ico,
html.yicacc-stopmotion .yic-hub-cat:hover .yic-hub-cat__more .material-symbols-outlined {
	transform: none !important;
}



/* =========================================================================
   Blocco "Assistenza / Card aiuto" (elemento builder help_cards)
   Superficie chiara → footer grigio: brand solo in accenti (chip, titoli, CTA).
   ========================================================================= */
.yic-help {
	--help-brand: var(--yic-primary, #c2410c);
	--help-brand-soft: var(--yic-primary-container, #ea580c);
	--help-ink: var(--yic-on-surface, #1c1416);
	--help-muted: color-mix(in srgb, var(--help-ink) 62%, transparent);
	--help-line: color-mix(in srgb, var(--help-brand) 14%, #d8d6d7);
	margin: 0;
	padding: clamp(40px, 5.2vw, 68px) 0 clamp(44px, 5.5vw, 72px);
	color: var(--help-ink);
	background: var(--yic-surface-container-low, #f4f3f3);
}
.yic-help__inner {
	display: grid;
	gap: clamp(26px, 3.6vw, 40px);
}
.yic-help__head {
	max-width: 42rem;
	margin: 0 auto;
	text-align: center;
}
.yic-help__title {
	margin: 0 0 0.75rem;
	font-family: var(--yic-font-headline, "Manrope", system-ui, sans-serif);
	font-size: clamp(1.5rem, 1.18rem + 1.1vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.15;
	color: var(--help-brand);
}
.yic-help__text {
	margin: 0 auto;
	max-width: 38rem;
	font-size: clamp(0.98rem, 0.93rem + 0.22vw, 1.06rem);
	line-height: 1.65;
	color: var(--help-muted);
}
.yic-help__grid {
	display: grid;
	gap: clamp(14px, 1.8vw, 22px);
	grid-template-columns: 1fr;
	width: 100%;
}
@media (min-width: 720px) {
	.yic-help__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yic-help__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.yic-help__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.yic-help__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.yic-help__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	height: 100%;
	padding: var(--yic-ui-card-pad, 24px);
	background: var(--yic-surface-container-lowest, #fff);
	border: 1px solid color-mix(in srgb, #1c1416 10%, #e8e6e7);
	border-radius: var(--yic-ui-card-radius, var(--yic-card-radius, 24px));
	box-shadow: none;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.yic-help__card:hover {
	border-color: color-mix(in srgb, var(--help-brand) 22%, #e0dede);
	box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--help-brand) 22%, transparent);
	transform: translateY(-2px);
}
.yic-help__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	border-radius: calc(var(--yic-ui-card-radius, 24px) * 0.35);
	background: color-mix(in srgb, var(--help-brand-soft) 11%, #fff);
	color: var(--help-brand);
}
.yic-help__ico .material-symbols-outlined {
	font-size: 1.55rem;
	line-height: 1;
	font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}
.yic-help__card-title {
	margin: 0.15rem 0 0;
	font-family: var(--yic-font-headline, "Manrope", sans-serif);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--help-ink);
}
.yic-help__card-text {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--help-muted);
}
.yic-help__ctas {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	padding-top: 0.55rem;
	width: 100%;
}
.yic-help__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.6rem;
	max-width: 100%;
	padding: 0.3rem 0;
	font-family: var(--yic-font-label, "Work Sans", sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1.35;
	text-decoration: none;
	color: var(--help-brand);
	overflow-wrap: anywhere;
	transition: gap .2s ease, color .2s ease;
}
.yic-help__cta .material-symbols-outlined {
	font-size: 1.1rem;
	flex: 0 0 auto;
}
.yic-help__cta:hover {
	gap: 0.55rem;
	color: var(--help-brand-soft);
}
.yic-help__cta--secondary {
	font-weight: 600;
	color: color-mix(in srgb, var(--help-brand) 88%, #1c1416);
}
@media (prefers-reduced-motion: reduce) {
	.yic-help__card { transition: none; }
	.yic-help__card:hover { transform: none; }
}

/* =========================================================================
   Directory "Assistenza per servizio" — numeri sempre visibili
   ========================================================================= */
.yic-svcdir { margin: 0; }
.yic-svcdir__head {
	max-width: 48rem;
	margin: 0 auto 1.5rem;
	text-align: center;
}
.yic-svcdir__heading {
	margin: 0 0 0.5rem;
	font-family: var(--yic-font-headline, inherit);
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
	font-weight: 700;
	color: var(--yic-primary, #c2410c);
}
.yic-svcdir__intro {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--yic-on-surface-variant, #584142);
}
.yic-svcdir__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
.yic-svcdir--cols-2 .yic-svcdir__grid,
.yic-svcdir--cols-3 .yic-svcdir__grid {
	gap: 1.15rem;
}
@media (min-width: 720px) {
	.yic-svcdir--cols-2 .yic-svcdir__grid,
	.yic-svcdir--cols-3 .yic-svcdir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.yic-svcdir--cols-3 .yic-svcdir__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.yic-svcdir__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	height: 100%;
	padding: 1.35rem 1.4rem 1.25rem;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--yic-primary, #c2410c) 12%, #e8e0e1);
	border-radius: 1.1rem;
	box-shadow: 0 1px 2px rgba(28, 20, 22, .03);
}
.yic-svcdir__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.65rem;
	height: 2.65rem;
	border-radius: 0.8rem;
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 9%, #fff);
	color: var(--yic-primary, #c2410c);
	margin-bottom: 0.2rem;
}
.yic-svcdir__ico .material-symbols-outlined {
	font-size: 1.45rem;
	line-height: 1;
	font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}
.yic-svcdir__title {
	margin: 0;
	font-family: var(--yic-font-headline, inherit);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--yic-on-surface, #1c1416);
}
.yic-svcdir__note {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--yic-on-surface-variant, #584142);
}
.yic-svcdir__nums {
	list-style: none;
	margin: 0.55rem 0 0;
	padding: 0;
	width: 100%;
	display: grid;
	gap: 0.55rem;
}
.yic-svcdir__nums li {
	display: grid;
	gap: 0.1rem;
}
.yic-svcdir__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--yic-on-surface-variant, #584142) 85%, transparent);
}
.yic-svcdir__tel {
	font-family: var(--yic-font-headline, inherit);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--yic-primary, #c2410c);
	text-decoration: none;
	overflow-wrap: anywhere;
}
a.yic-svcdir__tel {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.25rem 0;
	max-width: 100%;
}
a.yic-svcdir__tel:hover { text-decoration: underline; }
.yic-svcdir__hint {
	font-size: 0.78rem;
	color: var(--yic-on-surface-variant, #584142);
}
.yic-svcdir__meta {
	margin: auto 0 0;
	padding-top: 0.85rem;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--yic-on-surface-variant, #584142);
	overflow-wrap: anywhere;
}
.yic-svcdir__meta a {
	font-weight: 700;
	color: var(--yic-primary, #c2410c);
	text-decoration: none;
}
.yic-svcdir__meta a:hover { text-decoration: underline; }
.yic-svcdir__dot { opacity: 0.55; }

/* Mobile: iconbox laterali e hero builder (pagine Assistenza / Sicurezza / Blocco carte) */
@media (max-width: 640px) {
	.yic-builder-iconbox--left .yic-card__body {
		flex-direction: column;
		gap: 0.85rem;
	}
	.yic-alert {
		padding: 1rem;
		gap: 0.75rem;
	}
	.yic-svcdir__card {
		padding: 1.15rem 1.15rem 1.1rem;
	}
	.yic-builder-hero--has-bg {
		min-height: clamp(300px, 56vh, 480px);
		padding-block: clamp(1.75rem, 4vw, 2.75rem);
		padding-inline: clamp(1rem, 4vw, 1.5rem);
	}
	.yic-builder-hero--has-bg:not(:has(.yic-builder-hero__panel)) {
		padding-inline: 0;
	}
	.yic-builder-hero__panel {
		display: block;
		width: 100%;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.yic-builder-hero__panel .yic-builder-hero__actions {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 0.65rem;
	}
	.yic-builder-hero__panel .yic-builder-hero__actions .yic-btn {
		flex: 1 1 12rem;
		text-align: center;
		justify-content: center;
	}
}

/* CTA banner — stretto / mobile: niente buco tra testo e bottone */
@media (max-width: 900px) {
	.yic-cta-banner:not(.yic-cta-banner--photo) {
		padding: 1.5rem 1.25rem 1.4rem;
		gap: 1.1rem;
		flex-direction: column;
		align-items: stretch;
		align-content: flex-start;
		justify-content: flex-start;
		min-height: 0;
		border-radius: calc(var(--yic-ui-card-radius, 24px) * 0.7);
	}
	.yic-cta-banner--visual:not(.yic-cta-banner--photo) {
		min-height: 0;
	}
	.yic-cta-banner__main {
		flex: 0 1 auto; /* non allungare: evita buco sopra al bottone */
		flex-direction: row;
		align-items: flex-start;
		gap: 0.9rem;
		width: 100%;
	}
	.yic-cta-banner__illu {
		width: 4.75rem;
	}
	.yic-cta-banner__ico .material-symbols-outlined {
		font-size: 2.25rem;
	}
	.yic-cta-banner__title {
		font-size: 1.35rem;
		margin-bottom: 0.4rem;
	}
	.yic-cta-banner__text {
		font-size: 0.95rem;
		line-height: 1.5;
		max-width: none;
	}
	.yic-cta-banner > .yic-btn {
		width: 100%;
		margin-left: 0;
		justify-content: center;
		margin-top: 0;
	}
}
@media (max-width: 480px) {
	.yic-cta-banner__main {
		flex-direction: column;
		gap: 0.75rem;
	}
}


/*
 * Servizi digitali — CSS mobile-first.
 * Base = telefono (1 colonna). Desktop con @media (min-width: …).
 * Nota: il builder stacka le colonne solo ≤600px; qui forziamo 1 colonna
 * fino a 800px sulle sezioni SD per un layout davvero pensato al mobile.
 */
.yic-sd-hero .yic-builder-cols > .yic-builder-col,
.yic-sd-split .yic-builder-cols > .yic-builder-col,
.yic-sd-features .yic-builder-cols > .yic-builder-col,
.yic-sd-lists .yic-builder-cols > .yic-builder-col,
.yic-sd-download .yic-builder-cols > .yic-builder-col,
.yic-sd-teasers .yic-builder-cols > .yic-builder-col,
.yic-sd-intro .yic-builder-cols > .yic-builder-col {
	grid-column: span 60 !important;
}
/* Hero SD: stesso breakpoint 2-col di Privati (.yic-hub-hero). */
@media (min-width: 768px) {
	.yic-sd-hero .yic-builder-cols > .yic-builder-col {
		grid-column: span 30 !important;
	}
}
@media (min-width: 801px) {
	.yic-sd-split .yic-builder-cols > .yic-builder-col,
	.yic-sd-download .yic-builder-cols > .yic-builder-col {
		grid-column: span 30 !important;
	}
	.yic-sd-features .yic-builder-cols > .yic-builder-col {
		grid-column: span 20 !important;
	}
	.yic-sd-lists .yic-builder-cols > .yic-builder-col {
		grid-column: span 30 !important;
	}
	/* Teaser app: sempre 2 card per riga */
	.yic-sd-teasers .yic-builder-cols > .yic-builder-col {
		grid-column: span 30 !important;
	}
	.yic-sd-intro .yic-builder-cols > .yic-builder-col {
		grid-column: span 60 !important;
	}
	/* Download unificato: una colonna (titolo + anteprime + badge). */
	.yic-sd-download .yic-builder-cols > .yic-builder-col {
		grid-column: span 60 !important;
	}
}

.yic-digispot { position: relative; }
.yic-digispot__head { margin-bottom: 0.75rem; }
.yic-digispot__eyebrow {
	margin: 0 0 .35rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--yic-primary-container, #ea580c);
}
.yic-digispot__title {
	margin: 0;
	font-size: clamp(1.35rem, 5.5vw, 1.75rem);
	line-height: 1.2;
	color: var(--yic-primary, #c2410c);
}
.yic-digispot__stage {
	position: relative;
	min-height: 0;
	/* Swipe orizzontale gestito in JS; scroll verticale pagina resta libero. */
	touch-action: pan-y;
}
.yic-digispot__track { min-height: 0; }
.yic-digispot__slide {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.15rem;
	align-items: start;
	min-height: 0;
	padding: 1.1rem;
	background: var(--yic-surface-container-lowest, #fff);
	border: 1px solid var(--yic-ui-card-border, var(--yic-surface-container-low, #f4f3f3));
	border-radius: 22px;
	overflow: hidden;
}
.yic-digispot__slide[hidden] { display: none !important; }
.yic-digispot__media {
	position: relative;
	align-self: stretch;
	min-height: 0;
	aspect-ratio: 16 / 10;
	height: auto;
	border-radius: 16px;
	background-color: var(--yic-surface-container-low, #f4f3f3);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.yic-digispot__media::after { content: none; display: none; }
.yic-digispot__media-ico {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 2.5rem;
	color: var(--yic-primary, #c2410c);
	opacity: .55;
}
.yic-digispot__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .7rem;
	padding: 0;
	min-width: 0;
}
.yic-digispot__label {
	margin: 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--yic-primary-container, #ea580c);
}
.yic-digispot__slide-title {
	margin: 0;
	font-size: clamp(1.2rem, 4.5vw, 1.5rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--yic-on-surface, #1a1c1c);
}
.yic-digispot__text {
	margin: 0;
	font-size: .98rem;
	line-height: 1.55;
	color: var(--yic-on-surface-variant, #584142);
	max-width: 36rem;
}
.yic-digispot__actions {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: .65rem;
	margin-top: .25rem;
}
.yic-digispot__actions .yic-btn {
	width: 100%;
	justify-content: center;
	min-height: 2.85rem;
}
.yic-digispot__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.15rem;
}
.yic-digispot__arrow {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	border: 1px solid var(--yic-outline-variant, #e0bfc0);
	border-radius: 999px;
	background: #fff;
	color: var(--yic-primary, #c2410c);
	cursor: pointer;
	padding: 0;
}
/* Pillola compatta: altezza allineata alle frecce; tap via ::before (non gonfia il layout). */
.yic-digispot__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 2.5rem;
	padding: .55rem .85rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 8%, #f3f4f5);
	box-sizing: border-box;
}
.yic-digispot__dot {
	position: relative;
	box-sizing: border-box;
	width: .45rem;
	height: .45rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 40%, #d8d6d7);
	cursor: pointer;
	flex: 0 0 auto;
	transition: width .2s ease, background .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.yic-digispot__dot::before {
	content: "";
	position: absolute;
	inset: -.85rem -.5rem;
}
.yic-digispot__dot::after { content: none; display: none; }
.yic-digispot__dot.is-active {
	width: 1.15rem;
	background: var(--yic-primary, #c2410c);
}
.yic-digispot__dot:focus-visible {
	outline: 2px solid var(--yic-primary, #c2410c);
	outline-offset: 3px;
}
@media (min-width: 601px) {
	.yic-digispot__head { margin-bottom: 1.35rem; }
	.yic-digispot__slide { padding: 1.35rem; border-radius: 28px; gap: 1.35rem; }
	.yic-digispot__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.yic-digispot__actions .yic-btn { width: auto; }
}
@media (min-width: 801px) {
	.yic-digispot__title { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
	.yic-digispot__slide {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(1.75rem, 3.5vw, 3rem);
		padding: clamp(1.35rem, 2.8vw, 2rem);
		border-radius: var(--yic-ui-card-radius, var(--yic-card-radius, 24px));
	}
	.yic-digispot__media {
		min-height: 18rem;
		aspect-ratio: 4 / 3;
		height: 100%;
		border-radius: calc(var(--yic-ui-card-radius, 24px) - 10px);
	}
	.yic-digispot__copy { padding: .35rem .25rem .35rem 0; gap: .85rem; }
	.yic-digispot__slide-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
}
@media (hover: hover) {
	.yic-digispot__arrow:hover {
		background: var(--yic-primary, #c2410c);
		border-color: var(--yic-primary, #c2410c);
		color: #fff;
	}
}

/* Screenshot App Store — 4 per riga (desktop), intere senza crop/bordi */
.yic-sd-store-shots .yic-builder-gallery {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: .75rem !important;
	overflow: visible;
	margin-inline: 0;
	padding-bottom: 0;
}
.yic-sd-store-shots .yic-builder-gallery__item,
.yic-sd-store-shots .yic-builder-gallery--rounded .yic-builder-gallery__item {
	width: 100%;
	margin: 0;
	aspect-ratio: auto;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 12px;
	overflow: hidden;
}
.yic-sd-store-shots .yic-builder-gallery__link {
	display: block;
	width: 100%;
	height: auto;
}
.yic-sd-store-shots .yic-builder-gallery--r-auto .yic-builder-gallery__item img,
.yic-sd-store-shots .yic-builder-gallery__item img {
	display: block;
	width: 100%;
	height: auto !important;
	max-height: none;
	object-fit: contain;
	object-position: center top;
	background: transparent;
}
.yic-sd-store-shots .yic-builder-gallery__item:hover img {
	transform: none;
}
@media (min-width: 801px) {
	.yic-sd-store-shots .yic-builder-gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 1rem !important;
	}
	.yic-sd-store-shots .yic-builder-gallery__item,
	.yic-sd-store-shots .yic-builder-gallery--rounded .yic-builder-gallery__item {
		border-radius: 16px;
	}
}

/*
 * Hero SD — allineato a Privati (.yic-hub-hero):
 * sfondo piatto, frame 16/10 → 1/1, raggio 28→40, niente ombra/card.
 */
.yic-sd-hero {
	position: relative;
	overflow: hidden;
	background: var(--yic-surface-container-lowest, #fff);
	border-radius: 0;
	/* Override padding builder: stessi clamp di .yic-hub-hero */
	padding-top: clamp(24px, 4vw, 40px) !important;
	padding-bottom: clamp(48px, 8vw, 96px) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Rail boxed del tema: gutter laterale sempre presente */
.yic-sd-hero > .yic-container,
.yic-sd-split > .yic-container {
	width: 100%;
	max-width: var(--yic-container-max, 1280px);
	margin-inline: auto;
	padding-inline: var(--yic-gutter, 24px);
	box-sizing: border-box;
}
.yic-sd-hero .yic-builder-cols {
	--yic-col-gutter: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center !important;
	/* niente gap shorthand: rompe il pattern gutter (overflow + testo tagliato) */
	column-gap: 0;
	row-gap: clamp(1.5rem, 4vw, 2.5rem);
}
.yic-sd-hero .yic-builder-title__main {
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--yic-primary, #c2410c);
	max-width: none;
	margin: 0 0 16px;
}
.yic-sd-hero .yic-builder-title__eyebrow {
	color: var(--yic-primary, #c2410c);
}
.yic-sd-hero__lead {
	margin: 0 0 24px;
	max-width: 36rem;
	font-size: 18px;
	line-height: 1.6;
	color: var(--yic-on-surface-variant, #584142);
}
.yic-sd-hero .yic-builder-col:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: center;
	gap: 16px;
	min-width: 0;
	order: 0;
}
.yic-sd-hero .yic-builder-col:last-child {
	min-width: 0;
	width: 100%;
	order: 0;
}
.yic-sd-hero .yic-builder-col:first-child > .yic-builder-el--title,
.yic-sd-hero .yic-builder-col:first-child > .yic-builder-el--text {
	flex: 1 1 100%;
}
.yic-sd-hero .yic-builder-col:first-child > .yic-builder-el--button {
	margin: 0;
	flex: 0 1 auto;
}
.yic-sd-hero .yic-builder-col:first-child > .yic-builder-el--button .yic-btn {
	min-height: 2.85rem;
}
/* Frame immagine = stesso trattamento di .yic-hub-hero__frame */
.yic-sd-hero .yic-builder-el--image,
.yic-sd-hero .yic-builder-figure {
	display: block;
	width: 100%;
	margin: 0 auto;
	max-width: none;
	aspect-ratio: 16 / 10;
	max-height: min(52vw, 280px);
	background: var(--yic-surface-container-low, #f4f3f3);
	border-radius: 28px;
	overflow: hidden;
	border: 0;
	box-shadow: none;
}
.yic-sd-hero .yic-builder-img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	/* Default: un filo più in basso — nelle lifestyle il telefono sta spesso sotto. */
	object-position: var(--yic-sd-hero-pos, center 72%);
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent;
}
/* Punto focale per scheda: telefono (e schermata app) nel crop 1:1. */
.yic-sd-hero--hub,
.yic-sd-hero--app { --yic-sd-hero-pos: center 78%; }
.yic-sd-hero--notify { --yic-sd-hero-pos: 72% 82%; }
/* Pagine istituzionali (Assistenza, ecc.): crop centrato, non telefono. */
.yic-sd-hero--page {
	--yic-sd-hero-pos: center center;
	/* Meno respiro sotto: la banda successiva (es. Contatti) parte a filo. */
	padding-bottom: clamp(28px, 5vw, 48px) !important;
}
/* Dopo hero split: niente fascia bianca prima di una banda full (help_cards, ecc.). */
.yic-builder-content > .yic-sd-hero + .yic-builder-container--full,
.yic-builder-content > .yic-builder-container.yic-sd-hero + .yic-builder-container--full {
	margin-top: 0;
}
@media (max-width: 767px) {
	.yic-sd-hero .yic-builder-col:first-child > .yic-builder-el--button {
		flex: 1 1 100%;
	}
	.yic-sd-hero .yic-builder-col:first-child > .yic-builder-el--button .yic-btn {
		width: 100%;
		justify-content: center;
	}
}
@media (min-width: 768px) {
	/* Come .yic-hub-hero__frame su Privati: quadrato pieno, senza tetto di altezza */
	.yic-sd-hero .yic-builder-el--image,
	.yic-sd-hero .yic-builder-figure {
		aspect-ratio: 1 / 1;
		max-height: none;
		border-radius: 40px;
	}
}

/* Lead / intro / features / split / teaser / download — mobile-first */
.yic-sd-lead-wrap .yic-sd-lead,
.yic-sd-lead {
	margin: 0;
	max-width: 46rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--yic-on-surface-variant, #584142);
}
@media (min-width: 801px) {
	.yic-sd-lead-wrap .yic-sd-lead,
	.yic-sd-lead {
		font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	}
}

.yic-sd-intro .yic-builder-cols { align-items: flex-start; }
.yic-sd-intro .yic-builder-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.yic-sd-intro .yic-builder-el--image .yic-builder-img {
	width: 72px !important;
	height: 72px !important;
	max-width: 72px !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 12px 28px -14px rgba(28, 20, 22, .4);
	background: #fff;
}
.yic-sd-intro .yic-builder-el--title { margin-top: .85rem; }
.yic-sd-intro .yic-builder-title__main {
	font-size: clamp(1.4rem, 5.5vw, 1.75rem);
	color: var(--yic-primary, #c2410c);
}
/* Desktop: icona a sx, titolo + lead a dx (niente icona “app store” sopra il titolo). */
@media (min-width: 768px) {
	.yic-sd-intro .yic-builder-col:has(> .yic-builder-el--image) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 1.35rem;
		row-gap: .55rem;
		align-items: start;
	}
	.yic-sd-intro .yic-builder-col:has(> .yic-builder-el--image) > .yic-builder-el--image {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin: 0;
		align-self: start;
	}
	.yic-sd-intro .yic-builder-col:has(> .yic-builder-el--image) > .yic-builder-el--title {
		grid-column: 2;
		grid-row: 1;
		margin-top: .15rem;
	}
	.yic-sd-intro .yic-builder-col:has(> .yic-builder-el--image) > .yic-builder-el--text {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0;
	}
	.yic-sd-intro .yic-builder-el--image .yic-builder-img {
		width: 88px !important;
		height: 88px !important;
		max-width: 88px !important;
		border-radius: 20px;
	}
	.yic-sd-intro .yic-builder-title__main {
		font-size: clamp(1.55rem, 2.4vw, 2rem);
	}
}

.yic-sd-features .yic-builder-cols {
	--yic-col-gutter: .85rem;
	align-items: stretch;
	row-gap: .85rem;
}
.yic-sd-features .yic-builder-col {
	display: flex;
	min-width: 0;
	padding-inline: calc(var(--yic-col-gutter) / 2);
}
.yic-sd-features .yic-builder-col > .yic-builder-el--iconbox {
	display: flex;
	flex: 1 1 auto;
	height: auto;
	min-height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.yic-sd-features .yic-builder-iconbox.yic-card {
	flex: 1 1 auto;
	width: 100%;
	min-height: 100%;
	background: var(--yic-surface-container-lowest, #fff);
	border: 1px solid var(--yic-ui-card-border, #ebe4e4);
	border-radius: 18px;
	box-shadow: 0 10px 28px -22px rgba(28, 20, 22, .28);
	overflow: hidden;
}
.yic-sd-features .yic-builder-iconbox .yic-card__body {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	height: 100%;
	padding: 1.15rem 1.15rem 1.25rem;
}
.yic-sd-features .yic-builder-iconbox__ico.yic-icon-circle,
.yic-sd-features .yic-icon-circle {
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 10%, #fff);
	color: var(--yic-primary, #c2410c);
	border: 0;
}
.yic-sd-features .yic-builder-iconbox__ico .material-symbols-outlined {
	font-size: 1.35rem;
	line-height: 1;
}
.yic-sd-features .yic-card__title {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.3;
	color: var(--yic-primary, #c2410c);
	min-height: 0;
}
.yic-sd-features .yic-card__text {
	margin: 0;
	flex: 1 1 auto;
	font-size: .96rem;
	line-height: 1.55;
	color: var(--yic-on-surface-variant, #584142);
}
@media (min-width: 601px) {
	.yic-sd-features .yic-builder-cols { --yic-col-gutter: 1.1rem; }
	.yic-sd-features .yic-builder-iconbox.yic-card { border-radius: 22px; }
}
@media (min-width: 801px) {
	.yic-sd-features .yic-builder-cols { --yic-col-gutter: 1.25rem; }
	.yic-sd-features .yic-builder-iconbox.yic-card { border-radius: var(--yic-ui-card-radius, 24px); }
	.yic-sd-features .yic-builder-iconbox .yic-card__body { padding: 1.4rem 1.35rem 1.5rem; gap: .85rem; }
	.yic-sd-features .yic-card__title {
		font-size: clamp(1.05rem, 1.5vw, 1.2rem);
		min-height: 2.6em;
	}
}
@media (hover: hover) {
	.yic-sd-features .yic-builder-iconbox.yic-card--hover:hover {
		border-color: var(--yic-ui-card-border, #ebe4e4);
		box-shadow: 0 16px 36px -20px rgba(194, 65, 12, .22);
	}
}

/* Split sotto-hero: mockup app (split-*.jpg), frame pieno metà colonna */
.yic-sd-split {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.yic-sd-split .yic-builder-cols {
	--yic-col-gutter: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
	column-gap: 0;
	row-gap: 1.15rem;
}
.yic-sd-split .yic-builder-col {
	min-width: 0;
	overflow: visible;
	padding-inline: calc(var(--yic-col-gutter) / 2);
}
.yic-sd-split .yic-builder-el--image,
.yic-sd-split .yic-builder-figure {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	aspect-ratio: 4 / 5;
	max-height: min(420px, 78vw);
	overflow: hidden;
	border-radius: 24px;
	background: var(--yic-surface-container-low, #f4f3f3);
	border: 0;
	box-shadow: none;
}
.yic-sd-split .yic-builder-img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	object-position: center center;
	background: transparent;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.yic-sd-split .yic-builder-title__main {
	color: var(--yic-primary, #c2410c);
	font-size: clamp(1.35rem, 3.2vw, 1.75rem);
	line-height: 1.25;
	margin: 0 0 .35rem;
}
.yic-sd-split .yic-builder-el--title,
.yic-sd-split .yic-builder-el--list,
.yic-sd-split .yic-builder-list,
.yic-sd-split .yic-builder-list__item {
	min-width: 0;
	max-width: 100%;
	overflow: visible;
}
.yic-sd-split .yic-builder-list {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	margin: .85rem 0 0;
	padding: 0;
	list-style: none;
}
.yic-sd-split .yic-builder-list__item {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
	color: var(--yic-on-surface, #1a1c1c);
	font-size: clamp(.95rem, 1.6vw, 1.05rem);
	line-height: 1.45;
}
.yic-sd-split .yic-builder-list__item > :not(.yic-builder-list__marker) {
	min-width: 0;
	flex: 1 1 auto;
	white-space: normal;
}
@media (min-width: 801px) {
	/* 50/50: mockup grande a sinistra, lista a destra */
	.yic-sd-split .yic-builder-cols > .yic-builder-col:first-child,
	.yic-sd-split .yic-builder-cols > .yic-builder-col:last-child {
		grid-column: span 30 !important;
	}
	.yic-sd-split .yic-builder-cols {
		align-items: center;
		--yic-col-gutter: clamp(1.5rem, 3vw, 2.5rem);
	}
	.yic-sd-split .yic-builder-el--image,
	.yic-sd-split .yic-builder-figure {
		max-width: none;
		max-height: min(560px, 62vh);
		aspect-ratio: 3 / 4;
		border-radius: 32px;
		margin: 0;
	}
}

/* Liste SD (Notify ecc.): card separate + icone per voce. */
.yic-sd-lists .yic-builder-cols {
	--yic-col-gutter: 1rem;
	row-gap: 1rem;
	align-items: stretch;
}
.yic-sd-lists .yic-builder-col {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: 1.25rem calc(1.15rem + var(--yic-col-gutter) / 2) 1.35rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
.yic-sd-lists .yic-builder-col::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--yic-col-gutter) / 2);
	background: var(--yic-surface-container-lowest, #fff);
	border: 1px solid var(--yic-ui-card-border, var(--yic-surface-container-low, #f4f3f3));
	border-radius: 20px;
	box-shadow: 0 10px 28px -22px rgba(28, 20, 22, .28);
	pointer-events: none;
	z-index: 0;
}
.yic-sd-lists .yic-builder-col > .yic-builder-el {
	position: relative;
	z-index: 1;
	margin: 0;
}
.yic-sd-lists .yic-builder-col > .yic-builder-el--icon {
	margin-bottom: .1rem;
}
.yic-sd-lists .yic-builder-title__main {
	font-size: 1.15rem;
	color: var(--yic-primary, #c2410c);
	margin: 0;
}
.yic-sd-lists .yic-builder-list {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yic-sd-lists .yic-builder-list__item {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin: 0;
	padding: .65rem .75rem;
	background: var(--yic-surface-container-low, #f4f3f3);
	border-radius: 14px;
	color: var(--yic-on-surface, #1c1416);
	font-size: .95rem;
	line-height: 1.45;
}
.yic-sd-lists .yic-builder-list__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-top: .05rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--yic-primary, #c2410c) 10%, #fff);
	font-size: 1.15rem !important;
	line-height: 1;
}
.yic-sd-lists .yic-builder-list__item > :not(.yic-builder-list__marker) {
	min-width: 0;
	flex: 1 1 auto;
	padding-top: .3rem;
}
@media (min-width: 801px) {
	.yic-sd-lists .yic-builder-cols {
		--yic-col-gutter: 1.5rem;
		row-gap: 1.5rem;
	}
	.yic-sd-lists .yic-builder-col {
		padding: 1.5rem calc(1.4rem + var(--yic-col-gutter) / 2) 1.6rem;
		gap: 1rem;
	}
	.yic-sd-lists .yic-builder-col::before {
		border-radius: var(--yic-ui-card-radius, 24px);
	}
	.yic-sd-lists .yic-builder-title__main {
		font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	}
	.yic-sd-lists .yic-builder-list__item {
		padding: .75rem .9rem;
		border-radius: 16px;
	}
}

.yic-sd-showcase .yic-builder-figure { margin: 0; }
.yic-sd-showcase .yic-builder-img {
	width: 100%;
	height: auto;
	max-height: min(360px, 55vh);
	object-fit: contain;
	object-position: center;
	background: var(--yic-surface-container-low, #f4f3f3);
	border-radius: 18px;
	box-shadow: 0 16px 36px -24px rgba(28, 20, 22, .4);
}
@media (min-width: 801px) {
	.yic-sd-showcase .yic-builder-img {
		max-height: min(560px, 72vh);
		border-radius: var(--yic-ui-card-radius, 24px);
	}
}

/* Teaser hub App */
.yic-sd-teasers .yic-builder-cols { --yic-col-gutter: .9rem; }
.yic-sd-teasers .yic-builder-col {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	column-gap: .7rem;
	row-gap: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-inline: calc(var(--yic-col-gutter) / 2);
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	position: relative;
}
.yic-sd-teasers .yic-builder-col::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--yic-col-gutter) / 2);
	background: var(--yic-surface-container-lowest, #fff);
	border: 1px solid var(--yic-ui-card-border, var(--yic-surface-container-low, #f4f3f3));
	border-radius: 18px;
	box-shadow: 0 10px 28px -22px rgba(28, 20, 22, .35);
	pointer-events: none;
	z-index: 0;
}
.yic-sd-teasers .yic-builder-col > .yic-builder-el {
	position: relative;
	z-index: 1;
}
.yic-sd-teasers .yic-builder-col > .yic-builder-el--image:first-child {
	grid-column: 1 / -1;
	margin: 0;
	overflow: hidden;
	border-radius: 18px 18px 0 0;
}
.yic-sd-teasers .yic-builder-figure { margin: 0; }
.yic-sd-teasers .yic-builder-col > .yic-builder-el--image:first-child .yic-builder-img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	display: block;
}
.yic-sd-teasers .yic-builder-el--image + .yic-builder-el--image {
	grid-column: 1;
	margin-top: 0;
	padding: 1rem 0 0 1.1rem;
	align-self: center;
}
.yic-sd-teasers .yic-builder-el--image + .yic-builder-el--image .yic-builder-img {
	width: 48px !important;
	height: 48px !important;
	max-width: 48px !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 8px 20px -10px rgba(0,0,0,.35);
	background: #fff;
	border: 1px solid var(--yic-ui-card-border, #f0e8e8);
}
.yic-sd-teasers .yic-builder-el + .yic-builder-el { margin-top: 0; }
.yic-sd-teasers .yic-builder-el--image + .yic-builder-el--image + .yic-builder-el--title {
	grid-column: 2;
	margin: 0;
	padding: 1rem 1.1rem 0 0;
	align-self: center;
}
.yic-sd-teasers .yic-builder-el--text,
.yic-sd-teasers .yic-builder-el--button {
	grid-column: 1 / -1;
	padding-inline: 1.1rem;
}
.yic-sd-teasers .yic-builder-el--text { margin-top: .7rem; }
.yic-sd-teasers .yic-builder-el--button {
	margin-top: .85rem;
	padding-bottom: 1.15rem;
}
.yic-sd-teasers .yic-builder-el--button .yic-btn {
	width: 100%;
	justify-content: center;
	min-height: 2.75rem;
}
.yic-sd-teasers .yic-builder-title__main {
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--yic-primary, #c2410c);
}
.yic-sd-teasers .yic-builder-el--text p {
	margin: 0;
	color: var(--yic-on-surface-variant, #584142);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 601px) {
	.yic-sd-teasers .yic-builder-cols { --yic-col-gutter: 1.25rem; }
	.yic-sd-teasers .yic-builder-col::before,
	.yic-sd-teasers .yic-builder-col > .yic-builder-el--image:first-child {
		border-radius: 22px;
	}
	.yic-sd-teasers .yic-builder-col > .yic-builder-el--image:first-child {
		border-radius: 22px 22px 0 0;
	}
	.yic-sd-teasers .yic-builder-el--button .yic-btn {
		width: auto;
	}
}
@media (min-width: 801px) {
	.yic-sd-teasers .yic-builder-cols { --yic-col-gutter: 1.5rem; }
	.yic-sd-teasers .yic-builder-col { column-gap: .85rem; }
	.yic-sd-teasers .yic-builder-col::before {
		border-radius: var(--yic-ui-card-radius, 24px);
	}
	.yic-sd-teasers .yic-builder-col > .yic-builder-el--image:first-child {
		border-radius: var(--yic-ui-card-radius, 24px) var(--yic-ui-card-radius, 24px) 0 0;
	}
	.yic-sd-teasers .yic-builder-el--image + .yic-builder-el--image {
		padding: 1.2rem 0 0 1.35rem;
	}
	.yic-sd-teasers .yic-builder-el--image + .yic-builder-el--image .yic-builder-img {
		width: 56px !important;
		height: 56px !important;
		max-width: 56px !important;
		border-radius: 14px;
	}
	.yic-sd-teasers .yic-builder-el--image + .yic-builder-el--image + .yic-builder-el--title {
		padding: 1.2rem 1.35rem 0 0;
	}
	.yic-sd-teasers .yic-builder-el--text,
	.yic-sd-teasers .yic-builder-el--button { padding-inline: 1.35rem; }
	.yic-sd-teasers .yic-builder-el--button { padding-bottom: 1.35rem; }
	.yic-sd-teasers .yic-builder-title__main {
		font-size: clamp(1.2rem, 1.8vw, 1.35rem);
	}
}
@media (hover: hover) {
	.yic-sd-teasers .yic-builder-col {
		transition: transform .2s ease;
	}
	.yic-sd-teasers .yic-builder-col::before {
		transition: box-shadow .2s ease;
	}
	.yic-sd-teasers .yic-builder-col:hover {
		transform: translateY(-3px);
	}
	.yic-sd-teasers .yic-builder-col:hover::before {
		box-shadow: var(--yic-ui-card-hover-shadow, 0 16px 36px -20px rgba(194, 65, 12, .28));
	}
	.yic-store-row__badge:hover {
		transform: translateY(-2px);
		opacity: .92;
	}
	.yic-sd-download__web:hover,
	.yic-sd-download .yic-btn--on-dark:hover {
		background: color-mix(in srgb, #fff 90%, var(--yic-primary, #c2410c));
		color: var(--yic-primary, #c2410c);
	}
}

/* Download #scarica: titolo → lead → badge → anteprime */
.yic-sd-download {
	background: var(--yic-primary, #c2410c);
}
.yic-sd-download .yic-builder-anchor,
.yic-sd-apps-head .yic-builder-anchor,
#scarica,
#le-app {
	scroll-margin-top: calc(var(--yic-header-height, 76px) + 12px);
}
.yic-sd-download > .yic-container {
	padding-inline: 1.1rem;
}
.yic-sd-download .yic-builder-cols {
	--yic-col-gutter: 1rem;
	align-items: stretch;
}
.yic-sd-download .yic-builder-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
}
.yic-sd-download .yic-builder-col > .yic-builder-el {
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
}
.yic-sd-download .yic-builder-title__main,
.yic-sd-download .yic-builder-title__eyebrow { color: #fff; }
.yic-sd-download .yic-builder-title__main {
	font-size: clamp(1.35rem, 5.5vw, 1.65rem);
	line-height: 1.2;
}
.yic-sd-download .yic-builder-title__sep {
	width: 3rem;
	background: rgba(255, 255, 255, .55);
}
.yic-sd-download .yic-builder-el--title + .yic-builder-el--text { margin-top: .85rem; }
.yic-sd-download .yic-sd-download__lead,
.yic-sd-download .yic-builder-el--text > p.yic-sd-download__lead {
	margin: 0;
	max-width: 40rem;
	color: rgba(255, 255, 255, .86);
	font-size: 1rem;
	line-height: 1.55;
}
/* Badge subito sotto il lead */
.yic-sd-download .yic-builder-el--text:has(.yic-sd-download__actions) {
	margin-top: 1.35rem;
}
.yic-sd-download__actions {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .85rem;
	width: 100%;
	max-width: 22rem;
	margin: 0;
}
.yic-sd-download .yic-store-row,
.yic-store-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0;
	width: auto;
	max-width: 100%;
}
.yic-store-row__badge {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	transition: transform .18s ease, opacity .18s ease;
}
.yic-store-row__badge img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	object-position: left center;
}
.yic-store-row__fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 1rem;
	border-radius: 10px;
	background: #000;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.yic-sd-download__web,
.yic-sd-download .yic-btn--on-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: auto;
	align-self: flex-start;
	min-height: 2.75rem;
	padding: .7rem 1.15rem;
	border-radius: 999px;
	background: #fff;
	color: var(--yic-primary, #c2410c);
	border: 1px solid #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
}
.yic-sd-download__web .material-symbols-outlined,
.yic-sd-download .yic-btn--on-dark .material-symbols-outlined {
	font-size: 1.15rem;
	line-height: 1;
}
/* Anteprime dopo i badge — 4 per riga, intere, senza cornice */
.yic-sd-download--shots .yic-builder-el--gallery {
	margin-top: 1.75rem;
}
.yic-sd-download--shots .yic-builder-gallery {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: .75rem !important;
	overflow: visible;
	padding-bottom: 0;
}
.yic-sd-download--shots .yic-builder-gallery__item,
.yic-sd-download--shots .yic-builder-gallery--rounded .yic-builder-gallery__item {
	width: 100%;
	margin: 0;
	aspect-ratio: auto;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 12px;
	overflow: hidden;
}
.yic-sd-download--shots .yic-builder-gallery__link {
	display: block;
	width: 100%;
	height: auto;
}
.yic-sd-download--shots .yic-builder-gallery--r-auto .yic-builder-gallery__item img,
.yic-sd-download--shots .yic-builder-gallery__item img {
	display: block;
	width: 100%;
	height: auto !important;
	max-height: none;
	object-fit: contain;
	object-position: center top;
	background: transparent;
}
.yic-sd-download--shots .yic-builder-gallery__item:hover img {
	transform: none;
}
@media (min-width: 601px) {
	.yic-sd-download > .yic-container { padding-inline: 1.35rem; }
	.yic-sd-download__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		max-width: none;
		gap: 1rem 1.25rem;
	}
	.yic-store-row__badge img { height: 48px; max-width: 170px; }
}
@media (min-width: 801px) {
	.yic-sd-download > .yic-container { padding-inline: clamp(1.25rem, 3vw, 2rem); }
	.yic-sd-download .yic-builder-title__main {
		font-size: clamp(1.45rem, 2.4vw, 1.85rem);
	}
	.yic-sd-download .yic-sd-download__lead,
	.yic-sd-download .yic-builder-el--text > p.yic-sd-download__lead {
		max-width: 42rem;
		font-size: 1.05rem;
	}
	.yic-sd-download .yic-builder-el--text:has(.yic-sd-download__actions) {
		margin-top: 1.5rem;
	}
	.yic-store-row__badge img { height: 52px; max-width: 180px; }
	.yic-sd-download--shots .yic-builder-el--gallery { margin-top: 2rem; }
	.yic-sd-download--shots .yic-builder-gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 1rem !important;
	}
	.yic-sd-download--shots .yic-builder-gallery__item,
	.yic-sd-download--shots .yic-builder-gallery--rounded .yic-builder-gallery__item {
		border-radius: 16px;
	}
}

/*
 * Ritmo sezioni SD: respiro chiaro tra bande (prima erano ~1.5rem → “attaccate”).
 * Copre anche blocchi intermedi senza classe (es. alert SMS Notify).
 */
.yic-builder-content > .yic-sd-intro,
.yic-builder-content > .yic-sd-features,
.yic-builder-content > .yic-sd-lists,
.yic-builder-content > .yic-sd-split,
.yic-builder-content > .yic-sd-store-shots,
.yic-builder-content > .yic-sd-download,
.yic-builder-content > .yic-sd-showcase,
.yic-builder-content > .yic-sd-teasers,
.yic-builder-content > .yic-sd-apps-head,
.yic-builder-content > .yic-sd-split + .yic-builder-container:not([class*="yic-sd-"]),
.yic-builder-content > .yic-sd-lists + .yic-builder-container:not([class*="yic-sd-"]),
.yic-builder-content > .yic-sd-features + .yic-builder-container:not([class*="yic-sd-"]) {
	margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
.yic-builder-content > .yic-sd-hero + .yic-sd-intro,
.yic-builder-content > .yic-sd-hero + .yic-sd-teasers {
	/* Dopo l’hero il padding del hero basta un filo meno. */
	margin-top: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 801px) {
	.yic-builder-content > .yic-sd-intro,
	.yic-builder-content > .yic-sd-features,
	.yic-builder-content > .yic-sd-lists,
	.yic-builder-content > .yic-sd-split,
	.yic-builder-content > .yic-sd-store-shots,
	.yic-builder-content > .yic-sd-download,
	.yic-builder-content > .yic-sd-showcase,
	.yic-builder-content > .yic-sd-teasers,
	.yic-builder-content > .yic-sd-apps-head,
	.yic-builder-content > .yic-sd-split + .yic-builder-container:not([class*="yic-sd-"]),
	.yic-builder-content > .yic-sd-lists + .yic-builder-container:not([class*="yic-sd-"]),
	.yic-builder-content > .yic-sd-features + .yic-builder-container:not([class*="yic-sd-"]) {
		margin-top: clamp(3.25rem, 5vw, 5rem);
	}
	.yic-builder-content > .yic-sd-hero + .yic-sd-intro,
	.yic-builder-content > .yic-sd-hero + .yic-sd-teasers {
		margin-top: clamp(2rem, 3.5vw, 3.25rem);
	}
}


/*
 * Stile card “Classico” (Impostazioni Tema → Componenti → Stile card).
 * Ripristina raggio minore, bordo rosa e hover senza anello spesso.
 */
body.yic-card-style-classic {
	--yic-ui-card-radius: 14px;
	--yic-ui-card-border: var(--yic-outline-variant, #e0bfc0);
	--yic-ui-card-hover-shadow: 0 10px 30px rgba(194, 65, 12, .10);
	--yic-ui-hub-hover-shadow: 0 12px 24px -8px rgba(194, 65, 12, .15);
	--yic-ui-card-title-size: 1.2rem;
	--yic-ui-card-pad: 1.35rem;
	--yic-ui-card-body-gap: 0.5rem;
	--yic-ui-card-icon-margin: 1.35rem 1.35rem 0;
	--yic-ui-card-grid-gap: 1.5rem;
	--yic-ui-card-media-radius: 12px;
	--yicb-img-radius: 16px;
}
body.yic-card-style-classic .yic-home-news .yic-post-card__title {
	font-size: 1.1rem;
	letter-spacing: 0;
}