/* Domain identity: the seven gates, their forums, and the strip that carries
   a domain's colour down into every forum and topic beneath it. Loaded only on
   the screens that show a domain. */

/* domains */
.bnb-domains-index .bnb-page-intro > p {
	max-inline-size: 40rem;
}

.bnb-domain-list {
	align-items: start;
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bnb-domain-panel {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-lg);
	box-shadow: var(--bnb-shadow-sm);
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	overflow: hidden;
}

/* No band and two links: a row of its own. */
.bnb-domain-panel--notices {
	grid-column: 1 / -1;
}

.bnb-domain-panel--notices > h2 {
	font-size: 1.35rem;
	line-height: 1.25;
	margin: 1.15rem 1.35rem 0;
}

.bnb-domain-panel--notices > .bnb-domain-forum-list {
	margin-block-end: 1.2rem;
}

.bnb-domain-band {
	align-items: center;
	background: linear-gradient(135deg, var(--bnb-domain-band), color-mix(in srgb, var(--bnb-domain-band) 65%, var(--bnb-navy-950)));
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	text-decoration: none;
}

/* The domain's artwork rides as the last flex item in the band, beside the
   words rather than under them, so the white text keeps its measured contrast
   against the flat brand colour. It drops out when the row has to wrap. */
.bnb-domain-panel.has-art .bnb-domain-band::after {
	background-image: var(--bnb-domain-art);
	background-position: center;
	background-size: cover;
	block-size: 64px;
	border-radius: 12px;
	content: "";
	flex: none;
	inline-size: 172px;
}

@media (width < 52rem) {
	.bnb-domain-panel.has-art .bnb-domain-band::after {
		display: none;
	}
}

