/* ===========================================================================
   Helios — Journal reel widget

   The card itself is defined in the theme (`.hl-pcard`) because the archive and
   the single-post related grid use it too. This file only gives it the fixed
   flex basis a reel item needs.
   ======================================================================== */

.hl-pcard--reel {
	flex: 0 0 clamp(250px, 24vw, 360px);
}

/* Fallback for the reel used without the theme (e.g. on a stock theme). */
.hl-reel .hl-pcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hl-w-border, var(--hl-line));
	border-radius: var(--hl-radius-card);
	background: rgba(20, 17, 16, .5);
	transition: .55s var(--hl-ease);
}
.hl-reel .hl-pcard:hover,
.hl-reel .hl-pcard:focus-visible {
	border-color: var(--hl-w-accent, var(--hl-sun));
	transform: translateY(-6px);
}
.hl-reel .hl-pcard__thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.hl-reel .hl-pcard__thumb .hl-media {
	z-index: 0;
	transform: scale(1.04);
}
.hl-reel .hl-pcard:hover .hl-pcard__thumb .hl-media { transform: scale(1.1); }
.hl-reel .hl-pcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px;
}
.hl-reel .hl-pcard__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-size: .6rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hl-cream-faint) !important;
}
.hl-reel .hl-pcard__meta b {
	color: var(--hl-w-accent, var(--hl-sun));
	font-weight: 500;
}
.hl-reel .hl-pcard h3 {
	margin: 0 0 10px;
	font-size: 1.3rem;
	line-height: 1.22;
}
.hl-reel .hl-pcard p {
	margin: 0;
	font-size: .78rem;
	line-height: 1.7;
}
.hl-reel .hl-pcard .hl-go {
	margin-top: auto;
	padding-top: 20px;
}
.hl-reel .hl-pcard:hover .hl-go { gap: 15px; }