/*
 * Category labels (Phase 4 typography update): Montserrat, all capitals.
 *
 * The client asked for the blue category label to use Montserrat, in capitals, in exactly
 * three places:
 *   1. the Top Stories section (home page),
 *   2. the top of every article,
 *   3. the Related Articles section at the bottom of every article.
 *
 * Size is 14px in all three places (client feedback, 11/11). Colour is left as the theme sets it.
 * Change the font, weight, size or spacing here, in one place:
 */
:root {
	--rr-category-font: "Montserrat", "Lato", sans-serif;
	--rr-category-weight: 600;
	--rr-category-size: 14px;
	--rr-category-tracking: 0.06em;
	--rr-card-small-text: 15px; /* the "5 min read" line and the summary under it, on story cards */
}

/* 1. Top Stories (the label is a link inside .categories; some cards print a plain link without the class). */
.rr-top-stories .categories a,
.rr-top-stories .categories .category,

/* 2. Top of an article. */
.single-post section.intro a.category,
.posts__page section.intro a.category,

/* 3. Related articles at the bottom of an article. */
.single-post .related-post__meta .category,
.single-post .related-post__meta .category a,
.posts__page .related-post__meta .category,
.posts__page .related-post__meta .category a {
	font-family: var(--rr-category-font);
	font-size: var(--rr-category-size);
	font-weight: var(--rr-category-weight);
	letter-spacing: var(--rr-category-tracking);
	text-transform: uppercase;
}

/*
 * Story cards (Top Stories): the summary under the title is the same size as the
 * "min read" text, so it stays inside the card, and the card text sits in a column so
 * the last line lines up at the bottom of the picture.
 */
.rr-top-stories .rr-post-loops .post p.excerpt {
	font-size: var(--rr-card-small-text);
	line-height: 1.6;
}

.rr-top-stories .rr-post-loops .post p.excerpt {
	margin-bottom: 0;
}

/*
 * Related Articles cards (bottom of an article): the blue label is 10px, so it fits beside
 * the "min read" text on one line instead of being cut off.
 */
.single-post .related-post__meta .category,
.single-post .related-post__meta .category a,
.posts__page .related-post__meta .category,
.posts__page .related-post__meta .category a {
	font-size: 10px;
}

/*
 * Top Stories: the blue label and the "min read" text are both 14px and sit on one line,
 * centred on each other, with an even gap. They only drop to a second line when the card
 * is too narrow for both (the label then stays above the read time, left aligned).
 */
.rr-top-stories .rr-post-loops .categories {
	display: flex !important; /* the theme switches this row to a plain block on tablets and phones */
	flex-wrap: nowrap; /* always one line, so every card's summary starts at the same height */
	align-items: center;
	gap: 8px;
	margin: 8px 0 16px;
	min-width: 0;
}

.rr-top-stories .rr-post-loops .categories a,
.rr-top-stories .rr-post-loops .categories .category {
	min-width: 0;
	overflow: hidden;
	font-size: 14px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-overflow: ellipsis; /* only if a very long name still cannot fit beside the read time */
}

.rr-top-stories .rr-post-loops .post .categories p.readtime {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

.rr-top-stories .rr-post-loops .post .categories p.readtime .clock-icon {
	position: static;
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0;
	vertical-align: middle;
}