/*
 Theme Name:  BCC Castelnuovo – Divi Child
 Theme URI:   http://www.bccastelnuovo.com/
 Description: Child theme di Divi 5 per il sito del Basket Club Castelnuovo Scrivia
 Template:    Divi
 Version:     0.4.7
 Text Domain: bcc-child
*/

/* Font ospitati nel sito (niente richieste a Google: privacy GDPR e velocità).
   Stessi nomi scelti nei font globali di Divi; Google Fonts va spento in Divi → Opzioni del tema.
   Inter e Barlow Condensed: SIL Open Font License 1.1 (vedi fonts/LICENZA.txt). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/inter-400-corsivo.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/inter-700-corsivo.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); }

/* ==========================================================================
   Regole generali
   - Colori, font e spaziature vivono nelle Design Variables di Divi 5.
     Qui vanno solo le regole che il builder non sa fare da solo.
   - Tutte le classi personalizzate iniziano con "bcc-" (vedi CLAUDE.md).
   ========================================================================== */

/* Alias leggibili delle Design Variables di Divi (con valore di riserva). */
:root {
	--bcc-rosso: var(--gcid-primary-color, #d4000e);
	--bcc-rosso-scuro: var(--gcid-secondary-color, #b0000c);
	--bcc-bianco: var(--gcid-v7e55bur4f, #ffffff);
	--bcc-grigio-chiaro: var(--gcid-wb3frgpzay, #f4f4f4);
	--bcc-testo: var(--gcid-body-color, #1a1a1a);
	--bcc-testo-minore: var(--gcid-q72cmfj5pq, #5c5c5c);
	--bcc-font-titoli: var(--et_global_heading_font, 'Barlow Condensed'), sans-serif;
	--bcc-h1: var(--gvid-u6qj8rr7rk, clamp(2.25rem, 5vw, 3.5rem));
	--bcc-h2: var(--gvid-5k1w45igxp, clamp(1.75rem, 3.5vw, 2.5rem));
	--bcc-testo-piccolo: var(--gvid-q938cqt8nw, 0.8125rem);
	--bcc-spazio-sezione: var(--gvid-7ebzzdw8ka, clamp(3rem, 6vw, 5rem));
	--bcc-spazio-blocchi: 1.5rem;
	--bcc-raggio-pulsante: 4px;
	--bcc-raggio-card: var(--gvid-rb04qvoptm, 8px);
	--bcc-larghezza: min(94%, 1280px);
}

.bcc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Elementi comuni ---------------------------------------------------- */

.bcc-titolo-sezione {
	font-family: var(--bcc-font-titoli);
	font-size: var(--bcc-h2);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--bcc-rosso);
	padding: 0;
	margin: 0;
}

.bcc-chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	background: var(--bcc-rosso);
	color: var(--bcc-bianco);
	font-size: var(--bcc-testo-piccolo);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bcc-btn {
	display: inline-block;
	padding: 10px 20px;
	border: 2px solid var(--bcc-rosso);
	border-radius: var(--bcc-raggio-pulsante);
	background: var(--bcc-rosso);
	color: var(--bcc-bianco);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.bcc-btn:hover,
.bcc-btn:focus-visible {
	background: var(--bcc-rosso-scuro);
	border-color: var(--bcc-rosso-scuro);
	color: var(--bcc-bianco);
}

.bcc-btn--contorno {
	background: transparent;
	color: var(--bcc-rosso);
}

.bcc-home a:focus-visible,
.bcc-leggi-anche a:focus-visible,
.bcc-sponsor a:focus-visible {
	outline: 3px solid var(--bcc-rosso-scuro);
	outline-offset: 3px;
}

/* --- 1. Notizia più recente --------------------------------------------- */

.bcc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 55vw, 560px);
	background-color: var(--bcc-testo-minore);
	/* Foto della notizia: variabile scritta da home.php. */
	background-image: var(--bcc-hero-foto, none);
	background-size: cover;
	background-position: center;
}

.bcc-hero__testo {
	width: 100%;
	padding: 48px max(3%, calc((100% - 1280px) / 2)) 20px;
	/* Sfumatura rosso scuro per rendere leggibile il testo sopra la foto. */
	background: linear-gradient(180deg, rgba(176, 0, 12, 0) 0%, rgba(176, 0, 12, 0.92) 45%);
	color: var(--bcc-bianco);
}

.bcc-hero__titolo {
	max-width: 760px;
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--bcc-font-titoli);
	/* Più piccolo dell'H1: con il riassunto sotto, il rosso non copre troppo la foto. */
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.05;
}

.bcc-hero__titolo a {
	color: var(--bcc-bianco);
	text-decoration: none;
}

/* Tablet e telefono: foto intera sopra, testo su fondo rosso sotto (il rosso non copre la foto).
   Foto mai tagliata (contain): quadrata come le grafiche delle partite, ma alta al massimo il 60%
   dello schermo (tablet, telefono in orizzontale); lo spazio ai lati resta rosso scuro. */
@media (max-width: 980px) {
	.bcc-hero {
		display: block;
		min-height: 0;
		background-image: none;
	}

	.bcc-hero::before {
		content: "";
		display: block;
		padding-top: 100%;
		padding-top: min(100%, 60vh);
		background: var(--bcc-hero-foto, none) center / contain no-repeat var(--bcc-rosso-scuro);
	}

	.bcc-hero--senza-foto::before {
		display: none;
	}

	.bcc-hero__testo {
		padding-top: 20px;
		background: var(--bcc-rosso-scuro);
	}
}

/* Riassunto: al massimo 2 righe. */
.bcc-hero__riassunto {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	max-width: 680px;
	margin: 0 0 4px;
	padding: 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--bcc-bianco);
}

.bcc-hero__data {
	margin: 0 0 10px;
	padding: 0;
	font-size: var(--bcc-testo-piccolo);
	color: var(--bcc-bianco);
}

.bcc-hero .bcc-btn {
	/* Più piccolo del pulsante normale: riquadro rosso più basso. */
	padding: 8px 16px;
	font-size: 0.875rem;
	background: var(--bcc-bianco);
	border-color: var(--bcc-bianco);
	color: var(--bcc-rosso);
}

.bcc-hero .bcc-btn:hover,
.bcc-hero .bcc-btn:focus-visible {
	background: transparent;
	color: var(--bcc-bianco);
}

/* Telefono: testo più compatto. */
@media (max-width: 767px) {
	.bcc-hero__testo {
		padding: 14px 16px 16px;
	}

	.bcc-hero__titolo {
		font-size: 1.375rem;
	}

	/* Data e pulsante sulla stessa riga. */
	.bcc-hero__data {
		display: inline-block;
		margin: 0 12px 0 0;
		vertical-align: middle;
	}
}

/* --- 2. Ultime news ----------------------------------------------------- */

.bcc-news {
	width: var(--bcc-larghezza);
	margin: 0 auto;
	padding: var(--bcc-spazio-sezione) 0;
}

.bcc-news__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: var(--bcc-spazio-blocchi);
}

.bcc-news__griglia {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bcc-spazio-blocchi);
}

