/* Styles for the generated product and category pages (products/, catalog/).
 *
 * Kept out of main.css, which is the HTML5UP template and should stay
 * untouched. Everything here is scoped to markup that only the generator
 * emits, so this file can be deleted without affecting the hand-written
 * pages.
 */

.breadcrumb {
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
	margin-bottom: 1.5em;
}

.breadcrumb a {
	border-bottom: 0;
}

.breadcrumb span {
	color: rgba(0, 0, 0, 0.75);
}

/* The extractable answer: the whole page in one paragraph, for a reader in a
 * hurry and for an answer engine that will quote exactly one block. */
.answer {
	font-size: 1.1em;
	line-height: 1.75;
	padding: 1.25em 1.5em;
	background: rgba(0, 0, 0, 0.025);
	border-left: 4px solid #f56a6a;
	margin-bottom: 2em;
}

/* Category pages list one <article> per casting. */
#main article {
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#main article:last-of-type {
	border-bottom: 0;
}

/* Same two-column spec grid the catalog listing uses, so a spec list reads
 * identically wherever it appears. main.css gives dt a bottom margin and dd a
 * left margin; both would break the grid rows, so both are reset. */
#main article dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 20px;
	row-gap: 6px;
}

#main article dt,
#main article dd {
	margin: 0;
}

@media screen and (max-width: 768px) {
	#main article dl {
		grid-template-columns: 1fr;
		row-gap: 2px;
	}

	#main article dd {
		margin-bottom: 8px;
	}
}