/* home: live-look styles for this group of templates. */

/* Live's home page is light grey all the way down, including the gap above the footer. */
body.home {
	background-color: var(--wp--preset--color--accent-5);
}

/* The H1 stays for screen readers and search; live shows only the hero title. */
.home-brand {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Hero: the latest episode's poster filling the first screen, flush under the transparent header.
   The text sits at the bottom, over the part of a poster that carries its own title and credits, so
   the artwork above needs only a light shade. Charcoal shows when the image file is missing. */
.home-hero .wp-block-cover {
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	padding: 160px 20px 70px;
	isolation: isolate;
	background-color: var(--wp--preset--color--contrast);
}

/* The whole poster in the middle 60%: stretched to the full width it zoomed in on the middle. */
.home-hero .wp-block-cover img.wp-block-cover__image-background {
	left: 20%;
	width: 60%;
	object-fit: contain;
}

/* A blurred copy of the poster (from inc/hero.php) fills the sides, under the poster and the shade.
   Its inset hides the blur's soft edges. */
.home-hero .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: -60px;
	z-index: -1;
	background: var(--mindframes-hero-poster) center / cover;
	filter: blur(30px) brightness(0.6);
}

.home-hero .wp-block-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* A soft band under the menu, and dark only under the text at the bottom. */
	background:
		linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 160px),
		linear-gradient(to top, rgba(27, 27, 27, 0.95), rgba(27, 27, 27, 0.85) 250px, rgba(0, 0, 0, 0.55) 420px, rgba(0, 0, 0, 0) 600px);
}

.home-hero .wp-block-post-title {
	margin: 0;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.5;
}

.home-hero .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.home-hero__meta {
	gap: 0;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
}

.home-hero__meta p {
	margin: 0;
}

.home-hero__meta p:empty {
	display: none;
}

.home-hero__meta p:not(:empty) ~ p:not(:empty)::before {
	content: "/";
	margin: 0 14px;
}

.home-hero__player {
	max-width: 760px;
	margin: 32px auto 0;
	text-align: left;
}

/* A slim bar: the big title above already names the episode, so drop the player's titles and fixed height. */
.home-hero__player .currently-playing {
	display: none;
}

.home-hero__player,
.home-hero__player .player,
.home-hero__player .player__main,
.home-hero__player .player__artwork {
	height: auto;
}

/* On the poster with no box, like live's old player. Four classes to beat the plugin's later dark-mode rules. */
.home-hero .castos-player.home-hero__player .player {
	background: transparent;
}

.home-hero .castos-player.home-hero__player .ssp-progress {
	background-color: rgba(255, 255, 255, 0.3);
}

/* On phones the portrait poster's own title and credits would sit behind the player and app links:
   show the top of the poster and fade the rest into the charcoal section below. */
@media (max-width: 768px) {
	.home-hero .wp-block-cover {
		padding-bottom: 24px;
	}

	/* Full width from the top at its own shape: fitted to the content-height hero it shrank and left
	   grey strips. The hero clips what runs past its bottom. */
	.home-hero .wp-block-cover img.wp-block-cover__image-background {
		bottom: auto;
		left: 0;
		width: 100%;
		height: auto;
		object-position: 50% 0;
	}

	/* The fade replaces the cover's shade, so it stays under the text and player, and its charcoal isn't
	   darkened further. Measured from the bottom, where the text is: solid behind the player, so the
	   poster's lower lettering doesn't show through, and clear above the title. A soft band under the menu.
	   !important beats the shade's inline colour and opacity class. */
	.home-hero .wp-block-cover__background {
		opacity: 1 !important;
		background:
			linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 120px),
			linear-gradient(to top, #1B1B1B 200px, rgba(27, 27, 27, 0.85) 260px, rgba(0, 0, 0, 0.55) 360px, rgba(0, 0, 0, 0) 480px) !important;
	}

	.home-hero .wp-block-cover::before {
		display: none;
	}

	/* The player's Subscribe / Share row repeats the app links right below it. */
	.home-hero__player .player-panels-nav {
		display: none;
	}
}

/* Up to 768px the player positions its play button over the artwork column, so the column stays
   and only its placeholder image goes. */
.home-hero__player .player__artwork img {
	visibility: hidden;
}

@media (min-width: 769px) {
	.home-hero__player .player__artwork {
		display: none;
	}

	.home-hero__player .player__main {
		grid-template-columns: 1fr;
	}

	.home-hero__player .player__body {
		padding: 14px 20px;
	}
}

.subscribe-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.subscribe-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

.subscribe-links a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Charcoal sections: uppercase white heading over a short rule. */
.home-section__heading {
	margin: 0;
	font-size: 42px;
	line-height: 1.3;
	text-transform: uppercase;
}

.wp-block-separator.home-section__rule {
	width: 60px;
	height: 2px;
	margin: 24px 0 0;
	border: 0;
	opacity: 1;
}

.recent-episodes .home-section__rule {
	margin-bottom: 60px;
}

/* Hosts: photo left, text right, in a thin outline. */
.host-card {
	border-style: solid;
}

.host-card .wp-block-columns {
	gap: 0;
	margin: 0;
}

.host-card .wp-block-image {
	height: 100%;
	margin: 0;
}

