/**
 * Blog — listing views (index, category, tag, author, date, search).
 *
 * No Figma frame exists for the blog, so nothing here is measured off the
 * design. It is assembled from the site's own vocabulary, the way 404.php is:
 * the inner-page hero's proportions and type for the masthead, the section
 * rhythm and pale ground for the grid, `.card` panels for the posts, and the
 * global button system for the controls. Every value is a token.
 */

/* ===================================================================
 * Masthead band
 *
 * 420px rather than the 500 the ACF page heroes carry — a listing title is one
 * short line where a service page's H1 runs to three, so the taller band would
 * be mostly empty. Same figure the 404 band uses, for the same reason.
 * =================================================================== */
.blog-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	padding-block: var(--space-60);
	background-color: var(--primary-black);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--white);
}

/* The same left-to-right green wash the inner-page heroes carry, so the blog
 * reads as part of the site. Held at a heavier alpha than page-hero's because
 * a post's own featured image sits behind it — those are photographs chosen for
 * a card, not art-directed hero plates, and the lighter wash left white type
 * on a bright sky. */
.blog-hero::before {
	position: absolute;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgba(var(--overlay-green-rgb), 0.94) 0%,
		rgba(var(--overlay-green-rgb), 0.78) 55%,
		rgba(var(--primary-black-rgb), 0.55) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
}

/* With no image behind it the band is flat black, and the green wash above
 * would read as a colour cast rather than a treatment. */
.blog-hero:not(.blog-hero--image)::before {
	background: linear-gradient(
		90deg,
		rgba(var(--overlay-green-rgb), 0.85) 0%,
		rgba(var(--primary-black-rgb), 0.9) 100%
	);
}

.blog-hero__inner {
	position: relative;
	z-index: 1;
}

/* --- badge ---------------------------------------------------------- */
/* The uppercase, 5%-tracked voice `.btn-bold` uses, at the smallest size in the
 * token set. Sized in tokens rather than a one-off so it matches the card badge
 * exactly — the two sit on the same journey. */
.blog-hero__badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--space-20);
	padding: 6px var(--space-15);
	background-color: var(--primary-green);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-14);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

a.blog-hero__badge:hover,
a.blog-hero__badge:focus-visible {
	background-color: var(--white);
	color: var(--primary-green);
}

/* --- heading -------------------------------------------------------- */
/* --fs-64, not the page heroes' --fs-84. A post title is a sentence — "Signs of
 * Poor Roof Ventilation in Your Home" — where a service page's H1 is two or
 * three words, and at 84 the longest of the 231 migrated titles ran to five
 * lines and pushed the band past 700px tall. */
.blog-hero__heading {
	margin: 0;
	max-width: 1000px;
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-64);
	font-weight: 800;
	line-height: var(--lh-heading);
}

/* base.css paints a bare <span> inside a heading green; on this ground that is
 * the accent treatment the listing headings ask for, so it is left alone and
 * only restated here for the archive titles that are entirely accented. */
.blog-hero__heading span {
	color: var(--primary-green);
}

/* --- meta row (single post) ----------------------------------------- */
.blog-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12) var(--space-30);
	margin-top: var(--space-20);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: 400;
	line-height: var(--lh-tight);
}

.blog-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-10);
}

/* Fixed height, auto width — the calendar glyph is 40x44 and the person badge
 * 35x35, so forcing both square would squash the calendar by 10%. Height is the
 * dimension that matters here: it is what lines the icons up with the type
 * beside them. Same approach as .slider-arrow svg. */
.blog-hero__meta-item svg {
	flex: 0 0 auto;
	width: auto;
	height: 18px;
	color: var(--primary-green);
}

/* --- lede ----------------------------------------------------------- */
/* `.section-lede` sets the body-grey the class carries everywhere else, which is
 * unreadable on this ground — so the colour is overridden and nothing else is. */
.blog-hero__lede {
	max-width: 760px;
	margin-top: var(--space-20);
	margin-bottom: 0;
	color: var(--white);
}

/* --- breadcrumb ----------------------------------------------------- */
/* Self-contained rather than borrowing `.page-hero__breadcrumb`: that lives in
 * css/blocks/page-hero.css, which is enqueued from the ACF layout map and so is
 * never present on a blog view. The separator spacing below is the same figure
 * that file uses — Yoast emits the trail as a bare " / " text node between the
 * crumb spans, which measures only ~5px on its own, so the rest goes on the
 * spans. */
