/**
 * Nonprofit directory cards.
 *
 * Scoped to the listing itself rather than to a page ID, so it works on staging and
 * live without being re-pointed, and leaves every other FacetWP listing alone.
 */

/* More air between cards than FacetWP's own grid gap allows. */
.facetwp-template[data-name="nonprofit_directory"] .fwpl-layout {
	column-gap: 34px;
	row-gap: 46px;
}

.facetwp-template[data-name="nonprofit_directory"] .fwpl-item {
	line-height: 1.25;
}

/**
 * Organization name.
 *
 * Matched to the type CAN uses elsewhere on the site rather than invented here, so the
 * directory reads as part of the same family as the Toolbox.
 */
.facetwp-template[data-name="nonprofit_directory"] .fwpl-item:nth-child(2),
.facetwp-template[data-name="nonprofit_directory"] .fwpl-item:nth-child(2) a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-style: normal;
	font-weight: 700;
	line-height: 27.3px;
	letter-spacing: 0.36px;
	text-align: left;
	height: auto;
}

.facetwp-template[data-name="nonprofit_directory"] .fwpl-item:nth-child(2) {
	margin-top: 0.55em;
}

/* Program or resource name, directly under the organization it belongs to. */
.facetwp-template[data-name="nonprofit_directory"] .fwpl-item:nth-child(3) {
	margin-top: 0.15em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-style: italic;
	line-height: 1.35;
	letter-spacing: 0.36px;
}

/* Not every organization has a program; an empty element should take no space. */
.facetwp-template[data-name="nonprofit_directory"] .fwpl-item.is-empty {
	display: none;
}

/**
 * Program name outside the directory's own layout — the Toolbox, chiefly.
 *
 * CAN's review removed the bracketed program from the title, on the grounds that the
 * directory card already prints it underneath. That is true of the directory, which
 * gives the program its own column. Everywhere else the three CDC cards would read
 * "Centers for Disease Control and Prevention" three times over with nothing to tell
 * them apart, so the [cnp_program] shortcode fills that gap and is styled to match.
 */
.cnp-program {
	display: block;
	margin-top: 0.15em;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-style: italic;
	line-height: 1.35;
	letter-spacing: 0.36px;
}

/**
 * Condition landing pages.
 *
 * [cnp_condition_nonprofits condition="Diabetes"] drops the organizations placed on a
 * condition page into whatever column Avada gives it, so the grid sizes itself from
 * the space available rather than from a fixed width.
 */
.cnp-condition-grid {
	display: grid;
	grid-template-columns: repeat(var(--cnp-columns, 3), minmax(0, 1fr));
	column-gap: 34px;
	row-gap: 46px;
	/* Stretch, so the white panels in a row end on the same line whether or not a
	   card carries a program underneath its name. */
	align-items: stretch;
}

@media (max-width: 800px) {
	.cnp-condition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
	.cnp-condition-grid { grid-template-columns: 1fr; }
}

.cnp-condition-card img {
	display: block;
	width: 100%;
	height: auto;
}

.cnp-condition-name,
.cnp-condition-name a {
	display: block;
	margin-top: 0.55em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-style: normal;
	font-weight: 700;
	line-height: 27.3px;
	letter-spacing: 0.36px;
	text-align: left;
}

/* The program sits under the name here, as it does in the directory. */
.cnp-condition-card .cnp-program {
	order: 2;
}

.cnp-condition-card {
	display: flex;
	flex-direction: column;
}

.cnp-condition-card > a:first-child,
.cnp-condition-card > div:first-child { order: 0; }
.cnp-condition-card .cnp-condition-name { order: 1; }

/**
 * The Toolbox's partner line: "Partner Organization · Family Caregiving Training".
 *
 * Specified by CAN, and deliberately not the directory's italic treatment — in the
 * Toolbox this line sits where "Article" or "Webinar" sits on every other card, so it
 * follows that convention rather than the directory's.
 */
.cnp-program--labelled {
	display: block;
	margin-top: 0;
	color: rgb(0, 0, 0);
	text-align: left;
	height: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 27.52px;
	letter-spacing: 0.36px;
}

/* Heading printed by [cnp_condition_nonprofits], so it appears only with the cards. */
.cnp-condition-heading {
	margin-top: 1.2em;
}

