/* ==========================================================================
   News (29.09): the cards (home §10, the News page, an article's "More news"),
   the News page's search and filters, and the article page, including the
   core blocks an article is written with (the front end loads no block-library
   CSS, inc/setup.php; inc/news.php allows only the blocks styled here).
   ========================================================================== */

/* -------------------------------------------------------------------------- Cards */

.newsgrid { display: grid; gap: 16px; }
.newsgrid--home { gap: 16px; }
@media (min-width: 900px) { .newsgrid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.newsgrid--list { gap: clamp(14px, 1.6vw, 22px); }
@media (min-width: 700px) { .newsgrid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .newsgrid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.newscard { display: flex; min-width: 0; }
.newscard__in {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: 16px;
	background: #fff;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.newscard__in:hover { border-color: var(--ink); box-shadow: 0 22px 44px -32px rgba(6, 39, 90, 0.55); }
.newscard__in:has(.newscard__link:focus-visible) { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 3px; }

/* The picture: always the full frame, whatever the card's height (the Lviv card left a blank
   block under a landscape photo while <picture> kept its own height). */
.newscard__img { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.newscard__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.newscard.is-portrait .newscard__img img { object-position: top; }
.newscard__in:hover .newscard__img img { transform: scale(1.035); }

/* No picture: a blank drawing sheet with the News lamp and the topic. */
.newscard__none {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	color: var(--ink-3);
	background-color: var(--paper-2);
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 28px 28px;
	background-position: center;
}
.newscard__sym { width: 48px; height: 48px; padding: 6px; border-radius: 50%; background: var(--paper-2); color: var(--ink); stroke-width: 1.3; }
.newscard__none .mono { padding: 3px 8px; background: var(--paper-2); color: var(--ink-2); }

.newscard__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.newscard__flag { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--amber); color: var(--deep-2); font-weight: 600; }
.newscard__title { font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.01em; font-weight: 560; text-wrap: balance; }
.newscard__link { color: var(--ink); text-decoration: none; }
.newscard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.newscard__link:focus-visible { outline: none; }
.newscard__in:hover .newscard__link { text-decoration: underline; text-decoration-thickness: 1px; }
.newscard__text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ink-2);
	font-size: 0.95rem;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.newscard__more { align-self: flex-start; margin-top: auto; padding-top: 6px; font-size: 0.95rem; }
.newscard__in:hover .newscard__more::after { transform: translateX(4px); }

/* Date · topic · brand. */
.newsmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink-3); }
.newsmeta time { color: var(--green-t); }
.newsmeta__topic::before { content: "·"; margin-right: 10px; color: var(--dim); }
.newsmeta__brand { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); }
.newsmeta__brand--growatt { border-color: rgba(83, 123, 1, 0.45); color: var(--green-t); }
.newsmeta__demo { padding: 2px 8px; border-radius: 999px; background: var(--amber); color: var(--deep-2); }

/* The home page: picture beside the text from 560px, filling the card's full height. */
@media (min-width: 560px) {
	.newscard--row .newscard__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
	.newscard--row .newscard__img { aspect-ratio: auto; min-height: 240px; }
	.newscard--row .newscard__body { padding: 22px 24px 24px; }
	.newscard--row .newscard__title { font-size: 1.28rem; }
}

/* The newest article, across the full width of the unfiltered first page. */
.newscard--lead { grid-column: 1 / -1; }
.newscard--lead .newscard__title { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.2rem); line-height: 1.12; font-stretch: 92%; letter-spacing: -0.018em; }
.newscard--lead .newscard__text { font-size: 1.02rem; -webkit-line-clamp: 5; }
@media (min-width: 900px) {
	.newscard--lead .newscard__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
	.newscard--lead .newscard__img { aspect-ratio: auto; min-height: clamp(320px, 30vw, 440px); }
	.newscard--lead .newscard__body { justify-content: center; gap: 14px; padding: clamp(28px, 3vw, 48px); }
	.newscard--lead .newscard__more { margin-top: 8px; }
}

/* -------------------------------------------------------------------------- The News page */

.newsroom { padding-block: clamp(36px, 5vw, 72px) clamp(64px, 8vw, 120px); }
.newsroom > .wrap > .pg-n { margin-bottom: 18px; }

/* Search and filters: one white panel. Phone: search, topics, then brand and year side by side.
   From 1024px: search, brand and year on the first row, the topics below. */
.newsbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px 28px;
	padding: clamp(16px, 2vw, 24px);
	border: 1px solid var(--line-2);
	border-radius: 20px;
	background: #fff;
}
.newsbar__search { position: relative; flex: 1 1 100%; order: 1; }
.newsbar__set--topic { order: 2; flex: 1 1 100%; }
.newsbar__set--brand, .newsbar__set--year { order: 3; }
.newsbar__apply { order: 4; }
@media (min-width: 1024px) {
	.newsbar__search { flex: 1 1 360px; }
	.newsbar__set--topic { order: 5; padding-top: 18px; border-top: 1px solid var(--line); }
}
.newsbar__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.newsbar__legend { display: block; margin-bottom: 8px; padding: 0; color: var(--ink-3); }
.newsbar__set .chips { gap: 6px; }

.newsbar__q {
	width: 100%;
	min-height: 52px;
	padding: 0 58px 0 48px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: #fbfaf7;
	color: var(--ink);
	font-size: 1rem;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.newsbar__q::placeholder { color: var(--ink-3); opacity: 0.85; }
.newsbar__q:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(9, 58, 126, 0.14); }
.newsbar__q::-webkit-search-cancel-button { margin-right: 4px; }
.newsbar__icon { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; margin-top: -10px; color: var(--ink-3); pointer-events: none; }
.newsbar__go {
	position: absolute;
	top: 5px;
	right: 5px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	transition: background-color 0.2s var(--ease);
}
.newsbar__go:hover { background: var(--deep); }
.newsbar__go .sym { width: 18px; height: 18px; stroke-width: 1.8; }

.newsbar__yr { min-width: 150px; min-height: 42px; padding: 8px 40px 8px 16px; border-radius: 999px; font-size: 0.9rem; }
/* The form's own button, for visitors without JavaScript; news.js answers as they choose. */
.js .newsbar__apply { display: none; }

.newsbar__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 44px; margin: 14px 0 18px; }
.newsbar__count { color: var(--ink-2); }
.newsbar__clear { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 560; font-size: 0.93rem; text-decoration: underline; text-underline-offset: 0.2em; }
.newsbar__clear .sym { width: 16px; height: 16px; stroke-width: 2; }

.newsroom__results { transition: opacity 0.2s var(--ease); }
.newsroom__results[aria-busy="true"] { opacity: 0.45; pointer-events: none; }

.newsempty { display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 6vw, 72px) 24px; border: 1px dashed var(--line-2); border-radius: 20px; text-align: center; }
.newsempty__sym { width: 48px; height: 48px; color: var(--dim); stroke-width: 1.3; }
.newsempty__h { font-size: var(--fs-h3); }
.newsempty__text { max-width: 30em; color: var(--ink-2); }
.newsempty .btn { margin-top: 6px; }

