/*
 * Numana e Conero: archivio, filtro per tema e singola guida.
 *
 * Scende solo su questi template (vedi cocoon_numana_assets_guide in
 * functions.php). I token, le sezioni e i componenti condivisi stanno in
 * style.css: qui c'è solo quello che è di questa sezione.
 *
 * La griglia delle card è parente della griglia "dintorni" del prototipo:
 * stessa foto verticale, stessa didascalia opaca sotto, stesso zoom lento
 * all'hover. Cambia che qui la card porta a una pagina, quindi sotto la foto
 * ci sono anche il tema e l'estratto.
 */

/* ---------- 1. Impianto ---------- */

/* Kadence apre l'area del contenuto con due margini xxl: qui il ritmo lo danno
   le sezioni, che portano il loro padding. */
.content-area.cn-guide,
.content-area.cn-guida {
	margin: 0;
}

/* ---------- 2. Testa dell'archivio ---------- */

.cn-guide__testa {
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.cn-guide__titolo {
	font-size: var(--cn-titolo-sezione);
	text-wrap: balance;
	margin: 0 0 0.4em;
}

.cn-guide__intro {
	color: var(--cn-inchiostro-tenue);
	max-width: 52ch;
	margin: 0;
}

/* ---------- 3. Filtro per tema ---------- */

.cn-temi {
	margin-top: clamp(2rem, 4vw, 2.8rem);
}

.cn-temi__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cn-temi__voce {
	display: inline-flex;
	padding: 0.5rem 1.05rem;
	border: var(--cn-filetto) solid var(--cn-bordo);
	color: var(--cn-inchiostro-tenue);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--cn-transizione), color var(--cn-transizione);
}

.cn-temi__voce:hover {
	border-color: currentColor;
	color: var(--cn-inchiostro);
}

.cn-temi__voce--attiva {
	background-color: var(--cn-inchiostro);
	border-color: var(--cn-inchiostro);
	color: var(--cn-panna);
}

.cn-temi__voce--attiva:hover {
	color: var(--cn-panna);
}

/* ---------- 4. Griglia delle guide ---------- */

.cn-guide-griglia {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.8rem, 3vw, 2.8rem) clamp(0.9rem, 2vw, 1.6rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 60rem) {
	.cn-guide-griglia {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 40rem) {
	.cn-guide-griglia {
		grid-template-columns: 1fr;
	}
}

.cn-guida-card {
	margin: 0;
}

.cn-guida-card__link {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.cn-guida-card__foto {
	margin: 0;
	overflow: hidden;
	isolation: isolate;
}

.cn-guida-card__foto img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background-color: var(--cn-beige);
	transition: transform 900ms var(--cn-ease);
}

.cn-guida-card__link:hover .cn-guida-card__foto img {
	transform: scale(1.04);
}

/* Una guida può non avere foto: la card resta della stessa forma, il posto
   dell'immagine è un campo di sabbia. Meglio di una card più corta delle altre. */
.cn-guida-card__foto--vuota {
	aspect-ratio: 3 / 4;
	background-color: var(--cn-beige);
}

@media (max-width: 40rem) {
	.cn-guida-card__foto img,
	.cn-guida-card__foto--vuota {
		aspect-ratio: 4 / 3;
	}
}

/* Opaca e sopra la foto, come le didascalie dei dintorni: lo zoom non le passa
   dietro. */
.cn-guida-card__corpo {
	position: relative;
	z-index: 1;
	background-color: var(--cn-fondo-alt);
	padding: 1rem 0 0;
}

.cn-guida-card__tema {
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cn-rovere-miele);
	margin: 0 0 0.6rem;
}

.cn-guida-card__titolo {
	font-family: var(--cn-font-display);
	font-weight: 400;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
	line-height: 1.14;
	color: var(--cn-inchiostro);
	margin: 0 0 0.5rem;
	transition: color var(--cn-transizione);
}

.cn-guida-card__link:hover .cn-guida-card__titolo {
	color: var(--cn-accento);
}

.cn-guida-card__estratto {
	font-size: 0.95rem;
	color: var(--cn-inchiostro-tenue);
	margin: 0;
}

/* ---------- 5. Archivio vuoto ---------- */

.cn-guide__vuoto {
	max-width: 46ch;
}

.cn-guide__vuoto-riga {
	font-family: var(--cn-font-display);
	font-weight: 300;
	font-size: var(--cn-titolo-manifesto);
	line-height: 1.12;
	text-wrap: balance;
	margin: 0 0 0.8rem;
}

.cn-guide__vuoto p + p {
	color: var(--cn-inchiostro-tenue);
	margin: 0;
}

/* ---------- 6. Paginazione ---------- */

