/**
 * api-core/assets/css/category-wise-posts.css
 *
 * CSS per [ts-category-wise-posts] e grid shortcode legacy (.tab-slider).
 *
 * Sezioni 2–4: funzionale (filtro categorie, tab-slider legacy, share popup).
 * Sezione 5:   layout visuale (featured post, griglia statica 8 card,
 *              responsive). Ricostruzione del layout Divi di produzione via CSS.
 *
 * NOTA 24/07/2026: rimossa la Sezione 1 (tab visibility) e la ex Sezione 5.4
 * (hack "< indietro" / "avanti >" via ::before) — la griglia News e Bandi
 * era diventata statica (fino a 8 card sempre visibili, non più a tab).
 * Divisorio + "indietro/avanti" sono stati poi ripristinati come elemento
 * decorativo, e infine resi di nuovo funzionali (stesso giorno, dopo
 * conferma diretta del comportamento in produzione: cliccando avanti si
 * vedono SOLO 4 articoli, non tutti e 8) — Sezione 5.3, griglia divisa in
 * 2 gruppi da 4 (Sezione 5.4). Aggiunto anche il CTA finale "Leggi tutte
 * le news e i bandi" (Sezione 5.5). Vedi commento in apiform.php sul
 * blocco [ts-category-wise-posts].
 *
 * @since 2.3.1
 */

/* ─────────────────────────────────────────────────────────────────────
 * 2. BARRA FILTRO — .category-wise-post-change
 * ───────────────────────────────────────────────────────────────────── */

.category-wise-post-change {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	margin: 2px 4px;
	text-decoration: none;
	color: var(--wp--preset--color--primary, #004080);
	border: 1px solid var(--wp--preset--color--outline, #ccc);
	transition: background-color 0.2s, border-color 0.2s;
	cursor: pointer;
}

.category-wise-post-change:hover {
	border-color: var(--wp--preset--color--primary, #004080);
}

.category-wise-post-change.active {
	background: var(--wp--preset--color--primary, #004080);
	color: #fff;
	border-color: var(--wp--preset--color--primary, #004080);
}

.category-wise-post-change img {
	width: 20px;
	height: 20px;
}


/* ─────────────────────────────────────────────────────────────────────
 * 3. TAB-SLIDER — grid shortcode legacy
 *    Stile base per la paginazione client-side dei grid CPT
 *    (course, progetti, servizi). Rimuovere in Fase 5 insieme ai grid.
 * ───────────────────────────────────────────────────────────────────── */

.tab-slider {
	display: block !important;
}

.tab-slider .tab-page {
	display: flex;
	flex-wrap: wrap;
}

.tab-slider .et_pb_tabs_controls {
	list-style: none;
	display: flex;
	gap: 4px;
	padding: 0;
	margin: 16px 0 0;
}

.tab-slider .et_pb_tabs_controls li a {
	display: block;
	padding: 6px 16px;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--surface, #e9ecef);
	transition: background-color 0.2s;
}

.tab-slider .et_pb_tabs_controls li.et_pb_tab_active a {
	background: var(--wp--preset--color--primary, #004080);
	color: #fff;
}


/* ─────────────────────────────────────────────────────────────────────
 * 4. SHARE POPUP — regole funzionali
 *    Visibilità base: hidden di default, visibile su hover o click JS.
 *    Il CSS visuale completo (posizionamento, dimensioni) resta in
 *    custom-stylesheet.css del child o verrà nel tema FSE.
 * ───────────────────────────────────────────────────────────────────── */

.share-popup {
	position: relative;
}

.share-buttons {
	display: none;
	position: absolute;
	bottom: 100%;
	left: 0;
	background: var(--wp--preset--color--background, #fff);
	padding: 4px;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

.share-popup:hover > .share-buttons {
	display: flex;
}

.share-buttons .addtoany_shortcode a {
	display: block;
	margin: 0;
	padding: 5px;
}


/* ═════════════════════════════════════════════════════════════════════
 * 5. LAYOUT VISUALE — #category-wise-posts (News e Bandi)
 *
 *    Ricostruzione CSS del layout Divi di produzione.
 *    Struttura: featured post side-by-side + griglia 4 colonne.
 *    Colore brand: var(--wp--preset--color--primary, #004080) (teal scuro apiform).
 *
 *    @since 2.3.1
 * ═════════════════════════════════════════════════════════════════════ */

/* ── 5.1 Container generale ─────────────────────────────────────────── */

#category-wise-posts .et_pb_text_inner {
	/* Reset wrapper Divi residuo */
	padding: 0;
	margin: 0;
}


/* ── 5.2 Featured post — side-by-side ────────────────────────────────
 *    Produzione: immagine sx ~45%, contenuto dx ~55%.
 *    Typography: ereditata da Spectra (body/h3 globali).
 * ──────────────────────────────────────────────────────────────────── */

#category-wise-posts .column-left-container-image-paragraph-paginatore .et_pb_text_inner {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin-bottom: 20px;
}

#category-wise-posts .image-image-paragraph-paginatore-container {
	flex: 0 0 45%;
	max-width: 45%;
}

#category-wise-posts .image-image-paragraph-paginatore-container a {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 4px;
}

#category-wise-posts .image-image-paragraph-paginatore-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#category-wise-posts .content-image-paragraph-paginatore-container {
	flex: 1;
	min-width: 0;
}

#category-wise-posts .content-image-paragraph-paginatore-container .date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral, #666);
	margin: 0 0 6px;
}

#category-wise-posts .content-image-paragraph-paginatore-container h3 {
	color: var(--wp--preset--color--heading, #004080);
	font-size: 1.375rem; /* ~22px — fisso, non legato a preset con clamp() */
	line-height: 1.3;
	margin: 0 0 10px;
}

#category-wise-posts .content-image-paragraph-paginatore-container .text {
	color: var(--wp--preset--color--body, #444);
	margin: 0 0 12px;
}

/* Bottone "Leggi tutto" — featured — stile wp-element-button */
#category-wise-posts .content-image-paragraph-paginatore-container > p:last-of-type a,
#category-wise-posts .content-image-paragraph-paginatore-container > p > a[href]:not(.share):not(.favourite-toggle):not(.lrm-login) {
	display: inline-block;
	padding: 10px 24px;
	background: var(--wp--preset--color--primary, #004080);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s;
}

#category-wise-posts .content-image-paragraph-paginatore-container > p:last-of-type a:hover {
	background: var(--wp--preset--color--secondary, #003060);
}

/* Tag + icone riga inferiore featured */
#category-wise-posts .container-paragraph-paginatore-tag-icon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding-top: 10px;
}

#category-wise-posts .container-paragraph-paginatore-tag-icon > div:first-child {
	color: var(--wp--preset--color--neutral, #888);
}

#category-wise-posts .container-paragraph-paginatore-tag-icon > div:first-child a {
	color: var(--wp--preset--color--primary, #004080);
	text-decoration: none;
}

#category-wise-posts .container-paragraph-paginatore-icon {
	display: flex;
	gap: 8px;
	align-items: center;
}

