/* Elmastudio Site — the Styles gallery (2026-10-16). Ported from
 * lab/the-styles-gallery.html, Manuel's picks the same day: a WIDE grid of
 * tiles, five across; each tile a bordered card in the Themes card's voice
 * (hairline, the paper as its ground, --space-3 padding, the picture's
 * --radius-sm inside and the outer corner the DS-248 sum, never typed); the
 * picture is the panel's own style tile drawn large, following the site's
 * side. The grid breaks out of the reading column to 1180, the page's wide
 * width, measured against the content column. */

.content-column:has(.style-grid) {
	container-type: inline-size;
}

.style-grid {
	--cols: 5;
	--wide: 1180px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--wide), 100cqi - 2 * var(--space-10));
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: var(--space-4);
	margin-block-start: var(--space-10);
}

.style-tile {
	--card-padding: var(--space-3);
	--card-inner: var(--radius-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	padding: var(--card-padding);
	border: var(--border-width-default) solid var(--border-default);
	border-radius: calc(var(--card-padding) + var(--card-inner));
	--interaction-surface: var(--surface-base);
	--step-surface-hover: 4%;
	background: var(--interaction-surface);
	transition: background-color var(--motion-duration-feedback) var(--motion-easing-standard);
}

.style-tile:hover {
	background-color: var(--surface-hover);
}

.style-pic {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5.5%;
	width: 100%;
	aspect-ratio: 104 / 64;
	padding: 0 12%;
	border-radius: var(--card-inner);
	border: var(--border-width-default) solid var(--border-default);
	box-shadow: var(--elevation-raised-contained);
	/* THE SIDES: the tile carries both sides inline (--lp/--li/--la, --dp/--di/--da); which one shows is decided
	   HERE, never inline, because an inline custom property would beat any rule that tried to switch it. */
	--sp: var(--lp);
	--si: var(--li);
	--sa: var(--la);
	background: var(--sp);
	color: var(--si);
	font-family: var(--sf);
	container-type: inline-size;
}

.style-pic b {
	font-weight: 600;
	font-size: 17cqi;
	line-height: 1;
	margin-block-end: 1%;
}

.style-pic i {
	display: block;
	height: 3.6cqi;
	border-radius: 2cqi;
	background: var(--si);
	width: 100%;
}

.style-pic i:nth-of-type(2) {
	width: 70%;
	opacity: .45;
}

.style-pic i:nth-of-type(3) {
	width: 45%;
	background: var(--sa);
}

/* The style's dark side by night: every dark mode's id ends in -dark (QDS DS-219: neutral-dark, paper-dark …), as style.css reads it. */
:root[data-theme$="-dark"] .style-pic {
	--sp: var(--dp);
	--si: var(--di);
	--sa: var(--da);
}

.style-tile .card-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-0-5);
	padding-inline: var(--space-0-5);
}

.style-tile .card-title {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--text-base-line-height);
	color: var(--text-primary);
}

.style-tile .card-sub,
.style-tile .card-by {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--text-sm-contextual);
	line-height: var(--text-base-line-height);
	color: var(--text-muted);
}

.style-tile .card-by {
	opacity: .8;
}

.style-tile .card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	padding-inline: var(--space-0-5);
	margin-block-start: var(--space-1);
}

.style-tile .card-actions .quire-button {
	text-decoration: none;
}

.style-tile .quire-button:hover {
	background: var(--surface-selected);
}

.style-tile .quire-button:active {
	background: var(--surface-pressed);
}

.style-tile.is-copied .copy-style {
	background: var(--surface-selected);
}

@media (max-width: 1100px) {
	.style-grid { --cols: 3; }
}

@media (max-width: 760px) {
	.style-grid { --cols: 2; }
}