.bcc-card__link {
	display: block;
	color: var(--bcc-testo);
	text-decoration: none;
}

.bcc-card__foto {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--bcc-raggio-card);
	border-top: 4px solid var(--bcc-rosso);
	background: var(--bcc-grigio-chiaro);
}

.bcc-card__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

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

.bcc-card__data {
	display: block;
	margin-top: 10px;
	font-size: var(--bcc-testo-piccolo);
	color: var(--bcc-testo-minore);
}

.bcc-card__titolo {
	margin: 4px 0 0;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bcc-testo);
}

.bcc-card__link:hover .bcc-card__titolo {
	color: var(--bcc-rosso);
}

/* --- 3. Sponsor --------------------------------------------------------- */

.bcc-sponsor {
	background: var(--bcc-grigio-chiaro);
	padding: calc(var(--bcc-spazio-sezione) * 0.6) 0;
}

.bcc-sponsor__interno {
	width: var(--bcc-larghezza);
	margin: 0 auto;
}

.bcc-sponsor__griglia {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: var(--bcc-spazio-blocchi) 0 0;
	padding: 0;
	list-style: none;
}

.bcc-sponsor__griglia li {
	padding: 0;
	list-style: none;
}

.bcc-sponsor__griglia a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	padding: 12px;
	background: var(--bcc-bianco);
	border-radius: var(--bcc-raggio-card);
}

