/*!
 * RoofingWala - listing stylesheet
 *
 * Archive headers, the post card, listing grids, author box, pagination, empty
 * states and the 404. Loaded on every non singular view.
 */

/* ==========================================================================
   1. Archive header
   ========================================================================== */

.rw-archive-header {
	padding-block: var(--rw-space-xl) var(--rw-space-lg);
	border-bottom: 1px solid var(--rw-line);
	margin-bottom: var(--rw-space-xl);
}

.rw-archive-header__title {
	font-size: var(--rw-size-h1);
	margin: 0;
}

.rw-archive-header__count {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--rw-tracking-label);
	color: var(--rw-muted);
	margin: var(--rw-space-xs) 0 0;
}

.rw-archive-header__description {
	max-width: var(--rw-measure);
	margin-top: var(--rw-space-md);
	color: var(--rw-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.rw-archive-header__description p:last-child {
	margin-bottom: 0;
}

.rw-archive-header form {
	max-width: 32rem;
	margin-top: var(--rw-space-md);
}

/* ==========================================================================
   2. Listing grid
   ========================================================================== */

.rw-listing {
	padding-bottom: var(--rw-space-3xl);
}

.rw-listing__items {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rw-space-xl) var(--rw-space-lg);
}

@media (min-width: 40em) {
	.rw-listing__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62.5em) {
	.rw-listing__items {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--rw-space-2xl) var(--rw-space-lg);
	}
}

/* ==========================================================================
   3. Post card
   ========================================================================== */

/*
 * No box, no shadow, no border. Elevation is reserved for things that are
 * genuinely raised; a card in a grid is separated perfectly well by whitespace
 * and its own image, which is what makes a page read as editorial rather than
 * as a dashboard.
 */
.rw-card {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-xs);
}

/*
 * No fixed ratio and no cover crop: a card shows the whole featured image, at
 * the shape it was uploaded in. The frame only sets the width; the height comes
 * from the file.
 *
 * The trade for that is a grid row whose cards start their text at different
 * heights when their images are shaped differently. It stays even as long as
 * uploads share a ratio, and the meta line is pinned to the bottom of each card
 * regardless, so a row still closes on one baseline.
 */
.rw-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--rw-radius);
	background-color: var(--rw-surface);
}

.rw-card__media img {
	width: 100%;
	height: auto;
	display: block;
}

/*
 * Declared placeholder for posts with no featured image, so a mixed grid keeps
 * its rhythm instead of going ragged. It is the one media block that still
 * declares a ratio, because it has no image to take a height from and would
 * otherwise collapse. Deliberately quiet: a roof pitch drawn in the accent at
 * low strength, no text, no fake imagery.
 */
.rw-card__media--empty {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--rw-accent-soft);
}

.rw-card__media--empty::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 26px solid transparent;
	border-right: 26px solid transparent;
	border-bottom: 18px solid rgba(14, 106, 87, 0.2);
}

.rw-card__term {
	font-family: var(--rw-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--rw-tracking-label);
	color: var(--rw-accent);
	text-decoration: none;
	align-self: flex-start;
}

.rw-card__term:hover {
	text-decoration: underline;
}

.rw-card__title {
	font-size: var(--rw-size-h3);
	line-height: var(--rw-leading-snug);
	letter-spacing: -0.012em;
	margin: 0;
}

.rw-card__title a {
	color: var(--rw-ink);
	text-decoration: none;
}

.rw-card__title a:hover {
	color: var(--rw-accent);
}

.rw-card__excerpt {
	margin: 0;
	color: var(--rw-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.rw-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rw-space-2xs) var(--rw-space-sm);
	margin-top: auto;
	padding-top: var(--rw-space-3xs);
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	color: var(--rw-muted);
}

.rw-card__author {
	font-weight: 600;
	color: var(--rw-ink);
}

.rw-card__date {
	color: var(--rw-muted);
}

/* ==========================================================================
   4. Featured lead
   ========================================================================== */

/*
 * Structurally the same card as every other one, promoted with a modifier
 * rather than a second component. Image beside the text from tablet up, image
 * above it below that. Kept deliberately compact so the next section is visible
 * without scrolling far.
 */
.rw-card--featured {
	gap: var(--rw-space-md);
}

/*
 * Uses the h1 step, not h2. At 390px the h2 token resolves to the same 23.5px
 * the section headings use, so lead, section heading and card headline all read
 * as one level. The h1 step restores three distinct sizes (about 31 / 23.5 /
 * 19.2px) using the existing scale rather than an invented value.
 */
.rw-card--featured .rw-card__title {
	font-size: var(--rw-size-h1);
	letter-spacing: var(--rw-tracking-tight);
}