.blog-hero__breadcrumb {
	margin-top: var(--space-20);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: var(--lh-tight);
}

.blog-hero__breadcrumb a {
	color: var(--white);
	text-decoration: none;
}

.blog-hero__breadcrumb a:hover,
.blog-hero__breadcrumb a:focus-visible {
	color: var(--primary-green);
}

.blog-hero__breadcrumb .breadcrumb_last {
	color: var(--mid-green);
}

.blog-hero__breadcrumb > span > span {
	margin-inline: 7px;
}

.blog-hero__breadcrumb > span > span:first-child {
	margin-left: 0;
}

.blog-hero__breadcrumb > span > span:last-child {
	margin-right: 0;
}

/* ===================================================================
 * Listing grid
 *
 * 3 columns at the developer's instruction, 12 posts per page. 12 divides
 * exactly by 3 and by 2, so no page ends on a short row at any breakpoint.
 * =================================================================== */
.blog-listing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Every row as tall as the tallest card across the whole grid, not just the
	 * tallest in its own row. Titles run to one, two or three lines, so without
	 * this the four rows sized independently and the Read More rows stopped
	 * lining up down the page. The same reasoning as link-cards.css. */
	grid-auto-rows: 1fr;
	gap: var(--grid-gutter);
}

/* ===================================================================
 * Post card
 * =================================================================== */
/* `.card` in the markup already sets the white ground and states the design's
 * no-shadow rule; the border is this component's own. --mid-green is the token
 * set's border colour, so the panel has an edge against the pale section
 * without inventing a shade. */
.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mid-green);
	transition: var(--transition);
}

.blog-card:hover,
.blog-card:focus-within {
	border-color: var(--primary-green);
}

/* --- media ---------------------------------------------------------- */
/* 16:9 — the ratio the migrated featured images are already generated at
 * (1024x576), so the box crops nothing on the overwhelming majority of them. */
.blog-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--pale-green);
}

.blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__image,
.blog-card:focus-within .blog-card__image {
	transform: scale(1.05);
}

.blog-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--pale-green);
}

.blog-card__placeholder svg {
	width: auto;
	height: 64px;
	color: var(--mid-green);
}

/* Same treatment as the masthead badge — one label, two places on the journey. */
.blog-card__category {
	position: absolute;
	top: var(--space-15);
	left: var(--space-15);
	z-index: 1;
	max-width: calc(100% - (var(--space-15) * 2));
	padding: 5px var(--space-12);
	background-color: var(--primary-green);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-14);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	/* The migrated categories are set in caps at the source and run long —
	 * "ROOFING CONTRACTOR" is wider than the badge at 2-up. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --- body ----------------------------------------------------------- */
.blog-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--space-25);
}

.blog-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	margin-bottom: var(--space-12);
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: 400;
	line-height: var(--lh-tight);
}

.blog-card__meta svg {
	flex: 0 0 auto;
	width: auto;
	height: 18px;
	color: var(--primary-green);
}

.blog-card__title {
	margin: 0 0 var(--space-12);
	font-family: var(--font-heading);
	font-size: var(--fs-24);
	font-weight: 700;
	line-height: var(--lh-24-28);
}

.blog-card__title a {
	color: var(--primary-black);
	text-decoration: none;
}

/* The whole panel is the click target. One stretched pseudo-element rather than
 * wrapping the card in an anchor: the card contributes a single link to the
 * accessibility tree, the heading keeps its text as the link's accessible name,
 * and nothing nests inside an <a>. */
.blog-card__title a::after {
	position: absolute;
	z-index: 2;
	content: "";
	inset: 0;
}

.blog-card:hover .blog-card__title a,
.blog-card__title a:focus-visible {
	color: var(--primary-green);
}

