/* ==========================================================================
   Casa Gaia — HOMEPAGE (agente home). Caricato solo su is_front_page() (inc/risorse.php).
   Valori copiati dalla style.css della bozza 1; colori e font SOLO dalle variabili di base.css.
   Indice: 1. Hero  2. Contenuto libero  3. Allevamento e numeri  4. Storia  5. Valori
           6. Cani  7. Cucciolate  8. In memoria  9. Domande  10. Contatti
   ========================================================================== */

/* 1. Hero ------------------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--nero); }
.hero__foto { position: absolute; inset: 0 0 0 auto; width: min(64%, 1100px); height: 100%; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Foto computer/telefono in <picture>; il punto focale arriva dalle variabili scritte da hero.php. */
.hero__foto picture { display: block; width: 100%; height: 100%; }
.hero__foto { --hero-fuoco: var(--fuoco-computer, 50% 30%); }
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--nero) 34%, rgba(10, 10, 11, .86) 46%, rgba(10, 10, 11, .25) 66%, rgba(10, 10, 11, .05) 80%),
		linear-gradient(0deg, var(--nero) 0%, rgba(10, 10, 11, 0) 30%),
		radial-gradient(ellipse at 72% 40%, rgba(10, 10, 11, 0) 30%, rgba(10, 10, 11, .55) 80%);
	pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(64px, 10vh, 120px); padding-top: 150px; max-width: var(--max-testata); }
.hero h1 { font-size: var(--corpo-enorme); line-height: .9; font-weight: 500; max-width: 9.5ch; letter-spacing: -.02em; }
.hero h1 em { display: block; color: var(--bronzo-chiaro); font-weight: 400; }
/* "una passione dal 1977" (non l'anno di fondazione): più piccolo, così sta su una riga come il "dal 1977" della bozza. */
.hero h1 em { font-size: .6em; line-height: 1; margin-top: .14em; }
.hero .sottotitolo { margin: 34px 0 0; max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--testo); }
.hero .azioni { margin-top: 44px; }
.hero-meta {
	position: absolute;
	right: var(--gutter);
	bottom: clamp(64px, 10vh, 120px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font: 600 .68rem/1 var(--sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--avorio); /* sulla foto: con --testo scendeva a 4,3:1 */
	text-shadow: 0 0 2px rgba(10, 10, 11, .9), 0 0 14px rgba(10, 10, 11, .9); /* alone scuro: sulla foto chiara resta sopra 4,5:1 */
}
.hero-meta .riga { width: 1px; height: 80px; background: var(--bronzo); margin-bottom: 8px; }
.sigilli {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 56px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--linea);
	max-width: 520px;
	font: 600 .7rem/1.3 var(--sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--grigio);
}
.sigilli abbr { color: var(--avorio); font-weight: 600; text-decoration: none; border: 0; cursor: help; }
@media (max-width: 820px) {
	.hero__foto { width: 100%; height: 68%; inset: 0 0 auto 0; }
	.hero__foto img { object-position: 58% 25%; }
	.hero__foto { --hero-fuoco: var(--fuoco-telefono, 58% 25%); }
	/* Velo ancorato in alto (vh) e non in %: l'hero mobile è alto più dello schermo (contenuto),
	   e con le % l'occhiello "Palombara Sabina" finiva sulla foto chiara (2,3:1). */
	.hero::after { background: linear-gradient(180deg, rgba(10, 10, 11, .45) 0, rgba(10, 10, 11, .08) 110px, rgba(10, 10, 11, .18) 28vh, rgba(10, 10, 11, .86) calc(52vh - 28px), var(--nero) calc(52vh + 140px)); }
	.hero .wrap { padding-top: 52vh; }
	.hero-meta { display: none; }
	.sigilli { gap: 10px 18px; }
}

/* 2. Contenuto libero della pagina home (avvisi, novità) ------------------- */
.home-libero .contenuto { padding: 0; }

