/* Beautify Description — the CSS half of father-x's description rewrite
 * (app/modules/magic_builder/services/description_rewrite.py).
 *
 * Requested by the two description renderers (journal3/product_tabs.php,
 * journal3/blocks.php) ONLY once the pass has actually run, so a product whose
 * description was never beautified never asks for this file.
 *
 * Every rule is scoped to .fs-beautified, the wrapper core's setProductDescription
 * adds to the rewrite. Nothing here can match markup the pass has not produced.
 *
 * WHY THERE IS A CSS HALF AT ALL. Stripping the supplier's inline typography hands
 * the description back to the theme's cascade — and for this block the theme has
 * nothing to say. Every rule in style.min.css that mentions .block-content sets
 * margin, border-radius or position; not one sets font-size, font-family,
 * line-height or max-width. Worse, the theme ends a long selector list with a global
 * `p{margin:0}`, so a properly paragraphed description renders as one unbroken wall.
 * Markup alone could not have fixed that.
 *
 * Deliberately NOT here: font-family, and any font-size for body copy. The pass
 * removes the supplier's, which lets the page's own typography apply — restating it
 * here would fight the merchant's skin instead of deferring to it. Headings are the
 * one exception, and only because they have to land somewhere once their inline size
 * is gone; the sizes below are relative, so the merchant's base size still governs. */

.fs-beautified {
	line-height: 1.7;
}

/* The `p{margin:0}` repair. Scoped to this block, so the theme's global rule is
 * untouched everywhere else. */
.fs-beautified p {
	margin: 0 0 1em;
}

.fs-beautified > *:last-child,
.fs-beautified p:last-child {
	margin-bottom: 0;
}

/* THE POINT OF THE DEMOTION IS THE SIZE, NOT THE TAG NAME. The pass leaves only h5
 * and h6, and takes the supplier's inline font-size off with them — which is what
 * lets these land at all. A supplier heading is meant to read as a subheading inside
 * someone else's page, not to compete with the product title above it, so the whole
 * range is one step of weight and barely one of size.
 *
 * h1–h4 are still listed because they cost nothing and cap anything that reaches
 * this block by a route the pass did not produce. */
.fs-beautified h1,
.fs-beautified h2,
.fs-beautified h3,
.fs-beautified h4,
.fs-beautified h5,
.fs-beautified h6 {
	margin: 1.5em 0 0.5em;
	line-height: 1.35;
	font-weight: 600;
}

.fs-beautified > :first-child {
	margin-top: 0;
}

.fs-beautified h1,
.fs-beautified h2,
.fs-beautified h3,
.fs-beautified h4,
.fs-beautified h5 { font-size: 1.1em; }

.fs-beautified h6 { font-size: 1em; }

/* Supplier markup routinely ships lists with the browser's indent stripped by an
 * inline style the pass has just removed — leaving the bullets outside the text. */
.fs-beautified ul,
.fs-beautified ol {
	margin: 0 0 1em;
	padding-inline-start: 1.5em;
}

.fs-beautified li {
	margin-bottom: 0.4em;
}

/* Logical properties throughout: these stores run Arabic, and a `padding-left`
 * here would indent the wrong side of every list on an RTL page. */
.fs-beautified blockquote {
	margin: 1em 0;
	padding-inline-start: 1em;
	border-inline-start: 3px solid rgba(0, 0, 0, 0.12);
}

/* ── MEDIA ─────────────────────────────────────────────────────────────────
 * Nothing in a description may be wider than the column it sits in. This is the
 * cap; the rewrite's `sanitise` strips every inline `style`, including the pinned
 * pixel dimensions that would otherwise outrank it (an inline style beats every
 * stylesheet, so the markup has to give way first — CSS alone cannot do this half).
 *
 * The `width`/`height` ATTRIBUTES are deliberately left on `<img>` and `<video>`.
 * They lose to any author rule, so they cannot fight this — and the browser derives
 * the element's aspect ratio from them, which both keeps the scaling honest and
 * reserves the right space before the file arrives, so the text below does not jump
 * as the page loads. Measured: `width="750" height="500"` in a 360px column renders
 * 360×240 under these rules, exactly 3:2. */
.fs-beautified img,
.fs-beautified video,
.fs-beautified iframe,
.fs-beautified embed,
.fs-beautified object,
.fs-beautified svg {
	max-width: 100%;
}

/* An image knows its own proportions, so `auto` scales it rather than squashing it.
 * `object-fit` is a backstop and normally does nothing: if anything this pass cannot
 * reach (a `<style>` block inside the description, a theme rule) pins both
 * dimensions, the picture is fitted inside that box instead of being stretched to
 * fill it. */
.fs-beautified img,
.fs-beautified video {
	height: auto;
	object-fit: contain;
}

/* AN EMBED IS NOT AN IMAGE. It has no intrinsic size, so `height: auto` resolves to
 * the 150px CSS default and a video collapses to a sliver — measured at 364×154 for
 * a 560×315 iframe. The rewrite's `sanitise` (`_fit_embeds`) writes the ratio from
 * the element's own width/height attributes, and this rule scales only the embeds
 * that got one.
 * An embed whose ratio could not be derived keeps its stated height, which is
 * imperfect on a narrow screen and is not a collapsed frame. */
.fs-beautified [style*="aspect-ratio"] {
	height: auto;
}

.fs-beautified img {
	display: block;
	margin: 0 auto 1em;
}

/* A 750px spec table cannot be made to fit a 360px screen, so it is given somewhere
 * to go instead of taking the page with it. */
.fs-beautified table {
	display: block;
	width: 100%;
	overflow-x: auto;
	margin: 0 0 1em;
	border-collapse: collapse;
}

.fs-beautified th,
.fs-beautified td {
	padding: 0.5em 0.75em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	text-align: start;
	vertical-align: top;
}

/* Suppliers wrap whole descriptions in a div per section; without this the sections
 * run together now that their inline margins are gone. */
.fs-beautified > div + div {
	margin-top: 1em;
}