/* ==========================================================================
   Crossroads — Home page
   Riproduce la bozza HTML "Home (proposal v4, beige variant)".
   Ogni sezione è dentro <div class="crh">: le regole valgono solo lì,
   così non toccano Divi né le altre pagine.
   ========================================================================== */

.crh {
	--yellow: var(--cr-yellow);
	--red: var(--cr-red);
	--blue: var(--cr-blue);
	--grey: var(--cr-grey);
	--ink: var(--cr-ink);
	--paper: #FFFFFF;
	--cream: var(--cr-bg);
	--muted: var(--cr-muted);
	--rule: var(--cr-rule);
	--display: var(--cr-font-head);
	--text: var(--cr-font-text);
	--label: var(--cr-font-sc);
	--accent: var(--cr-font-accent);

	background: var(--cream);
	color: var(--ink);
	font-family: var(--text);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;               /* nessuno scorrimento orizzontale su telefono */
}
.crh *, .crh *::before, .crh *::after { box-sizing: border-box; margin: 0; padding: 0; }
.crh a { color: inherit; text-decoration: none; }
.crh img { display: block; max-width: 100%; }
.crh h1, .crh h2, .crh h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; color: var(--ink); }
.crh em { font-style: normal; }
.crh ul, .crh li { list-style: none; }
/* i paragrafi ereditano dimensione e interlinea della bozza, non quelle dei moduli Divi */
.crh p { font-size: inherit; line-height: inherit; color: inherit; font-family: inherit; }

/* Divi aggiunge <p> vuoti, <p> attorno ai link e <br> nel modulo Code:
   qui non devono occupare spazio né rompere le griglie. */
.crh p:empty, .crh br { display: none !important; }
.crh p:not([class]) { display: contents; }

