/* ==========================================================================
   Charlton Live - Watch (build-spec §4.4)
   Light sections, so the page separates from the ink header rather than
   running into it.
   ========================================================================== */

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

/* Alternating fill so the two grids read as separate bands. */
.cl-watch--alt { background: var(--cl-off); }

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

/* ---------- Section header with the 2px rule ---------- */
.cl-watch__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	margin-bottom: 22px;
	border-bottom: var(--cl-rule);
}

.cl-watch__title {
	font-size: var(--cl-h2);
	color: var(--cl-ink);
}

.cl-watch__sub {
	margin-top: 6px;
	font-family: var(--cl-font-cond);
	font-weight: 600;
	font-size: var(--cl-eyebrow);
	letter-spacing: var(--cl-track-tag);
	text-transform: uppercase;
	color: var(--cl-mut);
}

.cl-watch__all {
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: var(--cl-meta);
	color: var(--cl-red-text);
	text-decoration: none;
	white-space: nowrap;
}
.cl-watch__all:hover { text-decoration: underline; }

/* ---------- Grid ---------- */
.cl-videos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-video__link {
	display: flex;
	flex-direction: column;
	gap: 11px;
	color: inherit;
	text-decoration: none;
}

/* ---------- Thumbnail ---------- */
.cl-video__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	/* Design's fallback, visible before the thumbnail loads or if it fails. */
	background: linear-gradient(150deg, #2a231e, #453b34);
}

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

.cl-video__tag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--cl-red);
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: var(--cl-track-tag);
	text-transform: uppercase;
	color: var(--cl-white);
}

.cl-video__duration {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 3px 7px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .7);
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: 11px;
	color: var(--cl-white);
}

/* Play circle, centred over the thumbnail. */
.cl-video__media .cl-play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	background: rgba(228, 18, 43, .92);
}
.cl-play--md { width: 44px; height: 44px; }

.cl-video__link:hover .cl-play { background: var(--cl-red); }

/* ---------- Card text ---------- */
.cl-video__title {
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: var(--cl-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cl-video__link:hover .cl-video__title { color: var(--cl-red-text); }

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

/* ---------- Shorts ----------
   Portrait cards, and more of them per row, so the group reads as Shorts at
   a glance rather than as another row of episodes.

   The thumbnail may come back either landscape or portrait depending on which
   size YouTube has for a given Short, so the frame sets the shape and
   object-fit: cover handles whichever arrives. */
.cl-videos--shorts {
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.cl-videos--shorts .cl-video__media { aspect-ratio: 9 / 16; }

.cl-videos--shorts .cl-video__title {
	font-size: 13px;
	-webkit-line-clamp: 2;
}

.cl-videos--shorts .cl-play { width: 34px; height: 34px; }

/* ---------- Responsive: 4 to 2 to 1 (build-spec §7) ---------- */
@media (max-width: 980px) {
	.cl-videos { grid-template-columns: repeat(2, 1fr); }
	.cl-videos--shorts { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
	.cl-videos { grid-template-columns: 1fr; }
	/* Two even on the narrowest screens: portrait cards are half the width. */
	.cl-videos--shorts { grid-template-columns: repeat(2, 1fr); }
}