/* ============================================================================
 * single-brand.css — Pagina brand singola (Esperienza 6, Stile D v2).
 *
 * Crunchbase editorial semplificato: hero 3 colonne, anchor nav sticky,
 * body 2 colonne (main + sidebar 320px). No shadow, no gradient, bordi
 * 1px solid var(--ft-border).
 *
 * Usa esclusivamente le CSS variables Fintable (--ft-*) emesse inline da
 * ThemeColors su wp_head. NESSUN elemento sticky nella sidebar (pagina
 * banner-friendly, sidebar libera per injection future).
 * ============================================================================ */

.ft-brand-page {
	max-width: var(--ft-page-max);
	margin: 0 auto;
	padding: 24px 16px 60px;
	color: var(--ft-text-primary, #2D2D2D);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------- Breadcrumb */
.ft-brand-page .ft-breadcrumb {
	font-size: 13px;
	color: var(--ft-text-secondary, #666);
	margin-bottom: 20px;
}
.ft-brand-page .ft-breadcrumb a {
	color: var(--ft-text-secondary, #666);
	text-decoration: none;
}
.ft-brand-page .ft-breadcrumb a:hover {
	color: var(--ft-link, #007F5F);
	text-decoration: underline;
}
.ft-brand-page .ft-breadcrumb__sep {
	margin: 0 6px;
	color: var(--ft-border, #E0E0E0);
}

/* --------------------------------------------------------------------- Hero */
.ft-brand-hero {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 28px;
	padding: 28px 32px;
	border: 1px solid var(--ft-border, #E0E0E0);
	border-radius: 10px;
	background: var(--ft-bg-card, #FFF);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
}

.ft-brand-hero__main {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.ft-brand-hero__logo,
.ft-brand-single__logo,
.ft-brand-single__placeholder {
	width: 88px;
	height: 88px;
	flex: 0 0 88px;
	border-radius: 8px;
	object-fit: contain;
	border: 1px solid var(--ft-border, #E0E0E0);
	background: var(--ft-bg-card, #FFF);
}
/* Il placeholder iniziali (BrandLogo) usa il proprio styling cromatico in
 * fintable.css; qui ne forziamo solo dimensione e bordo nel contesto hero. */
.ft-brand-hero__logo.ft-brand-single__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ft-brand-hero__title {
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.ft-brand-hero__desc {
	margin: 0 0 12px;
	color: var(--ft-text-secondary, #666);
	font-size: 15px;
}
.ft-brand-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ft-brand-hero .ft-tag {
	display: inline-block;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid transparent;
	border-radius: 12px;
	color: var(--ft-link, #007F5F);
	text-decoration: none;
	background: rgba(0, 127, 95, 0.08); /* fallback browser senza color-mix */
	background: color-mix(in srgb, var(--ft-primary, #007F5F) 8%, transparent);
}
.ft-brand-hero .ft-tag:hover {
	background: var(--ft-primary, #007F5F);
	color: #FFF;
}

/* Hero — colonna KPI */
.ft-brand-hero__kpi {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-left: 1px solid var(--ft-border, #E0E0E0);
	padding-left: 24px;
	justify-content: center;
}
.ft-kpi-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px dashed var(--ft-border, #E0E0E0);
	gap: 12px;
}
.ft-kpi-row:last-child {
	border-bottom: none;
}
.ft-kpi-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--ft-text-secondary, #666);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	flex: 1;
	min-width: 0;
}
.ft-kpi-value {
	font-size: 18px;
	font-weight: 600;
	color: var(--ft-text-primary, #2D2D2D);
	white-space: nowrap;
}
/* Stellina ★ del KPI voto medio: color accent oro brand. */
.ft-kpi-star {
	color: var(--ft-accent, #E6A82E);
	font-size: 1em;
}
.ft-kpi-value--date {
	font-size: 14px;
	color: var(--ft-link, #007F5F);
	font-weight: 500;
}
.ft-kpi-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-left: 4px;
	font-size: 10px;
	font-style: normal;
	border-radius: 50%;
	border: 1px solid var(--ft-border, #E0E0E0);
	color: var(--ft-text-secondary, #666);
	cursor: help;
}

/* Hero — colonna detail */
.ft-brand-hero__detail {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--ft-border, #E0E0E0);
	padding-left: 24px;
}
.ft-detail-grid {
	margin: 0 0 auto 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 14px;
	font-size: 14px;
}
.ft-detail-grid dt {
	color: var(--ft-text-secondary, #666);
	font-weight: 500;
}
.ft-detail-grid dd {
	margin: 0;
	color: var(--ft-text-primary, #2D2D2D);
}
.ft-cta-site {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	background: var(--ft-primary, #007F5F);
	border-radius: 6px;
}
.ft-cta-site:hover {
	opacity: 0.9;
	color: #FFF;
}

/* --------------------------------------------------------------- Anchor nav */
/* Tabs senza box: bordo singolo solo sotto (sedimentate sul canvas grigio
 * del body sottostante), niente bg/border-radius/box-shadow. Le tab attiva
 * ha underline accent. Allinea al pattern .br-tabs-wrap del design system. */
.ft-anchor-nav {
	display: flex;
	gap: 4px;
	padding: 0;
	margin: 0 0 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ft-border, #E0E0E0);
	border-radius: 0;
	font-size: 14px;
}
.ft-anchor-nav a {
	padding: 14px 18px;
	text-decoration: none;
	color: var(--ft-text-secondary, #666);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	font-weight: 500;
}
.ft-anchor-nav a:hover {
	color: var(--ft-link, #007F5F);
	background: transparent;
}
.ft-anchor-nav a.active {
	color: var(--ft-link, #007F5F);
	font-weight: 600;
	background: transparent;
	border-bottom-color: var(--ft-primary, #007F5F);
}
.ft-anchor-nav__count {
	display: inline-block;
	margin-left: 4px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ft-text-secondary, #666);
	background: var(--ft-bg-secondary, #F5F5F5);
	border: 1px solid var(--ft-border, #E0E0E0);
	border-radius: 10px;
}
.ft-anchor-nav a.active .ft-anchor-nav__count {
	color: var(--ft-link, #007F5F);
	border-color: var(--ft-primary, #007F5F);
}

/* --------------------------------------------------------------------- Body */
.ft-brand-body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
	/* Canvas grigio chiaro full-bleed (edge-to-edge): esce dal wrapper
	 * .ft-brand-page (max-width 1240 + padding 16) e arriva al bordo
	 * viewport. Il content interno viene riportato sulla stessa griglia
	 * di lettura via padding orizzontale clamp: max(16px, (viewport - 1240)/2 + 16).
	 * Stessa tecnica di .ft-prodotto-single__layout. */
	background: var(--ft-bg-secondary);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: 32px;
	padding-bottom: 32px;
	padding-left: max(16px, calc((100vw - 1240px) / 2 + 16px));
	padding-right: max(16px, calc((100vw - 1240px) / 2 + 16px));
	margin-top: 0;
}

.ft-brand-body__main {
	min-width: 0;
}

/* Sezioni del main */
.ft-block {
	margin-bottom: 36px;
	scroll-margin-top: 64px; /* compensa l'anchor nav sticky nello scroll */
}
.ft-block__title {
	margin: 0 0 16px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ft-border, #E0E0E0);
}
.ft-block__content {
	font-size: 16px;
}
.ft-block__content p {
	margin: 0 0 14px;
}

/* ============================================================================
 * Card prodotto interna alla pagina brand (sezione #prodotti). Markup
 * specifico del contesto brand — separato da CardRenderer per evitare
 * accoppiamenti con le card di categoria/classifica.
 * ============================================================================ */
.ft-brand-product-card {
	display: flex;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--ft-border, #E0E0E0);
	border-radius: 8px;
	background: var(--ft-bg-card, #FFF);
	text-decoration: none;
	color: var(--ft-text-primary, #2D2D2D);
	transition: border-color 0.15s;
}
.ft-brand-product-card:hover {
	border-color: var(--ft-primary, #007F5F);
	color: var(--ft-text-primary, #2D2D2D);
}
.ft-brand-product-card__logo {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ft-border, #E0E0E0);
	border-radius: 6px;
	background: var(--ft-bg-secondary, #F5F5F5);
	overflow: hidden;
}
.ft-brand-product-card__logo-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.ft-brand-product-card__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ft-brand-product-card__name {
	font-weight: 600;
	font-size: 15px;
	color: var(--ft-text-primary, #2D2D2D);
}
.ft-brand-product-card__amp {
	font-size: 13px;
	color: var(--ft-text-secondary, #666);
}
.ft-brand-product-card__amp strong {
	color: var(--ft-link, #007F5F);
	font-weight: 600;
}
.ft-brand-product-card__rating {
	font-size: 13px;
	color: var(--ft-accent, #F4A300);
	font-weight: 600;
}

/* Gruppo prodotti per categoria */
.ft-products-group {
	margin-bottom: 24px;
}
.ft-products-group__title {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--ft-text-secondary, #666);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.ft-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

/* Lista offerte (sezione #offerte) — markup li inline classico. */
.ft-offerte-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ft-offerte-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ft-border, #E0E0E0);
}
.ft-offerte-list__item:last-child {
	border-bottom: none;
}
.ft-offerte-list__link {
	font-weight: 600;
	text-decoration: none;
	color: var(--ft-link, #007F5F);
}
.ft-offerte-list__link:hover {
	text-decoration: underline;
}
.ft-offerte-list__deadline,
.ft-offerte-list__product {
	font-size: 13px;
	color: var(--ft-text-secondary, #666);
}

/* ============================================================================
 * Block header riusabile — titolo h2 a sinistra + meta a destra.
 * Sostituisce il padding-bottom/border-bottom di .ft-block__title quando
 * presente (la regola figlio dentro .ft-block__header li azzera).
 * ============================================================================ */
.ft-block__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ft-border, #E0E0E0);
	gap: 12px;
}
.ft-block__header .ft-block__title {
	margin: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.ft-block__meta {
	font-size: 13px;
	color: var(--ft-text-secondary, #666);
	white-space: nowrap;
}

/* ============================================================================
 * Lista classifiche (.ft-classifiche-list*) → spostata in fintable.css
 * perché ora condivisa con single-ft_prodotto.php (sezione "Classifiche
 * in cui appare X"). Vedi fintable.css blocco "AUTHOR / REVIEWER CARDS"
 * (le classi generiche stanno tutte lì).
 * ============================================================================ */

/* ------------------------------------------------------------------ Sidebar */
.ft-brand-body__sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	/* NESSUN position: sticky — la sidebar è banner-friendly e va lasciata
	 * libera per injection future via hook ft_brand_sidebar_*. */
}

.ft-side-card {
	border: 1px solid var(--ft-border, #E0E0E0);
	border-radius: 8px;
	background: var(--ft-bg-card, #FFF);
	overflow: hidden;
}
.ft-side-card__title {
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	/* Bianco (matcha la card stessa): bg-secondary si confonderebbe col
	 * canvas grigio del .ft-brand-body sottostante. */
	background: var(--ft-bg-card, #FFF);
	border-bottom: 1px solid var(--ft-border, #E0E0E0);
}
.ft-side-card__body {
	padding: 14px 16px;
	font-size: 14px;
	color: var(--ft-text-secondary, #666);
}
.ft-side-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ft-side-card__list-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--ft-border, #E0E0E0);
	font-size: 14px;
}
.ft-side-card__list-item:last-child {
	border-bottom: none;
}
.ft-side-card__list-item a {
	text-decoration: none;
	color: var(--ft-link, #007F5F);
	font-weight: 600;
}
.ft-side-card__list-item a:hover {
	text-decoration: underline;
}
.ft-side-card__meta {
	font-size: 13px;
	color: var(--ft-text-secondary, #666);
	white-space: nowrap;
}

/* Lista "Ultime verifiche dati": pallino accento + nome bold + meta grigio. */
.ft-verifiche-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ft-verifiche-list__item {
	display: grid;
	grid-template-columns: 14px 1fr;
	column-gap: 8px;
	row-gap: 2px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--ft-border, #E0E0E0);
}
.ft-verifiche-list__item:last-child {
	border-bottom: none;
}
.ft-verifiche-list__dot {
	grid-row: 1 / span 2;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--ft-primary, #007F5F);
}
.ft-verifiche-list__name {
	grid-column: 2;
	font-size: 14px;
	font-weight: 600;
	color: var(--ft-text-primary, #2D2D2D);
}
.ft-verifiche-list__meta {
	grid-column: 2;
	font-size: 12px;
	color: var(--ft-text-secondary, #666);
}

.ft-disclaimer-side {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ft-text-primary, #2D2D2D);
	padding: 14px 16px;
	border: 1px solid var(--ft-accent, #F4A300);
	border-radius: 8px;
	background: rgba(244, 163, 0, 0.08); /* fallback browser senza color-mix */
	background: color-mix(in srgb, var(--ft-accent, #F4A300) 8%, transparent);
}
.ft-disclaimer-side strong {
	display: block;
	margin-bottom: 4px;
	color: var(--ft-text-primary, #2D2D2D);
}

/* --------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
	.ft-brand-hero {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.ft-brand-hero__kpi,
	.ft-brand-hero__detail {
		border-left: none;
		border-top: 1px solid var(--ft-border, #E0E0E0);
		padding-left: 0;
		padding-top: 18px;
	}
	.ft-brand-hero__kpi {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 18px 28px;
	}
	.ft-brand-body {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* Anchor nav: scroll orizzontale solo su mobile. */
	.ft-anchor-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 768px) {
	.ft-block__title {
		font-size: 22px;
	}
}

@media (max-width: 560px) {
	.ft-brand-page {
		padding: 16px 14px 48px;
	}
	.ft-brand-hero {
		padding: 20px;
	}
	.ft-brand-hero__main {
		flex-direction: column;
	}
	.ft-brand-hero__title {
		font-size: 24px;
	}
	.ft-products-grid {
		grid-template-columns: 1fr;
	}
	.ft-block__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.ft-classifiche-list__item {
		padding: 12px 14px;
		gap: 12px;
	}
	.ft-classifiche-list__badge {
		min-width: 36px;
		font-size: 13px;
	}
	.ft-classifiche-list__title {
		font-size: 14px;
	}
	.ft-classifiche-list__meta {
		font-size: 12px;
	}
}