/* Base Card */

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* HOVER as in YOUTUBE */

.card {
    position: relative;
    z-index: 1;
}

.card::before {
    --card-hover-inset: clamp(10px, 2vw, 30px);

    content: "";
    position: absolute;
    inset: calc(-1 * var(--card-hover-inset));
    border-radius: var(--wp--preset--spacing--20);
    background: color-mix(
		in oklch,
		var(--color-surface) 50%,
		transparent
		);
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.2, 0, 0.2, 1);
    z-index: -1;
    pointer-events: none;
}

@media (hover: hover) and (min-width: 782px) {
    .card:hover {
        z-index: 2;
    }

    .card:hover::before {
        opacity: 1;
        transform: scale(1);
    }
}

/* HOVER */

.card .wp-block-post-featured-image {
	margin-bottom: 0;
}

.card .wp-block-post-featured-image img,
.card__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--wp--preset--spacing--10);
}

/* Content */

.card--related .card__content {
	gap: 6px;
}

.card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--10);
}

.card__content > * {
	margin-block: 0;
}

/* Taxonomy */

.card__taxonomy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	width: auto;
	line-height: 1.55;
	text-align: left;
}

.card__taxonomy a {
	text-decoration: none;
}

.card__taxonomy .wp-block-post-terms__separator {
	display: none;
}

/* Title */

.card__title {
	width: 100%;
	margin: 0;
	padding-top: 0;
}

.card__title a {
	text-decoration: none;
}

/* Meta */

.card__meta,
.card__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
}

/* Date */

.card__date {
	margin: 0;
	width: auto;
	text-align: left;
}

.card__date,
.card__date a {
	color: var(--color-contrast) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	line-height: 1.55;
	text-decoration: none;
}

/* Excerpt */

.card__excerpt {
	width: 100%;
	margin-top: 0.25rem;
}

/* Aspect Ratios */

.card--landscape .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
}

.card--square .wp-block-post-featured-image img {
	aspect-ratio: 1 / 1;
}

.card--portrait .wp-block-post-featured-image img {
	aspect-ratio: 3 / 4;
}

.card--standard .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
}

.card--classic .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
}

/* Size Modifiers */

.card--sm .card__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.card--md .card__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

.card--lg .card__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
}