/*
 * Broos Bakens — details theme.json can't express.
 * Keep this file small. If a rule could live in theme.json, put it there.
 */

/* Section rule: heavy ink underline beneath a section heading. */
.is-style-bb-section-rule {
	border-bottom: var(--wp--custom--rule--heavy) solid var(--wp--preset--color--ink);
	padding-bottom: 0.5rem;
}

/* Topic-coloured variants of the section rule. */
.is-style-bb-section-rule.has-topic-photography-color {
	border-bottom-color: var(--wp--preset--color--topic-photography);
}
.is-style-bb-section-rule.has-topic-development-color {
	border-bottom-color: var(--wp--preset--color--topic-development);
}
.is-style-bb-section-rule.has-cyan-deep-color {
	border-bottom-color: var(--wp--preset--color--cyan);
}

/* Field note: cyan rail down the left edge. */
.is-style-bb-rail {
	position: relative;
	padding-left: calc(var(--wp--custom--rail--width) + 0.75rem);
}
.is-style-bb-rail::before {
	content: "";
	position: absolute;
	inset: 0.15rem auto 0.15rem 0;
	width: var(--wp--custom--rail--width);
	border-radius: 2px;
	background: var(--wp--preset--color--cyan);
}

/* Marginalia: inverted card. */
.is-style-bb-inverted {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark);
	border-radius: 5px;
	padding: var(--wp--preset--spacing--40);
}
.is-style-bb-inverted :where(h1, h2, h3, h4, h5) {
	color: var(--wp--preset--color--on-dark);
}
.is-style-bb-inverted :where(p) {
	color: var(--wp--preset--color--on-dark-body);
}
.is-style-bb-inverted :where(h6) {
	color: var(--wp--preset--color--cyan);
}
.is-style-bb-inverted :where(a) {
	color: var(--wp--preset--color--cyan);
}
.is-style-bb-inverted :where(.wp-block-post-date, .wp-block-post-terms) {
	color: var(--wp--preset--color--on-dark-muted);
}

/* Thesis card on paper, with the offset shadow. */
.is-style-bb-paper-card {
	background: var(--wp--preset--color--card);
	border: 1px solid #E0DACE;
	border-radius: 5px;
	box-shadow: var(--wp--preset--shadow--offset);
	overflow: hidden;
}

/* Newsletter box. */
.is-style-bb-outline-cyan {
	border: 2px solid var(--wp--preset--color--cyan);
	border-radius: 5px;
	padding: var(--wp--preset--spacing--50);
}

/* Library covers: spine radius plus offset shadow. */
.is-style-bb-book-cover img {
	border-radius: 2px 5px 5px 2px;
	box-shadow: var(--wp--preset--shadow--offset-strong);
}

/* Topic pills — solid fills, ink text on cyan, light text on the others. */
.bb-pill {
	display: inline-block;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	line-height: 1;
	padding: 0.45rem 0.85rem;
	border-radius: 100px;
	white-space: nowrap;
}

/* Library shelf: horizontal scroll on narrow screens, grid above. */
.bb-shelf {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 96px;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.bb-shelf::-webkit-scrollbar {
	display: none;
}
.bb-shelf > * {
	scroll-snap-align: start;
}
@media (min-width: 782px) {
	.bb-shelf {
		grid-auto-flow: row;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-auto-columns: auto;
		overflow-x: visible;
		gap: var(--wp--preset--spacing--40);
	}
}

/* Two-column shell: main column first on mobile, sidebar alongside on desktop. */
.bb-shell > .wp-block-column:last-child {
	--bb-sidebar-width: 372px;
}
@media (min-width: 1024px) {
	.bb-shell {
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

/* Body copy inside notes wraps kindly. */
.bb-note-body,
.wp-block-post-excerpt__excerpt {
	text-wrap: pretty;
}