/* =========================================================================
 * DriveCrate — item gallery ([drivecrate_items])
 *
 * From the PDP prototype's "Everything here has been in a box" section.
 * 4 × 2 on desktop, 2 × 4 from 900px down.
 * ====================================================================== */

.dc-items {
	--navy: #0A1E4A;
	--lime: #C6F63A;
	--lime-ink: #1F3300;
	--paper: #F2F4F9;
	--mist: #D9DFEC;
	--ink: #0A1E4A;
	--ink-soft: #4C5878;

	color: var(--ink);
	line-height: 1.5;
	scroll-margin-top: 90px; /* Clear the sticky header when a no-JS link jumps here. */
}
.dc-items *,
.dc-items *::before,
.dc-items *::after { box-sizing: border-box; }
.dc-items :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.dc-items .dc-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
 * Filters
 * ---------------------------------------------------------------------- */
.dc-items .filters { display: flex; gap: 8px; margin: 0 0 32px; }
.dc-items .filters a {
	flex: none; border: 1.5px solid var(--mist); background: #fff; padding: 9px 16px; border-radius: 999px;
	font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.dc-items .filters a:hover { border-color: var(--ink-soft); color: var(--ink); }
.dc-items .filters a[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */
.dc-items .items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dc-items .item { margin: 0; background: #fff; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--mist); outline-offset: 3px; }
.dc-items .item.is-filtered,
.dc-items .item.is-more { display: none; }
.dc-items .item .ph { aspect-ratio: 1 / 1; background: var(--tile, #F6F8FC); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dc-items .item.official { --tile: #EDF2FC; }
/* Photographs fill the tile. */
.dc-items .item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
/* fit="contain": cut-out images sit inside the tile, with room around them. */
.dc-items--contain .item .ph { padding: 16px; }
.dc-items--contain .item img { object-fit: contain; }
.dc-items .item:hover img { transform: scale(1.05); }
.dc-items .item figcaption {
	padding: 12px 14px 14px; border-top: 1.5px solid var(--mist); display: grid; gap: 7px;
	font-weight: 700; font-size: 15.5px; line-height: 1.25; letter-spacing: -.01em;
}
.dc-items .item figcaption small { font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--ink-soft); }
.dc-items .item .chip {
	width: max-content; max-width: 100%; padding: 3px 9px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
	background: var(--paper); color: var(--ink-soft); border: 1.5px solid var(--mist);
}
.dc-items .item.official .chip { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }

/* -------------------------------------------------------------------------
 * Show more
 * ---------------------------------------------------------------------- */
.dc-items .more { display: flex; justify-content: center; margin-top: 28px; }
.dc-items .more[hidden] { display: none; }
.dc-items .more .btn {
	display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 12px;
	background: var(--navy); color: #fff; font-weight: 700; font-size: 16px; line-height: 1.15; text-decoration: none;
	transition: background .12s ease;
}
.dc-items .more .btn:hover { background: #142E6E; }

@media (max-width: 900px) {
	.dc-items .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	/* Filters scroll sideways rather than squashing. */
	.dc-items .filters { overflow-x: auto; margin: 0 -18px 24px; padding: 0 18px 4px; scrollbar-width: none; }
	.dc-items .filters::-webkit-scrollbar { display: none; }
	.dc-items .filters a { padding: 9px 14px; font-size: 13px; }
	.dc-items .items { gap: 10px; }
	.dc-items .item { border-radius: 12px; }
	.dc-items--contain .item .ph { padding: 10px; }
	.dc-items .item figcaption { padding: 10px 11px 12px; font-size: 13px; gap: 5px; }
	.dc-items .item figcaption small { font-size: 12px; }
	.dc-items .more .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.dc-items * { transition: none !important; }
	.dc-items .item:hover img { transform: none; }
}