/* ==========================================================================
   Charlton Live - News, archives, search and single posts
   The 1,241 existing posts. Shares the hero, chips and empty state with the
   Podcasts page rather than restating them.
   ========================================================================== */

.cl-archive {
	background: var(--cl-white);
	padding-block: 40px 52px;
}

.cl-archive__inner {
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

/* Search form sits in the ink hero, so it is styled for a dark ground. */
.cl-hero__search {
	margin-top: 20px;
	max-width: 420px;
}
.cl-hero__search label { display: block; }
.cl-hero__search .screen-reader-text { position: absolute; }
.cl-hero__search input[type="search"] {
	width: 100%;
	padding: 11px 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--cl-radius-sm);
	color: var(--cl-white);
	font-family: var(--cl-font-body);
	font-size: var(--cl-text);
}
.cl-hero__search input[type="search"]::placeholder { color: var(--cl-dark-meta); }
.cl-hero__search input[type="submit"] { display: none; }

/* ==========================================================================
   Post cards
   ========================================================================== */

.cl-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-post__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--cl-off);
	border: var(--cl-border);
	border-radius: var(--cl-radius);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
}
.cl-post__link:hover {
	color: inherit;
	border-color: var(--cl-red);
}

.cl-post__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--cl-ink);
	overflow: hidden;
}
.cl-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Posts without a featured image get the mark rather than an empty box. */
.cl-post__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cl-font-display);
	font-size: 46px;
	letter-spacing: var(--cl-track-display);
	color: rgba(255, 255, 255, .12);
}

.cl-post__tag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 5px 9px;
	border-radius: var(--cl-radius-sm);
	background: var(--cl-red);
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-tag);
	letter-spacing: var(--cl-track-tag);
	text-transform: uppercase;
	color: var(--cl-white);
}

.cl-post__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

.cl-post__title {
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: var(--cl-card-title);
	line-height: 1.28;
	color: var(--cl-ink);
	/* Titles here run very long; three lines keeps the grid even. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cl-post__date {
	font-family: var(--cl-font-cond);
	font-weight: 600;
	font-size: var(--cl-tag);
	letter-spacing: var(--cl-track-tag);
	text-transform: uppercase;
	color: var(--cl-mut);
}

.cl-post__excerpt {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cl-mut);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.cl-pagination {
	margin-top: 34px;
}

/* Two shapes reach this: the_posts_pagination() wraps its links in .nav-links,
   while the News page calls paginate_links() directly and the links are
   children of the nav itself. Both are laid out here. */
.cl-pagination,
.cl-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.cl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 8px 12px;
	border: var(--cl-border);
	border-radius: var(--cl-radius-sm);
	font-family: var(--cl-font-body);
	font-weight: 600;
	font-size: var(--cl-meta);
	color: var(--cl-ink);
	text-decoration: none;
}
.cl-pagination a.page-numbers:hover {
	border-color: var(--cl-red);
	color: var(--cl-ink);
}
.cl-pagination .page-numbers.current {
	background: var(--cl-red);
	border-color: var(--cl-red);
	color: var(--cl-white);
}
.cl-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding-inline: 4px;
}
.cl-pagination .screen-reader-text { position: absolute; left: -9999px; }

/* ==========================================================================
   Single post
   ========================================================================== */

.cl-article__hero .cl-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.cl-article__hero .cl-eyebrow a:hover { text-decoration: underline; }

.cl-article__title {
	max-width: 20ch;
	margin-top: 8px;
	font-size: var(--cl-h1-sub);
	line-height: 1;
	color: var(--cl-white);
}

.cl-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	font-family: var(--cl-font-cond);
	font-weight: 600;
	font-size: var(--cl-eyebrow);
	letter-spacing: var(--cl-track-eyebrow);
	text-transform: uppercase;
	color: var(--cl-dark-meta);
}

.cl-article__body {
	background: var(--cl-white);
	padding-block: 40px 56px;
}

.cl-article__inner {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-article__figure {
	margin: 0 0 var(--cl-space-lg);
	border-radius: var(--cl-radius);
	overflow: hidden;
}
.cl-article__figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Prose ---------- */
.cl-prose {
	font-size: var(--cl-text-lg);
	line-height: var(--cl-lh-body);
	color: var(--cl-body);
}

.cl-prose > * + * { margin-top: var(--cl-space-md); }

/* Opening paragraph of a page, set slightly larger so it reads as a standfirst
   rather than as the first line of the body. */
.cl-prose .cl-lede {
	font-size: 19px;
	line-height: 1.55;
	color: var(--cl-ink);
}

.cl-prose h2,
.cl-prose h3 {
	margin-top: var(--cl-space-xl);
	color: var(--cl-ink);
}
.cl-prose h2 { font-size: var(--cl-h3); }
.cl-prose h3 { font-size: 20px; }

.cl-prose a { color: var(--cl-red-text); }

.cl-prose img,
.cl-prose iframe {
	max-width: 100%;
	height: auto;
	border-radius: var(--cl-radius);
}

.cl-prose figure { margin-inline: 0; }
.cl-prose figcaption {
	margin-top: 8px;
	font-size: var(--cl-meta);
	color: var(--cl-mut);
}

/* Embedded players keep their ratio and never overflow the column. */
.cl-prose .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}
.cl-prose .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.cl-prose ul,
.cl-prose ol { padding-left: 1.25em; }
.cl-prose li + li { margin-top: 6px; }

.cl-prose blockquote {
	padding-left: 18px;
	border-left: 3px solid var(--cl-red);
	color: var(--cl-ink);
	font-style: italic;
}

/* ---------- Tags ---------- */
.cl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--cl-space-xl) 0 0;
	padding: 0;
	list-style: none;
}
.cl-tags a {
	display: inline-flex;
	padding: 6px 12px;
	border: var(--cl-border);
	border-radius: var(--cl-radius-pill);
	font-size: var(--cl-meta);
	color: var(--cl-mut);
	text-decoration: none;
}
.cl-tags a:hover { border-color: var(--cl-red); color: var(--cl-ink); }

/* ---------- Previous and next ---------- */
.cl-post-nav {
	margin-top: var(--cl-space-xl);
	padding-top: var(--cl-space-lg);
	border-top: var(--cl-border);
}

.cl-post-nav .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.cl-post-nav a {
	display: block;
	padding: 16px 18px;
	background: var(--cl-off);
	border: var(--cl-border);
	border-radius: var(--cl-radius);
	text-decoration: none;
}
.cl-post-nav a:hover { border-color: var(--cl-red); }

.cl-post-nav .nav-next { text-align: right; }

.cl-post-nav__label {
	display: block;
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-tag);
	letter-spacing: var(--cl-track-tag);
	text-transform: uppercase;
	color: var(--cl-red-text);
}

.cl-post-nav__title {
	margin-top: 5px;
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
	color: var(--cl-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
	.cl-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-article__title { max-width: none; }
}

@media (max-width: 720px) {
	.cl-posts { grid-template-columns: 1fr; }
	.cl-post-nav .nav-links { grid-template-columns: 1fr; }
	.cl-post-nav .nav-next { text-align: left; }
}