/*
 * About and Where To Buy. Two copy-driven pages sharing the same shell, the
 * warehouse list and the chip list, so they live in one stylesheet.
 */

/* ---------------------------------------------------------------------
   Shared page hero
   --------------------------------------------------------------------- */
.hl-about__hero,
.hl-wtb__hero {
	position: relative;
	padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 52px);
	border-bottom: 1px solid var(--hl-line-2);
	background:
		radial-gradient(900px 320px at 15% 130%, rgba(23, 231, 220, 0.12), transparent 70%),
		var(--hl-black);
	overflow: hidden;
}

.hl-about__hero-media {
	position: absolute;
	inset: 0;
	opacity: 0.3;
}
.hl-about__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hl-about__hero-inner { position: relative; }

.hl-about__heading,
.hl-wtb__heading {
	margin: 18px 0 0;
	font: 700 clamp(32px, 4.4vw, 56px)/1 var(--hl-font-head);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	max-width: 16ch;
}

.hl-about__intro,
.hl-wtb__intro {
	margin: 20px 0 0;
	max-width: 620px;
	font: 400 16px/1.65 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   About
   --------------------------------------------------------------------- */
.hl-about__block { padding-top: clamp(40px, 5vw, 64px); }

.hl-about__prose {
	margin-top: 22px;
	/* A readable measure. Without a cap, factory paragraphs run the full
	   1320px and become hard to track line to line. */
	max-width: 68ch;
	font: 400 16px/1.75 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}
.hl-about__prose p { margin: 0 0 1.1em; }
.hl-about__prose p:last-child { margin-bottom: 0; }

.hl-about__sub {
	margin: 36px 0 0;
	font: 500 11px/1 var(--hl-font-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hl-cyan);
}

.hl-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
}

.hl-chip {
	padding: 8px 14px;
	border: 1px solid var(--hl-line-2);
	border-radius: 999px;
	background: var(--hl-surface);
	font: 500 11px/1.2 var(--hl-font-mono);
	letter-spacing: 0.08em;
	color: var(--hl-body-2);
}

.hl-about__distributor {
	margin-top: clamp(48px, 6vw, 80px);
	padding: clamp(44px, 5.5vw, 72px) 0;
	background: var(--hl-black-2);
	border-top: 1px solid var(--hl-line);
	border-bottom: 1px solid var(--hl-line);
}

/* ---------------------------------------------------------------------
   Warehouse list (About + Where To Buy)
   --------------------------------------------------------------------- */
.hl-offices {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 30px 0 0;
	padding: 0;
}

.hl-offices__item {
	padding: 22px 20px;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius-card);
}

.hl-offices__city {
	margin: 0;
	font: 700 18px/1 var(--hl-font-head);
	text-transform: uppercase;
	color: var(--hl-cyan);
}

.hl-offices__address {
	margin: 12px 0 0;
	font: 400 13px/1.6 var(--hl-font-body);
	color: var(--hl-muted);
}

.hl-offices__phone {
	display: inline-block;
	margin-top: 12px;
	font: 500 12px/1 var(--hl-font-mono);
	letter-spacing: 0.06em;
	color: var(--hl-text);
	text-decoration: none;
	border-bottom: 1px solid var(--hl-cyan-hairline);
	padding-bottom: 4px;
}
.hl-offices__phone:hover { color: var(--hl-cyan); }

/* ---------------------------------------------------------------------
   Where To Buy
   --------------------------------------------------------------------- */
.hl-wtb__panels {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 0;
	margin-top: clamp(36px, 4.5vw, 56px);
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius-card);
	overflow: hidden;
	/* .hl-container adds side padding; the panels supply their own. */
	padding-inline: 0;
	max-width: calc(var(--hl-maxw) - 2 * clamp(20px, 4vw, 40px));
}

.hl-wtb__panel { padding: clamp(30px, 3.6vw, 48px); }

.hl-wtb__panel--retail {
	background: var(--hl-heat-panel);
	color: var(--hl-on-heat);
}
/* The kicker is cyan by default and vanishes on the gradient. */
.hl-wtb__kicker { color: inherit; }

.hl-wtb__panel--trade {
	background: var(--hl-surface);
	border-left: 1px solid var(--hl-line-2);
}

.hl-wtb__body {
	margin: 16px 0 26px;
	max-width: 44ch;
	font: 400 15px/1.6 var(--hl-font-body);
	text-wrap: pretty;
}
.hl-wtb__body--dark { color: var(--hl-body-2); }

.hl-wtb__offices {
	margin-top: clamp(48px, 6vw, 80px);
	padding: clamp(44px, 5.5vw, 72px) 0 clamp(56px, 7vw, 88px);
	background: var(--hl-black-2);
	border-top: 1px solid var(--hl-line);
}

.hl-admin-notice {
	padding: 14px 16px;
	border: 1px dashed var(--hl-red-muted);
	border-radius: var(--hl-radius-card);
	font: 400 13px/1.5 var(--hl-font-body);
	color: var(--hl-red-muted);
}

@media (max-width: 900px) {
	.hl-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hl-wtb__panels { grid-template-columns: minmax(0, 1fr); }
	.hl-wtb__panel--trade { border-left: none; border-top: 1px solid var(--hl-line-2); }
}

@media (max-width: 560px) {
	.hl-offices { grid-template-columns: minmax(0, 1fr); }
}