/* =========================================================
   DSAI-RC — LISTING PAGES
   News (posts page), Projects overview, the Data Science /
   Artificial Intelligence archives, and Research.
   Layout only — colours and controls live in brand.css.
   ========================================================= */

body.dsairc-listing .wp-block-group.alignfull {
	padding-inline: var(--ev-gutter) !important;
}

/* ---------------------------------------------------------
   FILTER PILLS — Projects overview and its two archives
   --------------------------------------------------------- */

body.dsairc-listing .dsairc-filter-link {
	margin: 0;
}

body.dsairc-listing .dsairc-filter-link a {
	display: inline-block;
	min-width: 0;
	padding: 12px 28px;
	border: 1px solid var(--ev-navy);
	border-radius: var(--ev-pill);
	color: var(--ev-navy) !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none !important;
}

body.dsairc-listing .dsairc-filter-link a::after {
	display: none;
}

body.dsairc-listing .dsairc-filter-link a:hover {
	background: var(--ev-navy);
	color: #ffffff !important;
}

body.dsairc-listing .dsairc-filter-active a {
	background: var(--ev-lime);
	border-color: var(--ev-lime);
	color: var(--ev-navy) !important;
}


/* ---------------------------------------------------------
   STORY GRID — the News listing.
   News is a photo-and-headline feed, so it drops the excerpt
   and Read More that Research and Projects keep.
   --------------------------------------------------------- */

body.dsairc-listing .dsairc-story-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

body.dsairc-listing .dsairc-story-card .wp-block-post-featured-image {
	margin: 0 0 8px !important;
	overflow: hidden;
	border-radius: var(--ev-radius);
}

body.dsairc-listing .dsairc-story-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

body.dsairc-listing .dsairc-story-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

body.dsairc-listing .dsairc-story-card .wp-block-post-title {
	margin: 0 !important;
}

body.dsairc-listing .dsairc-story-card .wp-block-post-title a {
	color: var(--ev-navy) !important;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

body.dsairc-listing .dsairc-story-card .wp-block-post-title a:hover {
	color: var(--ev-blue) !important;
}

body.dsairc-listing .dsairc-story-card .wp-block-post-date {
	margin: 0 !important;
	color: var(--ev-navy) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

/* theme.json sets useRootPaddingAwareAlignments, so WordPress gives every
   .alignwide child of a padded band negative inline margins to pull it back
   out to the band's edge — landing it right on top of the left rule. Every
   listing band gets the same neutralisation, so News, Projects, Research
   and Datasets all clear the rule by exactly the band's own padding. */
body.dsairc-listing .wp-block-group.alignfull > .alignwide {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.dsairc-listing .wp-block-post-template {
	gap: 60px 40px !important;
}

/* Every card in a row ends level with its neighbours: the grid item
   stretches, the card fills it, and the body column below the image is
   what absorbs the slack (see the auto margin on Read More further
   down) — otherwise a short excerpt leaves the button floating
   mid-card while the card beside it runs to the full row height. */
body.dsairc-listing .wp-block-post-template > li {
	display: flex;
}

body.dsairc-listing .dsairc-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

body.dsairc-listing .dsairc-post-card > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1;
}

body.dsairc-listing .dsairc-post-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* The taxonomy chip rides on the image's top-left corner rather than
   sitting in the text column under it. */
body.dsairc-listing .dsairc-post-card > .dsairc-category-ribbon {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0 !important;
}

/* Read More is a card affordance, not a page-level CTA: drop the 206px
   min-width the shared button rule gives it (that width is what made it
   read as a slab parked under the card), and pin it to the bottom so
   every card's button lines up across the row. */
body.dsairc-listing .dsairc-post-card .wp-block-read-more {
	min-width: 0 !important;
	align-self: flex-start;
	margin-top: auto !important;
	padding: 9px 22px !important;
}

body.dsairc-listing .wp-block-query-pagination {
	margin-top: 60px;
}


@media (max-width: 1100px) {
	body.dsairc-listing .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 700px) {
	body.dsairc-listing .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}