/*
 * core/post-template — the article card grid.
 *
 * _article-card.scss. Typography and colours are in styles/article-card.json;
 * what is left here is the structure: the card is a flex column so the "read
 * more" line sits at the same height across cards, the image is cropped to a
 * fixed ratio, and the meta row draws its own separator.
 *
 * Loaded only on pages that contain a post-template block.
 */

:root .is-style-article-card > li {
	display: flex;
	flex-direction: column;
}

/* _article-grid.scss: the gap grows to 2.5rem at lg, where the grid is a plain
   three columns.
 *
 * Below lg the column count comes from the block's own grid layout, which
 * computes its track sizes from the block gap — so the gap must stay the block
 * gap there. Overriding it in CSS alone made core size the tracks for 2rem and
 * lay them out at 2.5rem, and the row wrapped to fewer columns. */
@media (min-width: 1024px) {

	:root .is-style-article-card {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;
	}
}

/* The ratio belongs to the wrapper: block-size: 100% on the image alone is
   circular (the wrapper's height comes from the image), so oddly shaped images
   escape cropping and the card grows. 16/10 as in the source (395x247). */
:root .is-style-article-card .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 10;

	/* clip with a margin, not hidden: the link fills the whole figure, so its
	   focus ring fell outside the box and was cut down to two vertical marks.
	   Nothing can actually spill into the margin, because the image is sized to
	   100% of the figure and cropped with object-fit. */
	overflow: clip;
	overflow-clip-margin: 4px;
}

:root .is-style-article-card .wp-block-post-featured-image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

:root .is-style-article-card .wp-block-post-featured-image > a {
	display: block;
	block-size: 100%;
}

/* Category and date on one line, separated by a rule. */
:root .is-style-article-card > li > .wp-block-group {
	margin-block: 1rem 0.5rem;
	align-items: center;
	gap: 0.75rem;
}

:root .is-style-article-card > li > .wp-block-group > * {
	margin-block: 0;
}

:root .is-style-article-card > li > .wp-block-group > * + *::before {
	content: '|';
	margin-inline-end: 0.75rem;
	color: var( --wp--preset--color--border );
}

/* Search results have no date, so the meta row can be empty. */
:root .is-style-article-card > li > .wp-block-group:empty {
	display: none;
}

/* The excerpt takes the remaining space so "read more" lines up across cards
   even when the titles differ in length. Three lines, then it clamps. */
:root .is-style-article-card .wp-block-post-excerpt {
	display: -webkit-box;
	flex: 1;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* ArrowLink: the arrow is a pseudo-element so it does not reach a screen
   reader. */
:root .is-style-article-card .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block: 0;
}

:root .is-style-article-card .wp-block-read-more::after {
	content: '\2192';
}


/* Person cards: a square portrait at full width, no rounding, as in the source.
   The card itself is core's post-template <li>, so it needs no class of its own
   — the centring comes from the variation. */
:root .is-style-person-card .wp-block-post-featured-image {
	inline-size: 100%;
	margin-block: 0;
	aspect-ratio: auto;
}

:root .is-style-person-card .wp-block-post-featured-image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
}

/* The email sits a quarter rem below the role, and is one long word — so
   `anywhere` folds the break into the card's sizing rather than overflowing. */
:root .is-style-person-card .wp-block-post-template__email {
	margin-block-start: 0.25rem;
	overflow-wrap: anywhere;
}

/* The board grid steps four times: one column, two from sm, three from lg and
   four only from xl. The README records why — the source switches to four at md,
   but sizes the columns to their content, so the longest email address stretches
   the row past the viewport and the production page scrolls sideways on a tablet.
 *
 * Core's grid cannot express four steps, and overriding only the gap would make
 * it size tracks for one value and lay them out at another. So this component's
 * grid is written out here in full. */
