/*
 * Brewing Guide — one article.
 *
 * Extends assets/css/brewing-guide.css (the list) and is loaded only on a
 * single article. Every colour, size, space, radius, shadow and duration comes
 * from assets/css/design-tokens.css: nothing here defines a new colour or a new
 * font, so a [data-theme="dark"] remap of the role tokens recolours the whole
 * page with no extra rules.
 *
 * The page alternates on purpose — a dark photographic hero, a light reading
 * column, a cream author panel, a card grid, then a dark closing band — so it
 * reads as a designed article rather than one stacked text block.
 *
 * Mobile-first: every width is fluid and no rule sets a fixed pixel layout
 * width or a viewport-width box, so there is no horizontal scroll at 320px.
 */

/* ------------------------------------------------------------------ hero --- */

.hcr-article__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--space-12);
	background-color: var(--color-neutral-900);
	color: var(--color-neutral-50);
}

.hcr-article__hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hcr-article__hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The exact overlay from DESIGN.md, so the headline stays legible on any photo. */
.hcr-article__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(28, 25, 23, 0.55) 0%, rgba(28, 25, 23, 0.85) 100%);
}

.hcr-article__hero-inner {
	max-width: var(--container-max);
}

.hcr-article__eyebrow {
	margin: var(--space-6) 0 var(--space-3);
	color: var(--color-accent-300);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.hcr-article__title {
	max-width: 24ch;
	margin: 0;
	color: var(--color-neutral-50);
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-tight);
}

.hcr-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-5) 0 0;
	color: var(--color-neutral-200);
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

.hcr-article__meta-item + .hcr-article__meta-item::before {
	content: "·";
	margin-right: var(--space-4);
	color: var(--color-neutral-400);
}

/* ------------------------------------------------------------ breadcrumb --- */

.hcr-article__breadcrumb {
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

.hcr-article__breadcrumb .hcr-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hcr-article__breadcrumb .hcr-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	color: var(--color-neutral-300);
}

.hcr-article__breadcrumb .hcr-breadcrumb__item + .hcr-breadcrumb__item::before {
	content: "/";
	margin-right: var(--space-2);
	color: var(--color-neutral-500);
}

.hcr-article__breadcrumb .hcr-breadcrumb__link {
	color: var(--color-neutral-200);
	text-decoration: none;
	border-bottom: var(--border-width) solid transparent;
	transition: color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}

.hcr-article__breadcrumb .hcr-breadcrumb__link:hover,
.hcr-article__breadcrumb .hcr-breadcrumb__link:focus-visible {
	color: var(--color-accent-300);
	border-bottom-color: currentColor;
}

.hcr-article__breadcrumb .hcr-breadcrumb__item--current {
	color: var(--color-neutral-50);
	font-weight: var(--weight-medium);
}

/* ------------------------------------------------------- the reading column --- */

.hcr-article__body {
	background: var(--color-bg);
}

.hcr-article__back {
	margin: 0 0 var(--space-8);
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

.hcr-article__back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-link);
	font-weight: var(--weight-medium);
	text-decoration: none;
	border-bottom: var(--border-width) solid transparent;
	transition: color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}

.hcr-article__back-link:hover,
.hcr-article__back-link:focus-visible {
	color: var(--color-link-hover);
	border-bottom-color: currentColor;
}

/*
 * The measure the story asks for: about 70 characters. min() keeps it inside
 * the viewport on a 320px screen instead of forcing a horizontal scrollbar.
 */
.hcr-article__prose {
	max-width: min(70ch, 100%);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.hcr-article__prose > * + * {
	margin-top: var(--space-5);
}

.hcr-article__prose p {
	margin: 0;
}

.hcr-article__prose h2,
.hcr-article__prose h3,
.hcr-article__prose h4 {
	margin: var(--space-10) 0 var(--space-3);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-snug);
}

.hcr-article__prose h2 {
	font-size: var(--text-2xl);
	padding-top: var(--space-2);
	border-top: var(--border-width) solid var(--color-border);
}

.hcr-article__prose h3 {
	font-size: var(--text-xl);
}

.hcr-article__prose h4 {
	font-size: var(--text-lg);
}

.hcr-article__prose a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--ease-default);
}

.hcr-article__prose a:hover,
.hcr-article__prose a:focus-visible {
	color: var(--color-link-hover);
}

.hcr-article__prose ul,
.hcr-article__prose ol {
	margin: 0;
	padding-left: var(--space-6);
}

.hcr-article__prose li + li {
	margin-top: var(--space-2);
}

.hcr-article__prose li::marker {
	color: var(--color-primary-500);
}

.hcr-article__prose blockquote {
	margin: var(--space-8) 0;
	padding: var(--space-5) var(--space-6);
	background: var(--color-surface);
	border-left: 4px solid var(--color-primary-500);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--text-lg);
	font-style: italic;
	line-height: var(--leading-snug);
}

.hcr-article__prose blockquote p {
	margin: 0;
}

.hcr-article__prose blockquote cite {
	display: block;
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-style: normal;
}

