/**
 * Schede e archivi di cani e cucciolate (agente cani/cucciolate).
 * Valori dalla bozza 1 (style.css, "Scheda cane"); colori e misure dalle variabili di base.css.
 * Caricato da inc/risorse.php su schede e archivi di cane/cucciolata. Le pagine Maschi, Femmine
 * e Le cucciolate (che riusano template-parts/cane/) lo accodano col filtro casagaia_fogli_condizionali.
 *
 * Indice: 1. Testa della scheda  2. Testo  3. Salute  4. Prove ed expo  5. Genealogia
 *         6. Galleria  7. Cucciolata e fratelli  8. Navigazione  9. In memoria
 *         10. Cucciolata (scheda)  11. Archivi
 */

/* 1. Testa della scheda ---------------------------------------------------- */
/* Nella bozza 140px comprendono la testata: nel tema il <main> scende già sotto la testata. */
.scheda-hero { padding: 56px 0 var(--spazio-m); } /* in fondo: il pulsante non tocca la fascia antracite che segue */
.scheda-testa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 90px); align-items: end; }
.scheda-testa > * { min-width: 0; }
.scheda-testa--senza-foto { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.scheda-foto { margin: 0; position: relative; background: var(--antracite); }
.scheda-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.1; object-fit: cover; }
.scheda-foto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(10, 10, 11, 0) 55%, rgba(10, 10, 11, .5) 100%); pointer-events: none; }
.scheda-nome { font-size: clamp(3.4rem, 8.4vw, 9rem); line-height: .82; letter-spacing: -.03em; margin: 10px 0 6px; overflow-wrap: anywhere; }
.affisso { font: 400 italic clamp(1.3rem, 2vw, 1.7rem)/1.2 var(--serif); color: var(--bronzo-chiaro); margin: 14px 0 0; }
.affisso i { color: var(--bronzo); }
.scheda-testa__dati .dati { margin: 32px 0 32px; }
.scheda-testa__dati .azioni { margin-top: 0; }
/* Come la bozza (override finali della sua style.css): foto 8/4 che esce a sinistra fino al bordo
   della pagina, formato 16/11.5, testo centrato in verticale; sotto i 900px foto da bordo a bordo. */
