/*
  Components: Reels + Podcast feature card.
  Figma: 62:2795 (Reels) — 308×542
         281:6865 (Podcast) — 821×588
*/

/* ---------- Reels ---------- */
.c-reel {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 308 / 542;            /* ~9:16 portrait */
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--c-bg-elev);
	color: var(--c-light);
	text-decoration: none;
	isolation: isolate;
}

.c-reel__media { position: absolute; inset: 0; z-index: 0; }
.c-reel__img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}

.c-reel__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0) 28%,
		rgba(0,0,0,0.85) 80%,
		rgba(0,0,0,1) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.c-reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	color: var(--c-light);
	z-index: 2;
	transition: transform 200ms ease, background 200ms ease;
}
.c-reel:hover .c-reel__play,
.c-reel:focus-visible .c-reel__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgba(255,255,255,0.28);
}

.c-reel__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px;
	z-index: 3;
}
.c-reel__title {
	margin: 0;
	font-size: var(--fs-h3);
	line-height: 1.2;
	font-weight: var(--fw-semibold);
	color: var(--c-light);

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Landscape variant — 630×354 (16:9-ish). Used by Albinfo TV "Video 2 columns". */
.c-reel--landscape {
	aspect-ratio: 630 / 354;
	border-radius: var(--radius-sm);
}
.c-reel--landscape .c-reel__title {
	font-size: var(--fs-h1);                /* 36 */
	line-height: var(--lh-h1);              /* 42 */
	font-weight: var(--fw-bold);
	letter-spacing: -1.44px;
	-webkit-line-clamp: 3;
}
.c-reel--landscape .c-reel__body {
	padding: 10px;
}

/* Grid host: 4-up on desktop, 2-up tablet, 1.2-up mobile (scroll-snap). */
.c-reels-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 1024px) {
	.c-reels-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.c-reels-row {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}
	.c-reels-row > .c-reel {
		flex: 0 0 70%;
		scroll-snap-align: start;
	}
}

/* ---------- Podcast feature ---------- */
.c-podcast {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 821 / 588;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--c-bg-elev);
	color: var(--c-light);
	text-decoration: none;
	isolation: isolate;
}
.c-podcast__media { position: absolute; inset: 0; z-index: 0; }
.c-podcast__img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.c-podcast__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0) 53%,
		rgba(0,0,0,1) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.c-podcast__body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 2;
}

.c-podcast__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px;
	border: 1px solid var(--c-light);
	border-radius: var(--radius-md);
	color: var(--c-light);
	font-size: var(--fs-heading-14);
	line-height: var(--lh-heading-14);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.42px;
	text-transform: uppercase;
	width: max-content;
}
.c-podcast__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-light);
}

.c-podcast__title {
	margin: 0;
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-bold);
	letter-spacing: -1.44px;
	color: var(--c-light);

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Wide variant — 1280×580. Used by the Albinfo TV featured video hero. */
.c-podcast--wide { aspect-ratio: 1280 / 580; }

@media (max-width: 600px) {
	.c-podcast__title { font-size: 22px; line-height: 28px; }
	.c-podcast__body  { padding: var(--space-4); }
}

/* ---------- Video 2-up row host ---------- */
.c-video-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
@media (max-width: 768px) {
	.c-video-row { grid-template-columns: 1fr; }
}