.bcc-sponsor__griglia img {
	max-width: 100%;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --- Tablet e telefono -------------------------------------------------- */

@media (max-width: 980px) {
	.bcc-news__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bcc-sponsor__griglia {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.bcc-news__griglia {
		grid-template-columns: minmax(0, 1fr);
	}
	.bcc-sponsor__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.bcc-card__foto img {
		transition: none;
	}
}

/* --- Pager degli archivi ------------------------------------------------ */

.bcc-paginazione {
	width: var(--bcc-larghezza);
	margin: 0 auto var(--bcc-spazio-sezione);
}

.bcc-paginazione ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcc-paginazione li {
	padding: 0;
	list-style: none;
}

.bcc-paginazione a,
.bcc-paginazione span {
	display: inline-block;
	min-width: 44px;
	padding: 10px 14px;
	border: 2px solid var(--bcc-rosso);
	border-radius: var(--bcc-raggio-pulsante);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--bcc-rosso);
}

.bcc-paginazione .current {
	background: var(--bcc-rosso);
	color: var(--bcc-bianco);
}

.bcc-paginazione .dots {
	border-color: transparent;
}

.bcc-paginazione a:hover,
.bcc-paginazione a:focus-visible {
	background: var(--bcc-rosso-scuro);
	border-color: var(--bcc-rosso-scuro);
	color: var(--bcc-bianco);
}

/* --- Footer: logo su cerchio bianco come nell'header, proporzionato --- */

.bcc-footer img.bcc-footer__logo {
	width: 58px;
	height: 58px;
	object-fit: contain;
	padding: 2px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--bcc-bianco);
}

/* Link del footer: area di tocco di almeno 44px su telefono. */
.bcc-footer__link a {
	display: inline-block;
	padding: 12px 4px;
}

/* Social del footer: icone SVG bianche (colore del testo), area di tocco 44px. */
/* Selettore con .bcc-footer davanti: deve battere lo stile delle liste dei moduli Testo (puntini e rientro). */
.bcc-footer ul.bcc-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0 0 0 auto; /* se va a capo resta allineata a destra, sotto i link */
	padding: 0;
}
.bcc-footer ul.bcc-footer__social li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bcc-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: inherit;
}
.bcc-footer__social a:hover {
	opacity: 0.8;
}
.bcc-footer__social a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
@media (max-width: 767px) {
	/* Su telefono il footer è allineato a sinistra: le icone vanno sotto i link, a sinistra. */
	.bcc-footer ul.bcc-footer__social {
		margin-left: -10px; /* compensa il margine interno dell'area di tocco */
	}
}

/* Ricerca news ([bcc_cerca]): testo + anno + categoria + pulsante, max 800px centrato. */
.bcc-cerca {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 800px;
	margin: 0 auto 24px;
}
.bcc-cerca__campo,
.bcc-cerca__anno,
.bcc-cerca__cat,
.bcc-cerca__pulsante {
	box-sizing: border-box;
	min-height: 44px;
	font-size: 1rem;
	border-radius: 0;
}
.bcc-cerca__campo,
.bcc-cerca__anno,
.bcc-cerca__cat {
	padding: 8px 12px;
	color: var(--bcc-testo);
	background: var(--bcc-bianco);
	border: 1px solid var(--bcc-testo-minore);
}
.bcc-cerca__campo {
	flex: 1 1 200px;
	min-width: 0;
}
.bcc-cerca__anno {
	flex: 0 1 150px;
}
.bcc-cerca__cat {
	flex: 0 1 220px;
}
.bcc-cerca__pulsante {
	padding: 8px 24px;
	color: var(--bcc-bianco);
	background: var(--bcc-rosso);
	border: 0;
	font-family: var(--bcc-font-titoli);
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}
.bcc-cerca__pulsante:hover,
.bcc-cerca__pulsante:focus-visible {
	background: var(--bcc-rosso-scuro);
}
@media (max-width: 767px) {
	.bcc-cerca__campo,
	.bcc-cerca__anno,
	.bcc-cerca__cat,
	.bcc-cerca__pulsante {
		flex: 1 1 100%;
	}
}