/**
 * Block: griglia-card-editoriale
 */

@layer blocks {

	.lv-griglia-card-editoriale {
		padding-block: var(--space-l);
	}

	.lv-griglia-card-editoriale__inner {
		max-inline-size: var(--container-default);
		margin-inline: auto;
		padding-inline: var(--container-padding-inline);
	}

	.lv-griglia-card-editoriale__header {
		text-align: center;
		max-inline-size: 60ch;
		margin-inline: auto;
		margin-block-end: var(--space-l);
	}

	.lv-griglia-card-editoriale__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-xs);
	}

	.lv-griglia-card-editoriale__title {
		font-family: var(--font-display);
		font-size: var(--font-size-h2);
		font-weight: 500;
		line-height: var(--line-height-headings);
		color: var(--color-inchiostro-terra);
		margin: 0 0 var(--space-xs);
		text-wrap: balance;
	}

	.lv-griglia-card-editoriale__description {
		font-family: var(--font-body);
		font-size: var(--font-size-lead);
		line-height: var(--line-height-body);
		color: var(--color-text-muted);
		margin: 0;
		text-wrap: balance;
	}

	.lv-griglia-card-editoriale__grid {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: var(--space-m);
	}

	.lv-griglia-card-editoriale--cols-2 .lv-griglia-card-editoriale__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lv-griglia-card-editoriale--cols-3 .lv-griglia-card-editoriale__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.lv-griglia-card-editoriale--cols-4 .lv-griglia-card-editoriale__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	@media (max-width: 960px) {
		.lv-griglia-card-editoriale--cols-3 .lv-griglia-card-editoriale__grid,
		.lv-griglia-card-editoriale--cols-4 .lv-griglia-card-editoriale__grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 540px) {
		.lv-griglia-card-editoriale__grid {
			grid-template-columns: 1fr !important;
		}
	}

	.lv-griglia-card-editoriale__card {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
	}

	.lv-griglia-card-editoriale__card-media {
		aspect-ratio: 4 / 3;
		/* Flex item: senza min-block-size:0 l'altezza intrinseca dell'img
		   sovrascrive l'aspect-ratio e le card si disallineano. */
		min-block-size: 0;
		overflow: clip;
		border-radius: var(--radius-md);
	}

	.lv-griglia-card-editoriale__card-image {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.lv-griglia-card-editoriale__card-body {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
	}

	.lv-griglia-card-editoriale__card-index {
		font-family: var(--font-display);
		font-size: var(--font-size-h3);
		font-weight: 500;
		color: var(--color-vino);
		line-height: 1;
		font-variant-numeric: tabular-nums;
		opacity: 0.8;
	}

	.lv-griglia-card-editoriale__card-title {
		font-family: var(--font-display);
		font-size: var(--font-size-h4);
		font-weight: 500;
		line-height: var(--line-height-headings);
		color: var(--color-inchiostro-terra);
		margin: 0;
		text-wrap: balance;
	}

	.lv-griglia-card-editoriale__card-text {
		font-family: var(--font-body);
		font-size: var(--font-size-body);
		line-height: var(--line-height-body);
		color: var(--color-text-muted);
		margin: 0;
	}

	.lv-griglia-card-editoriale__card-cta {
		align-self: start;
		font-family: var(--font-body);
		font-size: var(--font-size-small);
		font-weight: 600;
		letter-spacing: var(--letter-spacing-ui);
		color: var(--color-vino);
		text-decoration: none;
		border-bottom: 1px solid currentColor;
		padding-block-end: 2px;
		margin-block-start: var(--space-2xs);
	}

	@media (prefers-reduced-motion: no-preference) {
		.lv-griglia-card-editoriale__card-cta {
			transition: color var(--transition-base);
		}

		.lv-griglia-card-editoriale__card-cta:hover,
		.lv-griglia-card-editoriale__card-cta:focus-visible {
			color: var(--color-terracotta);
		}
	}
}