/* Front-page blocks. Colours and type come from theme.json presets, so a child
   theme or a style variation restyles these without touching this file. */

/* -- Lead story ---------------------------------------------------------- */
.bhb-lead__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--wp--preset--color--ink); }
.bhb-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.bhb-lead__eyebrow {
	display: inline-block; margin-top: 20px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .1em;
	color: var(--wp--preset--color--brass);
	border-bottom: 1px solid var(--wp--preset--color--brass); padding-bottom: 2px;
}
.bhb-lead__title { font-family: var(--wp--preset--font-family--display); font-size: 2rem; line-height: 1.08; margin: 14px 0 12px; }
.bhb-lead__excerpt { margin-bottom: 12px; }
.bhb-lead__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .05em; color: var(--wp--preset--color--rust);
}

/* -- River --------------------------------------------------------------- */
.bhb-river__head {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .12em;
	color: var(--wp--preset--color--brass);
	padding-bottom: 10px; border-bottom: 2px solid var(--wp--preset--color--ink); margin-bottom: 4px;
}
.bhb-river__list { list-style: none; margin: 0; padding: 0; }
.bhb-river__item {
	display: grid; grid-template-columns: 78px 1fr; gap: 16px;
	padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--paper-line);
}
.bhb-river__item:last-child { border-bottom: 0; }
.bhb-river__thumb { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--wp--preset--color--parchment-dim); }
.bhb-river__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bhb-river__meta {
	display: block; font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--brass); margin-bottom: 4px;
}
.bhb-river__title { font-family: var(--wp--preset--font-family--display); font-size: 1rem; line-height: 1.3; margin: 0; }

/* -- Builds: grid and scroller ------------------------------------------- */
.bhb-builds__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.bhb-builds__heading { font-family: var(--wp--preset--font-family--display); margin: 0; }
.bhb-builds__count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--brass);
}
.bhb-builds__frame { position: relative; }

.bhb-builds--grid .bhb-builds__track {
	display: grid; gap: 26px;
	grid-template-columns: repeat(var(--bhb-cols, 4), minmax(0, 1fr));
}
.bhb-builds--grid.cols-2 { --bhb-cols: 2; }
.bhb-builds--grid.cols-3 { --bhb-cols: 3; }
.bhb-builds--grid.cols-4 { --bhb-cols: 4; }
.bhb-builds--grid.cols-5 { --bhb-cols: 5; }
.bhb-builds--grid.cols-6 { --bhb-cols: 6; }

.bhb-builds--scroller .bhb-builds__track {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--bhb-show, 4) - 1) * 26px) / var(--bhb-show, 4));
	gap: 26px; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.bhb-builds--scroller .bhb-builds__track::-webkit-scrollbar { display: none; }
.bhb-builds--scroller .bhb-builds__track > * { scroll-snap-align: start; }
.bhb-builds--scroller.show-2 { --bhb-show: 2; }
.bhb-builds--scroller.show-3 { --bhb-show: 3; }
.bhb-builds--scroller.show-4 { --bhb-show: 4; }
.bhb-builds--scroller.show-5 { --bhb-show: 5; }
.bhb-builds--scroller.show-6 { --bhb-show: 6; }

.bhb-builds__nav {
	position: absolute; top: 30%; z-index: 3; width: 40px; height: 40px; padding: 0; cursor: pointer;
	background: var(--wp--preset--color--parchment); color: var(--wp--preset--color--ink-text);
	border: 1px solid var(--wp--preset--color--ink); border-radius: 0; line-height: 1;
}
.bhb-builds__nav--prev { left: -20px; }
.bhb-builds__nav--next { right: -20px; }
.bhb-builds__nav:disabled {
	opacity: .35;
	cursor: default;
	box-shadow: none;
}

.bhb-builds__dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.bhb-builds__dot {
	width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
	background: transparent; border: 1px solid var(--wp--preset--color--brass);
}
.bhb-builds__dot[aria-selected="true"] { background: var(--wp--preset--color--brass); }