/* CAN's revision to the Toolbox line: looser leading than the fixed 27.52px. */
.cnp-program--labelled {
	line-height: 1.2em;
}

/**
 * Condition pages sit inside CAN's own container, which centres its text. The cards
 * should still read like the directory's, so the name and the program stay left
 * against the logo above them; only the section heading takes the centring.
 */
.cnp-condition-card .cnp-program,
.cnp-condition-card .cnp-condition-name,
.cnp-condition-card .cnp-condition-name a {
	text-align: left;
}

/**
 * Line the cards up with the partner cards directly above them.
 *
 * Avada insets a full-width column's contents further than it insets the three
 * one-third columns beside it, so the grid started a few pixels narrower than the row
 * above and the edges did not agree. Cancelling that difference and matching Avada's
 * own 25px gutter puts our cards on the same left and right edges as theirs.
 */
.cnp-condition-grid {
	margin-left: -12px;
	margin-right: -12px;
	column-gap: 25px;
}

/* The negative inset is a desktop gutter correction; narrow layouts have their own. */
@media (max-width: 800px) {
	.cnp-condition-grid {
		margin-left: 0;
		margin-right: 0;
		column-gap: 25px;
	}
}

/**
 * On a condition page the section sits inside CAN's "Resources Section" container,
 * which is a deep blue gradient. The organization name uses CAN's orange, which is
 * meant to sit on white — on that blue it is close to unreadable.
 *
 * Rather than change the brand colour, each card gets the pale backing it has in the
 * directory and the Toolbox, so the name is read against what it was designed for.
 * On a condition page with a white background this is invisible.
 */
.cnp-condition-card {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}

.cnp-condition-card .cnp-condition-name,
.cnp-condition-card .cnp-condition-name a,
.cnp-condition-card .cnp-program {
	padding-left: 14px;
	padding-right: 14px;
}

.cnp-condition-card .cnp-program {
	padding-bottom: 14px;
}

.cnp-condition-card .cnp-condition-name:last-child {
	padding-bottom: 14px;
}

/**
 * The two halves of the Toolbox line wrap naturally.
 *
 * They were briefly held together with `nowrap` so a line would break at the dot
 * rather than inside a program name. That was a mistake: an unbreakable span sets a
 * minimum width on its grid column, so the longest program name in the set widened
 * its whole column. CAN's three Toolbox columns came out 429, 457 and 518 pixels
 * wide, the third overflowed the container, and the taller images were clipped at the
 * top. Natural wrapping keeps the columns equal.
 */

/* CAN asked for a little air between the logo box and the line beneath it. */
.cnp-program--labelled {
	margin-top: 1%;
}

/**
 * Condition pages, revised after CAN's review.
 *
 * The white panel is gone: on the blue "Resources Section" the cards now read the way
 * the Caregiver Action Network Resources cards do further up the page — artwork, then
 * the name directly beneath it. The name is white because that section is dark, and
 * the program sits tight under the name rather than floating below it.
 */
.cnp-condition-card {
	background: none;
	border-radius: 0;
	overflow: visible;
}

.cnp-condition-card .cnp-condition-name,
.cnp-condition-card .cnp-condition-name a,
.cnp-condition-card .cnp-program {
	padding-left: 0;
	padding-right: 0;
}

.cnp-condition-card .cnp-program,
.cnp-condition-card .cnp-condition-name:last-child {
	padding-bottom: 0;
}

.cnp-condition-card .cnp-condition-name,
.cnp-condition-card .cnp-condition-name a {
	color: #fff;
	margin-top: 0.4em;
}

/* Directly beneath the name, not adrift from it. */
.cnp-condition-card .cnp-program {
	margin-top: 0.05em;
	color: #fff;
}

/* Matched to the "Caregiver Resources from Our Partners" heading above it. */
.cnp-condition-heading {
	color: #fff;
	text-shadow: 1px 1px 2px rgb(34, 34, 34);
}

/**
 * Give a partner card's text the full width of its column.
 *
 * CAN's Toolbox layout puts 45px of padding to the right of the title. On their own
 * cards that is a deliberate margin; on ours it was enough to push "Social Security
 * Administration" onto a second line when it needed 315px and had 309. The `:has()`
 * test means this reaches partner cards only — every other Toolbox card keeps the
 * spacing CAN designed.
 */
.fwpl-col:has(.cnp-program--labelled) .fwpl-item {
	padding-right: 0;
}