#category-wise-posts .container-paragraph-paginatore-icon img {
	width: 22px;
	height: 22px;
	opacity: 0.6;
	transition: opacity 0.2s;
}

#category-wise-posts .container-paragraph-paginatore-icon img:hover {
	opacity: 1;
}


/* ── 5.3 Divisorio + "indietro / avanti" — bottoni reali, non decorativi
 *    dal 24/07/2026: confermato in produzione che riducono la vista a un
 *    solo gruppo da 4 (non è un elemento vestigiale). Il bordo superiore
 *    fa da separatore visivo dopo il post in evidenza.
 * ──────────────────────────────────────────────────────────────────── */

#category-wise-posts .category-wise-posts-nav {
	display: flex;
	gap: 16px;
	margin: 12px 0 20px;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--outline, #ddd);
}

#category-wise-posts .category-wise-posts-nav button {
	appearance: none;
	background: none;
	border: none;
	margin: 0;
	padding: 4px 2px;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--primary, #004080);
	cursor: pointer;
	/* Area cliccabile adeguata anche se il testo è breve */
	min-height: 32px;
}

#category-wise-posts .category-wise-posts-nav button:hover {
	text-decoration: underline;
}

/* Griglia: 2 gruppi da 4 — di default entrambi visibili (display:contents
   li fa partecipare direttamente al grid del genitore, come se le card
   fossero tutte allo stesso livello). Un solo gruppo alla volta dopo il
   click su avanti/indietro (classe aggiunta via JS). */
#category-wise-posts .category-wise-posts-group {
	display: contents;
}

#category-wise-posts .category-wise-posts-group.is-hidden {
	display: none;
}


