/**
 * Single record pages.
 *
 * Sized by container query, not viewport: the record sits inside whatever
 * content width Astra gives it, and that is what should decide whether the
 * overview panel sits beside the article or above it.
 */

.aasmd-single {
	container-type: inline-size;
	container-name: aasmdsingle;
	--aasmd-ink:   #16202b;
	--aasmd-muted: #5a6773;
	--aasmd-line:  #dde4ea;
	--aasmd-accent: var(--ast-global-color-0, #0071ce);
	display: grid;
	gap: 34px;
	align-items: start;
	margin-bottom: 8px;
}

/* ---------- back to the directory ---------- */
.aasmd-back {
	margin: 0 0 18px;
	font-size: 14px;
}
.aasmd-back a {
	display: inline-flex; align-items: center; gap: 7px;
	color: #5a6773; text-decoration: none !important;
	border: 1px solid #dde4ea; border-radius: 999px;
	padding: 5px 14px 5px 11px; background: #fff;
	transition: border-color .15s, color .15s;
}
.aasmd-back a:hover,
.aasmd-back a:focus-visible { color: #16202b; border-color: #b9c5cf; }
.aasmd-back span { font-size: 15px; line-height: 1; }

.aasmd-single__body > *:first-child { margin-top: 0; }

/* The article's own section headings — Summary, Mechanism, Sensors… */
.aasmd-single__body h2 {
	font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
	color: var(--aasmd-accent); margin: 1.9em 0 .5em;
}
.aasmd-single__body h2:first-child { margin-top: 0; }
.aasmd-single__body p { margin: 0 0 1em; }
.aasmd-single__body hr { border: 0; border-top: 1px solid var(--aasmd-line); margin: 1.6em 0; }

.aasmd-single__fig {
	margin: 0; border: 1px solid var(--aasmd-line); border-radius: 10px;
	overflow: hidden; background: #f2f5f8; line-height: 0;
}
.aasmd-single__fig img {
	display: block; width: 100%; height: auto;
	max-height: 260px; object-fit: contain;
}

/* ---------- overview panel ---------- */
.aasmd-ov {
	border: 1px solid var(--aasmd-line); border-radius: 10px;
	background: #fff; padding: 4px 20px 18px;
}
.aasmd-ov__h {
	font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
	color: var(--aasmd-accent); margin: 16px 0 4px;
}
.aasmd-ov dl { margin: 0; }
.aasmd-ov dt {
	font-size: 12px; font-weight: 700; letter-spacing: .03em;
	color: var(--aasmd-ink); margin: 14px 0 2px;
}
.aasmd-ov dd {
	margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--aasmd-muted);
	overflow-wrap: anywhere;
}
.aasmd-ov dd a { color: var(--aasmd-accent); }

/* ---------- related ---------- */
.aasmd-rel { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--aasmd-line); }
.aasmd-rel h2 { font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; }

.aasmd-rel__n {
	display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
	background: #eef2f6; color: var(--aasmd-muted);
	font-size: 11px; font-weight: 600; letter-spacing: 0; vertical-align: middle;
}
.aasmd-rel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.aasmd-rel__card {
	border: 1px solid var(--aasmd-line); border-radius: 9px; overflow: hidden;
	background: #fff; display: flex; flex-direction: column;
	text-decoration: none !important; color: var(--aasmd-ink);
	transition: box-shadow .16s, transform .16s;
}
.aasmd-rel__card:hover { box-shadow: 0 6px 18px rgba(0,48,91,.13); transform: translateY(-2px); }
.aasmd-rel__card * { text-decoration: none !important; }
.aasmd-rel__thumb { display: block; line-height: 0; background: #f2f5f8; }
.aasmd-rel__thumb img { display: block; width: 100%; height: 104px; object-fit: cover; }
.aasmd-rel__rule { display: block; height: 4px; }
.aasmd-rel__t { display: block; padding: 11px 13px 13px; font-size: 14px; font-weight: 600; line-height: 1.3; }

/*
 * Layout.
 *
 * Narrow: picture, then article, then the overview panel — the image is what
 * identifies the product, so on a phone it belongs above the prose rather than
 * stranded below 1,500 words of it.
 *
 * Wide: article on the left, picture and panel stacked in the right column.
 *
 * Named areas rather than source order, so the same markup produces both.
 */
.aasmd-single {
	grid-template-columns: 1fr;
	grid-template-areas: "fig" "body" "ov";
	gap: 24px;
}
.aasmd-single__fig   { grid-area: fig; }
.aasmd-single__body  { grid-area: body; }
.aasmd-single__aside { grid-area: ov; }

@container aasmdsingle (min-width: 820px) {
	.aasmd-single {
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-areas: "body fig" "body ov" "body .";
		grid-template-rows: auto auto 1fr;
		column-gap: 34px;
		row-gap: 20px;
	}
}
@media (min-width: 900px) {
	.aasmd-single {
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-areas: "body fig" "body ov" "body .";
		grid-template-rows: auto auto 1fr;
		column-gap: 34px;
		row-gap: 20px;
	}
}
@container aasmdsingle (max-width: 819px) {
	.aasmd-single {
		grid-template-columns: 1fr;
		grid-template-areas: "fig" "body" "ov";
	}
	.aasmd-single__fig img { max-height: 220px; }
}