/* ==========================================================================
   Cards
   ========================================================================== */

.wc-card{

	position:relative;

	display:flex;
	flex-direction:column;

	background:var(--wc-color-surface);

	border:1px solid var(--wc-color-border);
	border-radius:var(--wc-radius-lg);

	box-shadow:var(--wc-shadow-sm);

	overflow:hidden;

}

.wc-card:hover{

	box-shadow:var(--wc-shadow-md);

}

.wc-card--flat{

	box-shadow:none;

}

.wc-card--borderless{

	border:none;

}

.wc-card--shadow{

	box-shadow:var(--wc-shadow-lg);

}

/* ==========================================================================
   Header
   ========================================================================== */

.wc-card-header{

	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;

	padding:1.5rem;

	border-bottom:1px solid var(--wc-color-border);

}

.wc-card-title{

	margin:0;

	font-size:1.15rem;
	font-weight:700;

	color:var(--wc-color-heading);

}

.wc-card-subtitle{

	margin-top:.35rem;

	font-size:.9rem;

	color:var(--wc-color-muted);

}

/* ==========================================================================
   Body
   ========================================================================== */

.wc-card-body{

	padding:1.5rem;

	flex:1;

}

/* ==========================================================================
   Footer
   ========================================================================== */

.wc-card-footer{

	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:.75rem;

	padding:1.25rem 1.5rem;

	border-top:1px solid var(--wc-color-border);

	background:var(--wc-color-background);

}

/* ==========================================================================
   Image
   ========================================================================== */

.wc-card-image{

	width:100%;

	display:block;

}

.wc-card-image img{

	display:block;

	width:100%;
	height:auto;

	object-fit:cover;

}

/* ==========================================================================
   Grid
   ========================================================================== */

.wc-card-grid{

	display:grid;

	grid-template-columns:
		repeat(auto-fill,minmax(320px,1fr));

	gap:1.5rem;

}

/* ==========================================================================
   Horizontal Card
   ========================================================================== */

.wc-card--horizontal{

	display:grid;

	grid-template-columns:120px 1fr;

}

.wc-card--horizontal
.wc-card-image img{

	height:100%;

}

/* ==========================================================================
   Compact
   ========================================================================== */

.wc-card--compact
.wc-card-header{

	padding:1rem;

}

.wc-card--compact
.wc-card-body{

	padding:1rem;

}

.wc-card--compact
.wc-card-footer{

	padding:1rem;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:768px){

	.wc-card-grid{

		grid-template-columns:1fr;

	}

	.wc-card-header{

		flex-direction:column;
		align-items:flex-start;

	}

	.wc-card-footer{

		flex-direction:column;

	}

	.wc-card-footer
	.wc-button{

		width:100%;

	}

	.wc-card--horizontal{

		grid-template-columns:1fr;

	}

}