/* ── 5.4 Griglia card — .et_pb_tab_content ───────────────────────────
 *    Produzione: 4 colonne. Typography ereditata da Spectra.
 * ──────────────────────────────────────────────────────────────────── */

#category-wise-posts .et_pb_tab_content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

#category-wise-posts .container-single-thumb {
	display: flex;
	flex-direction: column;
}

#category-wise-posts .container-paginatore-image {
	margin-bottom: 8px;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 3 / 2;
}

#category-wise-posts .container-paginatore-image a {
	display: block;
	height: 100%;
}

#category-wise-posts .container-paginatore-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

#category-wise-posts .container-paginatore-image:hover img {
	transform: scale(1.03);
}

#category-wise-posts .container-single-thumb .date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral, #888);
	margin: 4px 0;
}

#category-wise-posts .container-single-thumb h3 {
	color: var(--wp--preset--color--heading, #004080);
	font-size: 1.125rem; /* ~18px — fisso, non legato a preset con clamp() */
	line-height: 1.35;
	font-weight: 600;
	margin: 0 0 6px;
}

#category-wise-posts .container-single-thumb a {
	text-decoration: none;
	color: inherit;
}

/* Card uniformi: CTA sempre ancorata in basso, altezza basata sul contenuto */
#category-wise-posts .container-single-thumb {
	height: 100%;
}

#category-wise-posts .container-single-thumb > p:last-child {
	margin-top: auto;
	padding-top: 8px;
}

/* "Leggi tutto" — card griglia */
#category-wise-posts .container-single-thumb > p:last-child a {
	display: inline-block;
	padding: 0.5rem 1rem !important;
	color: var(--wp--preset--color--background, #fff);
	text-decoration: none;
}

#category-wise-posts .container-single-thumb > p:last-child a:hover {
	text-decoration: underline;
}

/* Focus visibile — assente in precedenza su questo componente */
#category-wise-posts a:focus-visible,
#category-wise-posts button:focus-visible,
#category-wise-posts .category-wise-post-change:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #004080);
	outline-offset: 2px;
}


/* ── 5.5 CTA finale — "Leggi tutte le news e i bandi" ────────────────
 *    Colore distinto dal "Leggi tutto" di card/featured (var --primary)
 *    per differenziare il CTA di sezione da quelli di singolo articolo.
 *    Fallback arancione ApiForm — sostituire con il token reale del
 *    tema se/quando disponibile in theme.json.
 * ──────────────────────────────────────────────────────────────────── */

#category-wise-posts .category-wise-posts-cta {
	margin: 24px 0 0;
	text-align: center;
}

#category-wise-posts .category-wise-posts-cta__button {
	display: inline-block;
	padding: 12px 28px;
	background: var(--wp--preset--color--accent, #e8720c);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
}

#category-wise-posts .category-wise-posts-cta__button:hover {
	background: var(--wp--preset--color--accent-dark, #c25f09);
}


/* ── 5.6 Barra filtro — aspetto produzione ──────────────────────────
 *    Badge con icona e testo. Typography ereditata da Spectra.
 * ──────────────────────────────────────────────────────────────────── */

#category-wise-posts .column-left-title-tab-paginatore-container {
	margin-bottom: 16px;
}

#category-wise-posts .column-left-title-tab-paginatore-container p {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--wp--preset--color--body, #444);
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 0;
}


/* ── 5.7 Share popup mobile — focus-within fallback ─────────────────
 *    Il link share nel PHP non ha classe .share. Su desktop :hover
 *    funziona. Su touch/mobile, focus-within apre il popup.
 * ──────────────────────────────────────────────────────────────────── */

#category-wise-posts .share-popup:focus-within > .share-buttons {
	display: flex;
}


/* ── 5.8 Responsive ───────────────────────────────────────────────────
 *    Desktop: 4 colonne (default, nessuna media query).
 *    Tablet (≤1024px): 2 colonne.
 *    Mobile (≤768px): 1 colonna — fix 24/07/2026, prima passava a 1
 *    colonna solo sotto i 480px, lasciando 2 card strette fra 481-768px.
 * ──────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	#category-wise-posts .et_pb_tab_content {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	#category-wise-posts .column-left-container-image-paragraph-paginatore .et_pb_text_inner {
		flex-direction: column;
	}

	#category-wise-posts .image-image-paragraph-paginatore-container {
		flex: none;
		max-width: 100%;
	}

	#category-wise-posts .et_pb_tab_content {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}