/*
 * The gear page.
 *
 * Direction: this page replaces the kit.co collections that used to power
 * whoismatt.com/gear, so it keeps kit.co's one good idea, the product photo
 * floating in a quiet well with nothing competing. Everything else is Matt's.
 *
 * Why it does not go moody and dark: his whole register is practical and
 * viewer-first. He tells you when not to buy, he gives the cheaper option, he
 * assumes you are capable but busy and broke. A gear-flex page would be the
 * wrong voice. So this is bright, high contrast, and plain spoken, and the
 * confidence lives in the typography rather than in atmosphere.
 *
 * Type: Archivo for display, Lato for body. Archivo is a grotesque that goes
 * very heavy and slightly wide, which reads like equipment labelling rather
 * than editorial, and it is the thing that stops this looking like the theme.
 * Lato stays for body copy because the theme already loads it, so the second
 * family is paid for only on headings.
 *
 * Colour is derived, not invented. #1FA8DA is already the site's link colour;
 * the wells are that same hue at very low saturation, so every product photo
 * sits on a field that belongs to his brand, and the ink is a blue-black from
 * the same family rather than a neutral grey.
 *
 * The .wmgear-page rules style content that lives in the WordPress page rather
 * than in the shortcode. Deliberate: the intro and the grid have to share one
 * left axis or the page reads as two unrelated blocks.
 */

.wmgear-page {
	--wmgear-ink: #0B1B24;
	--wmgear-body: #2E3E48;
	--wmgear-muted: #5A6B75;
	--wmgear-well: #EEF6FA;
	--wmgear-line: #DCE7ED;
	--wmgear-signal: #1FA8DA;

	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem 5rem;
	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--wmgear-ink);
}

.wmgear-page__title {
	margin: 4rem 0 1.5rem;
	font-family: Archivo, Lato, sans-serif;
	font-size: clamp(2.8rem, 7vw, 5rem);
	font-weight: 900;
	letter-spacing: -.045em;
	line-height: .95;
	color: var(--wmgear-ink);
}

/* 46rem is roughly 72 characters at this size, where prose stops being
   comfortable. The grid below deliberately runs the full 1240. */
.wmgear-page__lede {
	max-width: 46rem;
	margin: 0 0 1.1rem;
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--wmgear-body);
}

.wmgear-page__note {
	max-width: 46rem;
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wmgear-muted);
}

/* Tinted rather than ruled, so it reads as a standing condition of the page
   rather than an aside. It has to be unmissable for the FTC without looking
   like a consent banner people have trained themselves to skip. */
.wmgear-page__disclosure {
	max-width: 46rem;
	margin: 0 0 2rem;
	padding: .85rem 1rem;
	border-radius: .5rem;
	background: var(--wmgear-well);
	font-size: .82rem;
	line-height: 1.55;
	color: var(--wmgear-muted);
}

.wmgear-updated {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wmgear-signal);
}

.wmgear {
	--wmgear-ink: #0B1B24;
	--wmgear-muted: #5A6B75;
	--wmgear-well: #EEF6FA;
	--wmgear-line: #DCE7ED;
	--wmgear-signal: #1FA8DA;
	color: var(--wmgear-ink);
}

.wmgear-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	gap: .35rem;
	overflow-x: auto;
	margin: 0 0 .5rem;
	padding: 1rem 0;
	background: #fff;
	box-shadow: 0 1px 0 var(--wmgear-line);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wmgear-nav::-webkit-scrollbar { display: none; }

.wmgear-nav__link {
	flex: 0 0 auto;
	padding: .4rem .8rem;
	border: 0;
	border-radius: .35rem;
	background: var(--wmgear-well);
	font-family: Archivo, sans-serif;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	color: var(--wmgear-muted);
	transition: background .15s, color .15s;
}

