/*
 * The video page (video-detail.html, video_v2/), on the article page's parts (article_page.css:
 * the forest top, the media rising out of it, the PDF guide card) and the index kit's cards and
 * rows to swipe through (ix_base.css). Only what the video page has of its own, scoped .vd: the
 * player (16:9 at every width), sharing in the top, the abstract and topics, and the rows' spacing
 * and card widths.
 */

/* A tighter top than an article's, so the player is on the first screen: a smaller title, and
   from 768px the watch time, date and sharing on one row */
.vd .ar-title {
	font-size: clamp(2.2rem, 5.6vw, 3.6rem);
}

.vd .vd-hero {
	padding-top: clamp(1.75rem, 4vw, 2.5rem);
	padding-bottom: calc(var(--ar-rise) + clamp(1.5rem, 3vw, 1.75rem));
}

@media (min-width: 768px) {
	.vd-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: .75rem 1.5rem;
		margin-top: 1.25rem;
	}

	.vd-meta .ar-meta,
	.vd-meta .vd-share {
		margin-top: 0;
	}
}

/* The player rising out of the top, 16:9 on phones too; at most 56rem wide, so all of it shows
   on a laptop's first screen (1440 x 900) */
.vd-player {
	max-width: calc(56rem + 2 * var(--ix-gutter));
}

.vd .vd-player .ar-media__frame {
	aspect-ratio: 16 / 9;
	background: #0F140D;
}

.vd-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sharing, in the top: the article image's glass, lighter on the forest */
.vd-share {
	display: flex;
	justify-content: center;
	gap: .45rem;
	margin-top: 1.25rem;
}

.vd .vd-share .ar-glass {
	border-color: rgba(248, 255, 246, .2);
	background: rgba(248, 255, 246, .08);
	color: var(--ix-cream);
}

.vd .vd-share .ar-glass:hover {
	background: rgba(248, 255, 246, .16);
}

/* The abstract and the video's topics, under the player */
.vd-intro {
	max-width: calc(var(--ar-read) + 2 * var(--ix-gutter));
	padding-top: clamp(1.75rem, 4vw, 2.5rem);
}

.vd-lede {
	margin: 0;
	color: var(--ix-ink);
	font-size: clamp(1.125rem, 2.4vw, 1.3rem);
	line-height: 1.55;
	text-wrap: pretty;
}

.vd-topics {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-top: 1.1rem;
}

/* The rows: recipes, articles, shop items, similar videos */
.vd-row {
	padding-top: clamp(2.75rem, 6vw, 4rem);
}

.vd-row--recipes {
	--ix-carousel-card: min(62vw, 15rem);
}

/* Desktop (Robin): four across the page's width, about the recipe index's card, the fifth peeking in */
@media (min-width: 992px) {
	.vd-row--recipes {
		--ix-carousel-card: 18rem;
	}
}

.vd-row--shop {
	--ix-carousel-card: min(44vw, 11.5rem);
}

/* The PDF guides and the audiobook: the article page's forest card, at reading width */
.vd-guides {
	max-width: calc(48rem + 2 * var(--ix-gutter));
	padding-top: clamp(2.75rem, 6vw, 4rem);
}

.vd-guides .ar-guides {
	margin-top: 0;
}

.vd .ar-guide__title a {
	color: inherit;
	text-decoration: none;
}