/* =============================================================================
   marchi.css — pagina marchi e griglia loghi
   Proprietario: agente A7 (round 2). Nessun altro agente scrive in questo file.
   Dipende da main.css (design system): usa i token, non ridefinirli.

   NOTA: gli stili della singola cassa/logo NON stanno qui ma in
   template-parts/brand-grid.php (<style id="fg-brand-grid-css">), perché la
   griglia è usata anche dalla home, dove questo foglio non viene accodato.
   Qui c'è solo ciò che riguarda la pagina /marchi/.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. STIHL — blocco protagonista
   -------------------------------------------------------------------------- */

.fg-stihl {
	position: relative;
	overflow: hidden;
	background: var(--fg-black, #111);
}

/* Alone arancio: dà profondità alla fascia nera senza immagini aggiuntive. */
.fg-stihl::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 46rem;
	height: 46rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(239, 115, 29, .22) 0%, rgba(239, 115, 29, 0) 65%);
	pointer-events: none;
}

.fg-stihl__stripe {
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, var(--fg-orange, #EF731D) 0%, var(--fg-green, #45AD30) 100%);
}

.fg-stihl__inner {
	position: relative;
	display: grid;
	gap: var(--fg-s5, 3rem);
	align-items: center;
}

.fg-stihl__titolo {
	margin: 0;
	line-height: 1;
}

.fg-stihl__logo {
	display: block;
	width: auto;
	height: clamp(3.25rem, 2rem + 4vw, 5rem);
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.fg-stihl__testo > * + * {
	margin-top: var(--fg-s3, 1.5rem);
}

.fg-stihl__testo > :first-child {
	margin-top: 0;
}

.fg-stihl__testo > :last-child {
	margin-bottom: 0;
}

.fg-stihl__testo .fg-lead {
	max-width: 34em;
}

.fg-stihl__testo p {
	color: rgba(255, 255, 255, .82);
}

.fg-stihl__azioni {
	margin-top: var(--fg-s4, 2rem);
	gap: var(--fg-s2, 1rem);
}

/* I due bottoni devono stare affiancati nella colonna di sinistra: con il
   padding pieno andavano a capo di una manciata di pixel. */
.fg-stihl__azioni .fg-btn {
	padding-inline: var(--fg-s3, 1.5rem);
}

.fg-stihl__media-box {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 4;
	border-radius: var(--fg-radius, 4px);
	background: var(--fg-grey-900, #2A2A2A);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}

/* L'immagine è volutamente più alta della cassa: il parallasse la fa scorrere
   dentro il ritaglio senza mai scoprire i bordi. */
.fg-stihl__media-box img,
.fg-stihl__foto {
	position: absolute;
	left: 0;
	top: -7%;
	width: 100%;
	height: 114%;
	object-fit: cover;
	object-position: center;
}

/* Dai 720px si affianca anche sul tablet verticale: a 768 il riquadro 5:4 largo
   quanto il contenitore era alto 560px e da solo riempiva lo schermo. */
@media (min-width: 720px) {
	.fg-stihl__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: var(--fg-s4, 2rem);
		align-items: center;
	}
}

@media (min-width: 900px) {
	.fg-stihl__inner {
		/* La colonna di testo deve reggere i due bottoni affiancati. */
		grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
		gap: var(--fg-s6, 4rem);
	}
}

/* -----------------------------------------------------------------------------
   2. Perché marchi professionali
   -------------------------------------------------------------------------- */

/* Tre schede: o tre colonne o una sola. In due colonne la seconda riga
   resterebbe con una cella vuota — il difetto del round 1. */
.fg-marchi__perche-grid {
	display: grid;
	gap: var(--fg-s3, 1.5rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.fg-marchi__perche-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.fg-marchi__punto {
	display: flex;
	flex-direction: column;
	gap: var(--fg-s2, 1rem);
	padding: var(--fg-s4, 2rem);
	border-top: 3px solid var(--fg-orange, #EF731D);
}

/* Il minimo della clamp era 1.05rem: su mobile il titolo della scheda finiva a
   16,8px, praticamente la misura del paragrafo, e la gerarchia spariva. */
.fg-marchi__punto h3 {
	margin: 0;
	font-size: clamp(1.15rem, .95rem + .55vw, 1.3rem);
}

.fg-marchi__punto p {
	margin: 0;
	color: var(--fg-grey-600, #6B6B6B);
}

/* -----------------------------------------------------------------------------
   2b. Fascia di contesto (slider sfondo con le vedute d'insieme)
   Il componente slider porta il proprio layout: qui si limita la larghezza del
   testo sovrapposto e si dà respiro all'occhiello sul fondo scuro.
   -------------------------------------------------------------------------- */

.fg-marchi__ctx .fg-slider__content {
	max-width: 44rem;
	margin-inline: auto;
}

.fg-marchi__ctx .fg-slider__content .fg-eyebrow {
	margin-bottom: var(--fg-s2, 1rem);
	color: var(--fg-orange, #EF731D);
}

.fg-marchi__ctx .fg-slider__content .fg-title {
	margin-top: 0;
	margin-bottom: var(--fg-s3, 1.5rem);
}

.fg-marchi__ctx .fg-slider__content .fg-lead {
	margin-bottom: 0;
	color: rgba(255, 255, 255, .9);
}

/* -----------------------------------------------------------------------------
   3. Filtri per reparto
   -------------------------------------------------------------------------- */

.fg-marchi__filtri {
	display: flex;
	flex-wrap: wrap;
	/* Gap pieno e non mezzo: fra due target tattili adiacenti serve stacco,
	   altrimenti col pollice si preme il reparto sbagliato. */
	gap: var(--fg-s1, .5rem) var(--fg-s1, .5rem);
	margin-bottom: var(--fg-s5, 3rem);
}

@media (max-width: 47.99em) {
	.fg-marchi__filtri {
		gap: .625rem;
		margin-bottom: var(--fg-s4, 2rem);
	}
}

/* Sono i pulsanti che filtrano una pagina di 30 marchi: restano tutti visibili
   (niente carosello orizzontale che nasconde metà dei reparti) ma passano da
   34px a 44px di altezza, la misura utile per il dito. */
.fg-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: .55rem var(--fg-s2, 1rem);
	background: var(--fg-white, #fff);
	border: 1px solid var(--fg-grey-200, #E4E4E4);
	border-radius: 999px;
	color: var(--fg-grey-900, #2A2A2A);
	font-family: var(--fg-font-body, sans-serif);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.fg-chip:hover,
.fg-chip:focus-visible {
	border-color: var(--fg-orange, #EF731D);
	color: var(--fg-black, #111);
}

.fg-chip[aria-pressed="true"] {
	background: var(--fg-black, #111);
	border-color: var(--fg-black, #111);
	color: var(--fg-white, #fff);
}

/* Con i filtri JS attivi la navigazione ad ancore viene nascosta: `display:flex`
   batterebbe l'[hidden] di default del browser. */
.fg-marchi__filtri[hidden] {
	display: none;
}

.fg-marchi__vuoto {
	margin: 0;
	color: var(--fg-grey-600, #6B6B6B);
}

/* -----------------------------------------------------------------------------
   4. Gruppi per reparto — etichetta a colonna, niente celle vuote
   -------------------------------------------------------------------------- */

/* Con l'intestazione sopra la griglia, i reparti da un solo marchio lasciavano
   una riga quasi vuota. Portando l'etichetta a sinistra ogni reparto occupa
   esattamente lo spazio dei suoi marchi. */
.fg-brands-groups {
	display: grid;
	gap: var(--fg-s4, 2rem);
}

.fg-brands-group {
	display: grid;
	gap: var(--fg-s3, 1.5rem);
	margin: 0;
	padding-top: var(--fg-s4, 2rem);
	border-top: 1px solid var(--fg-grey-200, #E4E4E4);
	scroll-margin-top: var(--fg-s6, 4rem);
}

.fg-brands-group[hidden] {
	display: none;
}

.fg-brands-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fg-s1, .5rem) var(--fg-s2, 1rem);
}

.fg-brands-group__title {
	display: block;
	margin: 0;
	font-size: .9375rem;
	font-weight: 800;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* main.css disegna una riga orizzontale dopo il titolo: qui l'etichetta sta in
   colonna e la riga non serve. */
.fg-brands-group__title::after {
	content: none;
}

.fg-brands-group__conteggio {
	margin: 0;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fg-grey-600, #6B6B6B);
}

@media (min-width: 900px) {
	.fg-brands-group {
		grid-template-columns: 12rem minmax(0, 1fr);
		gap: var(--fg-s4, 2rem);
		align-items: start;
	}

	.fg-brands-group__head {
		flex-direction: column;
		gap: var(--fg-s1, .5rem);
		padding-top: .35rem;
	}
}

/* -----------------------------------------------------------------------------
   5. Nota finale
   -------------------------------------------------------------------------- */

.fg-marchi__nota-inner {
	display: grid;
	gap: var(--fg-s4, 2rem);
	align-items: center;
}

.fg-marchi__nota-testo .fg-title {
	margin-top: 0;
}

.fg-marchi__nota-testo p,
.fg-marchi__nota-azione p {
	color: var(--fg-grey-600, #6B6B6B);
}

.fg-marchi__nota-azione {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fg-s3, 1.5rem);
	padding: var(--fg-s4, 2rem);
	background: var(--fg-grey-100, #F4F4F4);
	border-left: 3px solid var(--fg-green, #45AD30);
	border-radius: var(--fg-radius, 4px);
}

.fg-marchi__nota-azione p {
	margin: 0;
}

@media (min-width: 900px) {
	.fg-marchi__nota-inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
		gap: var(--fg-s6, 4rem);
	}
}

/* -----------------------------------------------------------------------------
   6. Riduzione del movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fg-chip,
	.fg-brands .fg-brand-item {
		transition: none;
	}
}