/**
 * Penny Brohn - page blocks.
 *
 * The cards are the design system's own .photo-card inside its .cards-grid,
 * and the wide band is its .row-featured-resource. Only three things are not
 * in the system: a neutral tag for an off-site card, a column count other
 * than three, and dropping the wide band's section padding when it is placed
 * inside page content rather than used as a full-width row.
 *
 * Every override carries one more class than the base rule, because the
 * design system runtime emits each rule three times and .fl-ds-page sits on
 * the body.
 */

body .tag-offsite {
	background: var(--ds-color-buff);
	color: var(--ds-color-navy);
}

.pb-page-blocks .sec-heading {
	margin-bottom: 26px;
}

.pb-page-blocks .cards-grid.pb-cols-1 {
	grid-template-columns: minmax(0, 560px);
}

.pb-page-blocks .cards-grid.pb-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.pb-page-blocks .cards-grid.pb-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1000px) {

	.pb-page-blocks .cards-grid.pb-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {

	.pb-page-blocks .cards-grid.pb-cols-1,
	.pb-page-blocks .cards-grid.pb-cols-2,
	.pb-page-blocks .cards-grid.pb-cols-4 {
		grid-template-columns: 1fr;
	}
}

/* Inside page content the surrounding container already supplies the rhythm,
   so the band's own section padding and inner wrap would double it. */
.inner-content .pb-page-block-wide,
.fl-ds-page .inner-content .pb-page-block-wide {
	padding: 0;
	margin: 32px 0;
	background: none;
}

.inner-content .pb-page-block-wide .wrap,
.fl-ds-page .inner-content .pb-page-block-wide .wrap {
	width: 100%;
	max-width: none;
	padding: 0;
}

/* A block with no picture drops the image area rather than showing a stand-in,
   so it needs a little more room at the top of its body. */
.pb-page-blocks .photo-card.pb-page-block--no-image .body {
	padding-top: 30px;
}

.pb-page-block-wide.pb-page-block-wide--no-image .feat-card {
	grid-template-columns: 1fr;
}

/* A block whose page is missing or still a draft. Editors only. */
.pb-page-blocks .pb-block-missing,
.fl-ds-page .pb-page-blocks .pb-block-missing {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 3px solid var(--ds-color-mulberry);
	background: var(--ds-color-buff);
	font-size: 15px;
	color: var(--ds-color-navy);
}