.bnb-domain-band:hover h2,
.bnb-domain-band:focus-visible h2 {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bnb-domain-band h2,
.bnb-domain-band span {
	color: #fff;
	margin: 0;
}

.bnb-domain-band h2 {
	font-size: 1.35rem;
	line-height: 1.25;
}

.bnb-domain-band-text {
	display: flex;
	flex: 1 1 14rem;
	flex-direction: column;
	gap: 0.15rem;
	min-inline-size: 0;
}

.bnb-domain-band-icon {
	background: rgb(255 255 255 / 14%);
	block-size: 52px;
	border-radius: 14px;
	display: grid;
	flex: none;
	inline-size: 52px;
	place-items: center;
}

.bnb-domain-band-icon svg,

.bnb-domain-eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.bnb-domain-tagline {
	font-size: 0.98rem;
	opacity: 0.92;
}

.bnb-domain-stats {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.92rem;
	gap: 0.35rem 1rem;
}

.bnb-domain-lead {
	color: var(--bnb-ink-soft);
	margin: 1rem 1.35rem 0;
}

.bnb-domain-forum-list {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	list-style: none;
	margin: 0.75rem 1.35rem 0.5rem;
	padding: 0;
}

/* The row is two columns and two rows, not one flex line.
   A forum that has sections inside it renders that list as a third child of the
   same <li>. While the row was a flex line, that list sat BESIDE the forum's own
   link and took the width away from it: inside an 11rem grid column the link was
   squeezed to zero and `overflow-wrap: anywhere` then broke the Hebrew title into
   one letter per line, 245px tall. A grid keeps the link and its count on the
   first row and drops the sections underneath, where the indent already assumed
   they would be. */
.bnb-domain-forum-list li {
	align-content: start;
	align-items: center;
	border-block-end: 1px solid var(--bnb-line);
	column-gap: 0.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: minmax(44px, auto);
	min-block-size: 44px;
	min-inline-size: 0;
}

.bnb-domain-forum-list li > .bnb-domain-subforum-list {
	grid-column: 1 / -1;
}

.bnb-domain-forum-list a {
	color: var(--bnb-ink);
	font-weight: 600;
	min-inline-size: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.bnb-domain-forum-list a:hover,
.bnb-domain-forum-list a:focus-visible {
	color: var(--bnb-domain-band);
	text-decoration: underline;
}

.bnb-domain-forum-list .bnb-domain-count {
	color: var(--bnb-muted);
	flex: none;
	font-size: 0.85rem;
}

.bnb-domain-panel > .bnb-card-link {
	align-self: flex-start;
	margin: 0.5rem 1.35rem 1.2rem;
}

.bnb-category-latest {
	margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
}

@media (max-width: 40rem) {
	.bnb-domain-forum-list,
	.bnb-domain-lead {
		margin-inline: 0.75rem;
	}
}

.bnb-domain-hero {
	align-items: center;
	background: linear-gradient(135deg, var(--bnb-domain-band), color-mix(in srgb, var(--bnb-domain-band) 60%, var(--bnb-navy-950)));
	border-radius: var(--bnb-r-lg);
	color: #fff;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	margin-block-end: 2.5rem;
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.bnb-domain-hero h1,
.bnb-domain-hero p {
	color: #fff;
}

.bnb-domain-hero h1 {
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	margin-block: 0 0.5rem;
}

.bnb-domain-hero .bnb-eyebrow {
	color: var(--bnb-gold-bright);
}

.bnb-domain-hero .bnb-domain-tagline {
	font-size: 1.15rem;
	margin-block: 0 1rem;
}

.bnb-domain-hero .bnb-domain-stats {
	font-size: 1rem;
}

.bnb-domain-cta {
	margin-block: 1.25rem 0;
}

.bnb-domain-hero-art svg,
.bnb-domain-hero-art img {
	block-size: auto;
	display: block;
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: 22rem;
}

.bnb-domain-about {
	color: var(--bnb-ink-soft);
	font-size: 1.05rem;
	margin-block-end: 2.5rem;
	max-inline-size: 54rem;
}

.bnb-domain-about p {
	margin-block: 0 0.75rem;
}

.bnb-domain-forum-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bnb-domain-forum-card {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-inline-start: 5px solid var(--bnb-domain);
	border-radius: var(--bnb-r);
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-inline-size: 0;
	padding: 1.2rem 1.25rem;
}

/* The owner's cover art sits inside the card, never behind the words: the
   heading keeps the plain surface it was contrast-checked against. */
.bnb-domain-forum-card.has-cover {
	overflow: hidden;
	padding-block-start: 0;
}

.bnb-domain-forum-cover {
	margin-block: 0 0.5rem;
	margin-inline: -1.25rem;
}

.bnb-domain-forum-cover img {
	aspect-ratio: 16 / 7;
	block-size: auto;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.bnb-domain-filter {
	display: grid;
	gap: 0.35rem;
	margin-block-end: 1.25rem;
	max-inline-size: 30rem;
}

.bnb-domain-filter label {
	font-weight: 700;
}

.bnb-domain-filter-status {
	color: var(--bnb-muted);
	font-size: 0.9rem;
	margin: 0;
	min-block-size: 1.3em;
}

/* The sections one level below, so every forum in the community is reachable
   from the map rather than only the domain's own headings. */
.bnb-domain-subforum-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.75rem;
	list-style: none;
	margin: 0.25rem 0 0.5rem;
	padding-inline: 1.9rem 0;
}

.bnb-domain-subforum-list a {
	color: var(--bnb-muted);
	font-size: 0.86rem;
}

.bnb-domain-subforum-list a:hover {
	color: var(--bnb-domain-band);
}

.bnb-domain-forum-card h3 {
	font-size: 1.15rem;
	margin: 0;
}

.bnb-domain-forum-card h3 a {
	color: var(--bnb-ink);
	text-decoration: none;
}

.bnb-domain-forum-card h3 a:hover,
.bnb-domain-forum-card h3 a:focus-visible {
	color: var(--bnb-domain-band);
	text-decoration: underline;
}

.bnb-domain-forum-card p {
	color: var(--bnb-muted);
	font-size: 0.95rem;
	margin: 0;
}

.bnb-domain-meta {
	color: var(--bnb-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.88rem;
	gap: 0.35rem 0.75rem;
	margin-block-start: auto;
}

.bnb-domain-forum-card .bnb-card-link {
	align-self: flex-start;
}

.bnb-domain-strip svg {
	block-size: 22px;
	color: var(--bnb-domain-band);
	inline-size: 22px;
}

@media (max-width: 60rem) {
	.bnb-domain-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bnb-domain-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.bnb-domain-hero-art {
		margin-inline: auto;
		max-inline-size: 16rem;
	}

	.bnb-domain-forum-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.bnb-domain-forum-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bnb-domain-forum-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* media kit */
.bnb-page-intro--art {
	align-items: center;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	max-inline-size: none;
}

.bnb-page-intro-art {
	block-size: auto;
	border-radius: var(--bnb-r-lg);
	box-shadow: var(--bnb-shadow);
	inline-size: 100%;
}

.bnb-forum-icon {
	block-size: 40px;
	border-radius: 10px;
	flex: none;
	inline-size: 40px;
	margin-inline-end: 0.6rem;
	vertical-align: middle;
}

.bnb-domain-forum-list .bnb-forum-icon {
	block-size: 28px;
	border-radius: 8px;
	inline-size: 28px;
	margin-inline-end: 0.45rem;
}

.bnb-domain-forum-list a {
	align-items: center;
	display: inline-flex;
	gap: 0;
	min-block-size: 44px;
}

.bnb-domain-forum-card h3 {
	align-items: center;
	display: flex;
}

@media (max-width: 60rem) {
	.bnb-page-intro--art {
		grid-template-columns: minmax(0, 1fr);
	}

	.bnb-page-intro-art {
		max-inline-size: 28rem;
	}
}

/* The filter sets `hidden` on what should go away, and `hidden` is only a
   default of `display: none` — every element it touches here has a `display`
   of its own further up this file, which wins. So the box counted matches,
   announced them, and hid nothing. This puts the attribute back in charge of
   exactly the three things the filter touches. */
.bnb-domain-panel[hidden],
.bnb-domain-filter[hidden],
.bnb-domain-forum-list li[hidden] {
	display: none;
}

/* Every other link in the product answers to the 44px rule; these were 23.4px.
   The rule lives in the always-loaded sheet, which sits at its ceiling, so the
   declaration belongs here — on the page that actually renders them. */
.bnb-domain-subforum-list a {
	align-items: center;
	display: inline-flex;
	min-block-size: 44px;
}