/**
 * Layout for news articles that carry documents.
 *
 * app.css is a compiled Tailwind build of the reference design, and the reference
 * has no document layouts in it, so the grid utilities these need — a 1fr + fixed
 * rail split, and a two-up document grid — were never generated. Hand-authored here
 * rather than hand-edited into a build artifact, the same as forms.css and
 * nav-state.css. Loaded after app.css.
 *
 * The classes are written into post content as plain markers (bff-doc-grid,
 * bff-aside, bff-doc-card); functions.php turns the links inside them into previews
 * and buttons, and single.php lifts bff-aside into the right column.
 */

/* An article whose documents sit beside the text rather than below it: the layout
   the original site uses for the legislative call to action. Stacks under 1024px,
   where a 22rem rail beside prose would leave neither enough room. */
.bff-article-grid {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.bff-article-grid {
		/* The prose column is capped at a readable measure rather than given the
		   whole of the remaining width: at the 90rem shell this article would
		   otherwise run to about 115 characters a line, and at 46rem to about 90;
		   40rem lands near 75, which is what long prose wants. The rail keeps to
		   the right edge, so the slack falls between the two columns. */
		grid-template-columns: minmax(0, 40rem) minmax(0, 22rem);
		justify-content: space-between;
		gap: 3rem;
	}
}

/* A long article wants more air between paragraphs than a card's two lines of
   summary do, which is what the 1rem in app.css is sized for. */
.bff-article-grid > .rich-content p {
	margin-bottom: 1.25rem;
}

.bff-article-aside {
	display: grid;
	gap: 2.5rem;
}

/* Two documents side by side. One document still renders full width, which is why
   this is a grid with auto-fit rather than a hard two-column rule. */
.bff-doc-grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.bff-doc-grid {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	}
}

/* Preview, name, then tracker button, bottom-aligned so a pair of cards whose
   previews differ in height still line their buttons up. */
.bff-doc-card {
	display: flex;
	flex-direction: column;
}

.bff-doc-card .bff-doc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-bottom: 0;
}

.bff-doc-card .bff-actions {
	margin-top: 1rem;
	margin-bottom: 0;
}

/* Tailwind's preflight resets headings to inherit their size and weight, and the
   reference design has no long-form article in it, so app.css styles rich-content's
   paragraphs, images and embeds and nothing else. An article with sections in it
   needs headings that read as headings. */
.rich-content h2,
.rich-content h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	font-family: var(--font-space);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-slate-900);
}

.rich-content h2 {
	font-size: 1.5rem;
	line-height: 1.25;
}

.rich-content h3 {
	font-size: 1.125rem;
	line-height: 1.4;
}

.rich-content h2:first-child,
.rich-content h3:first-child {
	margin-top: 0;
}

/* The document name, which in the reference sits under its preview as a heading
   rather than as body copy. */
.bff-doc > a:last-child {
	margin-top: 0.75rem;
}

/* A call to action's list of officials. As a run of one-line paragraphs these read
   as a wall — a dozen of them, each a role, a name and a number — so each official
   is a card, and the numbers are tel: links because the whole point of the section
   is to get the reader to call them. */
.bff-contacts {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.bff-contacts {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}
}

.bff-contact {
	border: 1px solid rgb(226 232 240 / 0.8);
	border-radius: 1rem;
	background-color: #fff;
	padding: 1rem 1.25rem;
	box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.bff-contact .bff-contact-role {
	margin-bottom: 0.4rem;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-slate-500);
}

.bff-contact .bff-contact-name {
	margin-bottom: 0.15rem;
	font-weight: 600;
	color: var(--color-slate-900);
}

.bff-contact .bff-contact-phone {
	margin-bottom: 0;
	font-variant-numeric: tabular-nums;
}

/* The rich-content wrapper underlines every link it contains, at one class plus one
   element of specificity. A button is not a text link, and `no-underline` on the
   anchor is a class short of winning that, so it is undone here — this file loads
   after app.css, so equal specificity resolves in its favour. */
.bff-actions a {
	text-decoration: none;
}