/* ==========================================================================
   Blog screen
   Contents: toolbar · featured article · article grid
   ========================================================================== */

/*
 * Mirror the stock photo so the subject leaves room for the handwritten note.
 *
 * The archive only. A single post shares this route and carries a real
 * photograph chosen in wp-admin: flipping that one would mirror whatever it
 * shows — a body, a location, any text in the frame — which is not a crop, it is
 * a lie about the picture.
 */
.route-blog:not(.single) .page-hero__image {
	transform: scaleX(-1);
}

/*
 * The whole screen is one anchor. Picking a topic or a page here is a real page
 * load — unlike the FAQ, which filters in the browser — so every one of those
 * links ends in #articles to land the visitor on the results instead of at the
 * top of the site. Without the margin the toolbar sits flush against the top
 * edge of the window, which reads as a page cut off rather than a page
 * scrolled. --space-6 is what the location cards already use for the same
 * job.
 */
.blog-directory {
	scroll-margin-top: var(--space-6);
}

.blog-toolbar {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}

.blog-toolbar .pill-form__button {
	min-width: 120px;
}

@media (min-width: 992px) {
	.blog-toolbar {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--space-8);
	}
}


/* Article cards
   ========================================================================== */

.article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid #e8eef5;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}

.article-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.article-card__media {
	position: relative;
}

.article-card__image {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.article-card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
}

.play-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding-left: 3px;
	color: var(--color-ink);
	background: var(--color-white);
	border-radius: 50%;
	box-shadow: var(--shadow);
	transform: translate(-50%, -50%);
}

/* Compact card rhythm measured on the Blog mockup. */
.article-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem 1rem;
}

.article-card__title {
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--color-navy);
}

.article-card__excerpt {
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.article-card__main {
	flex: 1;
}

.article-card__main > * + * {
	margin-top: 0.375rem;
}

.article-card__link {
	font-size: 0.9375rem;
}

/*
 * The meta row of a card is two items and a gap, and at the four-column
 * breakpoint the box it lives in is at its narrowest: 229px at a 1200px
 * viewport. Measured in the browser, the English row needs 225px there with a
 * long month and a two-digit reading time — inside by four pixels, which is
 * not a margin, it is luck. It showed first in Spanish, where the longer
 * string pushed the row past the edge and some cards wrapped while others did
 * not, decided by which date happened to be a few pixels narrower.
 *
 * 24px between two short facts was generous anyway; 16 leaves the row eleven
 * pixels of room in English, and the Spanish string was shortened to match.
 */
.article-card .meta-list {
	column-gap: var(--space-4);
}

.article-grid {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-5);
}

@media (min-width: 576px) {
	.article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
	.article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * The fourth column at xxl, the same place .location-grid takes its own, so the
 * two card grids on this site always show the same number of columns.
 *
 * It is not the blog's own content that puts it here — an article card is fine
 * at 269px — it is the Locations grid, whose help banner collapses when four
 * columns squeeze it (see pages/locations.css). Matching is the point: the
 * mismatch is what Robert noticed, and one number is easier to keep true than
 * two.
 *
 * Posts per page is 12 for this ladder: it divides exactly by 4, 3, 2 and 1, so
 * the last row is never ragged at any width (Settings > Reading, phase 9).
 */
@media (min-width: 1400px) {
	.article-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* Featured article
   ========================================================================== */

.article-card--featured {
	/*
	 * --space-4, matching the row gap Locations' .filter-bar puts under its chips, so
	 * the space below a row of filter chips is the same on both screens. It went 24 ->
	 * 20 -> 16, and the middle step was reasoning about the wrong thing: 20 lines this
	 * up with "filter bar -> results" on Locations, but there the filter bar has a
	 * second row (the Grid/Map switch) and what a reader actually compares between the
	 * two pages is the gap directly under the chips they can see. Measured from the
	 * chip rather than from its container — the scrolling row adds 8px of its own
	 * padding on phones — that gap was 28px here against 24px there.
	 */
	margin-top: var(--space-4);
	background: #f8fbfe;
}

.article-card--featured:hover {
	transform: none;
}

.article-card--featured .article-card__badge {
	top: var(--space-4);
	left: var(--space-4);
}

.article-card--featured .article-card__body {
	padding: 1.25rem 1.5rem;
}

.article-card--featured .article-card__title {
	font-size: clamp(1.3rem, 1rem + 0.8vw, 1.6rem);
	line-height: 1.22;
}

.article-card--featured .article-card__excerpt {
	max-width: 62ch;
	font-size: 0.9375rem;
}

/* A badge is inline-flex, so in this column it would stretch to the full width. */
.article-card__status {
	align-self: flex-start;
	margin-bottom: 0.2rem;
}

/*
 * The gap between the meta line and the call to action was 22px here against 8px
 * on the cards in the grid, so the featured card's footer read as two separate
 * blocks where the others read as one. Not matched exactly: a filled button is a
 * heavier object than a text link and 8px crowds it. 12px keeps it in the same
 * cluster while giving it room.
 */
.article-card--featured .article-card__cta {
	align-self: flex-start;
	margin-top: 0.25rem;
}

@media (min-width: 992px) {
	.article-card--featured {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	/*
	 * Taken out of the height calculation entirely, which is the only way this
	 * is stable: the image was asked to fill 100% of a box whose height came
	 * from the image. The demo photographs hid it — the CDN serves them already
	 * cropped to 2:1, so the circular answer happened to be the right one. A
	 * real featured image from wp-admin has whatever shape it has, and the loop
	 * resolved at 1500px: a card one and a half screens tall for a 655x368
	 * photograph.
	 *
	 * Absolute, so the row is sized by the text beside it and the picture fills
	 * whatever that comes to. min-height keeps the card from collapsing when the
	 * text is very short.
	 */
	.article-card--featured .article-card__media {
		min-height: 260px;
	}

	.article-card--featured .article-card__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}

	/*
	 * One column. This was two, with the meta list in a bordered column of its own,
	 * which gave the date and the reading time about a third of the card's text width
	 * and took it from the title and the excerpt — the two things that earn the click.
	 */
	.article-card--featured .article-card__body {
		padding: var(--space-8) var(--space-8) var(--space-8) var(--space-10);
	}
}

/*
 * The handwritten note sits over the top-right of the hero photo, and this crop is what
 * keeps it clear of the patient's dark shoulder. Desktop only: below 992px the note is
 * hidden and the photo becomes a strip, where the theme's default crop frames better.
 */
@media (min-width: 992px) {
	.route-blog .page-hero__image {
		--hero-photo-y: 8%;
	}

	/*
	 * And the left edge kept in view instead of the right (main.css,
	 * --hero-photo-x): the file is composed reversed, its wall on the left, and
	 * the mirror at the top of this file puts that edge on the right, under the
	 * note.
	 */
	.route-blog:not(.single) .page-hero__image {
		--hero-photo-x: left;
	}
}


/* The column beside an article's or a service's text
   ========================================================================== */

/*
 * Shared by an article's screen and a service's page, which both load this
 * stylesheet for the article cards: the same column and the same featured
 * card closing it, so the two screens cannot drift.
 */
.article-aside {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

/*
 * The featured card closing the aside. Only the label's spacing: the card is
 * the site's article card and brings everything else with it, which is the
 * point of using it rather than drawing a sidebar-sized one.
 */
.article-featured {
	display: grid;
	gap: var(--space-3);
}