/*
 * News (design A, news.html): the list of news posts on the News page
 * (pattern torqtek/news-list) and the page of one news post (template
 * single.html). A news post is a white card with a thin border: the post
 * image in a 16rem column on the left from 800px (a post without an image
 * takes the whole card), the date, the title and the text. Loaded only
 * where a news section is on the page (functions.php).
 */

/* List: cards 1.5rem apart, no wider than 60rem. */
.torqtek-news-query .wp-block-post-template.torqtek-news-list {
	display: grid;
	gap: 1.5rem;
	max-inline-size: 60rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.torqtek-news-list > li,
.torqtek-news-item.wp-block-group {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--wp--custom--color--rule);
	background-color: var(--wp--preset--color--surface);
}

.torqtek-news-item.wp-block-group {
	max-inline-size: 60rem;
}

@media (min-width: 800px) {
	:is(.torqtek-news-list > li, .torqtek-news-item.wp-block-group):has(> .torqtek-news-image) {
		grid-template-columns: 16rem minmax(0, 1fr);
		align-items: start;
	}
}

.torqtek-news-list > li > *,
.torqtek-news-item.wp-block-group > * {
	margin: 0;
}

.torqtek-news-image img {
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--wp--custom--color--rule);
}

/* Date, title and text: spacing of design A (.news-date, .news-item h3). */
.torqtek-news-body.wp-block-group > * {
	margin-block: 0;
}

.torqtek-news .torqtek-news-date {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.torqtek-news-body.wp-block-group > .torqtek-news-date {
	margin-block-end: 0.35rem;
}

.torqtek-news-body.wp-block-group > .wp-block-post-title {
	margin-block-end: 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.torqtek-news-body .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.torqtek-news-body .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Text of the post: paragraphs no wider than 38em with 1rem under them,
   small headings in the heading font, lists indented. Stronger than
   WordPress' ":root :where(.is-layout-flow) > *". */
.torqtek-news-body .wp-block-post-content > *,
.torqtek-news-body .wp-block-post-content > :last-child {
	margin-block: 0 1rem;
}

.torqtek-news-body .wp-block-post-content > p {
	max-inline-size: var(--wp--custom--measure--text);
}

.torqtek-news-body .wp-block-post-content > :is(h2, h4) {
	margin-block: 1.25rem 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	color: var(--wp--preset--color--navy);
}

.torqtek-news-body .wp-block-post-content > ul {
	padding-inline-start: 1.25rem;
	list-style-type: disc; /* in the list each post is itself a list item */
}

/* A photo in the text: its own size, never wider than the text. */
.torqtek-news-body .wp-block-post-content > .wp-block-image img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--wp--custom--color--rule);
}

/* Page numbers under the list (more than 10 news posts). */
.torqtek-news-query .wp-block-query-pagination.torqtek-news-pages {
	margin-block-start: 1.5rem;
}

/* One news post: the date 0.75rem under the H1, "All news" 1.5rem under
   the card (at least 44px tall). */
.torqtek-news-hero .wp-block-group > .torqtek-news-date {
	margin-block-start: 0.75rem;
}

.torqtek-news-single .wp-block-group > .torqtek-news-back {
	margin-block: 1.5rem 0;
}

.torqtek-news-back a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 600;
}

/* Large picture under the text (the Hand's Off brochure, class
   torqtek-news-full): the whole width of the text, linked to the brochure
   PDF (not "Enlarge on click": the lightbox fits the tall brochure into the
   screen and shows it smaller than on the page), a small muted caption.
   Shown on the post's own page only; in the News list the card keeps to the
   post image and the text. */
.torqtek-news-body .wp-block-post-content > .wp-block-image.torqtek-news-full img {
	inline-size: 100%;
	max-inline-size: none;
}

.torqtek-news-full .wp-element-caption {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: start;
}

.torqtek-news-list .wp-block-post-content > .torqtek-news-full {
	display: none;
}