/**
 * The CFD analysis page (template-cfd.php).
 *
 * NOT cfd.css: that is the CFD section on the services page and this is a
 * different thing on a different template.
 *
 * Almost everything here is a token or a rule that already exists elsewhere:
 * the section header is .section-header in base.css, the prose measure is
 * .prose in base.css, the list marker is .marker-list in base.css, the image
 * grid and the CTA band are components with their own files. What is left is
 * this page's own spacing, and each value below states where it comes from.
 */

.cfd-page__section {
	padding-block: var(--section-pad-y);
}

/* --------------------------------------------------------------------
 * Three columns of lists
 *
 * The deliver table's cells: 32px of inner padding and a hairline between
 * them, with the outer edges unpadded because they face the container line and
 * the container already provides that space. Taken from deliver.css, which is
 * not loaded here.
 * -------------------------------------------------------------------- */

.cfd-columns__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 64px; /* header to content: the site's section step */
}

.cfd-columns__cell {
	padding-right: 32px;
	border-right: 1px solid var(--color-border-subtle);
}

/* Middle cell: padded on both sides, because both face a hairline. */
.cfd-columns__cell:nth-child(2) {
	padding-left: 32px;
}

/* Last cell faces the container line on its right, so it has neither the
   padding nor the rule. */
.cfd-columns__cell:last-child {
	padding-right: 0;
	padding-left: 32px;
	border-right: 0;
}

.cfd-columns__title {
	margin-bottom: 24px; /* the job section title's gap to its list */
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-line);
	letter-spacing: var(--type-h3-spacing);
	font-weight: var(--type-h3-weight);
	color: var(--color-heading-text);
}

.cfd-columns__list li {
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-body-text);
}

.cfd-columns__list li + li {
	margin-top: 12px; /* the job list's item spacing, the site's list treatment */
}

/* --------------------------------------------------------------------
 * Images
 * -------------------------------------------------------------------- */

/* The carousel's offset from its header, and it belongs to the SECTION rather
   than to the component: .image-carousel is shared, and how far it sits from
   whatever introduces it is the caller's business. The services carousel puts
   the same 64px on its own .services__carousel wrapper for the same reason.

   This replaces a rule on .cfd-images__grid, which stopped existing when the
   carousel moved outside the container - the wrapper went and took the offset
   with it, leaving the track against the description. */
.cfd-images .image-carousel {
	margin-top: 64px;
}

/* --------------------------------------------------------------------
 * Boxes
 *
 * Cards, so the card idiom: 32px of padding for a card under half the
 * container, which three across a 1312 container is. 16px between them is the
 * site's grid gap.
 * -------------------------------------------------------------------- */

.cfd-boxes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}

.cfd-boxes__box {
	padding: 32px;
	border-radius: 6px;
	background-color: var(--color-surface-card);
}

.cfd-boxes__title {
	margin-bottom: 16px;
	font-size: var(--type-h4-size);
	line-height: var(--type-h4-line);
	letter-spacing: var(--type-h4-spacing);
	font-weight: var(--type-h4-weight);
	color: var(--color-heading-text);
}

.cfd-boxes__text {
	margin: 0;
	font-size: var(--type-card-body-size);
	line-height: var(--type-body-line);
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * One column at 1024
 *
 * The site's single layout switch. The three-column blocks stack, and with
 * them the vertical rules become horizontal ones: a cell no longer has a
 * neighbour to its right, it has one below.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.cfd-columns__grid,
	.cfd-boxes__grid {
		grid-template-columns: 1fr;
	}


	.cfd-columns__grid {
		margin-top: 48px; /* the stacking step the other sections use here */
	}

	.cfd-images .image-carousel,
	.cfd-boxes__grid {
		margin-top: 48px;
	}

	/* Padding and rules re-cast for a stack: 32px above and below the line
	   between cells, nothing at the outer edges. */
	.cfd-columns__cell,
	.cfd-columns__cell:nth-child(2),
	.cfd-columns__cell:last-child {
		padding-inline: 0;
		border-right: 0;
	}

	.cfd-columns__cell + .cfd-columns__cell {
		margin-top: 32px;
		padding-top: 32px;
		border-top: 1px solid var(--color-border-subtle);
	}


}