@media (min-width: 901px) {
	.scheda-testa:not(.scheda-testa--senza-foto) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; }
	.scheda-testa .scheda-foto { margin-left: calc(-1 * var(--gutter)); }
	.scheda-testa .scheda-foto img { aspect-ratio: 16 / 11.5; }
}
@media (max-width: 900px) {
	.scheda-hero { padding-top: 28px; }
	.scheda-testa { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.scheda-testa .scheda-foto { margin: 0 calc(-1 * var(--gutter)); }
}

/* 2. Testo libero ----------------------------------------------------------- */
.scheda-testo__corpo > :first-child { margin-top: 0; }
.scheda-testo__corpo ul, .scheda-testo__corpo ol { padding-left: 1.2em; }

/* 3. Salute ------------------------------------------------------------------ */
/* Riquadri separati da fili: lo spazio di 1px lascia vedere il fondo linea-forte. */
.salute-griglia {
	list-style: none;
	margin: 56px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--linea-forte);
	border: 1px solid var(--linea-forte);
}
.salute-griglia[data-riquadri="1"] { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.salute-griglia[data-riquadri="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; }
.salute-griglia[data-riquadri="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.salute-griglia > li { padding: 34px 28px; background: var(--nero); min-width: 0; }
.salute-griglia .sigla { font: 600 .68rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--grigio); }
.salute-griglia .esito { display: block; font: 400 clamp(2.6rem, 4vw, 3.6rem)/1 var(--serif); color: var(--avorio); margin: 18px 0 10px; overflow-wrap: anywhere; }
.salute-griglia .esito.oro { color: var(--bronzo-chiaro); }
.salute-griglia p { margin: 0; font-size: .86rem; color: var(--grigio); }
.salute-griglia .assente { background: var(--antracite); }
.salute-griglia .assente .esito { font-size: 1.6rem; color: var(--grigio); font-style: italic; }
/* Riquadri dispari: l'ultimo occupa la riga intera invece di lasciare un buco. */
.salute-griglia[data-riquadri="5"] > li:last-child { grid-column: span 4; }
@media (max-width: 900px) {
	.salute-griglia,
	.salute-griglia[data-riquadri="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.salute-griglia[data-riquadri="1"] { grid-template-columns: minmax(0, 1fr); }
	.salute-griglia > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.salute-griglia > li { padding: 26px 20px; }
}

/* 4. Prove ed expo ---------------------------------------------------------- */
.scheda-risultati__nota { margin-top: 24px; }
.scheda-risultati .risultati { margin-top: 0; }
.scheda-risultati .risultati .muto { display: block; margin-top: 4px; font-size: .9rem; }
.scheda-risultati .risultati .tipo { margin-top: 12px; }
.scheda-risultati .risultati td:first-child time { white-space: nowrap; }
.scheda-risultati__esito { font-size: .85rem !important; }
.scheda-titoli { margin-top: 48px; }
.scheda-titoli h3 { font-size: 1.5rem; }

/* 5. Genealogia ------------------------------------------------------------- */
.scheda-genealogia__corpo { margin-top: 48px; }
.scheda-genealogia__corpo--pedigree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(32px, 4vw, 64px); align-items: center; }
.albero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 0; }
.albero--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.albero > * { min-width: 0; }
.albero .nodo { border: 1px solid var(--linea-forte); padding: 18px 20px; background: var(--antracite); position: relative; }
.albero .nodo small { display: block; font: 600 .6rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bronzo); margin-bottom: 8px; }
.albero .nodo small a { color: inherit; display: inline-block; padding: 6px 0; margin: -6px 0; } /* bersaglio >= 24px */
.albero .nodo b { display: block; font: 500 1.25rem/1.2 var(--serif); color: var(--avorio); }
.albero .nodo b i { font-style: italic; font-weight: 400; color: var(--bronzo); margin: 0 .15em; }
.albero .nodo a { color: var(--bronzo-chiaro); text-decoration: none; border-bottom: 1px solid var(--linea-forte); }
.albero .nodo a:hover { border-color: var(--bronzo); }
.albero .nodo--vuoto b { font-style: italic; font-weight: 400; color: var(--grigio); font-size: 1.05rem; }
.albero .col { display: flex; flex-direction: column; gap: 14px; position: relative; padding-left: 40px; }
.albero .col::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; border: 1px solid var(--linea-forte); border-right: 0; width: 20px; }
.albero .col::after { content: ""; position: absolute; left: -20px; top: 50%; width: 20px; border-top: 1px solid var(--linea-forte); }
.albero .col.terza .coppia-nonni { display: flex; flex-direction: column; gap: 8px; position: relative; }
.albero .protagonista { border-color: var(--bronzo); }
.albero .protagonista b { font-size: 2rem; }
.scheda-pedigree h3 { font-size: 1.4rem; font-style: italic; font-weight: 400; margin: 0 0 16px; }
.galleria--pedigree { columns: 1; margin-top: 0; }
.galleria--pedigree .galleria__voce { margin: 0; }
@media (max-width: 1000px) {
	.scheda-genealogia__corpo--pedigree { grid-template-columns: minmax(0, 1fr); }
	.scheda-pedigree { max-width: 360px; }
}
@media (max-width: 760px) {
	.albero, .albero--due { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.albero .col { padding-left: 22px; }
	.albero .col::before { top: 20px; bottom: 20px; width: 12px; }
	.albero .col::after { display: none; }
}

/* 6. Galleria --------------------------------------------------------------- */
.galleria--poche { columns: 2 280px; max-width: 880px; }

/* 7. Cucciolata, fratelli, figli, cuccioli ----------------------------------- */
.scheda-famiglia__testa { align-items: end; }
.scheda-famiglia__testa .lead { margin: 0 0 18px; }
.scheda-famiglia__testa .lead i { font-family: var(--serif); color: var(--bronzo); }
.fratelli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 44px 0 0; list-style: none; padding: 0; }
.fratelli > li { min-width: 0; }
.fratelli a { text-decoration: none; display: block; color: inherit; }
.fratelli figure { margin: 0; overflow: hidden; background: var(--nero); }
.fratelli img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); filter: saturate(.85); }
.fratelli a:hover img, .fratelli a:focus-visible img { transform: scale(1.04); }
.fratelli h3 { font-size: 1.7rem; margin-top: 16px; transition: color .25s; }
.fratelli a:hover h3 { color: var(--bronzo-chiaro); }
.fratelli p { margin: 4px 0 0; font-size: .85rem; color: var(--grigio); }
@media (max-width: 760px) {
	.fratelli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fratelli > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.fratelli h3 { font-size: 1.4rem; }
}

/* 8. Navigazione fra le schede ---------------------------------------------- */
.scheda-nav { border-top: 1px solid var(--linea); padding: 40px 0; }
.scheda-nav__griglia { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; }
.scheda-nav__voce { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.scheda-nav__voce--succ { text-align: right; align-items: flex-end; }
.scheda-nav__etichetta { display: inline-flex; align-items: center; gap: 8px; font: 600 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--grigio); }
.scheda-nav__etichetta .icona { width: 16px; height: 16px; fill: var(--bronzo); }
.scheda-nav__nome { font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.1 var(--serif); color: var(--avorio); transition: color .25s; }
.scheda-nav__voce:hover .scheda-nav__nome, .scheda-nav__voce:focus-visible .scheda-nav__nome { color: var(--bronzo-chiaro); }
.scheda-nav__elenco { font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronzo-chiaro); text-decoration: none; border: 1px solid var(--linea-forte); padding: 14px 18px; text-align: center; }
.scheda-nav__elenco:hover { border-color: var(--bronzo); }
@media (max-width: 620px) {
	.scheda-nav__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.scheda-nav__elenco { grid-column: 1 / -1; grid-row: 2; }
	.scheda-nav__voce--vuota { display: none; }
}

