/*
 * R25 - the single article (straipsniai) and the single post: an editorial page on two edges only.
 *
 * Figma has no single-article frame (527:1178 is the listing). R23's centred head over a left-aligned
 * body gave five different left edges at 1440 (132, 240, 280, 360 and a centred back link at 630);
 * the operator called it ununiform (2026-10-21). This follows Apple Newsroom's article page
 * (.dc/r25/refs-compare.png): label, date, title and text share ONE left edge, the lead photo and
 * the wide media sit on the site's own content grid. Two edges, nothing centred-as-text:
 *
 *   grid      the site's 1176 px content container (132 px each side at 1440), as every other page
 *   column    the whole grid (operator 2026-10-21: "stay on the left as far as the header and the
 *             images are; don't make it narrower"): back link, meta, title, text, photos, the end link
 *             all start at the header's left edge and run to its right edge
 *   type      the body a size up (20/34) so the full-width line stays comfortable
 *
 * Type, colours, the category pill and the 12 px radius are the site's own (articles.css card).
 * Loaded after articles.css (alphabetical); every rule is under .mn-gn-single.mn-article, so the plain
 * text pages that share .mn-gn-single keep their own look.
 */

.mn-gn-single.mn-article {
	--mn-article-col: 100%;
	--mn-article-gap: 56px;
	padding-block: 48px 112px;
	color: var(--wp--preset--color--c-02);
}

/* the column: centred in the grid, its text left-aligned */
.mn-gn-single.mn-article :is(.mn-article__head, .mn-article__end) {
	max-width: var(--mn-article-col);
	margin-inline: auto;
	text-align: left;
}

/* ---- head: back link, meta line, title ---- */

.mn-gn-single.mn-article .mn-article__head {
	margin-bottom: 40px;
}

.mn-gn-single.mn-article .mn-article__back {
	margin: 0 0 32px;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-02);
	line-height: 20px;
}

.mn-gn-single.mn-article .mn-article__back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--c-03);
	text-decoration: none;
}

.mn-gn-single.mn-article .mn-article__back a:hover,
.mn-gn-single.mn-article .mn-article__back a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mn-gn-single.mn-article .mn-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 18px;
}

/* the listing card's category pill (articles.css .mn-gn-card__pill): #CD9F3F, 24 high, white */
.mn-gn-single.mn-article .mn-article__pill {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.mn-gn-single.mn-article .mn-article__pill .wp-block-post-terms__separator {
	display: none;
}

.mn-gn-single.mn-article .mn-article__pill a {
	display: inline-block;
	height: 24px;
	padding: 0 12px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--c-05);
	font-weight: 500;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--c-01);
	text-decoration: none;
}

/* the date in words (inc/article-date.php), quiet: the body grey at 70 % */
.mn-gn-single.mn-article .mn-article__date {
	margin: 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-02);
	line-height: 24px;
	color: rgb(66 66 66 / 0.7);
}

/* the 416:953 title style (Geist 600, #C69A37) at a size a long title fits: 48/56, left-aligned */
.mn-gn-single.mn-article .mn-article__title {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--s-15);
	line-height: 56px;
	letter-spacing: -0.01em;
	text-align: left;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ---- the lead photo: an article's featured image, or a post's first content photo ---- */

.mn-gn-single.mn-article .mn-article__hero,
.mn-gn-single.mn-article .mn-article__content--lead-photo > .wp-block-image:first-child {
	width: 100%;
	max-width: none;
	margin: 0 0 var(--mn-article-gap);
}

.mn-gn-single.mn-article .mn-article__hero img,
.mn-gn-single.mn-article .mn-article__content--lead-photo > .wp-block-image:first-child img {
	display: block;
	width: 100%;
	height: auto;
	/* the three posts' first photos are 3:2 (1080x721, 878x585, 827x585 - one an instruction drawing),
	   so 3:2 crops nothing that matters */
	aspect-ratio: 3 / 2;
	max-height: none;
	object-fit: cover;
	border-radius: 12px;
	background: var(--wp--preset--color--c-01);
}