.bhb-build-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; }
.bhb-build-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bhb-build-card:hover .bhb-build-card__media img { transform: scale(1.04); }
.bhb-build-card__meta {
	display: block; margin-top: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .07em; color: var(--wp--preset--color--brass);
}
.bhb-build-card__title { font-family: var(--wp--preset--font-family--display); font-size: 1rem; line-height: 1.28; margin: 6px 0 0; }
.bhb-build-card__date {
	margin-top: 8px; font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption); color: #8b8266;
}

/* -- Astro spread -------------------------------------------------------- */
.bhb-spread { background: var(--wp--preset--color--indigo-deep); color: var(--wp--preset--color--cream-text); }
.bhb-spread__inner {
	display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
	max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 64px 0;
}
.bhb-spread__media { display: block; aspect-ratio: 4/3; overflow: hidden; border: 1px solid rgba(239,233,218,.15); }
.bhb-spread__media img { width: 100%; height: 100%; object-fit: cover; }
.bhb-spread__eyebrow {
	display: block; margin-bottom: 16px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .12em; color: var(--wp--preset--color--brass-bright);
}
.bhb-spread__title { font-family: var(--wp--preset--font-family--display); font-size: 2rem; line-height: 1.1; margin: 0 0 18px; }
.bhb-spread__intro { color: rgba(239,233,218,.8); }
.bhb-spread__stats { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 24px; }
.bhb-spread__stat {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .06em; color: rgba(239,233,218,.65);
}
.bhb-spread__stat b { display: block; font-size: 1.1rem; letter-spacing: 0; color: var(--wp--preset--color--brass-bright); }

/* -- Blueprint hero ------------------------------------------------------ */
.bhb-hero { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream-text); }
.bhb-hero__plan {
	padding: 64px 56px;
	background-image:
		linear-gradient(rgba(239,233,218,.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(239,233,218,.07) 1px, transparent 1px);
	background-size: 34px 34px;
}
.bhb-hero__eyebrow {
	display: block; margin-bottom: 22px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .14em; color: var(--wp--preset--color--brass-bright);
}
.bhb-hero__title { font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; margin: 0 0 20px; }
.bhb-hero__accent { display: block; color: var(--wp--preset--color--brass-bright); }
.bhb-hero__lede { max-width: 42ch; color: rgba(239,233,218,.78); }
.bhb-hero__scales { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 34px; }
.bhb-hero__scales a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .06em; color: rgba(239,233,218,.6);
}
.bhb-hero__sky { position: relative; background: var(--wp--preset--color--indigo-deep); min-height: 380px; overflow: hidden; }
.bhb-hero__sky .bhb-starfield { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bhb-hero__card {
	position: absolute; left: 8%; right: 8%; bottom: 12%;
	display: block; padding: 18px 20px;
	border: 1px solid var(--wp--preset--color--brass); background: rgba(23,30,51,.72);
	color: var(--wp--preset--color--cream-text);
}
.bhb-hero__card-eyebrow {
	display: block; margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .1em; color: var(--wp--preset--color--brass-bright);
}
.bhb-hero__card p { margin: 0; }

/* -- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.bhb-hero, .bhb-spread__inner { grid-template-columns: 1fr; }
	.bhb-hero__plan { padding: 44px 24px; }
	.bhb-builds--grid .bhb-builds__track { --bhb-cols: 2; }
	.bhb-builds--scroller .bhb-builds__track { --bhb-show: 2.2; }
	.bhb-builds__nav { display: none; }
}
@media (max-width: 520px) {
	.bhb-builds--grid .bhb-builds__track { --bhb-cols: 1; }
	.bhb-builds--scroller .bhb-builds__track { --bhb-show: 1.15; }
}

/* Headline links take the surrounding text colour, not the link colour: a
   whole page of rust headings reads as a page of unvisited links. */
.bhb-lead__title a,
.bhb-river__title a,
.bhb-build-card__title a { color: inherit; }
.bhb-lead__title a:hover,
.bhb-river__title a:hover,
.bhb-build-card__title a:hover { color: var(--wp--preset--color--rust); }

.bhb-spread__title a { color: var(--wp--preset--color--cream-text); }
.bhb-spread__title a:hover { color: var(--wp--preset--color--brass-bright); }