/* ==========================================================================
   Just Name IT, ny design: Nyheter and the news-type views (F-0091)
   --------------------------------------------------------------------------
   Loaded on /nyheter/ and every news-type view, with their /page/N/
   (inc/news.php). The server puts the rendered trio (`nyheter`: today's
   green triangle, lilac square and yellow star as forms) where Nyheter's
   flat motif was, with today's motif classes, so sections.css still places
   it (absolute, right, vertically centred) and hides it on phones. This
   layer changes only its size: larger, so it fills the space (Director
   2026-10-26: "På Nyheter till exempel får figuren gärna ta mer plats. Fyll
   ut så att det ser bra ut. Gäller på alla platser."), sized by width
   instead of by the text's height:
   - 20rem wide from 48em, 28rem from 64em (today's motif 12rem and 14rem);
   - the text keeps the rest: the form's width plus --space-60, or
     --space-80 from 64em;
   - the head is at least as tall as the form, also on a view without an
     intro (round 8b).
   Everything else on these pages is today's: the list, the cards, the
   filters, the pagination and the signup band.

   Every selector names the head's class `.section-news-head`, which the
   server adds in the new design only (check_design.py, page stylesheets).
   ========================================================================== */

/* The trio's height over its width: the manifest's 930 px file
   (assets/forms/manifest.json, `nyheter-morkbla`); NyNewsTest checks it. */
.section-news-head {
	--ny-news-ratio: 0.5269;
}

.section-news-head > .ny-news-form img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 48em) {

	.page-head.section-news-head:has(> .ny-news-form) {
		--ny-news-w: 20rem;
		min-height: calc(var(--ny-news-w) * var(--ny-news-ratio) + 2 * var(--space-70));
		padding-inline-end: calc(var(--ny-news-w) + var(--space-60));
	}

	/* Today's rule sizes the square motif by the text's height (sections.css);
	   the picture is sized by its width. */
	.section-news-head > .motif.ny-news-form {
		width: var(--ny-news-w);
		height: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: auto;
	}
}

@media (min-width: 64em) {

	.page-head.section-news-head:has(> .ny-news-form) {
		--ny-news-w: 28rem;
		padding-inline-end: calc(var(--ny-news-w) + var(--space-80));
	}
}