/*!
 * Aura Archives and Posts — Bento grid. Tight, rounded tiles in a four-column grid: big and
 * small photo tiles with the headline on the photo, mixed with bold text-only colour tiles.
 * Pure CSS; the same seven-tile cycle fills two columns on narrow screens with no holes.
 */

.aura-ap--bento {
	--aap-bento-r: max(18px, calc(var(--aap-radius) * 1.8));
	--aap-bento-soft: color-mix(in srgb, var(--aap-accent) 12%, var(--aap-card-bg));
	--aap-bento-dark: #14161f;
}

.aura-ap--bento .aura-ap__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(170px, 19cqi, 260px);
	grid-auto-flow: dense;
	gap: calc(var(--aap-gap) * .6);
}

.aura-ap--bento .aura-ap-card {
	--aap-pad: clamp(1rem, 8cqi, 1.6rem);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background: var(--aap-bento-soft);
	border: 0;
	border-radius: var(--aap-bento-r);
	transition: transform .25s ease, box-shadow .25s ease;
}

.aura-ap--bento .aura-ap-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -22px rgb(0 0 0 / .45);
}

.aura-ap--bento .aura-ap-card--feature { grid-column: span 2; grid-row: span 2; }
.aura-ap--bento .aura-ap-card--tall { grid-row: span 2; }
.aura-ap--bento .aura-ap-card--wide { grid-column: span 2; }

/* The whole tile is the link. */
.aura-ap--bento .aura-ap-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.aura-ap--bento .aura-ap-card__title a:hover {
	text-decoration: none;
}

.aura-ap--bento .aura-ap-card__body {
	position: relative;
	z-index: 1;
	flex: none;
	gap: .45rem;
	padding: var(--aap-pad);
}

.aura-ap--bento .aura-ap-card__title {
	order: 1;
	font-size: clamp(1.05rem, 9cqi, 1.6rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.aura-ap--bento .aura-ap-card--feature .aura-ap-card__title {
	font-size: clamp(1.4rem, 6.5cqi, 2.8rem);
}

.aura-ap--bento .aura-ap-card__terms {
	order: 0;
	margin: 0;
	padding: 0;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.aura-ap--bento .aura-ap-card__meta {
	order: 2;
	margin: 0;
	font-size: .75rem;
}

.aura-ap--bento .aura-ap-card__excerpt,
.aura-ap--bento .aura-ap-card__more {
	display: none;
}

/* The wide text tile has room for two lines of the excerpt. */
.aura-ap--bento .aura-ap-card--wide .aura-ap-card__excerpt {
	display: -webkit-box;
	order: 2;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: .95rem;
	line-height: 1.45;
}

/* Photo tiles: the photo fills the tile, the words sit on a fade. */
.aura-ap--bento .aura-ap-card__media {
	position: absolute;
	inset: 0;
	min-height: 0;
}

.aura-ap--bento .aura-ap-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / .78), rgb(0 0 0 / .2) 55%, rgb(0 0 0 / 0));
}

.aura-ap--bento .aura-ap-card:hover .aura-ap-card__media img {
	transform: scale(1.05);
}

.aura-ap--bento .aura-ap-card:not(.aura-ap-card--media-none),
.aura-ap--bento .aura-ap-card:not(.aura-ap-card--media-none) .aura-ap-card__title a {
	color: #fff;
}

.aura-ap--bento .aura-ap-card:not(.aura-ap-card--media-none) :is(.aura-ap-card__meta, .aura-ap-card__terms) {
	color: rgb(255 255 255 / .85);
}

/* Text tiles: a colour of their own. */
.aura-ap--bento .aura-ap-card--note {
	justify-content: space-between;
	background: var(--aap-accent);
}

.aura-ap--bento .aura-ap-card--note,
.aura-ap--bento .aura-ap-card--note .aura-ap-card__title a,
.aura-ap--bento .aura-ap-card--note :is(.aura-ap-card__meta, .aura-ap-card__terms) {
	color: var(--aap-on-accent);
}

.aura-ap--bento .aura-ap-card--dark {
	background: var(--aap-bento-dark);
}

.aura-ap--bento .aura-ap-card--dark,
.aura-ap--bento .aura-ap-card--dark .aura-ap-card__title a {
	color: #fff;
}

.aura-ap--bento .aura-ap-card--dark :is(.aura-ap-card__meta, .aura-ap-card__terms) {
	color: rgb(255 255 255 / .7);
}

/* With "Text-only colour tiles" off these tiles carry a photo: words at the bottom, on the fade. */
.aura-ap--bento .aura-ap-card--note:not(.aura-ap-card--media-none) {
	justify-content: flex-end;
}

.aura-ap--bento .aura-ap-card--wide .aura-ap-card__title {
	font-size: clamp(1.15rem, 5cqi, 1.9rem);
}

/* Two columns: tablets, phones and narrow page-builder columns. */
@container aura-ap (max-width: 900px) {
	.aura-ap--bento .aura-ap__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: clamp(150px, 42cqi, 240px);
	}
}

@container aura-ap (max-width: 420px) {
	.aura-ap--bento .aura-ap__items {
		grid-auto-rows: 44cqi;
	}

	.aura-ap--bento .aura-ap-card__terms {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aura-ap--bento .aura-ap-card:hover {
		transform: none;
	}
}