/**
 * Acquariologia Napoli - tessere categoria.
 * Condiviso da home ("Esplora le categorie", shortcode [acqna_home_categorie]) e pagina
 * "Tutte le categorie" (shortcode [acqna_tutte_categorie]); accodato dal modulo
 * acqna-home/acqna-categorie.php solo su queste due pagine.
 * Markup unico: acqna_home_categoria_card().
 */

/* ---------- Griglia e tessera (home e pagina categorie) ---------- */
.acqna-home-categorie__widget {
	width: 100%;
}

/* Reset forte: le liste di Astra (ul { margin-left: 3em }) rientravano la griglia. */
:is(.acqna-home-section, .acqna-categorie-pagina) ul.acqna-home-categorie__griglia {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.acqna-home-categoria {
	margin: 0;
	padding: 0;
}

.acqna-home-categoria__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	overflow: hidden;
	background: #F1F5F9;
	color: #FFFFFF;
	text-decoration: none;
	transition: box-shadow .2s ease;
}

/* Gradiente solo in percentuale (stop in ordine su ogni breakpoint, niente bordo netto).
   Dietro il nome servono almeno ~0.56 di opacità perché il bianco abbia contrasto >= 4.5:1 anche
   su foto bianche (Illuminazione, Filtri, Acquari, Decorazione): con .82 / .62 al 40% il nome è a
   ~0.69 su desktop e ~0.64 a 390 px (lo 0.55 al 34% della specifica v2 dava ~0.52 a 390 px). */
.acqna-home-categoria__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(to top, rgba(10, 18, 32, .82) 0%, rgba(10, 18, 32, .62) 40%, rgba(10, 18, 32, 0) 75%);
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
	pointer-events: none;
}

.acqna-home-categoria__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .3s ease;
}