.cn-paginazione {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.cn-paginazione .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.cn-paginazione .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: 0.45rem 0.8rem;
	border: var(--cn-filetto) solid var(--cn-bordo);
	color: var(--cn-inchiostro-tenue);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: border-color var(--cn-transizione), color var(--cn-transizione);
}

.cn-paginazione .page-numbers:hover,
.cn-paginazione .page-numbers.current {
	border-color: currentColor;
	color: var(--cn-inchiostro);
}

/* ---------- 7. Testa della guida ---------- */

.cn-guida__testa {
	padding-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

.cn-guida__titolo {
	font-size: var(--cn-titolo-sezione);
	text-wrap: balance;
	max-width: 24ch;
	margin: 0;
}

.cn-occhiello a {
	color: inherit;
	text-decoration: none;
	border-bottom: var(--cn-filetto) solid transparent;
	transition: border-color var(--cn-transizione);
}

.cn-occhiello a:hover {
	border-bottom-color: currentColor;
}

.cn-guida__data {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cn-inchiostro-tenue);
	margin: 1.4rem 0 0;
}

/* ---------- 8. Immagine in evidenza ---------- */

.cn-guida__foto {
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.cn-guida__foto img {
	width: 100%;
	max-height: 68vh;
	object-fit: cover;
}

.cn-guida__foto figcaption {
	margin-top: 0.9rem;
	font-size: 0.86rem;
	color: var(--cn-inchiostro-tenue);
}

/* ---------- 9. Testo della guida ---------- */

/* Il contenuto sono blocchi Gutenberg nativi: nessuna classe nostra da mettere
   a mano, la tipografia la decide questo blocco. */
.cn-guida__corpo {
	padding-top: 0;
}

.cn-guida__corpo .entry-content {
	max-width: 42rem;
}

.cn-guida__corpo .entry-content > * {
	margin-block: 0 1.3em;
}

.cn-guida__corpo .entry-content h2 {
	font-size: var(--cn-titolo-voce);
	margin-block: 1.9em 0.5em;
}

.cn-guida__corpo .entry-content h3 {
	font-size: 1.35rem;
	font-weight: 400;
	margin-block: 1.6em 0.4em;
}

.cn-guida__corpo .entry-content ul,
.cn-guida__corpo .entry-content ol {
	margin-left: 1.2em;
}

.cn-guida__corpo .entry-content li {
	margin-bottom: 0.45em;
}

.cn-guida__corpo .entry-content figure {
	margin-block: 2em;
}

.cn-guida__corpo .entry-content figcaption {
	margin-top: 0.7rem;
	font-size: 0.86rem;
	color: var(--cn-inchiostro-tenue);
}

.cn-guida__corpo .entry-content blockquote {
	border-left: var(--cn-filetto) solid var(--cn-rovere);
	padding-left: 1.4rem;
	font-family: var(--cn-font-display);
	font-size: 1.4rem;
	line-height: 1.3;
	color: var(--cn-inchiostro-tenue);
}

.cn-guida__ritorno {
	margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cn-guida__ritorno a {
	color: var(--cn-inchiostro-tenue);
	text-decoration: none;
	border-bottom: var(--cn-filetto) solid var(--cn-bordo);
	transition: border-color var(--cn-transizione), color var(--cn-transizione);
}

.cn-guida__ritorno a:hover {
	border-bottom-color: currentColor;
	color: var(--cn-inchiostro);
}

/* ---------- 10. Fascia Cocoon in coda ---------- */

.cn-guida__cocoon-riga {
	font-family: var(--cn-font-display);
	font-weight: 300;
	font-size: var(--cn-titolo-manifesto);
	line-height: 1.12;
	text-wrap: balance;
	max-width: 28ch;
	margin: 0 0 1.8rem;
}

.cn-guida__cocoon-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 0;
}

/* I bottoni condivisi sono disegnati per il fondo chiaro: sullo scuro si
   rovesciano, altrimenti il filetto sparisce e il pieno diventa invisibile. */
.cn-guida__cocoon .cn-bottone--vuoto {
	border-color: rgba(245, 242, 238, 0.45);
	color: var(--cn-panna);
}

.cn-guida__cocoon .cn-bottone--vuoto:hover {
	border-color: var(--cn-panna);
}

.cn-guida__cocoon .cn-bottone:not(.cn-bottone--vuoto) {
	background-color: var(--cn-panna);
	border-color: var(--cn-panna);
	color: var(--cn-inchiostro);
}

.cn-guida__cocoon .cn-bottone:not(.cn-bottone--vuoto):hover {
	background-color: var(--cn-rovere);
	border-color: var(--cn-rovere);
	color: var(--cn-inchiostro);
}

/* ---------- 11. Chi chiede meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	.cn-guida-card__link:hover .cn-guida-card__foto img {
		transform: none;
	}
}