@media (min-width: 48em) {
	.rw-card--featured {
		display: grid;
		grid-template-columns: 1.25fr 1fr;
		align-items: center;
		gap: var(--rw-space-xl);
	}

	.rw-card--featured .rw-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--rw-space-sm);
	}

	.rw-card--featured .rw-card__title {
		font-size: var(--rw-size-h1);
	}

	.rw-card--featured .rw-card__excerpt {
		font-size: 1.0625rem;
		line-height: 1.65;
	}
}
/* ==========================================================================
   5. Mobile listing
   ========================================================================== */

/*
 * Mobile is not the desktop grid stacked. The lead article keeps its full width
 * image, and everything below it becomes a compact scannable list with the
 * thumbnail beside the headline, which is how a reader actually moves down a
 * phone screen.
 */
@media (max-width: 39.99em) {
	.rw-listing__items {
		gap: 0;
	}

	.rw-card {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--rw-space-sm);
		padding-block: var(--rw-space-md);
		border-bottom: 1px solid var(--rw-line);
	}

	.rw-card__media {
		flex: 0 0 38%;
	}

	.rw-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--rw-space-3xs);
		min-width: 0;
	}

	.rw-card__excerpt {
		display: none;
	}

	/*
	 * The lead article is exempt from the compact row treatment. Without this
	 * it inherits the 38% thumbnail and hidden excerpt above and becomes
	 * indistinguishable from the eighteen cards under it, which erases the
	 * editorial hierarchy on the screen size that needs it most.
	 */
	.rw-card--featured {
		flex-direction: column;
		gap: var(--rw-space-xs);
		padding-block: 0;
		border-bottom: 0;
	}

	.rw-card--featured .rw-card__media {
		flex: none;
		width: 100%;
	}

	.rw-card--featured .rw-card__excerpt {
		display: block;
	}

	body:not(.home) .rw-listing__items > .rw-card:first-child {
		flex-direction: column;
		gap: var(--rw-space-xs);
		padding-top: var(--rw-space-lg);
	}

	body:not(.home) .rw-listing__items > .rw-card:first-child .rw-card__media {
		flex: none;
		width: 100%;
	}

	body:not(.home) .rw-listing__items > .rw-card:first-child .rw-card__title {
		font-size: var(--rw-size-h2);
	}

	body:not(.home) .rw-listing__items > .rw-card:first-child .rw-card__excerpt {
		display: block;
	}
}

/* ==========================================================================
   6. Author box
   ========================================================================== */

/*
 * On an author archive this has to read as a different kind of object from the
 * articles beneath it, hence the tinted ground and the accent edge.
 */
.rw-author-box {
	display: flex;
	align-items: flex-start;
	gap: var(--rw-space-md);
	padding: var(--rw-space-lg);
	margin-bottom: var(--rw-space-2xl);
	background-color: var(--rw-surface);
	border-left: 3px solid var(--rw-accent);
	border-radius: var(--rw-radius);
}

/* Avatars are the one stated exception to the single radius. */
.rw-author-box__avatar {
	flex: none;
	border-radius: 50%;
}

.rw-author-box__name {
	font-family: var(--rw-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--rw-ink);
	margin: 0 0 var(--rw-space-3xs);
}

.rw-author-box__bio {
	margin: 0;
	max-width: 60ch;
	color: var(--rw-muted);
	font-size: 1rem;
	line-height: 1.65;
}

@media (max-width: 39.99em) {
	.rw-author-box {
		flex-direction: column;
		gap: var(--rw-space-sm);
		padding: var(--rw-space-md);
	}
}

/* ==========================================================================
   7. Pagination
   ========================================================================== */

.rw-pagination {
	margin-top: var(--rw-space-2xl);
	padding-top: var(--rw-space-lg);
	border-top: 1px solid var(--rw-line);
}

.rw-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rw-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rw-pagination__item .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.75rem;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-small);
	font-weight: 600;
	color: var(--rw-ink);
	text-decoration: none;
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius);
}

.rw-pagination__item .page-numbers:hover {
	border-color: var(--rw-accent);
	color: var(--rw-accent);
}

.rw-pagination__item .page-numbers.current {
	background-color: var(--rw-accent);
	border-color: var(--rw-accent);
	color: #FFFFFF;
}

.rw-pagination__item .page-numbers.dots {
	border-color: transparent;
	color: var(--rw-muted);
}

/* ==========================================================================
   8. Empty state and 404
   ========================================================================== */

.rw-no-results {
	padding-block: var(--rw-space-lg) var(--rw-space-2xl);
	max-width: var(--rw-measure);
}

