/**
 * Article grid.
 *
 * Bento: below 1024px one column in the order large card, image cards, text cards
 * (the design's `order`); from 1024px three columns 352fr 599fr 352fr with a 51.84px
 * gap and a 733px-tall large card. Which side the image and text columns take is a
 * grid-column choice, so the mirrored layout is just a different placement.
 * Row: 1 / 2 / 4 columns at 640 / 1280px.
 * The stacked image cards keep their picture's own proportions (as the design does);
 * the large card and the side columns fill their height from 1024px.
 */

.acini-grid-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--acini-space-xl);
	inline-size: 100%;
	max-inline-size: 140.8rem;
	margin-inline: auto;
}

.acini-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--acini-space-xl);
}

.acini-grid__more {
	display: flex;
	justify-content: center;
}

/* ---- Cards -------------------------------------------------------------------- */

.acini-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--acini-text);
	text-decoration: none;
	background: var(--acini-bg);
	border-radius: var(--acini-radius-xl);
}

.acini-card__media {
	position: relative;
	overflow: hidden;
}

.acini-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--acini-ease-out);
}

.acini-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.acini-card__title {
	font-family: var(--acini-font-heading);
	font-weight: var(--acini-weight-medium);
	color: var(--acini-text);
}

.acini-card__text {
	align-self: stretch;
	font-size: var(--acini-text-sm);
	color: var(--acini-text-muted);
}

/* An image card always reserves two lines for its excerpt, so a pair of them stay equal. */
.acini-card--image .acini-card__text {
	min-block-size: 2.86em;
}

/* Text card */
.acini-card--text {
	justify-content: center;
}

.acini-card--text .acini-card__body {
	gap: var(--acini-space-xs);
	padding: var(--acini-space-md);
}

.acini-card--text .acini-card__title,
.acini-card--image .acini-card__title {
	font-size: var(--acini-text-base);
	line-height: 1.2;
}

.acini-card--text .acini-card__text,
.acini-card--image .acini-card__text {
	line-height: 1.43;
}

/* Image card */
.acini-card--image .acini-card__media {
	block-size: 20rem;
}

.acini-card--image .acini-card__body {
	gap: var(--acini-space-2xs);
	padding: var(--acini-space-sm) var(--acini-space-md);
}

.acini-card--image .acini-card__text,
.acini-grid--row .acini-card__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* The tag on a picture: a white label over the inline-start corner. */
.acini-token--overlay {
	position: absolute;
	inset-block-start: 1.4rem;
	inset-inline-start: 1.4rem;
	padding-inline: 1rem;
	background: var(--acini-bg);
}

.acini-card--featured .acini-token--overlay {
	inset-block-start: var(--acini-space-md);
	inset-inline-start: var(--acini-space-md);
	padding-block: var(--acini-space-2xs);
	padding-inline: 1.1rem;
}

/* The bento's text cards cut a long excerpt at four lines, with an ellipsis. */
.acini-grid__texts .acini-card__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* Large card */
.acini-card--featured .acini-card__media {
	block-size: 20rem;
}

.acini-card--featured .acini-card__body {
	flex: 1;
	justify-content: center;
	gap: var(--acini-space-md);
	padding: var(--acini-space-lg);
}

.acini-card--featured .acini-card__title {
	font-size: var(--acini-text-lg);
	line-height: 1.3;
}

.acini-card--featured .acini-card__text {
	line-height: 1.5;
}

@media (hover: hover) {
	.acini-card:hover .acini-card__img {
		transform: scale(1.06);
	}

	.acini-card:hover .acini-card__title,
	.acini-card:hover .acini-card__text {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.3rem;
	}
}

/* ---- Bento: stacked (below 1024px) ------------------------------------------------ */

.acini-grid__featured { order: 1; }
.acini-grid__images { order: 2; }
.acini-grid__texts { order: 3; }

.acini-grid__featured,
.acini-grid__images,
.acini-grid__texts {
	display: flex;
	flex-direction: column;
	gap: var(--acini-space-xl);
}

.acini-grid__texts {
	gap: 2.5rem;
}

.acini-grid__featured > .acini-card {
	flex: 1;
}

/* ---- Wide cards (an index page's related research) ---------------------------------
   One card under another: the picture on a phone above the text, from 640px beside it — 180px
   square at the start, the text after it with 24px around it and 48px on its far side. */

.acini-grid-wrap--cards-3 {
	gap: var(--acini-space-lg);
}

.acini-grid__heading {
	margin: 0;
	font-family: var(--acini-font-heading);
	font-size: var(--acini-text-2xl);
	font-weight: var(--acini-weight-bold);
	line-height: 1.29;
	color: var(--acini-bg-inverse);
}

.acini-grid--cards {
	display: flex;
	flex-direction: column;
	gap: var(--acini-space-lg);
}