/* 3. Allevamento e numeri -------------------------------------------------- */
.intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.intro > * { min-width: 0; }
.intro p { margin: 0 0 1.2em; }
.citazione { font: 400 italic clamp(2rem, 3.6vw, 3.2rem)/1.12 var(--serif); color: var(--avorio); margin: 0 0 40px; padding: 0; position: relative; }
.citazione::before { content: "“"; position: absolute; left: -.5em; top: -.18em; color: var(--bronzo); font-size: 1.6em; line-height: 1; }
.coppia-foto { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin-top: 56px; align-items: end; }
.coppia-foto--una { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.coppia-foto figure { margin: 0; min-width: 0; }
.coppia-foto img { width: 100%; height: auto; }
.coppia-foto figure:last-child:not(:first-child) { margin-bottom: -60px; }
.numeri { display: grid; grid-template-columns: repeat(var(--colonne, 4), minmax(0, 1fr)); margin: clamp(70px, 9vw, 120px) 0 0; border-top: 1px solid var(--linea); }
.numeri > div { padding: 34px 26px 0; border-right: 1px solid var(--linea); min-width: 0; }
.numeri > div:first-child { padding-left: 0; }
.numeri > div:last-child { border-right: 0; }
.numeri dd { margin: 0; }
.numeri b { display: block; font: 400 clamp(2.8rem, 5vw, 4.6rem)/1 var(--serif); color: var(--bronzo-chiaro); letter-spacing: -.02em; }
.numeri span { display: block; margin-top: 14px; font-size: .88rem; color: var(--grigio); max-width: 22ch; }
@media (max-width: 900px) {
	.intro { grid-template-columns: 1fr; }
	.numeri { grid-template-columns: 1fr 1fr; }
	.numeri > div { padding: 28px 18px 28px 0; border-bottom: 1px solid var(--linea); }
	.numeri > div:nth-child(2n) { border-right: 0; padding-left: 18px; }
	.numeri > div:nth-child(odd) { padding-left: 0; }
	.coppia-foto figure:last-child:not(:first-child) { margin-bottom: 0; }
	.citazione::before { left: -.38em; }
}

/* 4. Storia di Mauro ------------------------------------------------------- */
.storia { background: var(--antracite); }
.storia-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.storia--senza-foto .storia-griglia { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--larghezza-testo) + 2 * var(--gutter)); }
.trittico { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: auto auto; gap: 12px; }
.trittico > * { min-width: 0; }
.trittico figure { margin: 0; overflow: hidden; }
.trittico img { width: 100%; filter: grayscale(1) contrast(1.05); object-fit: cover; }
.trittico figure:first-child { grid-row: span 2; position: relative; min-height: 100%; }
/* La prima foto riempie le due righe delle quadrate (assoluta: niente altezza intrinseca dalla lazy). */
.trittico figure:first-child img { position: absolute; inset: 0; height: 100%; }
.trittico figure:not(:first-child) img { aspect-ratio: 1 / 1; object-position: 50% 25%; }
.trittico--1, .trittico--2 { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.trittico--1 figure:first-child, .trittico--2 figure:first-child { grid-row: auto; position: static; }
.trittico--1 figure:first-child img, .trittico--2 figure:first-child img { position: static; height: auto; }
.trittico--1 img, .trittico--2 img { aspect-ratio: 616 / 900 !important; }
.trittico--1 { --n: 1; }
.anno-grande { font: 400 clamp(6rem, 14vw, 12rem)/.8 var(--serif); color: transparent; -webkit-text-stroke: 1px #57524a; letter-spacing: -.04em; margin: 0 0 -.12em; user-select: none; }
.storia blockquote { margin: 28px 0 30px; padding: 0; border: 0; font: 400 italic clamp(1.6rem, 2.6vw, 2.3rem)/1.2 var(--serif); color: var(--avorio); }
.storia h2 + .storia-testo { margin-top: 28px; }
.storia p { margin: 0 0 1.1em; }
@media (max-width: 900px) {
	.storia-griglia { grid-template-columns: 1fr; }
	.trittico { order: 2; }
}

/* 5. Valori (salute, carattere, bellezza) --------------------------------- */
.valori { position: relative; overflow: hidden; background: var(--nero); }
.valori-foto { position: absolute; inset: 0; z-index: 0; }
.valori-foto img { width: 100%; height: 100%; object-fit: cover; opacity: .26; filter: grayscale(.6); }
.valori-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--nero) 0%, rgba(10, 10, 11, .6) 40%, var(--nero) 100%); }
.valori .wrap { position: relative; z-index: 1; }
.valori-testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(56px, 7vw, 96px); }
.valori-testa h2 { max-width: 15ch; }
.valori-testa p { max-width: 42ch; margin: 0; }
.tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea-forte); }
.tre article { padding: 44px clamp(20px, 3vw, 48px) 10px; border-left: 1px solid var(--linea-forte); }
.tre article:first-child { border-left: 0; padding-left: 0; }
.tre h3 { margin: 22px 0 18px; font-size: clamp(2rem, 3vw, 2.7rem); }
.tre p { margin: 0; font-size: .98rem; }
.tre ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tre li { font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--linea-forte); padding: 9px 12px; color: var(--avorio); }
@media (max-width: 900px) {
	.tre { grid-template-columns: 1fr; }
	.tre article { border-left: 0; padding: 40px 0; border-bottom: 1px solid var(--linea-forte); }
}

/* 6. Cani (griglia e filtri sono in componenti.css) ----------------------- */
#cani-gruppi { min-height: 1px; }

