﻿
.Card_Container {
	display: grid;
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	/*prova gioele, nel caso chiedere*/
	/*	overflow: auto;*/
	grid-auto-flow: row dense;
	/*prova gioele, nel caso chiedere*/
	/*	padding: 20px;*/
	--card-gap: 20px;
	gap: var(--card-gap);
	--card-column: minmax(min(300px, 100%), 1fr);
	--card-row: minmax(min(270px, 100%), 1fr);
	--repeat-method: auto-fill;
	grid-template-columns: repeat(var(--repeat-method), var(--card-column));
	grid-template-rows: repeat(var(--repeat-method), var(--card-row));
	justify-content: center;
}

	.Card_Container.AutoFit {
		--repeat-method: auto-fit;
		min-height: unset;
	}

	.Card_Container[ML_Fixed_Column="2"] {
		grid-template-columns: repeat(2, var(--card-column));
	}

	.Card_Container[ML_Fixed_Column="3"] {
		grid-template-columns: repeat(3, var(--card-column));
	}

	.Card_Container[ML_Fixed_Column="4"] {
		grid-template-columns: repeat(4, var(--card-column));
	}

.Card_Flex_Container {
	display: flex;
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	--card-gap: 20px;
	gap: var(--card-gap);
	flex-wrap: wrap;
	justify-content: center;
}

.Card {
	break-inside: avoid;
	position: relative;
	display: flex;
	flex-direction: column;
	height: fit-content;
	background-color: var(--bg-light);
	transition: .2s ease-out;
}

	.Card.Single {
		grid-template-rows: auto 40px;
	}

	.Card.W_Double {
		grid-column: span 2;
	}

	.Card.H_Double {
		grid-row: span 2;
		grid-template-rows: min-content auto 40px;
	}

	.Card.W_Triple {
		grid-column: span 3;
	}

	.Card.H_Triple {
		grid-row: span 3;
		grid-template-rows: min-content auto 40px;
	}

	.Card.W_Quadruple {
		grid-column: span 4;
	}

	.Card.H_Quadruple {
		grid-row: span 4;
		grid-template-rows: min-content auto 40px;
	}

	.Card.W_Full {
		grid-column: 1 / -1;
	}

	.Card.H_Full {
		grid-row: 1 / -1;
		grid-template-rows: min-content auto 40px;
	}

	.Card .Card_Section {
		display: flex;
		flex-direction: column;
		padding: 10px 10px 25px;
		border-radius: calc(var(--border-radius) * 2);
		--card-section-bg: var(--bg-light);
		--card-section-fg: var(--fg);
		background: var(--card-section-bg);
		border: 1px solid var(--bg-dark);
		color: var(--card-section-fg);
		position: relative;
	}

		.Card .Card_Section:not(:first-child) {
			margin-top: -20px;
		}

		.Card .Card_Section:last-child {
			padding-bottom: 10px;
			height: 100%;
		}

		.Card .Card_Section .CardTitle {
			padding: 5px;
			font-size: larger;
			font-weight: 500;
		}

		/* Backgrounds & Foregrounds */
		.Card .Card_Section.Bg {
			--card-section-bg: var(--bg);
		}

		.Card .Card_Section.BgLight {
			--card-section-bg: var(--bg-light);
		}

		.Card .Card_Section.BgDark {
			--card-section-bg: var(--bg-dark);
		}

		.Card .Card_Section.Fg {
			--card-section-bg: var(--fg);
			--card-section-fg: var(--bg);
		}

		.Card .Card_Section.FgLight {
			--card-section-bg: var(--fg-light);
			--card-section-fg: var(--bg);
		}

		.Card .Card_Section.FgDark {
			--card-section-bg: var(--fg-dark);
			--card-section-fg: var(--bg);
		}

		/* Primary */
		.Card .Card_Section.Primary {
			--card-section-bg: var(--primary);
			--card-section-fg: var(--bg-light);
		}

		.Card .Card_Section.PrimaryLight {
			--card-section-bg: var(--primary-light);
		}

		.Card .Card_Section.PrimaryDark {
			--card-section-bg: var(--primary-dark);
			--card-section-fg: var(--bg-light);
		}

		/* Secondary */
		.Card .Card_Section.Secondary {
			--card-section-bg: var(--secondary);
			--card-section-fg: var(--bg-light);
		}

		.Card .Card_Section.SecondaryLight {
			--card-section-bg: var(--secondary-light);
		}

		.Card .Card_Section.SecondaryDark {
			--card-section-bg: var(--secondary-dark);
			--card-section-fg: var(--bg-light);
		}

		/* Success */
		.Card .Card_Section.Success {
			--card-section-bg: var(--success);
			--card-section-fg: var(--bg-light);
		}

		.Card .Card_Section.SuccessLight {
			--card-section-bg: var(--success-light);
		}

		.Card .Card_Section.SuccessDark {
			--card-section-bg: var(--success-dark);
			--card-section-fg: var(--bg-light);
		}

		/* Info */
		.Card .Card_Section.Info {
			--card-section-bg: var(--info);
			--card-section-fg: var(--bg-light);
		}

		.Card .Card_Section.InfoLight {
			--card-section-bg: var(--info-light);
		}

		.Card .Card_Section.InfoDark {
			--card-section-bg: var(--info-dark);
			--card-section-fg: var(--bg-light);
		}

		/* Warning */
		.Card .Card_Section.Warning {
			--card-section-bg: var(--warning);
		}

		.Card .Card_Section.WarningLight {
			--card-section-bg: var(--warning-light);
		}

		.Card .Card_Section.WarningDark {
			--card-section-bg: var(--warning-dark);
			--card-section-fg: var(--bg-light);
		}

		/* Error */
		.Card .Card_Section.Error {
			--card-section-bg: var(--error);
			--card-section-fg: var(--bg-light);
		}

		.Card .Card_Section.ErrorLight {
			--card-section-bg: var(--error-light);
		}

		.Card .Card_Section.ErrorDark {
			--card-section-bg: var(--error-dark);
			--card-section-fg: var(--bg-light);
		}

	.Card[ML_Selectable=All]:hover,
	.Card[ML_Selectable=OnlyBody]:hover {
		filter: drop-shadow(2px 4px 6px var(--secondary-200));
		cursor: pointer;
	}

		.Card[ML_Selectable=OnlyFooter] .Card_Footer:hover,
		.Card[ML_Selectable=All]:hover .Card_Footer {
			background-color: var(--secondary-50);
			cursor: pointer;
		}

			.Card[ML_Selectable=OnlyFooter] .Card_Footer:hover span.fa-chevron-right,
			.Card[ML_Selectable=All]:hover .Card_Footer span.fa-chevron-right {
				--fa-secondary-opacity: 1;
			}
