/*
 * Amazium CSS Framework
 * https://amazium.co.uk
 *
 * A lightweight, modern CSS framework built with Grid & Flexbox.
 * Designed and maintained by Mike Ballan.
 *
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

/***** Cards *****/
.card                                           { margin:0; padding:0; width:100%; background-color:var(--color-ui-0); box-shadow:var(--border-default); border-radius:var(--radius-xl); position:relative; transition:all 0.2s ease;
	&.card--gentle 																{ background-color:var(--color-brand-300);
		.card__body 																{ box-shadow:none; }
	}
}

/***** Header *****/
.card__header                                   { padding:var(--space-4); border-radius:var(--radius-xl) var(--radius-xl) 0 0; background-color:var(--color-ui-200); box-shadow:var(--border-default); }

/***** Body *****/
.card__body                                     { padding:var(--space-8); display:flex; flex-direction:column; gap:var(--space-3);
	&.card__body--inline 													{ flex-direction:row; gap:var(--space-6); align-items:center; }
}

/***** Footer *****/
.card__footer                                   { margin-top:auto; padding:var(--space-4); border-radius:0 0 var(--radius-xl) var(--radius-xl); }

/***** Tables *****/
.card--hasTable .card__body                     { padding:0;
	table th                          						{ border-radius:var(--radius-xl) var(--radius-xl); 0 0; }
	table tr:last-child td:first-child						{ border-radius:0 0 0 var(--radius-xl); }
	table tr:last-child td:last-child 						{ border-radius:0 0 var(--radius-xl) 0; }
}

/***** List Cards *****/
.cards                                          { padding-inline-start:0; list-style:none; display:grid; grid-template-columns:repeat( auto-fit, minmax(300px, 1fr) ); grid-gap:24px; width:100%;
	li                                       			{ margin:0; padding:0; display:flex; flex-direction:column; background-color:var(--color-ui-0); box-shadow:var(--border-default); border-radius:var(--radius-xl); position:relative; transition:all 0.2s ease; }

	&.card--gentle li															{ background-color:var(--color-brand-300); box-shadow:none; }
}

/***** Hover *****/
.cards--hover																		{
	li 																						{ box-shadow:0 0 0 0 var(--color-ui-0); transition:all 0.2s ease; border-radius:var(--radius-xl);
		&:hover                                     { background-color:var(--color-brand-600); color:var(--color-ui-0); box-shadow:0 0 0 10px var(--color-brand-600); transition:all 0.2s ease;
			h5 																				{ color:var(--color-brand-100); transition:all 0.2s ease; }
		}
		.card__footer                              	{ padding:var(--space-8); padding-top:0; }
	}
}


/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px) {

}


/***********************************************
Screen - This applies from 1200px onwards
***********************************************/
@media (min-width:1200px) {
	/***** Hover *****/
	.cards--hover																	{ grid-template-columns:repeat(3, 1fr); height:100%;
		li 																					{ box-shadow:0 0 0 0 var(--color-ui-0); transition:all 0.2s ease; border-radius:var(--radius-xl);
			&:hover                                   { background-color:var(--color-brand-600); color:var(--color-ui-0); box-shadow:0 0 0 10px var(--color-brand-600); transition:all 0.2s ease;
				h5 																			{ color:var(--color-brand-100); transition:all 0.2s ease; }
			}
			.card__body                               { padding:var(--space-8); }
			.card__footer                             { padding:var(--space-8); padding-top:0; }
		}
	}
}


/***********************************************
Desktop HD
***********************************************/
@media (min-width:1440px)                       {

}