/* 7. Cucciolate ------------------------------------------------------------ */
.cucciolate { background: var(--antracite); }
.cucc-griglia { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(48px, 8vw, 130px); }
.cucc-griglia > * { min-width: 0; }
.stato { border: 1px solid var(--linea-forte); padding: clamp(28px, 3vw, 44px); margin: 40px 0; background: var(--nero); position: relative; }
.stato::before { content: ""; position: absolute; left: -1px; top: -1px; width: 56px; height: 3px; background: var(--bronzo); }
.stato .etichetta { font: 600 .68rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bronzo); }
.stato h3 { margin: 14px 0 12px; }
.stato h3 a { text-decoration: none; }
.stato h3 a:hover { color: var(--bronzo-chiaro); }
.stato p { margin: 0 0 .8em; }
.stato__riga strong { color: var(--bronzo-chiaro); font-weight: 600; }
.stato__genitori { font: 500 1.22rem/1.3 var(--serif); color: var(--avorio); }
.stato__genitori i { color: var(--bronzo); margin: 0 .2em; }
.stato .azioni { margin-top: 24px; }
.home-passi-titolo { font-size: 1.5rem; margin: 0 0 6px; }
.passi { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.passi li { counter-increment: p; display: grid; grid-template-columns: 56px 1fr; gap: 8px 18px; padding: 22px 0; border-top: 1px solid var(--linea); }
.passi li::before { content: counter(p, upper-roman); font: 400 italic 1.6rem/1 var(--serif); color: var(--bronzo); grid-row: span 2; }
.passi b { color: var(--avorio); font-weight: 600; }
.storico h3 { font-style: italic; font-weight: 400; margin-bottom: 8px; }
.home-storico-nota { margin: 0; }
.storico .linea-tempo + .link-freccia { margin-top: 8px; }
.foto-cuccioli { margin: 0 0 56px; position: relative; }
.foto-cuccioli img { width: 100%; height: auto; }
@media (max-width: 900px) { .cucc-griglia { grid-template-columns: 1fr; } }

/* 8. In memoria ------------------------------------------------------------ */
.memoria-griglia { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.memoria-griglia > * { min-width: 0; }
.memoria-griglia--sola { grid-template-columns: minmax(0, 1fr); }
#memoria .segnaposto { display: block; margin-top: 28px; }
.home-memoria-link { margin: 28px 0 0; }
.ritratti a { display: block; color: inherit; text-decoration: none; }
.ritratti img { width: 100%; }
@media (max-width: 900px) { .memoria-griglia { grid-template-columns: 1fr; } }

/* 8b. Il nostro ultimo video (a consenso: iframe solo dopo il clic, assets/js/video.js) */
.home-video__griglia { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.home-video__griglia > * { min-width: 0; }
.home-video__titolo { margin: 22px 0 0; font: italic 400 var(--corpo-h3)/1.2 var(--serif); color: var(--bronzo-chiaro); }
.home-video__link { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.home-video__lettore { position: relative; aspect-ratio: 16 / 9; background: var(--antracite); border: 1px solid var(--linea); overflow: hidden; }
.home-video__anteprima { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.78); transition: filter .4s var(--ease); }
/* Velo uniforme: l'etichetta "Guarda il video" sta al centro, dove prima il velo non arrivava (4,0:1). */
.home-video__lettore::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .3) 0, rgba(10, 10, 11, .62) 100%); pointer-events: none; }
.home-video__play {
	position: absolute; inset: 0; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	background: none; border: 0; cursor: pointer; color: var(--avorio);
	font: 600 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.home-video__play[hidden] { display: none; }
.home-video__icona { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--bronzo); color: var(--nero); box-shadow: 0 0 0 10px rgba(184, 148, 95, .2); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.home-video__icona svg { margin-left: 4px; }
.home-video__play:hover .home-video__icona, .home-video__play:focus-visible .home-video__icona { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(184, 148, 95, .28); }
.home-video__play:hover ~ .home-video__anteprima, .home-video__lettore:hover .home-video__anteprima { filter: saturate(.9) brightness(.9); }
.home-video__play:focus-visible { outline: 2px solid var(--bronzo-chiaro); outline-offset: -6px; }
.home-video__lettore.is-caricato::after, .home-video__lettore.is-caricato > :not(iframe) { display: none; }
.home-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.home-video__avviso { margin: 14px 0 0; font-size: .8rem; color: var(--grigio); max-width: 70ch; }
.home-video__avviso a { color: var(--bronzo-chiaro); }
@media (max-width: 900px) { .home-video__griglia { grid-template-columns: 1fr; gap: 32px; } }

/* 9. Domande --------------------------------------------------------------- */
.sezione.home-domande { padding-top: 0; border-top: 0; }
.home-domande h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.home-domande .segnaposto { display: block; margin-top: 20px; }
.home-domande .faq details > :not(summary) { margin: 0 0 28px; max-width: 62ch; }

/* 10. Contatti ------------------------------------------------------------- */
.contatti-griglia { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.contatti-griglia > * { min-width: 0; }
#contatti h2 + .segnaposto { display: block; margin-top: 24px; }
.home-contatti-motto { margin: 18px 0 0; color: var(--grigio); font-style: italic; }
.home-titolare { margin: 0; }
.mappa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mappa__strada { color: var(--linea-forte); }
.mappa__sentiero { color: var(--linea); }
.home-scrivici p { margin: 16px 0 0; }
.home-scrivici .segnaposto { display: block; margin-top: 12px; }
.home-scrivici .azioni { margin-top: 32px; }
@media (max-width: 900px) { .contatti-griglia { grid-template-columns: 1fr; } }

@media print { .home-video { display: none; } }