/* poppsee-shape-row.css
 * The row of labelled line-art shapes under a category hero.
 * Rendered by inc/poppsee-shape-row.php — read the notes there first.
 *
 * Geometry measured off the June 2026 deck slides at a 1440px viewport:
 * shapes sit on a ~120px tall band, captions 14px, ~28px gutters.
 */

.pshapes-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.pshapes {
	display: flex;
	justify-content: center;
	/* Bottom-aligned on purpose: it is what puts every caption on one
	   baseline. The deck centres the shapes vertically, so its captions
	   stagger — a drawing artefact the deck review flagged. */
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 28px;
	padding: 34px 0 10px;
}

.pshape {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}

/* No border. Every shape is cropped line art that already carries its own
   hand-drawn outline; a CSS border would draw a second, straighter rectangle
   around it. */
.pshape__art {
	display: block;
	width: auto;
	max-width: 110px;
	max-height: 120px;
	min-width: 24px;
}

.pshape__label {
	font-family: Quicksand, sans-serif;
	font-size: 14px;
	color: #555;
	white-space: nowrap;
	text-align: center;
}

/* Rug sizes run to six across and read better a little tighter. */
.pshapes--sizes { gap: 24px; }
.pshapes--sizes .pshape__art { max-width: 92px; }

/* Kept for when shape or size becomes a real control. Nothing sets it today. */
.pshape--active .pshape__art {
	outline: 2px solid #03989e;
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.pshapes { gap: 18px; padding-top: 26px; }
	.pshape__art { max-width: 74px; max-height: 84px; }
	.pshapes--sizes .pshape__art { max-width: 64px; }
	.pshape__label { font-size: 13px; }
}

@media (max-width: 480px) {
	.pshapes { gap: 14px; padding-top: 20px; }
	.pshape__art { max-width: 58px; max-height: 66px; }
	.pshapes--sizes .pshape__art { max-width: 50px; }
	.pshape__label { font-size: 12px; }
}