.hcr-article__prose img,
.hcr-article__prose video,
.hcr-article__prose iframe {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.hcr-article__prose figure,
.hcr-article__prose .wp-block-image {
	margin: var(--space-8) 0;
}

.hcr-article__prose figcaption,
.hcr-article__prose .wp-caption-text {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	text-align: left;
}

.hcr-article__prose code,
.hcr-article__prose kbd {
	padding: 0 var(--space-1);
	background: var(--color-surface);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
}

.hcr-article__prose pre {
	overflow-x: auto;
	padding: var(--space-4);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}

.hcr-article__prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.hcr-article__prose th,
.hcr-article__prose td {
	padding: var(--space-3);
	border-bottom: var(--border-width) solid var(--color-border);
	text-align: left;
}

.hcr-article__prose hr {
	border: 0;
	border-top: var(--border-width) solid var(--color-border);
}

.hcr-article__pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-8);
	font-size: var(--text-sm);
}

.hcr-article__pages-label {
	color: var(--color-text-muted);
}

/* ------------------------------------------------------------ author box --- */

.hcr-article__author {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-4);
	max-width: min(70ch, 100%);
	margin-top: var(--space-12);
	padding: var(--space-6);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.hcr-article__author-media {
	flex: 0 0 auto;
	line-height: 0;
}

.hcr-article__avatar {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
}

.hcr-article__author-text {
	flex: 1 1 14rem;
	min-width: 0;
}

.hcr-article__author-label {
	margin: 0 0 var(--space-1);
	color: var(--color-primary-600);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.hcr-article__author-name {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-tight);
}

.hcr-article__author-link {
	color: inherit;
	text-decoration: none;
	border-bottom: var(--border-width) solid transparent;
	transition: color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}

.hcr-article__author-link:hover,
.hcr-article__author-link:focus-visible {
	color: var(--color-link-hover);
	border-bottom-color: currentColor;
}

.hcr-article__author-bio {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

/* ------------------------------------------------- previous / next guide --- */

.hcr-article__nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-top: var(--space-10);
}

.hcr-article__nav-link {
	display: block;
	padding: var(--space-5);
	background: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default);
}

.hcr-article__nav-link:hover,
.hcr-article__nav-link:focus-visible {
	border-color: var(--color-primary-400);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.hcr-article__nav-link--next {
	text-align: right;
}

.hcr-article__nav-label {
	display: block;
	color: var(--color-primary-600);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.hcr-article__nav-title {
	display: block;
	margin-top: var(--space-2);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-snug);
}

/* -------------------------------------------------------- related guides --- */

.hcr-article__related {
	background: var(--color-surface);
	border-top: var(--border-width) solid var(--color-border);
}

.hcr-article__related-title {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-tight);
}

.hcr-article__related-lede {
	max-width: var(--measure);
	margin: var(--space-3) 0 var(--space-8);
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

/* ------------------------------------------------------------ closing CTA --- */

.hcr-article__cta {
	padding-block: var(--space-section);
	background: linear-gradient(135deg, var(--color-neutral-900) 0%, var(--color-primary-900) 100%);
	color: var(--color-neutral-50);
}

.hcr-article__cta-inner {
	max-width: var(--container-max);
}

.hcr-article__cta-title {
	max-width: 28ch;
	margin: 0;
	color: var(--color-neutral-50);
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-snug);
}

.hcr-article__cta-text {
	max-width: var(--measure);
	margin: var(--space-4) 0 var(--space-8);
	color: var(--color-neutral-200);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.hcr-article__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0;
}

/* The quiet button sits on a dark band here, so it needs light borders. */
.hcr-article__cta-actions .hcr-btn--quiet {
	background: transparent;
	border-color: var(--color-neutral-400);
	color: var(--color-neutral-50);
}

.hcr-article__cta-actions .hcr-btn--quiet:hover,
.hcr-article__cta-actions .hcr-btn--quiet:focus-visible {
	background: rgba(250, 250, 249, 0.12);
	border-color: var(--color-neutral-50);
	color: var(--color-neutral-50);
}

/* --------------------------------------------------------------- focus --- */

.hcr-article a:focus-visible {
	outline: 3px solid var(--color-primary-400);
	outline-offset: 3px;
}

.hcr-article__hero a:focus-visible {
	outline-color: var(--color-accent-300);
}

/* ------------------------------------------- the non-article fallback page --- */

.hcr-single__title {
	margin: 0 0 var(--space-6);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-tight);
}

/* ----------------------------------------------------------- breakpoints --- */

@media (min-width: 48em) {
	.hcr-article__hero {
		padding-block: var(--space-20) var(--space-16);
		min-height: 24rem;
		display: flex;
		align-items: flex-end;
	}

	.hcr-article__title {
		font-size: var(--text-4xl);
	}

	.hcr-article__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hcr-article__author {
		padding: var(--space-8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hcr-article__nav-link,
	.hcr-article__back-link,
	.hcr-article__prose a,
	.hcr-article__author-link {
		transition: none;
	}

	.hcr-article__nav-link:hover,
	.hcr-article__nav-link:focus-visible {
		transform: none;
	}
}