/* ==========================================================
   FIGORA ONE v2.1
   Card System
========================================================== */

/* ----------------------------------------------------------
   Base Card
---------------------------------------------------------- */

.card{
	position:relative;

	display:flex;
	flex-direction:column;

	height:100%;

	padding:var(--card-padding);

	background:var(--color-surface);

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

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

	overflow:hidden;

	transition:
		transform var(--transition),
		box-shadow var(--transition),
		border-color var(--transition);
}

.card:hover,
.card:focus-within{

	transform:translateY(-8px);

	border-color:var(--color-secondary);

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

/* ----------------------------------------------------------
   Image
---------------------------------------------------------- */

.card-image{

	overflow:hidden;

	margin-bottom:24px;

	border-radius:var(--radius-md);
}

.card-image img{

	display:block;

	width:100%;
	height:100%;

	object-fit:cover;

	transition:transform .45s ease;
}

.card:hover .card-image img,
.card:focus-within .card-image img{

	transform:scale(1.05);
}

/* ----------------------------------------------------------
   Badge
---------------------------------------------------------- */

.card-badge{

	display:inline-flex;
	align-items:center;
	justify-content:center;

	margin-bottom:18px;
	padding:8px 16px;

	background:#E0F2FE;

	color:var(--color-secondary);

	border-radius:var(--radius-round);

	font-size:var(--fs-xs);
	font-weight:var(--fw-bold);
	letter-spacing:.08em;
	text-transform:uppercase;
}

/* ----------------------------------------------------------
   Title
---------------------------------------------------------- */

.card-title{

	margin-bottom:16px;

	font-size:var(--fs-h4);

	line-height:1.3;
}

.card-title a{

	color:inherit;
	text-decoration:none;

	transition:var(--transition);
}

.card-title a:hover{

	color:var(--color-secondary);
}

/* ----------------------------------------------------------
   Content
---------------------------------------------------------- */

.card-content{

	flex:1;
}

.card-text{

	margin-bottom:24px;

	color:var(--color-text);

	line-height:var(--lh-body);
}

/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */

.card-footer{

	margin-top:auto;

	padding-top:24px;

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

/* ----------------------------------------------------------
   Horizontal
---------------------------------------------------------- */

.card-horizontal{

	display:flex;
	flex-direction:row;
	align-items:center;

	gap:30px;
}

.card-horizontal .card-image{

	width:260px;

	margin-bottom:0;

	flex-shrink:0;
}

/* ----------------------------------------------------------
   Compact
---------------------------------------------------------- */

.card-compact{

	padding:24px;
}

/* ----------------------------------------------------------
   Featured
---------------------------------------------------------- */

.card-featured{

	border-color:var(--color-secondary);

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

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width:991px){

	.card-horizontal{

		flex-direction:column;

		align-items:flex-start;
	}

	.card-horizontal .card-image{

		width:100%;
	}
}

@media (max-width:767px){

	.card{

		padding:24px;
	}
}