.acini-card--wide {
	border-radius: var(--acini-radius-2xl);
}

.acini-card--wide .acini-card__media {
	block-size: 16rem;
}

.acini-card--wide .acini-card__body {
	flex: 1 1 0;
	gap: var(--acini-space-sm);
	min-inline-size: 0;
	padding: var(--acini-space-lg);
}

.acini-card--wide .acini-card__title {
	font-size: var(--acini-text-base);
	font-weight: var(--acini-weight-bold);
	line-height: var(--acini-leading-normal);
}

.acini-card--wide .acini-card__text {
	line-height: 1.43;
}

@media (min-width: 40em) {
	.acini-card--wide {
		flex-direction: row;
		align-items: flex-start;
	}

	.acini-card--wide .acini-card__media {
		flex: none;
		inline-size: 18rem;
		block-size: 18rem;
	}

	.acini-card--wide .acini-card__body {
		padding-block: var(--acini-space-lg);
		padding-inline: var(--acini-space-lg) var(--acini-space-xl);
		padding-inline-end: 4.8rem;
	}
}

/* ---- Home spacing --------------------------------------------------------------------
   56px between the grid and its button at every width; from 1024px the three bento columns
   are 3vw apart (38 / 43 / 46px), stopping at the Blog's 52px. */

.acini-grid-wrap--home {
	gap: 5.6rem;
}

.acini-grid-wrap--home .acini-card--image .acini-card__body {
	gap: 1rem;
}

/* ---- Row ---------------------------------------------------------------------------- */

.acini-grid--row {
	gap: var(--acini-space-lg);
}

/* ---- Wider screens -------------------------------------------------------------------- */

@media (min-width: 40em) {
	.acini-grid--row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.acini-card--image .acini-card__media {
		block-size: auto;
	}

	.acini-card--image .acini-card__img {
		block-size: auto;
	}

	.acini-card--featured .acini-card__media {
		flex: 1;
		min-block-size: 28rem;
	}
}

@media (min-width: 64em) {
	.acini-grid-wrap {
		gap: var(--acini-space-2xl);
	}

	.acini-grid-wrap--home {
		gap: 5.6rem;
	}

	.acini-grid-wrap--cards-3 {
		gap: var(--acini-space-lg);
	}

	.acini-grid-wrap--home .acini-grid--bento {
		gap: min(3vw, 5.184rem);
	}

	.acini-grid--bento {
		grid-template-columns: minmax(0, 352fr) minmax(0, 599fr) minmax(0, 352fr);
		gap: 5.184rem;
	}

	/* Order stops mattering; each part takes its own column. In a right-to-left page
	   column 1 is on the right, so images are right, text left (as in the design). */
	.acini-grid__featured,
	.acini-grid__images,
	.acini-grid__texts {
		order: 0;
		grid-row: 1;
	}

	.acini-grid__images { grid-column: 1; }
	.acini-grid__featured { grid-column: 2; }
	.acini-grid__texts { grid-column: 3; }

	.acini-grid--mirrored .acini-grid__texts { grid-column: 1; }
	.acini-grid--mirrored .acini-grid__images { grid-column: 3; }

	.acini-grid__featured > .acini-card {
		block-size: 73.339rem;
		flex: none;
	}

	.acini-card--featured .acini-card__media {
		flex: none;
		block-size: 52rem;
		min-block-size: 52rem;
	}

	.acini-card--featured .acini-card__body {
		padding: 0 3.6rem;
	}

	.acini-card--featured .acini-card__title {
		font-size: var(--acini-text-xl);
		line-height: 1.3;
	}

	.acini-grid__images > .acini-card,
	.acini-grid__texts > .acini-card {
		flex: 1;
	}

	.acini-card--image .acini-card__media {
		flex: 1;
		min-block-size: 18rem;
	}

	.acini-card--image .acini-card__img {
		position: absolute;
		inset: 0;
		block-size: 100%;
	}
}

/* Home, below 768px: one column, and every picture is a 200px band whatever the width. */
@media (max-width: 47.99em) {
	.acini-grid-wrap--home .acini-card--featured .acini-card__media,
	.acini-grid-wrap--home .acini-card--image .acini-card__media {
		flex: none;
		block-size: 20rem;
		min-block-size: 0;
	}

	.acini-grid-wrap--home .acini-card--image .acini-card__img {
		position: absolute;
		inset: 0;
		block-size: 100%;
	}

	.acini-grid-wrap--home .acini-card--featured .acini-card__body {
		padding: 3.6rem;
	}
}

/* Home, 768 – 1279px: two columns — the large card beside the text cards, which stretch to its
   height — then the image cards as full-width rows underneath. Three columns return at 1280. */
