/*
 * SECTION:  Product page: description and book details
 * File:     assets/css/pages/product/sol-product-about.css
 * Used by:  template-parts/product/sol-product-about.php
 * To remove: delete this file and its line in inc/assets.php (handle "sol-product-about").
 */

.sol-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
}

.sol-about h2 {
	margin-bottom: 18px;
}

.sol-prose {
	max-width: 64ch;
	color: var(--sol-muted);
	font-size: 1.0625rem;
	line-height: 1.8;
}

/* First paragraph reads as an introduction. */
.sol-prose > p:first-child {
	color: var(--sol-text);
	font: 500 clamp(1.15rem, 1rem + 0.7vw, 1.4rem)/1.6 var(--sol-font-serif);
}

.sol-details {
	margin: 0;
}

.sol-details div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--sol-line);
	font-size: var(--sol-text-sm);
}

.sol-details dt {
	flex: none;
	color: var(--sol-muted);
}

.sol-details dd {
	margin: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

@media (min-width: 900px) {
	.sol-about {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 72px;
	}
}

/* Text and links follow the theme colors in light and dark mode. The doubled class is
   stronger than the Elementor kit, which would color the links black. */
.sol-about.sol-about,
.sol-details.sol-details dd {
	color: var(--sol-text);
}

.sol-details.sol-details dd a {
	color: var(--sol-text);
	text-decoration-color: var(--sol-line);
	text-underline-offset: 3px;
}

.sol-details.sol-details dd a:hover {
	color: var(--sol-gold-text);
}