/*
 * 40 — Brand listing page (templates/single-at_biz_dir.html).
 * 8/4 split on desktop: media and body on the left; Shop button then facts on the right.
 * Mobile order follows the DOM: image, Shop button + facts, then the write-up. Reading order
 * and keyboard order are the same at every width.
 */

.cfb-listing__head {
	margin-bottom: var(--wp--preset--spacing--50);
}

.cfb-listing__kicker {
	color: var(--wp--preset--color--stone);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--15);
}

.cfb-listing__kicker a {
	color: inherit;
}

.cfb-listing__title {
	letter-spacing: var(--wp--custom--tracking--display);
	margin: 0;
	max-width: 18ch;
}

/* Grid */
.cfb-listing__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"media"
		"aside"
		"body";
	gap: var(--wp--preset--spacing--50);
}

.cfb-listing__grid > * {
	margin-block: 0;
}

.cfb-listing__media { grid-area: media; }
.cfb-listing__aside { grid-area: aside; }
.cfb-listing__body  { grid-area: body; }

@media (min-width: 782px) {
	.cfb-listing__grid {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		grid-template-areas:
			"media aside"
			"body  aside";
		column-gap: var(--wp--preset--spacing--60);
	}

	/* Not sticky: with real facts the panel is taller than the viewport, so pinning it hid the
	   bottom rows. The Shop button sits first in the aside instead. */
	.cfb-listing__aside {
		align-self: start;
	}
}

/* Media: brand image on a paper-deep plate, square corners, never cropped. */
.cfb-listing__media .wp-block-post-featured-image {
	margin: 0;
	background-color: var(--wp--preset--color--paper-deep);
	padding: var(--wp--preset--spacing--40);
}

/* Facts panel: hairline rules, no card, no shadow. */
.cfb-facts {
	border-top: var(--wp--custom--rule-heavy) solid var(--wp--preset--color--ink);
	padding-top: var(--wp--preset--spacing--20);
}

.cfb-facts__heading,
.cfb-verdict__heading,
.cfb-listing__section-title {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--heading);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.cfb-facts__list {
	margin: 0;
}

.cfb-facts__row {
	padding: var(--wp--preset--spacing--15) 0;
	border-bottom: var(--wp--custom--rule) solid var(--wp--preset--color--line);
}

.cfb-facts__row dt {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--stone);
}

.cfb-facts__row dd {
	margin: 0;
	line-height: var(--wp--custom--line-height--tight);
}

/* "Not for" is the trust-builder: give it the clay rule so it can't be skimmed past. */
.cfb-facts__row--not_for {
	border-left: var(--wp--custom--rule-heavy) solid var(--wp--preset--color--clay);
	padding-left: var(--wp--preset--spacing--20);
}

.cfb-facts__row--not_for dt {
	color: var(--wp--preset--color--clay);
}

/* Checklist row: a stone rule, not clay. It's disclosure, not a warning. */
.cfb-facts__row--checklist {
	border-left: var(--wp--custom--rule-heavy) solid var(--wp--preset--color--stone);
	padding-left: var(--wp--preset--spacing--20);
}

.cfb-facts__row--checklist dd a {
	white-space: nowrap;
}

/* Shop button */
.cfb-cta {
	margin-bottom: var(--wp--preset--spacing--40);
}

.cfb-cta__button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	min-height: 48px;
	text-decoration: none;
}

.cfb-cta__host,
.cfb-cta__disclosure {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--stone);
	margin: var(--wp--preset--spacing--10) 0 0;
}

/* Body: write-up at reading measure. */
.cfb-listing__body {
	max-width: var(--wp--style--global--content-size);
}

.cfb-listing__body > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

/* Verdict: the reason to visit. Instrument Serif, halftone behind it (one of max two per page). */
.cfb-verdict {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--line);
	border-bottom: var(--wp--custom--rule) solid var(--wp--preset--color--line);
}

.cfb-verdict__body p {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: var(--wp--custom--line-height--tight);
	margin: 0;
}

.cfb-verdict__body p + p {
	margin-top: var(--wp--preset--spacing--20);
}

.cfb-listing__tags {
	color: var(--wp--preset--color--stone);
}

/* Visible only to logged-in editors (rendered server-side behind current_user_can). */
.cfb-editor-note {
	font-size: var(--wp--preset--font-size--small);
	border: var(--wp--custom--rule) dashed var(--wp--preset--color--stone);
	padding: var(--wp--preset--spacing--15);
	color: var(--wp--preset--color--stone);
}