.blog-card__excerpt {
	margin: 0 0 var(--space-20);
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: 400;
	line-height: var(--lh-18-30);
	/* Three lines, so a 400-character excerpt cannot make one card twice the
	 * height of its neighbours. The word trim in kerrigan_card_excerpt() gets
	 * most of the way there; this is what guarantees it. */
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* `.btn-link` already owns this control's appearance — colour, weight, tracking,
 * padding. Only its position is set here, per the note at the top of
 * css/components/buttons.css. `auto` pins it to the bottom of the panel so the
 * Read More rows line up across a row of cards whose titles differ in length. */
.blog-card__more {
	margin-top: auto;
	align-self: flex-start;
}

.blog-card:hover .blog-card__more,
.blog-card:focus-within .blog-card__more {
	color: var(--primary-black);
}

.blog-card:hover .blog-card__more .btn-arrow-icon,
.blog-card:focus-within .blog-card__more .btn-arrow-icon {
	transform: translate(2px, -2px);
}

/* ===================================================================
 * Pagination
 * =================================================================== */
.blog-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-15);
	margin-top: var(--space-60);
}

.blog-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 50px square. The size comes from --slider-arrow-size so the pagination
 * controls and the carousel arrows are the same object at the same scale;
 * square rather than round because every CTA in this design reports radius 0
 * and the round treatment belongs to the arrows and the avatars. */
.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--slider-arrow-size);
	height: var(--slider-arrow-size);
	padding-inline: var(--space-10);
	border: 1px solid var(--mid-green);
	border-radius: var(--radius-0);
	background-color: var(--white);
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: 500;
	line-height: var(--lh-tight);
	text-decoration: none;
	transition: var(--transition);
}

.blog-pagination a.page-numbers:hover,
.blog-pagination a.page-numbers:focus-visible {
	border-color: var(--primary-green);
	background-color: var(--primary-green);
	color: var(--white);
}

.blog-pagination .page-numbers.current {
	border-color: var(--primary-green);
	background-color: var(--primary-green);
	color: var(--white);
	font-weight: 700;
}

/* The ellipsis is not a control, so it loses the panel and keeps only the type. */
.blog-pagination .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
	min-width: auto;
	padding-inline: 0;
}

/* --slider-arrow-glyph is documented as the RENDERED HEIGHT of the chevron, and
 * the glyph itself is 7x12 — so width has to stay auto or the arrow is stretched
 * to more than twice its proper width. Exactly how .slider-arrow svg sizes the
 * same icon. */
.blog-pagination .page-numbers svg {
	width: auto;
	height: var(--slider-arrow-glyph);
}

.blog-pagination__count {
	margin: 0;
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: var(--lh-tight);
}

/* ===================================================================
 * Empty state
 * =================================================================== */
.blog-listing__empty {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.blog-listing__empty-title {
	margin-bottom: var(--space-15);
}

.blog-listing__empty-actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-30);
}

.blog-listing__search {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-15);
	margin-top: var(--space-40);
}

.blog-listing__search label {
	flex: 0 0 100%;
	color: var(--body-grey);
	font-size: var(--fs-16);
}

.blog-listing__search input[type="search"] {
	flex: 1 1 260px;
	max-width: 420px;
}


.page-hero__breadcrumb a:hover {
    color: var(--white);
	text-decoration: underline;
}

/* ===================================================================
 * Responsive
 *
 * The same steps the rest of the theme uses: 1199 (iPad landscape), 991
 * (column stacking), 767 (mobile), 567 (small mobile).
 * =================================================================== */
@media (max-width: 1199px) {

	.blog-listing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {

	.blog-hero {
		min-height: 360px;
	}

	.blog-hero__heading {
		max-width: none;
	}
}

@media (max-width: 767px) {

	.blog-hero {
		min-height: 300px;
		padding-block: var(--space-40);
	}

	.blog-listing__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One-up cards are far wider than a 460px card, so a 16:9 image is a tall
	 * band on a phone; 3:2 keeps the picture in proportion to the panel. */
	.blog-card__media {
		aspect-ratio: 3 / 2;
	}

	.blog-card__body {
		padding: var(--space-20);
	}

	/* At one-up there is a full column width for the excerpt, and no
	 * neighbouring card to line up with — so the clamp only truncates copy for
	 * no reason. */
	.blog-card__excerpt {
		-webkit-line-clamp: 5;
	}
}

@media (max-width: 567px) {

	.blog-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		font-size: var(--fs-16);
	}

	/* At 40px the numbers 1-9 fit, but "10" and the chevrons need the gap
	 * closing rather than the square growing. */
	.blog-pagination__list {
		gap: 6px;
	}
}