/* Specifica v3 (4.B): nome 19 px, conteggio a pillola, freccia in cerchio a destra (>= 768 px). */
.acqna-home-categoria__testo {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 44px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.acqna-home-categoria__nome {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: #FFFFFF;
}

.acqna-home-categoria__conteggio {
	align-self: flex-start;
	padding: 2px 9px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	opacity: 1;
}

/* Freccia (decorativa: il link ha già il nome della categoria). */
.acqna-home-categoria__testo::after {
	content: "\2192";
	position: absolute;
	right: 0;
	bottom: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #FFFFFF;
	font-size: 17px;
	line-height: 1;
	text-shadow: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.acqna-home-categoria__link:hover,
.acqna-home-categoria__link:focus {
	color: #FFFFFF;
}

@media (hover: hover) {
	.acqna-home-categoria__link:hover {
		border-color: #94BDE0;
		box-shadow: 0 8px 20px rgba(30, 41, 59, .14);
	}

	.acqna-home-categoria__link:hover .acqna-home-categoria__testo::after {
		border-color: #94BDE0;
		background: #94BDE0;
		color: #1E293B;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.acqna-home-categoria__link:hover .acqna-home-categoria__img {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	.acqna-home-categoria__img,
	.acqna-home-categoria__testo::after {
		transition: none;
	}

	.acqna-home-categoria__link:hover .acqna-home-categoria__img {
		transform: none;
	}
}

@media (max-width: 1024px) {
	:is(.acqna-home-section, .acqna-categorie-pagina) ul.acqna-home-categorie__griglia {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	/* Fino a 1024 px le tessere sono strette: con la pillola i nomi su due righe ("Acquari e
	   supporti", "Trattamento acqua") salgono nella parte chiara del gradiente e sulle foto a fondo
	   bianco il bianco scendeva a ~2.5-4:1. Qui il gradiente è più scuro e più alto (desktop invariato). */
	.acqna-home-categoria__link::after {
		background: linear-gradient(to top, rgba(10, 18, 32, .86) 0%, rgba(10, 18, 32, .76) 50%, rgba(10, 18, 32, 0) 88%);
	}
}

@media (max-width: 767px) {
	:is(.acqna-home-section, .acqna-categorie-pagina) ul.acqna-home-categorie__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.acqna-home-categoria__testo {
		left: 12px;
		right: 12px;
		bottom: 12px;
		gap: 5px;
		padding-right: 0;
	}

	.acqna-home-categoria__nome {
		font-size: 16px;
		line-height: 1.2;
	}

	.acqna-home-categoria__conteggio {
		padding: 1px 8px;
		font-size: 12px;
	}

	.acqna-home-categoria__testo::after {
		display: none;
	}

	/* A 360 px le tessere sono alte ~118 px e i nomi su due righe arrivano a ~65% dell'altezza:
	   gradiente prolungato fin quasi in cima. */
	.acqna-home-categoria__link::after {
		background: linear-gradient(to top, rgba(10, 18, 32, .86) 0%, rgba(10, 18, 32, .78) 50%, rgba(10, 18, 32, 0) 95%);
	}
}

/* Focus visibile anche fuori dalle sezioni della home. */
.acqna-home-categoria__link:focus-visible {
	outline: 3px solid #6EC1E4;
	outline-offset: 2px;
}

/* Testi della tessera: Roboto senza la spaziatura lettere del tema (anche fuori dalla home). */
.acqna-home-categoria__link,
.acqna-home-categoria__link span {
	font-family: Roboto, sans-serif;
	letter-spacing: 0;
}

/* ---------- Home: tessere solo desktop/tablet o solo mobile ---------- */
/* Desktop e tablet: 8 tessere; mobile (<= 767 px): Coralli, Pesci e Piante, Tecnica, Trattamento acqua. */
@media (min-width: 768px) {
	.acqna-home-categoria--solo-mobile {
		display: none;
	}
}

@media (max-width: 767px) {
	.acqna-home-categoria--solo-desktop {
		display: none;
	}
}

/* ---------- Pagina "Tutte le categorie" ---------- */
/* L'header Elementor è sovrapposto al contenuto (margine inferiore negativo, fondo scuro
   semitrasparente): la banda del titolo è scura e lascia sotto l'header la sua altezza
   (83 px desktop, 95 px tablet, 65 px mobile) più il respiro. */
.acqna-categorie-pagina {
	--acqna-categorie-header: 83px;
	color: #334155;
	font-family: Roboto, sans-serif;
	letter-spacing: 0;
}

/* Banda e corpo a tutta larghezza: Astra (layout blocchi, contenitore "page builder") limita i
   nipoti di .entry-content alla larghezza del contenuto con una regola a specificità 0,4,0. */
.acqna-categorie-pagina > .acqna-categorie__intestazione,
.acqna-categorie-pagina > .acqna-categorie__corpo {
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.acqna-categorie__intestazione {
	padding: calc(var(--acqna-categorie-header) + 40px) clamp(var(--acqna-gutter, 20px), calc((100% - var(--acqna-container, 1240px)) / 2), 9999px) 40px;
	/* Navy come la striscia che acqna-header aggiunge sotto l'header mobile con la ricerca. */
	background: #0F172A;
	color: #FFFFFF;
	text-align: center;
}

.acqna-categorie-pagina .acqna-categorie__titolo {
	margin: 0;
	color: #FFFFFF;
	font-family: Roboto, sans-serif;
	font-size: clamp(28px, 1.25rem + 1.9vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.acqna-categorie-pagina .acqna-categorie__intro {
	max-width: 720px;
	margin: 12px auto 0;
	color: #E2E8F0;
	font-family: Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: 0;
}

.acqna-categorie__corpo {
	padding: 40px clamp(var(--acqna-gutter, 20px), calc((100% - var(--acqna-container, 1240px)) / 2), 9999px) 56px;
}

/* Blocchi categoria: testata (miniatura, nome, conteggio) e sottocategorie in elenco.
   Colonne CSS (masonry): i blocchi hanno altezze molto diverse e così non restano buchi. */
.acqna-categorie-pagina ul.acqna-cat-griglia {
	column-count: 3;
	column-gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.acqna-categorie-pagina li.acqna-cat-blocco {
	display: block;
	break-inside: avoid;
	margin: 0 0 24px !important;
	padding: 0;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: box-shadow .2s, border-color .2s;
}

.acqna-categorie-pagina li.acqna-cat-blocco:hover {
	border-color: #CBD5E1;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.acqna-categorie-pagina a.acqna-cat-blocco__testa {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	color: #0F172A;
	text-decoration: none;
	background: #F8FAFC;
	border-bottom: 1px solid #E2E8F0;
}

.acqna-categorie-pagina .acqna-cat-blocco__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
	background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
	border-radius: 12px;
}

.acqna-categorie-pagina .acqna-cat-blocco__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.acqna-categorie-pagina .acqna-cat-blocco__titoli {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.acqna-categorie-pagina .acqna-cat-blocco__nome {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.acqna-categorie-pagina .acqna-cat-blocco__conteggio {
	color: #64748B;
	font-size: 13px;
}

.acqna-categorie-pagina .acqna-cat-blocco__freccia {
	flex: 0 0 auto;
	color: #0F172A;
	font-size: 20px;
	transition: transform .2s, color .2s;
}

.acqna-categorie-pagina a.acqna-cat-blocco__testa:hover .acqna-cat-blocco__freccia {
	color: #2B8DB8;
	transform: translateX(4px);
}

.acqna-categorie-pagina ul.acqna-cat-blocco__sub {
	margin: 0 !important;
	padding: 6px 8px 10px !important;
	list-style: none;
}

.acqna-categorie-pagina a.acqna-cat-blocco__sublink {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 8px;
	color: #334155;
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
	border-radius: 8px;
	transition: background .15s, color .15s;
}

.acqna-categorie-pagina a.acqna-cat-blocco__sublink:hover,
.acqna-categorie-pagina a.acqna-cat-blocco__sublink:focus-visible {
	color: #0F172A;
	background: #EEF6FB;
}

.acqna-categorie-pagina .acqna-cat-blocco__subconteggio {
	flex: 0 0 auto;
	color: #94A3B8;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.acqna-categorie-pagina a.acqna-cat-blocco__testa:focus-visible,
.acqna-categorie-pagina a.acqna-cat-blocco__sublink:focus-visible {
	outline: 3px solid #6EC1E4;
	outline-offset: -3px;
}

/* Tablet: header fisso alto 95 px, 2 colonne. */
@media (min-width: 768px) and (max-width: 1024px) {
	.acqna-categorie-pagina {
		--acqna-categorie-header: 95px;
	}

	.acqna-categorie-pagina ul.acqna-cat-griglia {
		column-count: 2;
	}
}

/* L'onda del footer (widget HTML) sale di ~138 px sopra il footer: spazio sotto l'ultimo blocco. */
@media (min-width: 768px) {
	.acqna-categorie__corpo {
		padding-bottom: 190px;
	}
}

@media (max-width: 767px) {
	.acqna-categorie-pagina {
		--acqna-categorie-header: 65px;
	}

	.acqna-categorie__intestazione {
		padding: calc(var(--acqna-categorie-header) + 24px) 16px 28px;
	}

	.acqna-categorie-pagina .acqna-categorie__intro {
		font-size: 15px;
	}

	.acqna-categorie__corpo {
		padding: 24px 16px 56px;
	}

	.acqna-categorie-pagina ul.acqna-cat-griglia {
		column-count: 1;
	}

	.acqna-categorie-pagina li.acqna-cat-blocco {
		margin-bottom: 16px !important;
	}

	/* Target touch da 44 px. */
	.acqna-categorie-pagina a.acqna-cat-blocco__sublink {
		min-height: 44px;
		align-items: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acqna-categorie-pagina li.acqna-cat-blocco,
	.acqna-categorie-pagina .acqna-cat-blocco__freccia {
		transition: none;
	}
}