/*
 * Project cards (design/project-cards.html), used by Selected work, More
 * projects and the project grid. One full-width card, then a wide and a
 * narrow side by side. Every color comes from the palette.
 */

/* Heading and "All work" link above cards (Selected work, More projects). */
.hm-cards-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 20px;
	margin-bottom: clamp(28px, 4vw, 44px);
}

.hm-cards-head .hm-section-heading {
	margin: 0;
}

.hm-cards {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-cards__item {
	grid-column: 1 / -1;
}

@media (min-width: 901px) {

	.hm-cards__item--wide {
		grid-column: span 7;
	}

	.hm-cards__item--narrow {
		grid-column: span 5;
	}

	/* A wide card with nothing beside it takes the whole row. */
	.hm-cards__item--wide:last-child {
		grid-column: 1 / -1;
	}
}

/* A card is one link: picture (still or loop) plus title. */
.hm-card {
	position: relative;
	display: grid;
	height: 100%;
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

.hm-card__frame {
	position: relative;
}

.hm-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: color-mix(in srgb, var(--wp--preset--color--bone) 2%, var(--wp--preset--color--ink));
	border: 1px solid var(--wp--custom--hairline);
}

.hm-cards__item--feature .hm-card__media {
	aspect-ratio: 2.39 / 1;
}

@media (min-width: 901px) {

	.hm-cards__item--narrow .hm-card__frame,
	.hm-cards__item--narrow .hm-card__media {
		height: 100%;
	}

	.hm-cards__item--narrow .hm-card__media {
		aspect-ratio: auto;
		min-height: 100%;
	}
}

.hm-card__still,
.hm-card__loop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hm-card__still {
	transition: transform 1.2s var(--wp--custom--ease-snap);
}

.hm-card:hover .hm-card__still {
	transform: scale(1.03);
}

.hm-card__loop {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.hm-card.is-looping .hm-card__loop {
	opacity: 1;
}

/* Title over the picture (default) ----------------------------------------- */

.hm-cards[data-title="over"] .hm-card__frame,
.hm-cards[data-title="over"] .hm-card__caption {
	grid-area: 1 / 1;
}

.hm-cards[data-title="over"] .hm-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent), transparent 45%);
	pointer-events: none;
}

.hm-cards[data-title="over"] .hm-card__caption {
	z-index: 2;
	align-self: end;
	padding: clamp(14px, 1.6vw, 22px);
	pointer-events: none;
}

/* Title below the picture ------------------------------------------------- */

.hm-cards[data-title="below"] .hm-card {
	grid-template-rows: 1fr auto;
}

.hm-cards[data-title="below"] .hm-card__caption {
	padding: 14px 2px 0;
}

.hm-card__sector {
	display: none;
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone-muted);
}

.hm-cards[data-sector="on"] .hm-card__sector {
	display: block;
}

.hm-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(22px, 2.4vw, 34px);
	font-weight: 400;
	line-height: 1;
	transition: color 0.3s;
}

.hm-card:is(:hover, :focus-visible) .hm-card__title {
	color: var(--wp--preset--color--accent);
}

.hm-card:focus-visible {
	outline: none;
}

.hm-card:focus-visible .hm-card__media {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* Hover corners: stepped (Art deco) or viewfinder brackets (Simple). ------ */

.hm-card__corner {
	position: absolute;
	z-index: 3;
	width: 22px;
	height: 22px;
	overflow: visible;
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1;
	pointer-events: none;
	opacity: 0;
	transition:
		opacity 0.3s,
		translate 0.5s var(--wp--custom--ease-snap);
}

.hm-card__corner--tl {
	top: -8px;
	left: -8px;
	translate: -6px -6px;
}

.hm-card__corner--tr {
	top: -8px;
	right: -8px;
	rotate: 90deg;
	translate: 6px -6px;
}

.hm-card__corner--br {
	right: -8px;
	bottom: -8px;
	rotate: 180deg;
	translate: 6px 6px;
}

.hm-card__corner--bl {
	bottom: -8px;
	left: -8px;
	rotate: 270deg;
	translate: -6px 6px;
}

.hm-card:is(:hover, :focus-visible) .hm-card__corner {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {

	.hm-card__still,
	.hm-card__corner {
		transition: none;
	}

	.hm-card:hover .hm-card__still {
		transform: none;
	}
}