/**
 * Block: lista-esperienze
 *
 * Card compatte divise per gruppo: ogni card porta alla scheda dell'esperienza.
 */

@layer blocks {

	.lv-lista-esperienze {
		padding-block: var(--space-l);
	}

	.lv-lista-esperienze__inner {
		max-inline-size: var(--container-default);
		margin-inline: auto;
		padding-inline: var(--container-padding-inline);
	}

	.lv-lista-esperienze__eyebrow {
		font-family: var(--font-body);
		font-size: var(--font-size-caption);
		font-weight: 600;
		letter-spacing: var(--letter-spacing-caps);
		text-transform: uppercase;
		color: var(--color-vino);
		margin: 0 0 var(--space-m);
	}

	.lv-lista-esperienze__empty {
		font-family: var(--font-body);
		font-size: var(--font-size-body);
		color: var(--color-text-muted);
		font-style: italic;
		margin: 0;
	}

	.lv-lista-esperienze__group + .lv-lista-esperienze__group {
		margin-block-start: var(--space-xl);
	}

	.lv-lista-esperienze__group-title {
		margin: 0 0 var(--space-m);
		font-family: var(--font-display);
		font-size: var(--font-size-h2);
		font-style: italic;
		font-weight: 500;
		color: var(--color-inchiostro-terra);
	}

	.lv-lista-esperienze__cards {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
		gap: var(--space-m);
	}

	.lv-lista-esperienze__card {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
		padding: var(--space-m);
		border: var(--border-width-1) solid var(--color-border);
		border-radius: var(--radius-sm);
		background: color-mix(in srgb, white 55%, var(--color-bg));
	}

	.lv-lista-esperienze__title {
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--font-size-h3);
		font-style: italic;
		font-weight: 500;
		line-height: 1.15;
		color: var(--color-inchiostro-terra);
	}

	.lv-lista-esperienze__title a {
		color: inherit;
		text-decoration: none;
	}

	.lv-lista-esperienze__title a:hover {
		color: var(--color-vino);
	}

	.lv-lista-esperienze__summary {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--font-size-body);
		line-height: var(--line-height-body);
		color: var(--color-inchiostro-morbido);
	}

	.lv-lista-esperienze__facts {
		display: block;
		margin: auto 0 0;
		border-block-start: var(--border-width-1) solid var(--color-border);
	}

	.lv-lista-esperienze__fact {
		display: grid;
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: var(--space-2xs);
		padding-block: var(--space-2xs);
		border-block-end: var(--border-width-1) solid var(--color-border);
	}

	.lv-lista-esperienze__fact dt {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--font-size-caption);
		font-weight: 600;
		letter-spacing: var(--letter-spacing-caps);
		text-transform: uppercase;
		color: var(--color-inchiostro-morbido);
	}

	.lv-lista-esperienze__fact dd {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--font-size-small);
		color: var(--color-inchiostro-terra);
	}

	.lv-lista-esperienze__link {
		align-self: flex-start;
		font-family: var(--font-body);
		font-weight: 600;
		color: var(--color-vino);
		text-decoration: none;
	}

	.lv-lista-esperienze__link:hover {
		text-decoration: underline;
	}

	.lv-lista-esperienze__title a:focus-visible,
	.lv-lista-esperienze__link:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
}