.host-card .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.host-card .wp-block-column:last-child {
	padding: 24px 30px;
}

.host-card .wp-block-heading {
	margin: 0 0 8px;
	font-size: 24px;
}

.host-card p {
	margin: 0;
}

/* Recent episodes: white cards on the charcoal. */
.episode-card {
	height: 100%;
	background-color: var(--wp--preset--color--base);
}

/* Charcoal behind the whole-image frame shows as bars around the occasional wide still. */
.episode-card .wp-block-post-featured-image {
	margin: 0;
	background-color: var(--wp--preset--color--contrast);
}

.episode-card__body {
	padding: 30px;
}

.episode-card .wp-block-post-title {
	margin: 6px 0 0;
	font-size: 24px;
	line-height: 1.5;
}

.episode-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.episode-card .wp-block-post-date {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.episode-card .wp-block-post-excerpt {
	margin-top: 16px;
}

.episode-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* More content: reviews as image cards with the title over the foot of the image. */
.review-card {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--accent-3);
}

.review-card .wp-block-post-featured-image {
	margin: 0;
}

.review-card__text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 60px 16px 16px;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
}

.review-card .wp-block-post-title {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
}

.review-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.review-card .wp-block-post-date {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

/* Subscribe sits on the page's light grey, with live's uppercase heading. */
/* Subscribe: an orange band with charcoal text (white on this orange fails AA, issue #4), buttons
   straight to the apps, and a wall of older episodes' posters running off the right edge. */
.home-subscribe {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.home-subscribe__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 50px;
}

.home-subscribe__copy {
	position: relative;
	z-index: 1;
	max-width: 570px;
}

.home-main .home-subscribe .wp-block-heading {
	margin: 0;
	font-size: 42px;
	line-height: 1.2;
	text-transform: uppercase;
}

.home-subscribe .wp-block-separator.home-section__rule {
	margin: 24px 0 28px;
}

.home-subscribe p {
	margin: 0;
	font-size: 17px;
	line-height: 1.75;
}

.subscribe-links.is-style-buttons {
	justify-content: flex-start;
	gap: 12px;
	margin: 36px 0 0;
}

.subscribe-links.is-style-buttons a {
	gap: 12px;
	padding: 17px 20px;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 13px;
	letter-spacing: 0.8px;
}

.subscribe-links.is-style-buttons a:hover {
	background-color: #000000;
	color: var(--wp--preset--color--base);
}

.subscribe-links.is-style-buttons img {
	width: 22px;
	height: 22px;
}

.home-subscribe a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.home-subscribe .home-subscribe__also {
	margin-top: 22px;
	font-size: 15px;
}

.home-subscribe__also a {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-underline-offset: 3px;
}

/* Staggered columns, cut off by the band's top, bottom and right edges. */
.subscribe-wall {
	position: absolute;
	top: -60px;
	right: -60px;
	bottom: -60px;
	left: calc(50% + 10px);
	margin: 0;
}

.subscribe-wall .wp-block-post-template.is-layout-grid {
	gap: 14px;
}

.subscribe-wall .wp-block-post:nth-child(4n + 2) {
	transform: translateY(-120px);
}

.subscribe-wall .wp-block-post:nth-child(4n + 3) {
	transform: translateY(-40px);
}

.subscribe-wall .wp-block-post:nth-child(4n) {
	transform: translateY(-160px);
}

.subscribe-wall .wp-block-post-featured-image {
	margin: 0;
}

.subscribe-wall .wp-block-post-featured-image img {
	box-shadow: 0 18px 30px -18px rgba(27, 27, 27, 0.55);
}

/* Phones and tablets: one strip of posters above the heading, cut off at the right edge. */
@media (max-width: 900px) {
	.home-subscribe__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 0 20px 48px;
	}

	.home-subscribe__copy {
		max-width: none;
	}

	.subscribe-wall {
		position: relative;
		inset: auto;
		order: -1;
		height: 140px;
		margin: 0 -20px;
		padding: 0 20px;
		overflow: hidden;
	}

	.subscribe-wall .wp-block-post-template.is-layout-grid {
		display: flex;
		gap: 10px;
		align-items: flex-start;
	}

	.subscribe-wall .wp-block-post {
		flex: 0 0 104px;
		margin-top: -84px;
	}

	.subscribe-wall .wp-block-post:nth-child(n) {
		transform: none;
	}

	.subscribe-wall .wp-block-post:nth-child(odd) {
		margin-top: -24px;
	}
}

.home-now-playing {
	gap: 20px;
}

.home-now-playing p {
	margin: 0;
}

@media (max-width: 600px) {
	.home-hero .wp-block-cover {
		padding: 160px 20px 24px;
	}

	.home-hero .wp-block-post-title {
		font-size: 26px;
	}

	.home-section__heading,
	.home-main .home-subscribe .wp-block-heading {
		font-size: 32px;
	}

	.subscribe-links.is-style-buttons {
		flex-direction: column;
	}

	.subscribe-links.is-style-buttons a {
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		padding: 18px 20px;
	}

	/* The sections' 110px padding is inline. */
	.home-hosts,
	.recent-episodes,
	.more-content {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}

	.home-main .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}

	.host-card .wp-block-image img {
		max-height: 360px;
	}
}