/* More: "Show more" with JavaScript, numbered pages without. */
.newsroom__more { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }
html:not(.js) .newsroom__more { display: none; }
@media (max-width: 559.98px) { .newsroom__more-btn { width: 100%; justify-content: center; } }
.newspager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: clamp(28px, 3vw, 44px); }
.js .newspager[data-first] { display: none; }
.newspager__list { display: flex; flex-wrap: wrap; gap: 6px; }
.newspager__n { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-weight: 560; text-decoration: none; }
a.newspager__n:hover { border-color: var(--ink); }
.newspager__n[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.newspager__step { display: inline-flex; align-items: center; min-height: 44px; font-weight: 560; }

@media (prefers-reduced-motion: no-preference) {
	.newscard.is-new { animation: news-in 0.5s var(--ease) both; }
	.newscard.is-new:nth-child(3n + 2) { animation-delay: 0.06s; }
	.newscard.is-new:nth-child(3n) { animation-delay: 0.12s; }
}
@keyframes news-in { from { opacity: 0; transform: translateY(14px); } }

/* -------------------------------------------------------------------------- An article */

.article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; align-items: center; }
@media (min-width: 960px) {
	.article--portrait .article__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
/* The trail names the article too, but the H1 below says it in full: one line is enough. */
.article__head .trail { max-width: 100%; }
.article__head .trail ol { flex-wrap: nowrap; min-width: 0; }
.article__head .trail li { flex: none; }
.article__head .trail li[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article__meta { margin-bottom: 18px; }
.page-head .article__h1 { max-width: 22ch; font-size: clamp(2.1rem, 1.35rem + 3vw, 4.2rem); line-height: 1.04; }
.page-head .article__lead { max-width: 40em; margin-top: 24px; color: var(--ink-2); }

.article__doc { justify-self: center; width: 100%; max-width: 420px; }
.article__doc img { width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; box-shadow: 0 30px 60px -40px rgba(6, 39, 90, 0.55); }
.article__pic-link { display: block; cursor: zoom-in; }
.article__cap { margin-top: 12px; color: var(--ink-3); font-size: 0.86rem; }

.article__hero { margin-top: clamp(28px, 4vw, 56px); }
.article__hero .article__pic-link { overflow: hidden; border-radius: 16px; background: var(--paper-2); }
.article__hero img { width: 100%; height: auto; max-height: min(80vh, 780px); object-fit: cover; }

.article__wrap { display: grid; gap: 24px 64px; padding-block: clamp(40px, 5vw, 80px) clamp(56px, 7vw, 104px); }
@media (min-width: 1024px) {
	.article__wrap { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); }
	.article__wrap > .pg-n { grid-row: 1 / span 2; }
	.article__body, .article__back { grid-column: 2; }
}
.article__back { margin-top: 12px; }
.link-arrow--back { flex-direction: row-reverse; }
.link-arrow--back::after { content: "←"; }
.link-arrow--back:hover::after { transform: translateX(-4px); }

/* The text, as written in the block editor. */
.article__body { max-width: 44em; color: var(--ink-2); font-size: 1.08rem; line-height: 1.7; }
.article__body > * + * { margin-top: 1.15em; }
.article__body h2, .article__body h3, .article__body h4 { color: var(--ink); line-height: 1.2; text-wrap: balance; }
.article__body h2 { margin-top: 1.9em; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); font-stretch: 92%; }
.article__body h3 { margin-top: 1.7em; font-size: 1.28rem; }
.article__body h4 { margin-top: 1.5em; font-size: 1.08rem; }
.article__body > :first-child { margin-top: 0; }
.article__body strong { color: var(--ink); }
.article__body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.article__body a:hover { text-decoration-thickness: 2px; }
.article__body ul, .article__body ol { padding-left: 1.3em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li + li { margin-top: 0.45em; }
.article__body li::marker { color: var(--green-t); }
.article__body .has-text-align-center { text-align: center; }
.article__body .has-text-align-right { text-align: right; }

.article__body .wp-block-quote { padding: 4px 0 4px 24px; border-left: 3px solid var(--amber); color: var(--ink); font-size: 1.2rem; line-height: 1.5; }
.article__body .wp-block-quote p + p { margin-top: 0.8em; }
.article__body .wp-block-quote cite { display: block; margin-top: 12px; color: var(--ink-3); font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; }

.article__body .wp-block-image,
.article__body .wp-block-gallery,
.article__body .wp-block-table { margin-block: 1.8em; }
.article__body .wp-block-image img { height: auto; border-radius: 12px; }
.article__body .wp-block-image a { display: block; cursor: zoom-in; }
.article__body .aligncenter { margin-inline: auto; text-align: center; }
.article__body .wp-element-caption { margin-top: 10px; color: var(--ink-3); font-size: 0.86rem; line-height: 1.5; }

/* Galleries as the editor shows them: two across on a phone, the chosen number (three by
   default) from 700px, and a short last row stretched to the full width. */
.article__body .wp-block-gallery { --cols: 2; display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 700px) {
	.article__body .wp-block-gallery.columns-default,
	.article__body .wp-block-gallery.columns-3 { --cols: 3; }
	.article__body .wp-block-gallery.columns-4 { --cols: 4; }
	.article__body .wp-block-gallery.columns-5 { --cols: 5; }
	.article__body .wp-block-gallery.columns-6 { --cols: 6; }
}
.article__body .wp-block-gallery.columns-1 { --cols: 1; }
.article__body .wp-block-gallery > .wp-block-image { flex: 1 0 calc((100% - (var(--cols) - 1) * 10px) / var(--cols)); min-width: 0; margin: 0; }
.article__body .wp-block-gallery.is-cropped .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; max-height: 420px; object-fit: cover; }
.article__body .wp-block-gallery .wp-element-caption { font-size: 0.8rem; }
.article__body .wp-block-gallery > .wp-element-caption { flex-basis: 100%; margin-top: 0; }

.article__body .wp-block-table { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; }
.article__body .wp-block-table table { width: 100%; font-size: 0.95rem; }
.article__body .wp-block-table th,
.article__body .wp-block-table td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.article__body .wp-block-table thead th { color: var(--ink-3); font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.article__body .wp-block-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.article__body .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.article__body .wp-block-table figcaption { padding: 10px 16px; border-top: 1px solid var(--line); }

.article__body .wp-block-separator { height: 1px; margin-block: 2.4em; border: 0; background: var(--line-2); }

.article__body .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; }
.article__body .wp-block-file > a:first-child { font-weight: 560; text-decoration: none; }
.article__body .wp-block-file > a:first-child::before { content: "↓"; margin-right: 10px; color: var(--green-t); font-weight: 700; }
.article__body .wp-block-file__button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff !important; font-size: 0.9rem; font-weight: 560; text-decoration: none !important; }
.article__body .wp-block-file__embed { display: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* More news, under an article. */
.newsmore { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); }
.newsmore__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: clamp(26px, 3vw, 40px); }
.newsmore__head .pg-n { flex-basis: 100%; }
.newsmore__h { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); }