@media (min-width: 48em) and (max-width: 79.99em) {
	.acini-grid-wrap--home .acini-grid--bento {
		grid-template-columns: minmax(0, 599fr) minmax(26rem, 352fr);
		gap: 3vw;
	}

	.acini-grid-wrap--home .acini-grid__featured,
	.acini-grid-wrap--home .acini-grid__texts,
	.acini-grid-wrap--home .acini-grid__images {
		order: 0;
	}

	.acini-grid-wrap--home .acini-grid__featured {
		grid-column: 1;
		grid-row: 1;
	}

	.acini-grid-wrap--home .acini-grid__texts {
		grid-column: 2;
		grid-row: 1;
	}

	.acini-grid-wrap--home .acini-grid__images {
		grid-column: 1 / -1;
		grid-row: 2;
		gap: 3vw;
	}

	.acini-grid-wrap--home .acini-grid__texts > .acini-card {
		flex: 1;
	}

	.acini-grid-wrap--home .acini-card--featured .acini-card__media {
		flex: none;
		block-size: 52rem;
		min-block-size: 52rem;
	}

	.acini-grid-wrap--home .acini-grid__images > .acini-card {
		flex: none;
		block-size: 30.2rem;
	}
}

@media (min-width: 80em) {
	.acini-grid--row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 5rem;
	}
}

/* ---- Wide cards with the detail line (a podcast's other episodes) ----------------------
   Measured from the design (post-Podcast / All, 1440): a white card rounded 24px, the picture
   216px wide down the whole inline-start edge, the text 24px in: title 16px medium, the excerpt
   in three lines, the "credit • date • length" line, then the violet link with its chevron. */

.acini-grid-wrap--meta .acini-card--wide .acini-card__body {
	gap: var(--acini-space-sm);
	padding: var(--acini-space-lg);
}

.acini-grid-wrap--meta .acini-card--wide .acini-card__title {
	font-weight: var(--acini-weight-medium);
}

.acini-grid-wrap--meta .acini-card--wide .acini-card__text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--acini-text-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.acini-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--acini-space-xs);
	margin: 0;
	font-size: var(--acini-text-sm);
	line-height: 1.43;
	color: var(--acini-text-muted);
}

.acini-card__dot {
	inline-size: 3px;
	block-size: 3px;
	background: currentColor;
	border-radius: 50%;
}

.acini-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--acini-space-2xs);
	margin-block-start: var(--acini-space-2xs);
	font-size: var(--acini-text-sm);
	line-height: 1.43;
	color: var(--acini-accent);
}

.acini-card__cta-text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.acini-card__chevron {
	flex: none;
	inline-size: 1.6rem;
	block-size: 1.6rem;
}

/* The chevron points to the inline end: left in Hebrew, right in a left-to-right page. */
html[dir="ltr"] .acini-card__chevron {
	transform: scaleX(-1);
}

@media (min-width: 40em) {
	.acini-grid-wrap--meta .acini-card--wide {
		align-items: stretch;
	}

	.acini-grid-wrap--meta .acini-card--wide .acini-card__media {
		inline-size: 21.6rem;
		block-size: auto;
		min-block-size: 21.3rem;
	}

	.acini-grid-wrap--meta .acini-card--wide .acini-card__img {
		position: absolute;
		inset: 0;
	}

	.acini-grid-wrap--meta .acini-card--wide .acini-card__body {
		padding: var(--acini-space-lg);
	}
}

/* ---- Row of picture cards ("more posts" at the foot of a post) -------------------------
   Measured from the design (post pages, 390 / 768 / 1024 / 1440): the heading 28px medium,
   centred, 40px over the cards (64px from 1280); one column, two from 640 (32px apart), four
   from 1280 (84px apart). Every card is 347px tall: a 234px picture with the tag over its
   corner, then the title and two lines of excerpt, 10px apart. */

.acini-grid-wrap--row-media .acini-grid__heading {
	font-weight: var(--acini-weight-medium);
	color: var(--acini-text);
	text-align: center;
}

.acini-grid--row-media {
	gap: var(--acini-space-2lg);
}

.acini-grid--row-media .acini-card__media,
.acini-grid--row-media .acini-card--image .acini-card__media {
	flex: none;
	block-size: 23.4rem;
	min-block-size: 0;
}

.acini-grid--row-media .acini-card__img,
.acini-grid--row-media .acini-card--image .acini-card__img {
	position: absolute;
	inset: 0;
	block-size: 100%;
}

.acini-grid--row-media .acini-card__body {
	flex: 1;
	gap: 1rem;
}

@media (min-width: 40em) {
	.acini-grid--row-media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.acini-grid-wrap--row-media {
		gap: var(--acini-space-xl);
	}
}

@media (min-width: 80em) {
	.acini-grid-wrap--row-media {
		gap: var(--acini-space-2xl);
	}

	.acini-grid--row-media {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8.4rem;
	}
}