/* ==========================================================================
   Charlton Live - Front page (build-spec §4)
   ========================================================================== */

/* ==========================================================================
   Lead: newest episode
   ========================================================================== */

.cl-lead {
	position: relative;
	overflow: hidden;
	padding-block: 52px 58px;
	background: var(--cl-ink);
	color: var(--cl-dark-body);
}

/* Decorative watermark. The design used a giant "CL" bleeding off the top
   right corner; this is the full wordmark spanning the section instead.
   Sized in vw so it scales with the viewport rather than being pinned to
   one width, and centred vertically behind the content. At 3% white it
   reads as texture, and .cl-lead__inner paints after it so the headline
   stays on top. */
.cl-lead::before {
	content: "CHARLTON LIVE";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	font-family: var(--cl-font-display);
	font-size: 17vw;
	line-height: 1;
	letter-spacing: var(--cl-track-display);
	text-align: center;
	white-space: nowrap;
	color: rgba(255, 255, 255, .03);
	pointer-events: none;
}
@media (max-width: 980px) {
	.cl-lead::before { display: none; }
}

.cl-lead__inner {
	position: relative;
	display: grid;
	/* Design is 1.08 : 0.92, near enough to equal columns. */
	grid-template-columns: 1.08fr 0.92fr;
	align-items: center;
	gap: 44px;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-lead__title {
	margin-top: 16px;
	font-size: var(--cl-h1);
	line-height: .97;
	color: var(--cl-white);
	/* Safety net: episode titles vary wildly in length. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cl-lead__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.cl-btn--outline-light {
	padding: 13px 20px;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .28);
	color: var(--cl-white);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: var(--cl-track-btn);
	text-transform: uppercase;
}
.cl-btn--outline-light:hover {
	color: var(--cl-white);
	border-color: var(--cl-white);
}

.cl-lead__duration {
	font-family: var(--cl-font-body);
	font-weight: 600;
	font-size: var(--cl-meta);
	color: var(--cl-dark-meta);
}

/* ---------- Artwork with play overlay ---------- */
.cl-lead__art {
	position: relative;
	display: block;
	/* Acast artwork is square. The design's 5:4 box cropped the top and
	   bottom off, cutting the club badges in half. */
	aspect-ratio: 1 / 1;
	/* Square artwork filled the whole column and dwarfed the headline.
	   Reduced by a quarter twice: 100% -> 75% -> 56%. */
	max-width: 56%;
	margin-inline-start: auto;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(150deg, #2a231e, #453b34);
}

.cl-lead__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cl-lead__art .cl-play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	box-shadow: 0 12px 40px rgba(228, 18, 43, .5);
}
.cl-play--lg { width: 76px; height: 76px; }

/* ==========================================================================
   Pinned posts
   The one hand-placed slot on an otherwise automatic page. Hidden entirely
   unless a post is stuck to the front page.
   ========================================================================== */

.cl-pinned {
	background: var(--cl-off);
	padding-block: var(--cl-space-lg);
	border-bottom: var(--cl-border);
}

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

.cl-pinned__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-pin {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 14px 16px;
	background: var(--cl-white);
	border: var(--cl-border);
	border-radius: var(--cl-radius);
	color: inherit;
	text-decoration: none;
}
.cl-pin:hover {
	color: inherit;
	border-color: var(--cl-red);
}

.cl-pin__media {
	flex: 0 0 108px;
	width: 108px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: linear-gradient(150deg, #2a231e, #453b34);
}
.cl-pin__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cl-pin__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cl-pin__title {
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: var(--cl-card-title);
	line-height: 1.25;
	color: var(--cl-ink);
}
.cl-pin:hover .cl-pin__title { color: var(--cl-red-text); }

.cl-pin__date {
	font-family: var(--cl-font-body);
	font-weight: 500;
	font-size: 12px;
	color: var(--cl-mut);
}

/* ==========================================================================
   Latest episodes
   ========================================================================== */

.cl-latest {
	background: var(--cl-white);
	padding-block: var(--cl-section-y);
}

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

.cl-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 6px;
	border-bottom: var(--cl-border);
	color: inherit;
	text-decoration: none;
}
.cl-rows li:last-child .cl-row { border-bottom: 0; }
.cl-row:hover { color: inherit; background: var(--cl-off); }

.cl-row__art {
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	border-radius: 8px;
	object-fit: cover;
}

.cl-row__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.cl-row__title {
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: var(--cl-card-title);
	line-height: 1.25;
	color: var(--cl-ink);
}
.cl-row:hover .cl-row__title { color: var(--cl-red-text); }

.cl-row__show {
	font-family: var(--cl-font-cond);
	font-weight: 600;
	font-size: var(--cl-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cl-red-text);
}

.cl-row__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex: 0 0 auto;
	text-align: right;
}

.cl-row__duration {
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: var(--cl-meta);
	color: var(--cl-ink);
}

.cl-row__date {
	font-family: var(--cl-font-body);
	font-weight: 500;
	font-size: 12px;
	color: var(--cl-mut);
}

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

@media (max-width: 980px) {
	.cl-lead__inner {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	/* Headline first, artwork below and centred. */
	.cl-lead__body { order: 1; }
	.cl-lead__art {
		order: 2;
		max-width: 270px;
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	.cl-row { align-items: flex-start; }

	.cl-row__meta {
		align-items: flex-start;
		flex-direction: row;
		gap: 8px;
	}
}