/* ==========================================================================
   Hero: headline, TV + app mockup, "Pick of the day" cutting, facts row.
   ========================================================================== */

.hero {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.hero__grid {
	display: grid;
	gap: clamp(3rem, 2rem + 3vw, 4.5rem);
	align-items: center;
}

@media (min-width: 1024px) {
	.hero__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	}
}

.hero__title {
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.hero__title em {
	display: block;
}

.hero__lead {
	margin-top: 1.75rem;
	max-width: 34rem;
	font-size: var(--text-lg);
	color: var(--ink-2);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: 2.25rem;
}

.hero__small {
	margin-top: 2rem;
	padding-top: 1rem;
	max-width: 34rem;
	border-top: 1px solid var(--hair);
	font-size: var(--text-sm);
	color: var(--ink-3);
}

.hero__small strong {
	color: var(--ink);
}

.hero__visual {
	position: relative;
	min-width: 0;
	padding-bottom: 2rem;
}

/* The telly --------------------------------------------------------------- */

.tv__bezel {
	padding: clamp(6px, 1vw, 11px);
	background: linear-gradient(170deg, #2b3440, #12171d 55%);
	border-radius: 12px;
	box-shadow:
		0 40px 70px -40px rgba(16, 24, 40, 0.55),
		0 2px 0 rgba(255, 255, 255, 0.05) inset;
}

.tv__screen {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 3px;
	background: var(--screen);
	container-type: inline-size;
}

.tv__stand {
	width: 30%;
	height: 12px;
	margin: 0 auto;
	background: linear-gradient(#2b3440, #161b22);
	clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.app {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 38% 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"bar bar"
		"now epg"
		"posters posters";
	gap: 1.8cqi;
	padding: 2cqi;
	font-family: var(--sans);
	font-size: 2cqi;
	line-height: 1.25;
	color: var(--screen-text);
}

.app__bar {
	grid-area: bar;
	display: flex;
	align-items: baseline;
	gap: 3cqi;
}

.app__logo {
	font-family: var(--display);
	font-weight: 600;
	font-size: 2.72cqi;
	line-height: 1;
}

.app__tabs {
	display: flex;
	gap: 2.4cqi;
	color: var(--screen-muted);
}

.app__tabs .is-on {
	color: var(--screen-text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 0.4cqi;
	text-underline-offset: 1cqi;
}

.app__clock {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	color: var(--screen-muted);
}

.app__now {
	grid-area: now;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 1.4cqi;
	min-height: 0;
}

.app__art {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.6cqi;
}

.app__art .pitch {
	width: 100%;
	height: 100%;
}

.app__live {
	position: absolute;
	top: 1.2cqi;
	left: 1.2cqi;
	padding: 0.3cqi 1cqi;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 1.7cqi;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 0.4cqi;
}

.app__meta {
	display: grid;
	align-content: start;
	gap: 0.7cqi;
}

.app__ch {
	color: var(--screen-muted);
	font-size: 1.8cqi;
}

.app__show {
	font-family: var(--display);
	font-weight: 600;
	font-size: 2.88cqi;
	line-height: 1;
}

.app__progress {
	height: 0.6cqi;
	background: var(--screen-3);
	border-radius: 1cqi;
	overflow: hidden;
}

.app__progress span {
	display: block;
	width: 62%;
	height: 100%;
	background: var(--accent);
}

.app__next {
	color: var(--screen-muted);
	font-size: 1.7cqi;
}

/* Programme guide. */
.app__epg {
	grid-area: epg;
	position: relative;
	display: grid;
	grid-auto-rows: 1fr;
	gap: 0.6cqi;
	min-height: 0;
	--ch-col: 31%;
}

.epg__times,
.epg__row {
	display: grid;
	grid-template-columns: var(--ch-col) repeat(5, minmax(0, 1fr));
	gap: 0.5cqi;
	min-height: 0;
}

.epg__times {
	align-items: end;
	font-size: 1.6cqi;
	font-variant-numeric: tabular-nums;
	color: var(--screen-muted);
}

.epg__ch {
	display: flex;
	align-items: center;
	gap: 0.9cqi;
	padding: 0 0.9cqi;
	background: var(--screen-2);
	border-radius: 0.4cqi;
	font-weight: 600;
	font-size: 1.75cqi;
	white-space: nowrap;
	overflow: hidden;
}

.epg__ch b {
	font-weight: 500;
	color: var(--screen-muted);
}

.epg__shows {
	grid-column: 2 / -1;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.5cqi;
}

.epg__show {
	grid-column: span var(--span, 1);
	display: flex;
	align-items: center;
	padding: 0 1cqi;
	background: var(--screen-2);
	border-radius: 0.4cqi;
	color: #c9d2dc;
	font-size: 1.7cqi;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.epg__show.is-on {
	background: var(--accent);
	color: #fff;
	font-weight: 600;
}

.epg__now {
	position: absolute;
	top: 2.6cqi;
	bottom: 0;
	left: calc(var(--ch-col) + (100% - var(--ch-col)) * 0.33);
	width: 0.25cqi;
	background: var(--screen-text);
	opacity: 0.85;
}

.app__posters {
	grid-area: posters;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.4cqi;
}

/* Pick of the day: a cutting laid over the TV ----------------------------- */

.pick {
	position: relative;
	width: min(270px, 78%);
	margin: -2.5rem 0 0 1rem;
	padding: 1.1rem 1.2rem 1.2rem;
	background: var(--card);
	border-top: 4px solid var(--accent);
	box-shadow: var(--shadow-paper);
	transform: rotate(-1.6deg);
}

@media (min-width: 640px) {
	.pick {
		position: absolute;
		left: -1.75rem;
		bottom: -0.5rem;
		margin: 0;
	}
}

.pick__k {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent);
}

.pick__t {
	margin-top: 0.35rem;
	font-family: var(--display);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
}

.pick__m {
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink-2);
}

.pick__d {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--hair);
	font-family: var(--display);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--ink-2);
}

/* Facts row --------------------------------------------------------------- */

.facts__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-block: 1px solid var(--rule);
}

@media (min-width: 860px) {
	.facts__row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fact {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.15rem;
	padding: 1.25rem 1rem 1.3rem 0;
}

.fact + .fact {
	padding-left: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	border-left: 1px solid var(--hair);
}

@media (max-width: 859.98px) {
	.fact:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
	.fact:nth-child(n + 3) {
		border-top: 1px solid var(--hair);
	}
}

.fact__value {
	font-family: var(--display);
	font-size: clamp(1.6rem, 1.28rem + 1.28vw, 2.32rem);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: lining-nums;
}

.fact__label {
	font-size: var(--text-sm);
	color: var(--ink-2);
}

/* Keyword line inside the home H1, and the geo landing hero ------------- */

.hero__kw {
	display: block;
	margin-bottom: 0.9rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent);
}

.hero--geo .crumbs ol {
	margin-bottom: 1.25rem;
}

.hero__title--geo {
	font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem);
}

.hero__title--geo em {
	margin-top: 0.4rem;
	font-size: 0.62em;
	font-weight: 500;
	color: var(--ink-2);
}