.rw-no-results__title {
	font-size: var(--rw-size-h2);
	margin: 0 0 var(--rw-space-2xs);
}

.rw-no-results__text {
	color: var(--rw-muted);
	margin: 0 0 var(--rw-space-md);
}

.rw-404 {
	padding-block: var(--rw-space-2xl) var(--rw-space-3xl);
}

.rw-404__header {
	max-width: var(--rw-measure);
}

.rw-404__title {
	font-size: var(--rw-size-display);
	margin: 0 0 var(--rw-space-sm);
}

.rw-404__text {
	color: var(--rw-muted);
	margin: 0 0 var(--rw-space-lg);
}

.rw-404 form {
	max-width: 32rem;
}

.rw-404__subtitle {
	font-size: var(--rw-size-h3);
	margin: var(--rw-space-2xl) 0 var(--rw-space-sm);
	padding-bottom: var(--rw-space-2xs);
	border-bottom: 2px solid var(--rw-accent);
	display: inline-block;
}

.rw-404__topic-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 40em) {
	.rw-404__topic-list {
		columns: 2;
		column-gap: var(--rw-space-xl);
	}
}

.rw-404__topic-list li {
	break-inside: avoid;
	padding-block: var(--rw-space-xs);
	border-bottom: 1px solid var(--rw-line);
}

.rw-404__topic-list a {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-small);
	font-weight: 600;
	color: var(--rw-ink);
	text-decoration: none;
}

.rw-404__topic-list a:hover {
	color: var(--rw-accent);
}
/* ==========================================================================
   9. Homepage
   ========================================================================== */

/*
 * No bottom padding. The last homepage section is meant to meet the footer
 * directly; the 96px that used to sit here read as a dead gap. The footer
 * carries its own 64px of internal padding, so the join still breathes.
 * Archives keep their spacing: .rw-listing is untouched.
 */
.rw-home {
	padding-bottom: 0;
}

.rw-home__lead {
	padding-block: var(--rw-space-xl) var(--rw-space-2xl);
	border-bottom: 1px solid var(--rw-line);
}

.rw-home__section {
	padding-top: var(--rw-space-2xl);
}

.rw-section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rw-space-md);
	margin-bottom: var(--rw-space-lg);
	padding-bottom: var(--rw-space-2xs);
	border-bottom: 1px solid var(--rw-line);
}

.rw-section-heading__title {
	font-size: var(--rw-size-h2);
	margin: 0;
}

.rw-section-heading__link {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--rw-tracking-label);
	color: var(--rw-accent);
	text-decoration: none;
	white-space: nowrap;
}

.rw-section-heading__link:hover {
	text-decoration: underline;
}

/* Topic index. A plain two or three column list of real categories, not a row
   of decorative cards. */
.rw-topics__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.rw-topics__list {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--rw-space-xl);
	}
}

@media (min-width: 62.5em) {
	.rw-topics__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rw-topics__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rw-space-sm);
	padding-block: var(--rw-space-sm);
	border-bottom: 1px solid var(--rw-line);
	text-decoration: none;
	min-height: 44px;
}

.rw-topics__name {
	font-family: var(--rw-font-heading);
	font-weight: 600;
	color: var(--rw-ink);
}

.rw-topics__link:hover .rw-topics__name {
	color: var(--rw-accent);
}

.rw-topics__count {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	color: var(--rw-muted);
	white-space: nowrap;
}
/* ==========================================================================
   10. Archive lead and authors
   ========================================================================== */

/* The newest article leads a category archive, separated from the grid below
   by the same hairline the homepage uses. */
.rw-listing__lead {
	padding-bottom: var(--rw-space-2xl);
	margin-bottom: var(--rw-space-xl);
	border-bottom: 1px solid var(--rw-line);
}

.rw-authors__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rw-space-md);
}

