/*
 * Riley Writing
 *
 * Containment is NOT declared here. The card carries the theme's own
 * `pp-card` class, which already supplies the hairline, the 3px radius, the
 * paper ground and the padding, and which the homepage Writing section
 * already uses. Restating those values here would create exactly the third
 * card system that made this page read as thrown together -- and it would
 * drift the moment either copy changed.
 *
 * So this file styles only what is specific to these cards: the type scale
 * inside them, and the post list.
 *
 * Treatment values settled by Raphiel. Hierarchy and containment settled by
 * Skyler. Neither is provisional any more.
 */

/* ------------------------------------------------------------- the scale */

/*
 * Four steps. Sizes are Raphiel's, order is Skyler's.
 *
 *   site name    22px   serif, largest in the card
 *   post title   17px   the thing you actually click
 *   blurb        15px   muted, matches the theme's card paragraph
 *   date         11px   muted, its own line
 *
 * 34px was a page title in a box, and was part of what made this hard on the
 * eye. Colour is never declared as a raw value -- inherit or a palette token
 * only, so a card cannot become unreadable if it is ever moved to a darker
 * ground.
 */

.rw-card__title {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 22px;
	line-height: 1.25;
	margin: 0 0 .5rem;
}

.rw-card__link {
	text-decoration: none;
	color: inherit;
}

.rw-card__link:hover,
.rw-card__link:focus {
	text-decoration: underline;
}

.rw-card__blurb {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1.25rem;
	max-width: 46ch;
}

/* The kicker naming the list. Brass, as the comp's card kicker is. */
.rw-card__label {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--brass);
	margin: 0 0 .75rem;
}

/* -------------------------------------------------------------- the list */

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

/*
 * Spacing separates the posts, not rules. Skyler's call: the card is the
 * containment, so the internal rules have nothing left to do.
 */
.rw-post {
	margin: 0 0 .85rem;
}

.rw-post:last-child {
	margin-bottom: 0;
}

.rw-post__link {
	display: block;
	font-size: 17px;
	line-height: 1.35;
	text-decoration: none;
	color: inherit;
}

.rw-post__link:hover,
.rw-post__link:focus {
	text-decoration: underline;
}

/*
 * Its own line, beneath the title. As a flex sibling it was pushed around by
 * long titles -- and these titles run to sixty characters.
 */
.rw-post__date {
	display: block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: .2rem;
}

/* ------------------------------------------------------- equal heights */

/*
 * If one card grows the other matches. Different heights imply one matters
 * more than the other, and they do not. pp-card already sets height:100%;
 * this makes the column a flex context so that has something to fill.
 */
.wp-block-column:has(> .rw-card),
.wp-block-column:has(> p > .rw-card) {
	display: flex;
}

.wp-block-column > .rw-card {
	flex: 1 1 auto;
}

/*
 * pp-card (theme) sets height:100% with padding. Under content-box sizing that makes
 * the card its column's height PLUS the padding, so it overflows the column by
 * 52px: empty space under the last post, and on phones the first card's bottom
 * edge sits on top of the second. Border-box keeps the padding inside (1.3.1).
 */
.rw-card {
	box-sizing: border-box;
}