/*
 * An article's featured image is the client's share card: the photo on the left 71.4 % (measured on all
 * five, 2026-10-21), the logo on a white panel on the right. The hero shows the photo part only, 16:9 on
 * the grid; the card itself stays as it is for the share preview and the listing. Posts have no
 * .mn-article__hero (their lead photo is the content's first image), so this is articles only.
 */
.mn-gn-single.mn-article .mn-article__hero {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
}

.mn-gn-single.mn-article .mn-article__hero img {
	position: absolute;
	top: 50%;
	left: 0;
	width: calc(100% / 0.714);
	max-width: none;
	height: auto;
	aspect-ratio: auto;
	border-radius: 0;
	transform: translateY(-50%);
}

/* ---- body: the full grid; text from the left edge, in-text photos float to the right edge ---- */

.mn-gn-single.mn-article .mn-article__content {
	display: flow-root;
	max-width: none;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-05);
	line-height: 34px;
}

.mn-gn-single.mn-article .mn-article__content > * {
	min-width: 0;
	max-width: none;
	margin: 0 0 24px;
}

.mn-gn-single.mn-article .mn-article__content > :last-child {
	margin-bottom: 0;
}

/* the first paragraph is the lead: a size up, the text black */
.mn-gn-single.mn-article .mn-article__content > p:first-of-type {
	font-size: var(--wp--preset--font-size--s-07);
	line-height: 36px;
	color: var(--wp--preset--color--c-11);
}

.mn-gn-single.mn-article .mn-article__content :where(strong, b) {
	font-weight: 600;
	color: var(--wp--preset--color--c-11);
}

.mn-gn-single.mn-article .mn-article__content a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--c-03);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.mn-gn-single.mn-article .mn-article__content > :where(h2, h3, h4) {
	margin: 48px 0 16px;
	font-weight: 600;
	color: var(--wp--preset--color--c-11);
	text-wrap: pretty;
}

.mn-gn-single.mn-article .mn-article__content > h2 {
	font-size: var(--wp--preset--font-size--s-13);
	line-height: 44px;
	letter-spacing: -0.005em;
}

.mn-gn-single.mn-article .mn-article__content > :where(h3, h4) {
	font-size: var(--wp--preset--font-size--s-11);
	line-height: 34px;
}

.mn-gn-single.mn-article .mn-article__content > :where(h2, h3, h4):first-child {
	margin-top: 0;
}

.mn-gn-single.mn-article .mn-article__content :where(ul, ol) {
	padding-left: 1.3em;
}

.mn-gn-single.mn-article .mn-article__content li {
	margin-bottom: 10px;
	padding-left: 6px;
}

.mn-gn-single.mn-article .mn-article__content li::marker {
	color: var(--wp--preset--color--c-05);
}

.mn-gn-single.mn-article .mn-article__content blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--wp--preset--color--c-05);
	font-size: var(--wp--preset--font-size--s-05);
	line-height: 32px;
}

.mn-gn-single.mn-article .mn-article__content .wp-block-buttons {
	margin: 8px 0 32px;
}

/*
 * A photo or graphic inside the text floats to the grid's right edge at its own sharp size (the articles'
 * photos are 752 px originals, the LED post's product shot 483 and its eco graphic a square), at most
 * 46 % of the grid, and the text wraps beside it: text on the header's left edge, photos on its right.
 */
.mn-gn-single.mn-article .mn-article__content > :is(.wp-block-image, p:has(> img:only-child)):not(:first-child) {
	float: right;
	clear: right;
	width: auto;
	max-width: min(46%, 560px);
	margin: 6px 0 28px 48px;
}

.mn-gn-single.mn-article .mn-article__content > :is(.wp-block-image, p:has(> img:only-child)):not(:first-child) img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 360px;
	border-radius: 12px;
}

