/*
 * /watch/: the Trailers From Hell channel on Plex. Structure and legibility
 * only; colours are tokens for the design refresh. px, not rem (the theme's
 * html is 10px).
 */
.tfh-plex {
	--tfhp-ink: #1e2a2e;
	--tfhp-muted: #6f7a80;
	--tfhp-line: #dcdcdc;
	--tfhp-surface: #fff;
	--tfhp-accent: #ba2e29;
	--tfhp-live: #e5a00d; /* Plex amber */
	--tfhp-radius: 8px;
	max-width: 1040px;
	margin: 0 auto 36px;
	color: var(--tfhp-ink);
}
.tfh-plex__heading { margin: 0 0 14px; font-family: "Oswald", helvetica, arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: 24px; }

.tfh-plex__hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; align-items: center; }
.tfh-plex__art img { display: block; width: 100%; height: auto; border-radius: var(--tfhp-radius); box-shadow: 0 14px 34px rgba(0, 0, 0, .25); }
.tfh-plex__kicker { margin: 0 0 8px; font-family: "Oswald", helvetica, arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--tfhp-accent); }
.tfh-plex__lede { margin: 0 0 18px; font-size: 19px; line-height: 1.5; }
.tfh-plex__button { display: inline-block; padding: 12px 22px; font-weight: 700; font-size: 16px; color: #1f1f1f; background: var(--tfhp-live); border-radius: 999px; text-decoration: none; }
.tfh-plex__button:hover, .tfh-plex__button:focus { color: #1f1f1f; filter: brightness(1.08); text-decoration: none; }
.tfh-plex__apps { margin-left: 14px; font-size: 14px; }

.tfh-plex__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tfhp-line); }
.tfh-plex__airing { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--tfhp-line); }
.tfh-plex__airing.is-live { background: linear-gradient(90deg, rgba(229, 160, 13, .12), transparent 70%); }
.tfh-plex__when { font-size: 15px; font-weight: 600; }
.tfh-plex__status { display: block; min-height: 1em; margin-bottom: 3px; font-family: "Oswald", helvetica, arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--tfhp-accent); }
.is-live .tfh-plex__status { color: #8a5d00; }
.tfh-plex__tz { font-weight: 400; color: var(--tfhp-muted); font-size: 12px; }
.tfh-plex__title { margin: 0; font-size: 19px; line-height: 1.25; }
.tfh-plex__subtitle { margin: 2px 0 0; font-style: italic; color: var(--tfhp-muted); }
.tfh-plex__summary { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--tfhp-ink); }
.tfh-plex__links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; font-weight: 600; }
.tfh-plex__more { margin: 18px 0 0; }

.tfh-plex__devices ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tfh-plex__devices li { padding: 16px 18px; background: var(--tfhp-surface); border: 1px solid var(--tfhp-line); border-radius: var(--tfhp-radius); }
.tfh-plex__devices h3 { margin: 0 0 6px; font-size: 17px; }
.tfh-plex__devices p { margin: 0; font-size: 15px; line-height: 1.5; }

@media (max-width: 760px) {
	.tfh-plex__hero, .tfh-plex__devices ul { grid-template-columns: 1fr; }
	.tfh-plex__airing { grid-template-columns: 1fr; gap: 4px; }
}