.crh .wrap { max-width: var(--cr-max); margin: 0 auto; padding: 0 var(--cr-gutter); }
.crh .label { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

/* bottoni */
.crh .btn {
	display: inline-block;
	font-family: var(--label);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.5;
	padding: 12px 20px;
	border: 2px solid var(--ink);
	background: var(--ink);
	color: #fff;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.crh .btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.crh .btn.ghost { background: transparent; color: var(--ink); }
.crh .btn.ghost:hover { background: var(--ink); color: #fff; }

/* riquadri immagine: segnaposto bianco oppure foto vera */
.crh .img { position: relative; overflow: hidden; }
.crh .img > img,
.crh .slides .s > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- hero ---------- */
.crh .hero { padding: 56px 0 48px; }
.crh .hero .grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: center; }
.crh .hero .kicker { color: var(--red); margin-bottom: 18px; }
.crh .hero h1 { font-size: clamp(44px, 5.8vw, 80px); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.crh .hero .sub { font-family: var(--accent); font-style: italic; font-size: 22px; color: #2b2b28; margin: 22px 0 26px; max-width: 28em; }
.crh .hero .intro { font-size: 17px; color: #2b2b28; max-width: 34em; }
.crh .hero .cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.crh .slides { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.crh .slides .s { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; opacity: 0; transition: opacity .7s; }
.crh .slides .s.on { opacity: 1; }
.crh .slides .s span { position: relative; z-index: 1; background: #fff; padding: 6px 12px; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.crh .slides .dots { position: absolute; left: 18px; top: 18px; display: flex; gap: 6px; z-index: 2; }
.crh .slides .dots i { display: block; width: 24px; height: 4px; background: rgba(255, 255, 255, .6); cursor: pointer; }
.crh .slides .dots i.on { background: #fff; }
/* sul fondo bianco del segnaposto le lineette bianche non si vedrebbero */
.crh .slides:not(:has(img)) .dots i { background: rgba(17, 17, 17, .18); }
.crh .slides:not(:has(img)) .dots i.on { background: var(--ink); }

/* ---------- quattro card ---------- */
.crh .services { padding: 0 0 64px; }
.crh .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 3px solid var(--ink); }
.crh .svc { padding: 22px 20px 26px; border-right: 1px solid var(--rule); }
.crh .svc:last-child { border-right: 0; }
.crh .svc .img { aspect-ratio: 4 / 3; background: #fff; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crh .svc h3 { font-size: 24px; margin-bottom: 8px; }
.crh .svc .txt { font-size: 15px; color: #2b2b28; margin-bottom: 12px; }
.crh .svc > a:not(.img) { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.crh .svc > a:not(.img):hover { color: var(--red); border-color: var(--red); }
.crh .svc h3 a:hover { color: var(--red); }

/* foto cliccabili (card, eventi): leggero zoom al passaggio del mouse */
.crh a.img > img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
	.crh a.img:hover > img { transform: scale(1.04); }
	.crh .svc:hover h3 a,
	.crh .ev:hover h3 a { color: var(--red); }
}
@media (prefers-reduced-motion: reduce) { .crh a.img > img { transition: none; } }

/* ---------- eventi ---------- */
.crh .events { background: var(--cream); padding: 64px 0; }
.crh .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; }
.crh .sec-head h2 { font-size: clamp(34px, 4vw, 52px); text-transform: uppercase; }
.crh .sec-head a { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.crh .sec-head a:hover { color: var(--red); border-color: var(--red); }
.crh .ev-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; margin-bottom: 40px; align-items: center; }
.crh .ev-top .img { aspect-ratio: 16 / 9; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crh .ev-top h3 { font-size: clamp(28px, 3vw, 40px); margin: 12px 0; }
.crh .ev-top .dt { font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.crh .ev-top .desc { color: #2b2b28; margin-top: 10px; }
.crh .ev-top .btn { margin-top: 18px; }
.crh .ev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.crh .ev { background: var(--cream); display: flex; flex-direction: column; }
.crh .ev .img { aspect-ratio: 4 / 3; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crh .ev .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.crh .ev .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.crh .ev .tags span { font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--ink); padding: 3px 8px; }
.crh .ev h3 { font-size: 22px; }
.crh .ev h3 a:hover { color: var(--red); }
.crh .ev .when { font-family: var(--accent); font-style: italic; color: var(--muted); font-size: 15px; }
.crh .ev .more { margin-top: auto; font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--ink); align-self: flex-start; }
.crh .ev .more:hover { color: var(--red); border-color: var(--red); }
.crh .ev-empty { font-family: var(--accent); font-style: italic; color: var(--muted); }

/* ---------- numeri ---------- */
.crh .feature { padding: 72px 0; }
.crh .feature h2 { font-size: clamp(34px, 4.2vw, 58px); max-width: 18em; margin-bottom: 28px; text-transform: uppercase; }
.crh .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 3px solid var(--ink); }
.crh .stat { padding: 26px 22px 0; border-right: 1px solid var(--rule); }
.crh .stat:last-child { border-right: 0; }
.crh .stat .n { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 5vw, 68px); line-height: 1; }
.crh .stat .l { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; color: var(--muted); }
.crh .stat.c1 .n { color: var(--red); }
.crh .stat.c2 .n { color: var(--blue); }
.crh .stat.c3 .n { color: #c39410; }
.crh .stat.c4 .n { color: var(--ink); }

/* ---------- nastro dei valori ---------- */
.crh .values { background: var(--cream); color: var(--ink); overflow: hidden; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.crh .values .marq { display: flex; width: max-content; animation: crh-marq 28s linear infinite; }
.crh .values .track { display: flex; align-items: center; flex-shrink: 0; font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.crh .values .it { padding: 0 18px; }
.crh .values .dot { color: var(--red); padding: 0 6px; }
@keyframes crh-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- video ---------- */
.crh .watch { padding: 72px 0; }
.crh .watch-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.crh .watch .img { aspect-ratio: 16 / 9; background: #fff; position: relative; display: flex; align-items: center; justify-content: center; color: var(--ink); font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.crh .watch .img::after { content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%; background: var(--red); }
.crh .watch .img span { position: relative; z-index: 1; }
.crh .watch .img.is-video::after { display: none; }
.crh .watch .img iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.crh .watch .kick { font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.crh .watch h3 { font-size: 20px; margin-top: 12px; }

/* ---------- social ---------- */
.crh .social { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 26px 0; }
.crh .social .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.crh .social .links { display: flex; gap: 28px; flex-wrap: wrap; }
.crh .social a { font-family: var(--label); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.crh .social a:hover { color: var(--red); }

/* ---------- banner donazioni ---------- */
.crh .support { background: var(--yellow); padding: 64px 0; }
.crh .support .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.crh .support h2 { font-size: clamp(30px, 3.6vw, 46px); max-width: 18em; text-transform: uppercase; }
.crh .support .txt { margin-top: 12px; max-width: 34em; }

/* ==========================================================================
   Animazioni dei titoli (come nella bozza)
   ========================================================================== */

/* titolo principale: le parole salgono una dopo l'altra, poi la sottolineatura gialla */
.crh .reveal .w { display: inline-block; opacity: 0; transform: translateY(40px); animation: crh-rise .9s cubic-bezier(.2, .7, .2, 1) var(--d) forwards; }
.crh .reveal em.hl { background-size: 0% 100%; background-repeat: no-repeat; background-position: left center; background-image: linear-gradient(var(--yellow), var(--yellow)); animation: crh-draw .8s ease 1.1s forwards; }
@keyframes crh-rise { to { opacity: 1; transform: none; } }
@keyframes crh-draw { to { background-size: 100% 38%; } }

/* titoli di sezione: parole che salgono quando la sezione entra nello schermo
   (le parole vengono create dallo script: senza script il titolo resta normale) */
.crh .rv .w { display: inline-block; opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d); }
.crh .rv.in .w { opacity: 1; transform: none; }
.crh .rv .hl { font-weight: 500; background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-position: left center; background-size: 0% 38%; transition: background-size .8s ease .5s; }
.crh .rv.in .hl { background-size: 100% 38%; }

@media (prefers-reduced-motion: reduce) {
	.crh .values .marq { animation: none; }
	.crh .reveal .w, .crh .reveal em.hl { animation: none; opacity: 1; transform: none; background-size: 100% 38%; }
	.crh .rv .w { opacity: 1; transform: none; transition: none; }
	.crh .rv .hl { background-size: 100% 38%; transition: none; }
	.crh .slides .s { transition: none; }
}

/* ==========================================================================
   Tablet (come la bozza, sotto i 1000px)
   ========================================================================== */
@media (max-width: 1000px) {
	.crh .hero .grid, .crh .ev-top { grid-template-columns: 1fr; }
	.crh .svc-grid, .crh .ev-cards, .crh .watch-grid { grid-template-columns: 1fr 1fr; }
	.crh .svc { border-right: 0; border-bottom: 1px solid var(--rule); }
	.crh .svc:nth-child(odd) { border-right: 1px solid var(--rule); }
	.crh .stats { grid-template-columns: 1fr 1fr; }
	.crh .stat { padding-bottom: 22px; }
	.crh .stat:nth-child(2n) { border-right: 0; }
	.crh .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* ==========================================================================
   Telefono: una colonna, spazi più stretti, animazioni più brevi
   ========================================================================== */
@media (max-width: 640px) {
	.crh { font-size: 16px; }
	.crh .hero { padding: 36px 0 40px; }
	.crh .hero .grid { gap: 32px; }
	.crh .hero h1 { font-size: clamp(38px, 11.5vw, 52px); }
	.crh .hero .sub { font-size: 19px; margin: 18px 0 20px; }
	.crh .hero .cta { margin-top: 24px; }
	.crh .hero .cta .btn { flex: 1 1 100%; text-align: center; }

	.crh .services { padding-bottom: 48px; }
	/* le quattro card diventano righe compatte: foto a sinistra, testo a destra */
	.crh .svc-grid { grid-template-columns: 1fr; }
	.crh .svc, .crh .svc:nth-child(odd) {
		display: grid;
		grid-template-columns: 112px 1fr;
		grid-template-rows: auto auto 1fr;
		column-gap: 16px;
		align-items: start;
		border-right: 0;
		padding: 18px 0;
	}
	.crh .svc:last-child { border-bottom: 0; }
	.crh .svc .img { grid-row: 1 / 4; margin: 0; font-size: 9px; text-align: center; padding: 4px; }
	.crh .svc h3 { font-size: 20px; margin-bottom: 4px; }
	.crh .svc .txt { font-size: 14px; margin-bottom: 8px; }
	.crh .svc > a:not(.img) { justify-self: start; align-self: start; font-size: 12px; }

	.crh .events { padding: 48px 0; }
	.crh .ev-top { gap: 20px; margin-bottom: 32px; }
	.crh .ev-cards, .crh .watch-grid { grid-template-columns: 1fr; gap: 28px; }
	.crh .ev .body { padding: 16px 0 0; }
	.crh .sec-head { flex-wrap: wrap; align-items: baseline; gap: 10px 24px; margin-bottom: 22px; }

	.crh .feature { padding: 52px 0; }
	.crh .stat { padding: 20px 14px 18px; }
	.crh .stat:nth-child(odd) { padding-left: 0; }
	.crh .stat .n { font-size: 42px; }

	.crh .watch { padding: 52px 0; }
	.crh .support { padding: 48px 0; }
	.crh .support .btn { width: 100%; text-align: center; }

	/* movimento più contenuto sugli schermi piccoli */
	.crh .reveal .w { transform: translateY(24px); animation-duration: .7s; }
	.crh .rv .w { transform: translateY(18px); }
	.crh .values .marq { animation-duration: 22s; }
}