/* a section heading, wide blocks and the end never sit beside a floated photo: each section starts clean */
.mn-gn-single.mn-article .mn-article__content > :is(h2, .wp-block-gallery, .wp-block-columns, .wp-block-separator, .wp-block-table) {
	clear: both;
}

.mn-gn-single.mn-article .mn-article__content .wp-block-image figcaption {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--s-02);
	line-height: 20px;
	color: rgb(66 66 66 / 0.7);
}

/* galleries and photo columns span the grid, as the lead photo */
.mn-gn-single.mn-article .mn-article__content > :is(.wp-block-gallery, .wp-block-columns) {
	margin: 16px 0 48px;
}

.mn-gn-single.mn-article .mn-article__content > .wp-block-gallery {
	gap: 16px;
}

.mn-gn-single.mn-article .mn-article__content > .wp-block-gallery img {
	border-radius: 12px;
}

.mn-gn-single.mn-article .mn-article__content > .wp-block-columns {
	gap: 24px;
}

.mn-gn-single.mn-article .mn-article__content .wp-block-column .wp-block-image {
	margin: 0 0 16px;
}

.mn-gn-single.mn-article .mn-article__content .wp-block-column img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 12px;
}

.mn-gn-single.mn-article .mn-article__content .wp-block-column p {
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 26px;
}

/* ---- end: a rule, then the back link again, on the column ---- */

.mn-gn-single.mn-article .mn-article__end {
	clear: both;
	margin-top: 64px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--c-15);
}

.mn-gn-single.mn-article .mn-article__end .mn-article__back {
	margin: 0;
}

/* ---- after the body: the "Straipsniai" row sits 0 under the main's own foot ---- */

.mn-gn-single.mn-article + .mn-gn-articles {
	padding-top: 0;
}

/* ---- below 782: the column is the screen less the 20 px gutter ---- */

@media (max-width: 781.98px) {
	.mn-gn-single.mn-article {
		--mn-article-gap: 32px;
		padding-block: 24px 72px;
	}

	.mn-gn-single.mn-article .mn-article__head {
		margin-bottom: 28px;
	}

	.mn-gn-single.mn-article .mn-article__back {
		margin-bottom: 20px;
	}

	.mn-gn-single.mn-article .mn-article__meta {
		margin-bottom: 14px;
	}

	.mn-gn-single.mn-article .mn-article__title {
		font-size: 30px;
		line-height: 37px;
		letter-spacing: 0;
		text-wrap: pretty;
	}

	.mn-gn-single.mn-article .mn-article__content--lead-photo > .wp-block-image:first-child img {
		aspect-ratio: 3 / 2;
		border-radius: 10px;
	}

	.mn-gn-single.mn-article .mn-article__hero {
		aspect-ratio: 4 / 3;
		border-radius: 10px;
	}

	.mn-gn-single.mn-article .mn-article__content {
		font-size: var(--wp--preset--font-size--s-03);
		line-height: 28px;
	}

	.mn-gn-single.mn-article .mn-article__content > p:first-of-type {
		font-size: var(--wp--preset--font-size--s-04);
		line-height: 30px;
	}

	.mn-gn-single.mn-article .mn-article__content > :where(h2, h3, h4) {
		margin-top: 24px;
	}

	.mn-gn-single.mn-article .mn-article__content > h2 {
		font-size: var(--wp--preset--font-size--s-09);
		line-height: 31px;
	}

	.mn-gn-single.mn-article .mn-article__content > :where(h3, h4) {
		font-size: var(--wp--preset--font-size--s-05);
		line-height: 28px;
	}

	.mn-gn-single.mn-article .mn-article__content img {
		border-radius: 10px;
	}

	.mn-gn-single.mn-article .mn-article__content > :is(.wp-block-image, p:has(> img:only-child)):not(:first-child) {
		float: none;
		max-width: 100%;
		margin: 8px 0 28px;
	}

	.mn-gn-single.mn-article .mn-article__content > .wp-block-columns:has(> .wp-block-column:nth-child(3)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}

	.mn-gn-single.mn-article .mn-article__end {
		margin-top: 40px;
	}
}