/**
 * Block: lista-esperienze
 *
 * Layout narrativo delle esperienze, due formati:
 *   --lista-verticale-separatori: container narrow, articoli pieni, <hr> tra
 *   --griglia-2-col: grid 2 col desktop, 1 mobile, card più compatte
 */

@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__list {
		display: flex;
		flex-direction: column;
	}

	.lv-lista-esperienze__title {
		font-family: var(--font-display);
		font-size: var(--font-size-h3);
		font-weight: 500;
		line-height: var(--line-height-headings);
		letter-spacing: var(--letter-spacing-headings);
		color: var(--color-inchiostro-terra);
		margin: 0 0 var(--space-s);
		text-wrap: balance;
	}

	.lv-lista-esperienze__grid {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: var(--space-l);
		align-items: start;
	}

	@media (max-width: 720px) {
		.lv-lista-esperienze__grid {
			grid-template-columns: 1fr;
			gap: var(--space-s);
		}
	}

	.lv-lista-esperienze__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
	}

	.lv-lista-esperienze__desc,
	.lv-lista-esperienze__include-body {
		font-family: var(--font-body);
		font-size: var(--font-size-body);
		line-height: var(--line-height-body);
		color: var(--color-inchiostro-terra);
	}

	.lv-lista-esperienze__desc p,
	.lv-lista-esperienze__include-body p {
		margin: 0 0 var(--space-2xs);
	}

	.lv-lista-esperienze__desc p:last-child,
	.lv-lista-esperienze__include-body p:last-child {
		margin: 0;
	}

	.lv-lista-esperienze__include-body ul,
	.lv-lista-esperienze__include-body ol {
		margin: 0;
		padding-inline-start: var(--space-m);
	}

	.lv-lista-esperienze__include-body li {
		margin-block-end: var(--space-3xs);
	}

	.lv-lista-esperienze__include-label {
		font-family: var(--font-body);
		font-size: var(--font-size-caption);
		font-weight: 700;
		letter-spacing: var(--letter-spacing-caps);
		text-transform: uppercase;
		color: var(--color-vino);
		margin: 0 0 var(--space-2xs);
	}

	.lv-lista-esperienze__meta {
		padding-block-start: var(--space-2xs);
	}

	.lv-lista-esperienze__dl {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin: 0;
	}

	.lv-lista-esperienze__dl-row {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
	}

	.lv-lista-esperienze__dl dt {
		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);
		margin: 0;
	}

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

	.lv-lista-esperienze__prezzo {
		font-variant-numeric: tabular-nums;
		color: var(--color-vino);
		font-weight: 600;
	}

	/* ============================================================
	   Variante: lista-verticale-separatori
	   ============================================================ */

	.lv-lista-esperienze--lista-verticale-separatori .lv-lista-esperienze__item {
		padding-block: var(--space-m);
	}

	.lv-lista-esperienze--lista-verticale-separatori .lv-lista-esperienze__item:first-child {
		padding-block-start: 0;
	}

	.lv-lista-esperienze__sep {
		border: 0;
		border-block-start: 1px solid var(--color-border);
		margin: 0;
	}

	/* ============================================================
	   Variante: griglia-2-col
	   ============================================================ */

	.lv-lista-esperienze--griglia-2-col .lv-lista-esperienze__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-l);
	}

	@media (max-width: 720px) {
		.lv-lista-esperienze--griglia-2-col .lv-lista-esperienze__list {
			grid-template-columns: 1fr;
			gap: var(--space-m);
		}
	}

	.lv-lista-esperienze--griglia-2-col .lv-lista-esperienze__item {
		padding: var(--space-m);
		background-color: color-mix(in srgb, var(--color-pietra) 35%, transparent);
		border-radius: var(--radius-md);
	}

	.lv-lista-esperienze--griglia-2-col .lv-lista-esperienze__grid {
		grid-template-columns: 1fr;
		gap: var(--space-s);
	}
}