/* ═══════════════════════════════════════════════════
   VI NATURAL — CONSELLS DE L'AMBAIXADOR
   vinatural.org · 2026
   ═══════════════════════════════════════════════════ */

/* ═══════════ LAYOUT ═══════════ */

.consells-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--sp-xl);
	align-items: start;
}

/* ═══════════ TEXTE ═══════════ */

.consells-text .content-light-text p + p {
	margin-top: var(--sp-sm);
}

/* ═══════════ SIGNATURE ═══════════ */

.consells-signature {
	margin-top: var(--sp-md);
	padding-top: var(--sp-sm);
	border-top: 1px solid rgba(42, 36, 32, 0.08);
}

.consells-signature-name {
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	font-weight: 500;
	color: var(--vi-profund);
}

.consells-signature-role {
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--carbó);
	opacity: 0.4;
	margin-top: 0.2rem;
}

/* ═══════════ PORTRAIT ═══════════ */

.consells-portrait {
	text-align: center;
	position: sticky;
	top: 6rem;
}

.consells-portrait img {
	width: 100%;
	height: auto;
	display: block;
}

/* ═══════════ CTA VERS LA CARTE ═══════════ */

.consells-cta {
	margin-top: var(--sp-sm);
	text-align: center;
}

.consells-cta-link {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--carbó);
	text-decoration: none;
	border: 1px solid rgba(42, 36, 32, 0.2);
	padding: 0.5rem 1.2rem;
	border-radius: 2rem;
	transition: all 0.25s;
}

.consells-cta-link:hover {
	border-color: var(--vi);
	color: var(--vi);
}

/* ═══════════ NOTE LÉGALE ═══════════ */

.consells-legal {
	background: var(--blanc);
	padding: 0 var(--gutter) var(--sp-lg);
}

.consells-legal-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var(--carbó);
	opacity: 0.3;
	border-top: 1px solid rgba(42, 36, 32, 0.06);
	padding-top: var(--sp-sm);
}

/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width: 768px) {
	.consells-layout {
		grid-template-columns: 1fr;
	}
	.consells-portrait {
		position: static;
		max-width: 220px;
		margin: 0 auto;
	}
}

/* ═══════════ SURCHARGE max-width ═══════════ */

.consells-text .content-light-text {
	max-width: none;
}