/* =========================================================
   Card — Design System baseline
   Token sorgente: CARD.md v1.1
   Implementa: .bg-card (dark) + .bg-card--media-side (split 48/52)
              + .bg-card--light (paper, no hover)
   Differiti: .bg-card--lift, .bg-card--media-top
   Dipendenze: variables.css, buttons.css
   ========================================================= */

/* --------- .bg-card — base dark cliccabile -------------------------------
   Ruolo: contenitore cliccabile (card-link). Hover su due segnali deboli:
   bordo schiarisce + eyebrow si accende. No lift/shadow/fill.
   Consumer non-cliccabili (es. SERVICE_CARD) devono neutralizzare hover
   localmente — vedi services-grid.css §override .bg-service-card.
   -------------------------------------------------------------------------- */

.bg-card {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 1.5rem;
	cursor: pointer;
	transition:
		border-color var(--dur-sm) var(--ease-out),
		color var(--dur-sm) var(--ease-out);
	color: var(--text);
}

.bg-card:hover {
	border-color: var(--border-hover);
}

.bg-card:hover .bg-card__eyebrow {
	color: var(--text-2);
}

/* --------- Anatomia interna ----------------------------------------------- */

.bg-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.75rem;
	padding: 1.5rem;
	min-width: 0;
}

.bg-card__eyebrow {
	font-family: var(--f-sans);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: clamp(0.64rem, 1.4vw, 0.72rem);
	color: var(--text-3);
	line-height: 1.2;
	transition: color var(--dur-sm) var(--ease-out);
	margin: 0;
}

.bg-card__title {
	font-family: var(--f-sans);
	font-weight: 500;
	letter-spacing: var(--track-tight);
	font-size: clamp(1.25rem, 1.6vw, 1.6rem);
	line-height: 1.25;
	color: var(--text);
	text-wrap: balance;
	hyphens: auto;
	-webkit-hyphenate-limit-chars: 8 4 4;
	hyphenate-limit-chars: 8 4 4;
	hyphenate-limit-lines: 2;
	margin: 0;
}

.bg-card__text {
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-2);
	margin: 0;
}

.bg-card__cta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
	padding-top: var(--gap-block);
	flex-wrap: nowrap;
	justify-content: space-between;
}

/* --------- .bg-card--media-side — split 48/52 immagine sx + body dx -------
   Layout orizzontale. Forma principale per pagina servizi.
   48/52 (non 50/50): lo split esatto pareggia i pesi sopprimendo la
   gerarchia. 48/52 fa prevalere il blocco editoriale.
   -------------------------------------------------------------------------- */

.bg-card--media-side {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 0;            /* override del padding 1.5rem di .bg-card — il body interno ha già il suo */
	overflow: hidden;      /* clip dei radius su media e body */
}

.bg-card--media-side .bg-card__media {
	flex: 0 0 48%;
	overflow: hidden;
	border-top-left-radius: var(--radius-card);
	border-bottom-left-radius: var(--radius-card);
	background-color: var(--bg);
}

.bg-card--media-side .bg-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bg-card--media-side .bg-card__body {
	flex: 1;
	justify-content: center;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	min-height: clamp(280px, 34vw, 380px);
}

.bg-card--media-side .bg-card__cta {
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 1.5rem;
}

/* --------- Mobile: collasso a stack verticale (640px standard CARD) ------
   I consumer (es. .bg-services-grid) possono alzare il break a 900px
   con override locale.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.bg-card--media-side {
		flex-direction: column;
	}

	.bg-card--media-side .bg-card__media {
		flex: none;
		width: 100%;
		aspect-ratio: 3 / 2;
		border-bottom-left-radius: 0;
		border-top-right-radius: var(--radius-card);
	}

	.bg-card--media-side .bg-card__body {
		min-height: 0;
	}

	.bg-card--media-side .bg-card__cta {
		justify-content: flex-start;
		flex-wrap: wrap;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bg-card,
	.bg-card__eyebrow {
		transition: none;
	}
}

/* --------- .bg-card--light — variante paper statica ----------------------
   Superficie chiara locale (#F5F0E8). Non cliccabile, no hover, no shadow.
   Usata come base per .bg-contact-form (form contatti su paper).
   Espone scope-token locali --p-text / --p-text-2 / --p-text-3 / --p-border /
   --p-border-hover che i descendant (inputs, link narrative, submit) leggono
   in via di "paper-aware".
   -------------------------------------------------------------------------- */

.bg-card--light {
	--p-text:         #000000;
	--p-text-2:       rgba(0, 0, 0, 0.6);
	--p-text-3:       rgba(0, 0, 0, 0.42);
	--p-border:       rgba(0, 0, 0, 0.18);
	--p-border-hover: rgba(0, 0, 0, 0.5);

	background-color: var(--paper);
	color: var(--p-text);
	border: 0;
	border-radius: var(--radius-card);
	padding: clamp(2rem, 4vw, 3rem);
	cursor: default;
}

/* Neutralizza hover ereditato da .bg-card (la light è statica) */
.bg-card--light:hover {
	border-color: transparent;
}

.bg-card--light:hover .bg-card__eyebrow {
	color: var(--text-3);
}