:root .is-style-person-card {
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 640px) {

	:root .is-style-person-card {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {

	:root .is-style-person-card {
		gap: 2.5rem;
	}
}

@media (min-width: 1024px) {

	:root .is-style-person-card {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {

	:root .is-style-person-card {
		grid-template-columns: repeat(4, 1fr);
	}
}



/* Story cards.
 *
 * Typography is in styles/story-card.json; the grid, the square image and the
 * hover motion stay here. Columns step 1 / 2 / 3 as in _story-page.scss — core's
 * grid layout would give three from 640px, where the card shrinks to 170px and
 * the square image becomes a postage stamp. */
:root .is-style-story-card {
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {

	:root .is-style-story-card {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {

	:root .is-style-story-card {
		grid-template-columns: repeat(3, 1fr);
	}
}

:root .is-style-story-card .wp-block-post-featured-image {
	margin-block: 0 1rem;
	overflow: hidden;
}

:root .is-style-story-card .wp-block-post-featured-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

:root .is-style-story-card > li:hover .wp-block-post-featured-image img {
	transform: scale( 1.05 );
}

/* The role sits half a rem above the link. */
:root .is-style-story-card .wp-block-post-template__role {
	margin-block: 0 0.5rem;
}

/* "Lue tarina" with its arrow. */
:root .is-style-story-card .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-block: 0;
}

:root .is-style-story-card .wp-block-read-more::after {
	content: '\2192';
	transition: transform 200ms ease;
}

:root .is-style-story-card .wp-block-read-more:hover {
	color: var( --wp--preset--color--primary-dark );
	text-decoration: underline;
}

:root .is-style-story-card > li:hover .wp-block-read-more::after {
	transform: translateX( 0.25rem );
}

/* is-style-article-compact — the statement list: date above title, nothing
   else. Colours and margins are in styles/article-compact.json; the flex
   column and its 1.5rem gap come from the block's own layout attributes.
 *
 * Only the date's display is left here. In the source it is a <time>, an
 * inline element, so its line box takes the section's 1.6 line height
 * (16px * 1.6 = 25.6) rather than its own 14px. Core wraps post-date in a div,
 * and inline puts that back. */
:root .is-style-article-compact .wp-block-post-date {
	display: inline;
}

/* is-style-article-list — the side column of the featured section: a small
   thumbnail on the left, title on the right, a rule between rows.
 *
 * The row is a flex group rather than core/media-text. Media-text's image slot
 * is not a block area but an attribute-rendered image, so a post-featured-image
 * placed there made the block invalid in the editor. With a group the structure
 * is the editor's own language and stays editable.
 *
 * Typography and link colours are in styles/article-list.json. */

/* _article-grid.scss: &__list { border-top: 1px solid $color-gray-200 }.
   Without it the list started a pixel higher than the featured image. */
:root .is-style-article-list {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* The rhythm comes from each row's own padding and rule, not from a gap
   between them. Core would add 24px to every list item. */
:root .is-style-article-list > li {
	margin-block: 0;
}

/* _article-grid.scss: the row is flex, gap 1rem, padding-block 1rem, rule
   below. Core's flex layout aligns children to the top; in the source the
   image stretches to the row height and crops to it. */
:root .is-style-article-list > li > .wp-block-group {
	gap: 1rem;
	padding-block: 1rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
	align-items: stretch;
}

/* Core wraps every item in its own li, so :first-child would match them all.
   Only the list's first row loses its top padding. */
:root .is-style-article-list > li:first-child > .wp-block-group {
	padding-block-start: 0;
}

/* The thumbnail is 7rem wide on small screens: anything wider takes room from
   the title, and on a 390px screen the row would break every other syllable.
   From 640px up it widens to 10rem, because the union's own graphics are
   16:9 (every recent one is 1920x1080) and a narrow slot crops the text out
   of them; a multi-line title still stretches the image taller, so the wider
   slot is what keeps the crop tolerable. */
:root .is-style-article-list .wp-block-post-featured-image {
	flex: 0 0 7rem;
	inline-size: 7rem;
	margin: 0;

	/* The link only stretches to the wrapper if the wrapper is flex too. */
	display: flex;
}

@media (min-width: 640px) {

	:root .is-style-article-list .wp-block-post-featured-image {
		flex-basis: 10rem;
		inline-size: 10rem;
	}
}

/* 16:9 rather than 4:3: cover images are typically wide graphics with text,
   and 4:3 cropped the text at the edges. A multi-line title makes the row
   taller than the ratio, and then the image stretches to the row (flex's
   default stretch) as in the source. The ratio is a minimum height, not a
   fixed one. */
:root .is-style-article-list .wp-block-post-featured-image > a {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
}

:root .is-style-article-list .wp-block-post-featured-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The body column is vertical and centres its content against the image
   height. Core's flex layout would make it a horizontal row. */
:root .is-style-article-list > li > .wp-block-group > .wp-block-group {
	flex: 1;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;

	/* The rhythm is the title's bottom margin, not core's block gap. */
	gap: 0;
}

:root .is-style-article-list > li > .wp-block-group > .wp-block-group > * + * {
	margin-block-start: 0;
}

/* _article-grid.scss gives __list-title no size of its own, so it stays at the
   browser default for h3 (1.17em). The source clamps it to two lines. The clamp
   is not belt-and-braces: -webkit-box makes the title its own formatting
   context, so no descender space is left under the inline-block link. Without
   it every row was three pixels taller. */
:root .is-style-article-list .wp-block-post-title {
	font-size: 1.17rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	/* clip with a margin rather than hidden, so the clamp keeps working but the
	   focus ring of the title link is not cut. The ring sits 4px outside the
	   link and the box is exactly two lines tall, so with hidden only the left
	   and right edges of the ring survived. */
	overflow: clip;
	overflow-clip-margin: 4px;
}

/* _article-grid.scss: __list-title-link is inline-block with 0.125rem of
   vertical padding and a 1.5rem minimum height — a touch target, which grows
   the row by four pixels. */
:root .is-style-article-list .wp-block-post-title a {
	display: inline-block;
	padding-block: 0.125rem;
	min-block-size: 1.5rem;
}

/* _article-grid.scss: .article-grid__list-item:hover & { color: primary }.
   The colour changes on hovering the whole row, not just the link. */
:root .is-style-article-list > li > .wp-block-group:hover .wp-block-post-title,
:root .is-style-article-list > li > .wp-block-group:hover .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
}

/* The category line. _article-grid.scss: __category is medium (500) with
   0.025em of tracking — not bold and not 0.1em.
 *
 * No text-transform. The port had uppercase here and it survived every rewrite
   because the rule was only ever read, not compared: production draws the
   category in sentence case in all four card contexts — the grid, the featured
   item, the side list and the related cards. Measured on the front page and on
   /ajankohtaista. */
:root .is-style-article-card .wp-block-post-terms,
:root .is-style-card-meta .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.025em;
	color: var(--wp--preset--color--text-secondary);
}

/* The margins belong to a category line standing on its own in a card. Inside
   a card-meta row the group's own gap does the spacing, and these margins made
   the row 16px taller than the source. */
:root .is-style-article-card .wp-block-post-terms {
	margin-block: 0.75rem 0.25rem;
}

:root .wp-block-post-terms a {
	text-decoration: none;
}

:root .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* ArticleGrid.astro separates category and date with an em dash. Core renders
   post-terms and post-date as separate blocks, so the dash is a pseudo-element
   before the date. The empty alt text keeps it away from a screen reader, the
   way the source's aria-hidden did. */
:root .wp-block-post-terms + .wp-block-post-date::before {
	content: '\2014' / '';
	margin-inline-end: 0.5rem;
}

/* _article-grid.scss: the category in the list is smaller than in a card (xs)
   and vertically padded, which makes its meta row 27px rather than 22. This
   has to sit after the shared rule above: same specificity, so order decides. */
:root .is-style-article-list .wp-block-post-terms {
	display: inline-block;
	padding-block: 0.25rem;
	min-block-size: 1.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	margin-block: 0;
}

/* A story with no image leaves no hole in the carousel: the card would be 84px
   tall where its neighbours are 554, and the row would look broken. The fill is
   the union's green with the same topographic pattern as the mega menu.
 *
 * check-selectors.mjs reports this class as unmatched, and that is correct
   today — every published story has an image. The rule stays because
   class-blocks.php renders it the moment one does not. */
.vml-card-placeholder {
	display: block;
	inline-size: 100%;
	background: var(--wp--preset--color--primary) url( ../../img/topographic.svg ) center / cover no-repeat;
}