@media (min-width: 40em) {
	.rw-authors__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62.5em) {
	.rw-authors__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rw-author-box--grid {
	margin-bottom: 0;
	padding: var(--rw-space-md);
}

.rw-author-box__count {
	margin: 0;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	color: var(--rw-muted);
}

.rw-author-box__bio {
	margin-top: var(--rw-space-2xs);
}

.rw-author-box__name a {
	color: var(--rw-ink);
	text-decoration: none;
}

.rw-author-box__name a:hover {
	color: var(--rw-accent);
}
/* Sits where the homepage pagination used to be. Reuses the section-heading
   link style rather than introducing a second link treatment. */
.rw-home__viewall {
	margin: var(--rw-space-lg) 0 0;
	padding-top: var(--rw-space-md);
	border-top: 1px solid var(--rw-line);
	text-align: center;
}
/* ==========================================================================
   11. Editorial promise
   ========================================================================== */

/*
 * Composed and symmetric, which is what the low variance dial asks for. The
 * icon tile is the accent used as a ground; everything else stays on the
 * existing tokens, so no new colour, radius or shadow enters the system.
 */

/*
 * The one full width band on the page. The section lives inside the 1200px
 * container like everything else, so it is pulled back out to the viewport
 * edges and then padded by the same amount, which puts the tint edge to edge
 * while leaving the text on the container's own left and right edges.
 *
 * 50vw counts the scrollbar and the container percentage does not, so the tint
 * overhangs by half a scrollbar on each side. That is deliberate: it guarantees
 * no hairline gap at the edges, and Blocksy already clips it (#content carries
 * overflow-x: clip), so it can never produce a horizontal scrollbar.
 *
 * padding-block replaces the 64px padding-top that .rw-home__section sets, so
 * the band is evenly inset top and bottom rather than sitting flush at the base.
 */
.rw-promise {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: var(--rw-space-2xl);
	background-color: var(--rw-surface);
}

/*
 * 52rem, not the 46rem a reading measure would ask for. The heading needs 754px
 * to sit on one line at the top of the h1 step and the old cap gave it 736, so
 * it broke after the comma by 18px. The lede keeps the narrower measure below,
 * because that one is running text and does want the shorter line.
 */
.rw-promise__intro {
	max-width: 52rem;
	margin-inline: auto;
	margin-bottom: var(--rw-space-xl);
	text-align: center;
}

.rw-promise__eyebrow {
	display: inline-block;
	margin: 0 0 var(--rw-space-sm);
	padding: 0.375rem 0.75rem;
	background-color: var(--rw-accent-soft);
	border-radius: var(--rw-radius);
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--rw-tracking-label);
	color: var(--rw-accent);
}

/*
 * One line from roughly 650px up, which covers every width where it fits. A
 * phone cannot hold 38 characters at this size on one line, so it still wraps
 * there; balance splits those two lines evenly instead of leaving one word
 * stranded underneath.
 */
.rw-promise__title {
	margin: 0;
	font-size: var(--rw-size-h1);
	text-wrap: balance;
}

.rw-promise__lede {
	max-width: 46rem;
	margin: var(--rw-space-sm) auto 0;
	color: var(--rw-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.rw-promise__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rw-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 40em) {
	.rw-promise__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62.5em) {
	.rw-promise__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--rw-space-lg);
	}
}

/*
 * White on the tinted band, the reverse of the arrangement these cards had on
 * the white page. Same two tokens either way; the card has to be the lighter of
 * the pair or it dissolves into the ground behind it.
 */
.rw-promise__item {
	padding: var(--rw-space-md);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius);
	text-align: center;
}

.rw-promise__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--rw-space-sm);
	background-color: var(--rw-accent);
	border-radius: var(--rw-radius);
	color: #FFFFFF;
}

.rw-promise__name {
	margin: 0 0 var(--rw-space-2xs);
	font-size: 1.0625rem;
}

.rw-promise__text {
	margin: 0;
	color: var(--rw-muted);
	font-size: 1rem;
	line-height: 1.6;
}
/* ==========================================================================
   12. Topic panel (homepage)
   ========================================================================== */

/*
 * The 404 template reuses .rw-topics and .rw-topics__list for a plain column
 * list, so every rule here hangs off .rw-topics__panel or the pill class and
 * leaves that layout alone. The panel element exists only on the homepage,
 * which is why the full width band is attached to it rather than to the
 * section: it scopes itself, with no :has() and no extra class.
 *
 * Same breakout as the editorial promise band. The border and radius that used
 * to draw this as a contained box are gone; a band that reaches both edges has
 * no corners left to round, and the tint alone does the separating now.
 */
.rw-topics__panel {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: var(--rw-space-2xl);
	background-color: var(--rw-surface);
}

.rw-topics__intro {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: var(--rw-space-lg);
	text-align: center;
}

.rw-topics__title {
	margin: 0;
	font-size: var(--rw-size-h2);
}

.rw-topics__lede {
	margin: var(--rw-space-2xs) 0 0;
	color: var(--rw-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.rw-topics__panel .rw-topics__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rw-space-2xs);
}

.rw-topics__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--rw-space-2xs);
	min-height: 44px;
	padding-inline: var(--rw-space-md);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius);
	text-decoration: none;
}

.rw-topics__pill:hover {
	border-color: var(--rw-accent);
}

.rw-topics__pill:hover .rw-topics__name {
	color: var(--rw-accent);
}

.rw-topics__pill .rw-topics__count {
	font-variant-numeric: tabular-nums;
}