/* 9. In memoria --------------------------------------------------------------- */
/* Foto in bianco e nero come i ritratti della bozza, niente richiamo commerciale. */
.scheda--memoria .scheda-foto img,
.scheda--memoria .galleria__voce img { filter: grayscale(1) contrast(1.05); }
.scheda--memoria .galleria__voce:hover img { filter: grayscale(.4); }
.scheda--memoria .scheda-testa .occhiello { color: var(--grigio); }
.scheda--memoria .scheda-nome { color: var(--avorio); font-weight: 400; }

/* 10. Scheda cucciolata ------------------------------------------------------ */
.scheda-nome--cucciolata { font-size: clamp(4.5rem, 11vw, 10rem); }
.scheda-nome__parola { display: block; font: 400 italic clamp(1.6rem, 2.6vw, 2.4rem)/1 var(--serif); letter-spacing: 0; color: var(--bronzo-chiaro); margin-bottom: 12px; }
.scheda-cuccioli__senza > div { display: block; }

/* 11. Archivi (/dobermann/, /cucciolate/ e pagine che li riusano) ------------- */
.scheda-archivio__elenco { padding-top: clamp(48px, 6vw, 80px); }
.scheda-elenco .gruppo-cani:first-child { margin-top: 0; }
.scheda-archivio__tutti { margin: 64px 0 0; }
.scheda-cucciolate__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
/* Anche l'ultima card "larga": la regola mobile di componenti.css (span 12) creava 12 colonne implicite. */
.scheda-cucciolate__griglia .cane, .scheda-cucciolate__griglia .cane.largo:last-child { grid-column: auto; }
.scheda-cucciolate__griglia .cane .genitori { display: block; }
.scheda-cronologia { margin-top: clamp(80px, 10vw, 140px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--linea); }
.scheda-cronologia .linea-tempo { margin-top: 0; }
.scheda-cronologia .linea-tempo a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea-forte); }
.scheda-cronologia .linea-tempo a:hover { color: var(--bronzo-chiaro); border-color: var(--bronzo); }
@media (max-width: 760px) {
	.scheda-cucciolate__griglia { grid-template-columns: minmax(0, 1fr); }
}

/* 12. Stampa della scheda ------------------------------------------------------- */
/* Una scheda stampabile da dare a chi visita l'allevamento: testa con foto e dati, salute,
   prove, genealogia; niente galleria completa, navigazione, fascia contatti. */
@media print {
	.scheda-hero { padding-top: 0; }
	.scheda-testa:not(.scheda-testa--senza-foto) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; align-items: start; gap: 18pt; }
	.scheda-testa .scheda-foto { margin: 0 !important; }
	.scheda-foto::after, .figura-vignettata__foto::after, .cane .foto::after { display: none; }
	.scheda-foto img { aspect-ratio: 4 / 3 !important; }
	.scheda-nome { font-size: 40pt; }
	.scheda-testa__dati .azioni, .briciole, .scheda-galleria, .scheda-pedigree, .scheda-archivio__tutti { display: none !important; }
	.salute-griglia { background: #999; }
	.salute-griglia > li { padding: 10pt; }
	.salute-griglia .esito { font-size: 22pt; margin: 6pt 0 4pt; }
	.albero .nodo { background: #fff; }
	.risultati td { padding: 8pt 10pt 8pt 0; }
	/* Il foglio A4 è "stretto" (~720px): si annullano i ripieghi mobili */
	.fratelli { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.fratelli > li { grid-column: auto !important; }
	.salute-griglia:not([data-riquadri="1"]):not([data-riquadri="2"]):not([data-riquadri="3"]) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	/* 3 riquadri (Leila): 3 colonne, senza la 4ª cella vuota col fondo grigio della griglia. */
	.salute-griglia[data-riquadri="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.salute-griglia > li { grid-column: auto !important; }
	.albero:not(.albero--due) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; }
	.albero .col { padding-left: 24px !important; }
	.occhiello { display: flex; break-after: avoid; page-break-after: avoid; }
	.scheda-risultati .due-col > :first-child, .titolo-sezione { break-inside: avoid; break-after: avoid; page-break-after: avoid; }
	.sezione { break-inside: auto; }
	.albero, .salute-griglia, .risultati tr, .fratelli, .scheda-testa { break-inside: avoid; page-break-inside: avoid; }
	.fratelli img { transform: none !important; }
	.due-col { grid-template-columns: 1fr; gap: 12pt; }
	.titolo-sezione { margin-bottom: 12pt; }
}

/* SEO on-page (agente C, 29/10): affisso/soprannome e riga dei genitori DENTRO l'H1, sigle → glossario. */
.scheda-nome .affisso { display: block; letter-spacing: 0; overflow-wrap: normal; }
.sigla-glossario { color: inherit; text-decoration: underline; text-decoration-color: var(--linea-forte); text-underline-offset: .25em; transition: color .25s, text-decoration-color .25s; }
.sigla-glossario:hover, .sigla-glossario:focus-visible { color: var(--bronzo-chiaro); text-decoration-color: var(--bronzo); }
.scheda-salute__altro { margin: 28px 0 0; }
@media print { .sigla-glossario { text-decoration: none; } .scheda-salute__altro { display: none; } }
.scheda-testa__dati > .occhiello { text-wrap: balance; }