/**
 * Containers, section rhythm and grids.
 *
 * Container maths from the reference: 1280px max, 32px gutters at lg,
 * giving a 1216px content column.
 */

.pl-container {
	width: 100%;
	max-width: var(--pl-container);
	margin-inline: auto;
	padding-inline: var(--pl-gutter);
}

@media (min-width: 40rem) {
	.pl-container { padding-inline: 1.5rem; }
}

@media (min-width: 64rem) {
	.pl-container { padding-inline: var(--pl-gutter-lg); }
}

.pl-container--narrow { max-width: 46rem; }
.pl-container--prose { max-width: 44rem; }

/* Section rhythm: py-8 then py-12 from sm, with an internal stack gap. */
.pl-section {
	padding-block: var(--pl-section-y);
}

.pl-section > * + * {
	margin-top: var(--pl-section-gap);
}

.pl-section--tight { padding-block: var(--pl-space-8); }
.pl-section--flush { padding-block: 0; }

/* Panel: the rounded, tinted blocks used for the story and hero areas. */
.pl-panel {
	border-radius: var(--pl-radius-2xl);
	overflow: hidden;
}

.pl-panel--alt {
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	padding-block: var(--pl-space-12);
	margin-block: var(--pl-space-6);
}

@media (min-width: 40rem) {
	.pl-panel--alt { padding-block: var(--pl-space-16); }
}

/* ---- section head ---- */

.pl-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pl-space-3) var(--pl-space-6);
}

.pl-section-head__title {
	font-size: var(--pl-fs-h2);
	font-weight: 700;
}

.pl-section-head__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--pl-fs-sm);
	font-weight: 600;
	color: var(--pl-primary-ink);
	white-space: nowrap;
}

.pl-section-head__link span {
	transition: transform var(--pl-dur) var(--pl-ease);
}

.pl-section-head__link:hover { color: var(--pl-primary-deep); }
.pl-section-head__link:hover span { transform: translateX(3px); }

/* ---- grids ----
   Widths measured from the reference at 1440px:
   categories 4x286 gap-24 · limited 3x384 gap-32 · trending 4x280 gap-32
   Rebuilt with auto-fit so they degrade correctly instead of at fixed steps. */

.pl-grid {
	display: grid;
	gap: var(--pl-space-6);
}

.pl-grid--2 { grid-template-columns: 1fr; }
.pl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-space-4); }
.pl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-space-4); }

@media (min-width: 40rem) {
	.pl-grid--3,
	.pl-grid--4 { gap: var(--pl-space-6); }
}

@media (min-width: 48rem) {
	.pl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-space-8); }
	.pl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-space-8); }
	.pl-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.pl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pl-space-8); }
}

/* Catalogue grid sits beside a filter rail from lg up. */
.pl-shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-8);
}

@media (min-width: 64rem) {
	.pl-shop-layout { grid-template-columns: 16rem minmax(0, 1fr); }
}

.pl-stack > * + * { margin-top: var(--pl-space-4); }
.pl-stack--lg > * + * { margin-top: var(--pl-space-8); }