/*
 * Overlap card — the signature pattern. One base, two geometries, five
 * variants. Markup comes exclusively from asli_overlap_card().
 *
 *   .asli-card--overlay  box floats over the image's bottom edge (project,
 *                        team, blog, contact)
 *   .asli-card--stacked  box below the image, pulled upward (service)
 */

.asli-card {
	position: relative;
}

/* ---------------------------------------------------------------- media */

.asli-card__media {
	position: relative;
	border-radius: var(--asli-radius-card);
	overflow: hidden;
	aspect-ratio: var(--asli-card-ratio, 4 / 3);
}

.asli-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: scale var(--asli-duration-zoom) var(--asli-ease);
}

.asli-card:hover .asli-card__img {
	scale: 1.2;
}

/* Diagonal glare sweeping across the image on hover. */
.asli-card__media::after {
	content: "";
	position: absolute;
	width: 200%;
	height: 0;
	inset-inline-start: 50%;
	top: 50%;
	background: rgb(255 255 255 / 0.3);
	transform: translate(-50%, -50%) rotate(-45deg);
	z-index: 1;
	pointer-events: none;
}

.asli-card:hover .asli-card__media::after {
	height: 250%;
	background: transparent;
	transition: var(--asli-duration-shine) linear;
}

/* ---------------------------------------------------------------- badge */

.asli-card__badge {
	position: absolute;
	top: var(--asli-space-md);
	inset-inline-end: var(--asli-space-md);
	z-index: 2;
}

a.asli-card__badge {
	transition:
		background-color var(--asli-duration) var(--asli-ease),
		color var(--asli-duration) var(--asli-ease);
}

a.asli-card__badge:hover {
	background: var(--asli-navy);
	color: var(--asli-yellow);
}

/* ------------------------------------------------------------------ box */

.asli-card__box {
	position: relative;
	background: var(--asli-surface);
	border-radius: var(--asli-radius-box);
	padding: var(--asli-space-lg);
	box-shadow: var(--asli-shadow-card);
	transition: box-shadow var(--asli-duration) var(--asli-ease);
}

.asli-card:hover .asli-card__box {
	box-shadow: var(--asli-shadow-card-hover);
}

/* Overlay geometry: box floats over the image bottom, inset both sides. */
.asli-card--overlay .asli-card__box {
	position: absolute;
	inset-inline: var(--asli-space-md);
	bottom: var(--asli-space-md);
	z-index: 2;
}

/* Stacked geometry: box hangs below, overlapping the image upward. */
.asli-card--stacked .asli-card__box {
	margin: -3rem var(--asli-space-lg) 0;
	z-index: 2;
}

/* -------------------------------------------------------------- content */

.asli-card__title {
	margin: 0;
	font-size: var(--asli-text-h3);
}

.asli-card__title-link {
	color: inherit;
}

.asli-card__title-link:hover {
	color: var(--asli-blue);
}

/* Whole-card click target via the title link. */
.asli-card__title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.asli-card__subtitle {
	margin: 0.15rem 0 0;
	font-size: var(--asli-text-meta);
	color: var(--asli-body);
}

.asli-card__excerpt {
	margin: var(--asli-space-xs) 0 0;
	font-size: var(--asli-text-meta);
	line-height: 1.6;
}

.asli-card__meta {
	margin: var(--asli-space-xs) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--asli-space-xs) var(--asli-space-md);
	font-size: var(--asli-text-meta);
}

.asli-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--asli-space-2xs);
	position: relative;
	z-index: 2;
}

.asli-card__meta-icon {
	color: var(--asli-blue);
}

.asli-card__footer {
	margin-top: var(--asli-space-sm);
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------- blog read-more */

.asli-card--blog .asli-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--asli-space-2xs);
	height: 0;
	margin-block-start: 0;
	overflow: hidden;
	color: var(--asli-blue);
	font-size: var(--asli-text-meta);
	font-weight: var(--asli-weight-medium);
	transition:
		height 0.3s var(--asli-ease),
		margin-block-start 0.3s var(--asli-ease);
}

.asli-card--blog:hover .asli-card__more,
.asli-card--blog:focus-within .asli-card__more {
	height: 1.6em;
	margin-block-start: var(--asli-space-xs);
}

/* ------------------------------------------------------- team variant */

.asli-card--team .asli-card__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--asli-space-sm);
}

.asli-card--team .asli-card__badge {
	position: static;
	flex-shrink: 0;
}

/* ---------------------------------------------------- service active */

.asli-card--service.is-active .asli-card__box {
	background: var(--asli-blue);
}

.asli-card--service.is-active :is(.asli-card__title, .asli-card__title-link, .asli-card__excerpt, .asli-card__subtitle) {
	color: var(--asli-text-on-dark);
}

.asli-card--service.is-active .asli-card__title-link:hover {
	color: var(--asli-yellow);
}