.wmgear-nav__link:hover { background: var(--wmgear-signal); color: #fff; }
.wmgear-nav__link:focus-visible { outline: 2px solid var(--wmgear-signal); outline-offset: 2px; }

.wmgear-filter { margin: 1.5rem 0 3.5rem; }

.wmgear-filter__input {
	width: 100%;
	max-width: 24rem;
	padding: .8rem 1rem;
	border: 0;
	border-radius: .5rem;
	background: var(--wmgear-well);
	font-family: inherit;
	font-size: .95rem;
	color: var(--wmgear-ink);
}

.wmgear-filter__input::placeholder { color: var(--wmgear-muted); }
.wmgear-filter__input:focus { outline: 2px solid var(--wmgear-signal); outline-offset: 1px; }

.wmgear-filter__empty { margin: .75rem 0 0; font-size: .9rem; color: var(--wmgear-muted); }

.wmgear-section { margin: 0 0 4.5rem; scroll-margin-top: 5rem; }

/* The one loud typographic move on the page. Heavy, tight, sitting on a thick
   rule, so the sections read as chapters rather than as table headers. */
.wmgear-section__title {
	margin: 0 0 2.25rem;
	padding: 0 0 .9rem;
	border-bottom: 3px solid var(--wmgear-ink);
	font-family: Archivo, sans-serif;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	font-weight: 900;
	letter-spacing: -.03em;
	color: var(--wmgear-ink);
}

.wmgear-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 2.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.wmgear-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}

.wmgear-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	/* Grid items default to min-width:auto, so one long unbreakable model
	   number can push its track past the minmax floor and force the whole page
	   sideways. This is the usual cause of the horizontal scroll the spec
	   forbids at any width. */
	min-width: 0;
}

/* The well. Product shots arrive from mixed sources, press images on white and
   Matt's own photos, at whatever crop they happen to be. A fixed square field
   with contain and generous padding makes every one of them sit in the grid
   the same way, which is where kit.co's consistency actually came from. */
.wmgear-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin: 0 0 .65rem;
	padding: 1.25rem;
	border: 0;
	border-radius: .9rem;
	background: var(--wmgear-well);
	overflow: hidden;
}

/* multiply drops the white box around press shots that are not cut out, so a
   JPEG on white and a transparent PNG read the same in the grid. */
.wmgear-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.wmgear-card__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.wmgear-card__blurb {
	margin: 0;
	font-size: .86rem;
	line-height: 1.6;
	color: var(--wmgear-muted);
	overflow-wrap: anywhere;
}

/* Tinted, not filled. Fifteen solid dark bars would be the loudest thing on a
   page whose entire argument is the product photo above them. It fills on
   intent instead. margin-top:auto pins every button to the bottom of its row
   regardless of how long the blurb runs. */
.wmgear-card__buy {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	/* Explicit, because padding alone leaves the height at the mercy of the
	   theme's inherited line-height. 2.75rem is the 44px touch target. */
	min-height: 2.75rem;
	padding: .55rem 1rem;
	border: 0;
	border-radius: .5rem;
	background: var(--wmgear-well);
	box-shadow: inset 0 0 0 1px var(--wmgear-line);
	font-family: Archivo, sans-serif;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wmgear-ink);
	transition: background .15s, color .15s, box-shadow .15s;
}

.wmgear-card__buy:hover {
	background: var(--wmgear-ink);
	box-shadow: none;
	color: #fff;
}

.wmgear-card__buy:focus-visible { outline: 2px solid var(--wmgear-signal); outline-offset: 2px; }

/* Secondary to the buy button on purpose. The button carries the weight of
   Archivo at 800; this is body text with a rule under it, so a card with both
   still reads as one primary action and one aside. The buy button owns
   margin-top:auto, so it stays pinned to the bottom of the card and this sits
   under it, outside the button's own box. */
.wmgear-card__review {
	display: block;
	margin-top: .55rem;
	/* Matches the button's 44px target rule: this is a real tap target on a
	   phone, not decoration. */
	min-height: 1.75rem;
	padding: .3rem 0;
	font-size: .78rem;
	text-align: center;
	text-decoration: none;
	color: var(--wmgear-muted);
	transition: color .15s;
}

.wmgear-card__review::after {
	/* Signals "there is more here" without loading an icon font or an SVG. */
	content: " \2192";
}

.wmgear-card__review:hover { color: var(--wmgear-signal); }

.wmgear-card__review:focus-visible {
	outline: 2px solid var(--wmgear-signal);
	outline-offset: 2px;
}

.wmgear-card[hidden],
.wmgear-section[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.wmgear-nav__link,
	.wmgear-card__buy,
	.wmgear-card__review { transition: none; }
}