/* ===========================================================================
   Helios — Style library widget

   Four equal panels. As a deck slide the row must fit one viewport, so the tile
   height is derived from the viewport rather than from the content.
   ======================================================================== */

.hl-styles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	max-width: var(--hl-wrap-wide);
	margin-inline: auto;
}

.hl-style-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	height: clamp(300px, calc(100vh - 460px), 520px);
	padding: 26px;
	overflow: hidden;
	border-radius: var(--hl-radius);
	isolation: isolate;
	color: var(--hl-cream);
	transition: transform .6s var(--hl-ease);
}

.hl-style-tile .hl-media {
	z-index: 0;
	transform: scale(1.04);
	transition: transform 1.4s var(--hl-ease);
}
.hl-style-tile:hover .hl-media,
.hl-style-tile:focus-visible .hl-media { transform: scale(1.1); }

.hl-style-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--hl-scrim-card);
}
a.hl-style-tile:hover,
a.hl-style-tile:focus-visible { transform: translateY(-8px); }

.hl-style-tile__body {
	position: relative;
	z-index: 2;
}
.hl-style-tile h3 {
	margin: 0 0 10px;
	font-family: var(--hl-f-display);
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	font-weight: 400;
	line-height: 1.1;
}
.hl-style-tile p {
	margin: 0;
	font-size: .8rem;
	line-height: 1.7;
}

/* Materials are the substance of this section, so they stay visible rather than
   appearing on hover — a touch device has no hover. */
.hl-style-tile .hl-meta { margin-top: 16px; }
.hl-style-tile .hl-meta li { font-size: .56rem; }

@media (max-width: 1080px) {
	.hl-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hl-style-tile { height: clamp(260px, 42vh, 380px); }
}

@media (max-width: 600px) {
	.hl-styles { grid-template-columns: 1fr; }
	.hl-style-tile { height: clamp(240px, 46vh, 340px); }
}