/* Page Sections — Categories grid */

.ps-catgrid { /* uses .section--tight spacing from theme */ }

.ps-catgrid__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

/* Column counts (desktop). */
.ps-catgrid--cols-2 .ps-catgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-catgrid--cols-3 .ps-catgrid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-catgrid--cols-4 .ps-catgrid__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ps-catgrid__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-catgrid__tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--sand);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: #fff;
	transition: transform 280ms ease, box-shadow 280ms ease;
	isolation: isolate;
}

.ps-catgrid__tile:hover,
.ps-catgrid__tile:focus-visible {
	transform: translateY(-3px) scale(1.012);
	box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 36px rgba(24,60,66,.14);
}

.ps-catgrid__tile:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
}

.ps-catgrid__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: filter 320ms ease, transform 520ms ease;
	z-index: 0;
}

.ps-catgrid__tile:hover .ps-catgrid__img {
	filter: brightness(1.05) saturate(1.05);
	transform: scale(1.04);
}

.ps-catgrid__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(24, 60, 66, 0) 40%,
		rgba(24, 60, 66, 0.18) 62%,
		rgba(24, 60, 66, 0.72) 100%
	);
	z-index: 1;
	pointer-events: none;
}

.ps-catgrid__label {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 2;
	font-family: var(--font-heading);
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* No-image fallback: sand background, centred teal name, no gradient/image. */
.ps-catgrid__item--noimg .ps-catgrid__tile {
	background: var(--sand);
	color: var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}

.ps-catgrid__item--noimg .ps-catgrid__label {
	position: static;
	color: var(--teal);
	text-shadow: none;
	font-size: clamp(18px, 1.9vw, 26px);
}

/* Responsive — per spec.
   cols=4 → 4 / 3@1023 / 2@767 / 1@479
   cols=3 → 3 / 2@1023 / 2@767 / 1@479
   cols=2 → 2 / 2       / 2       / 1@479 */

@media (max-width: 1023px) {
	.ps-catgrid--cols-4 .ps-catgrid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ps-catgrid--cols-3 .ps-catgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.ps-catgrid__grid { gap: 16px; }
}

@media (max-width: 767px) {
	.ps-catgrid--cols-4 .ps-catgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ps-catgrid--cols-3 .ps-catgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* cols-2 stays at 2 here. */

	.ps-catgrid__label {
		left: 14px;
		right: 14px;
		bottom: 12px;
		font-size: 17px;
	}
}

@media (max-width: 479px) {
	.ps-catgrid--cols-4 .ps-catgrid__grid,
	.ps-catgrid--cols-3 .ps-catgrid__grid,
	.ps-catgrid--cols-2 .ps-catgrid__grid {
		grid-template-columns: 1fr;
	}
	.ps-catgrid__grid { gap: 14px; }
}

/* Desktop — wider gaps, more substantial label inset. */
@media (min-width: 1024px) {
	.ps-catgrid__grid { gap: 22px; }
	.ps-catgrid__label {
		left: 20px;
		right: 20px;
		bottom: 18px;
		font-size: clamp(19px, 1.5vw, 22px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-catgrid__tile,
	.ps-catgrid__img { transition: none; }
	.ps-catgrid__tile:hover,
	.ps-catgrid__tile:focus-visible { transform: none; }
	.ps-catgrid__tile:hover .ps-catgrid__img { transform: none; }
}

/* Wide desktop — extra gap + slightly stronger label so tiles read at scale. */
@media (min-width: 1280px) {
	.ps-catgrid__grid { gap: 24px; }
	.ps-catgrid__label {
		left: 22px;
		right: 22px;
		bottom: 20px;
		font-size: clamp(20px, 1.5vw, 24px);
	}
	.ps-catgrid__overlay {
		background: linear-gradient(
			to bottom,
			rgba(24, 60, 66, 0) 38%,
			rgba(24, 60, 66, 0.20) 60%,
			rgba(24, 60, 66, 0.76) 100%
		);
	}
}