/* Zielony Borzechów — theme stylesheet
   Component classes that core blocks / theme.json cannot express on their own:
   fluid section rhythm, the accessibility toolbar, the AQI widget, meters,
   numbered feature lists, the investment timeline and masked hero photos. */

/* WordPress's "constrained" layout auto-centers any direct child whose own
   max-width ends up narrower than its container. That's correct/wanted for
   the page's main content column itself (it should stay centered up to
   1280px on ultra-wide screens) — but our zb-mw-*ch reading-width classes,
   and the post-excerpt block (which WP core caps at max-width:480px), are
   used on text that's already positioned inside a flex row/column and must
   stay flush left, not re-centered by this rule. Scope the override to just
   those so the outer content column keeps centering. */
body.zb-site .is-layout-constrained > [class*="zb-mw-"],
body.zb-site .is-layout-constrained > .zb-news-row__excerpt {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

:root {
	--zb-border: rgba(19, 22, 26, 0.14);
	--zb-border-strong: rgba(19, 22, 26, 0.28);
	--zb-zoom: 1;
	--zb-hc-filter: none;
}

/* ---------- Accessibility toolbar & zoom/contrast wrapper ---------- */

.zb-utility-bar {
	border-bottom: 1px solid var(--zb-border);
	background: var(--wp--preset--color--utility);
	font-family: var(--wp--preset--font-family--sans);
}

.zb-utility-bar__row {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 7px clamp(16px, 3vw, 36px);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	align-items: center;
	justify-content: space-between;
}

.zb-utility-bar__links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	font: 500 12px/1 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-70);
}

.zb-utility-bar__links a {
	color: var(--wp--preset--color--ink-70) !important;
}

.zb-utility-bar__hours {
	color: var(--wp--preset--color--ink-55);
}

.zb-a11y {
	display: flex;
	gap: 8px;
	align-items: center;
}

.zb-a11y__label {
	font: 600 10.5px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-55);
	margin-right: 2px;
}

.zb-a11y button {
	font: 600 12px/1 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 1px solid var(--zb-border-strong);
	padding: 6px 9px;
	cursor: pointer;
	min-width: 30px;
}

.zb-a11y button.zb-a11y__contrast,
.zb-a11y button.zb-a11y__search {
	font-size: 11px;
	letter-spacing: 0.06em;
	padding: 7px 11px;
}

.zb-a11y button.zb-a11y__search {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
}

.zb-a11y button:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.zb-a11y button.zb-a11y__search:hover {
	background: var(--wp--preset--color--green-dark);
	border-color: var(--wp--preset--color--green-dark);
}

.zb-a11y button[aria-pressed="true"] {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.zb-zoom-wrap {
	zoom: var(--zb-zoom);
	filter: var(--zb-hc-filter);
}

.zb-search-panel {
	border-bottom: 1px solid var(--zb-border);
	background: var(--wp--preset--color--white);
}

.zb-search-panel[hidden] {
	display: none !important;
}

.zb-search-panel__row {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 18px clamp(16px, 3vw, 36px);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.zb-search-panel input[type="search"] {
	flex: 1 1 320px;
	min-width: 0;
	font: 400 16.5px/1.4 var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(19, 22, 26, 0.4);
	padding: 8px 2px;
	outline: none;
}

.zb-search-panel__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.zb-search-panel__tags span {
	font: 500 12px/1 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-60);
	border: 1px solid rgba(19, 22, 26, 0.2);
	padding: 8px 11px;
}

/* ---------- Site header & branding ---------- */

.zb-brand-row {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 44px);
	align-items: flex-end;
	justify-content: space-between;
}

.zb-brand {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.4vw, 30px);
	align-items: flex-end;
}

.zb-brand img.custom-logo,
.zb-brand img.zb-logo {
	display: block;
	width: clamp(128px, 15vw, 176px);
	height: auto;
	mix-blend-mode: multiply;
	opacity: 0.9;
}

.zb-brand__title {
	font: 400 clamp(30px, 5vw, 58px)/0.95 var(--wp--preset--font-family--serif);
	letter-spacing: -0.005em;
	margin: 0;
}

.zb-brand__title a {
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none !important;
}

.zb-brand__title span {
	color: var(--wp--preset--color--green);
}

.zb-brand__tagline {
	font: 600 clamp(9.5px, 1.05vw, 11.5px)/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-60);
	margin-top: 9px;
}

.zb-brand__strapline {
	font: 400 12.5px/1.5 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--sand);
	max-width: 230px;
}

/* ---------- Primary navigation ---------- */

.zb-primary-nav {
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--zb-border);
}

.zb-primary-nav ul.wp-block-navigation__container,
.zb-primary-nav .wp-block-navigation__container {
	gap: 0 clamp(14px, 1.8vw, 26px) !important;
}

.zb-primary-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
	font: 600 11.5px/1 var(--wp--preset--font-family--sans) !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink) !important;
	padding: 12px 0 11px !important;
	border-bottom: 3px solid transparent;
}

.zb-primary-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--green) !important;
}

.zb-primary-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.zb-primary-nav .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--green);
}

/* ---------- Section headers on interior pages ---------- */

.zb-eyebrow {
	font: 600 11px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-60);
}

.zb-section-header {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	padding-bottom: clamp(16px, 2.4vw, 26px);
}

/* ---------- Cards & panels ---------- */

.zb-panel {
	background: var(--wp--preset--color--panel);
	border-top: 3px solid var(--wp--preset--color--green);
	padding: clamp(18px, 2vw, 24px);
}

.zb-card-grid > * {
	background: transparent;
	border-top: 1px solid var(--zb-border-strong);
	padding-top: 15px;
}

/* ---------- Numbered feature list (home: four areas) ---------- */

.zb-numbered .zb-numbered__index {
	font: 300 clamp(30px, 3.6vw, 46px)/0.9 var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--green);
	letter-spacing: -0.02em;
	display: block;
	margin-bottom: 10px;
}

.zb-numbered a,
.zb-numbered a:hover {
	text-decoration: none !important;
}

.zb-numbered > .wp-block-column {
	border-top: 1px solid var(--zb-border-strong);
	padding-top: 16px;
}

/* ---------- AQI widget ---------- */

.zb-aqi-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.zb-aqi__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.zb-aqi__category-block {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.zb-aqi__category {
	font: 300 clamp(30px, 4vw, 44px)/1.08 var(--wp--preset--font-family--serif);
	letter-spacing: -0.01em;
}

.zb-aqi__category-caption {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-60);
}

.zb-aqi__scale-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zb-aqi__scale {
	display: flex;
	gap: 3px;
}

.zb-aqi__scale span {
	flex: 1;
	height: 8px;
}

.zb-aqi__scale span.is-active {
	box-shadow: 0 0 0 2px var(--wp--preset--color--ink);
}

.zb-aqi__scale-labels {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--sand);
}

.zb-aqi-c1 { background: #1c6a44; }
.zb-aqi-c2 { background: #4f9c56; }
.zb-aqi-c3 { background: #c9b23a; }
.zb-aqi-c4 { background: #c9822f; }
.zb-aqi-c5 { background: #a8412a; }
.zb-aqi-c6 { background: #7a2438; }

/* ---------- Meters (pollutant bars, heat-loss bars) ---------- */

.zb-meter-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zb-meter-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.zb-meter-row__label {
	flex: 0 0 62px;
	font: 600 12px/1 var(--wp--preset--font-family--sans);
}

.zb-meter-row--tall .zb-meter-row__label {
	flex-basis: 132px;
}

.zb-meter-row__track {
	flex: 1;
	height: 6px;
	background: rgba(19, 22, 26, 0.12);
}

.zb-meter-row--tall .zb-meter-row__track { height: 20px; }

.zb-meter-row__fill {
	height: 100%;
	background: var(--wp--preset--color--green);
}

.zb-meter-row__value {
	flex: 0 0 88px;
	text-align: right;
	font: 400 12.5px/1 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-70);
}

.zb-meter-row--tall .zb-meter-row__value {
	flex-basis: 44px;
}

/* ---------- Numbered item row with spec list (OZE) ---------- */

.zb-oze-item {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 44px);
	border-top: 1px solid var(--zb-border-strong);
	padding: clamp(18px, 2.2vw, 26px) 0;
}
.zb-oze-item:last-child { border-bottom: 1px solid var(--zb-border-strong); }

.zb-oze-item__num {
	flex: 0 0 auto;
	width: 56px;
	font: 300 clamp(30px, 3.4vw, 42px)/0.85 var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--green);
}

.zb-oze-item__body {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zb-spec-list {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font: 400 13px/1.5 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-60);
}

.zb-spec-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px solid rgba(19, 22, 26, 0.12);
	padding-bottom: 6px;
}
.zb-spec-row:last-child { border-bottom: 0; padding-bottom: 0; }

.zb-spec-row strong { color: var(--wp--preset--color--ink); }

/* ---------- Status tags ---------- */

.zb-tag {
	display: inline-block;
	font: 600 10.5px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 9px;
}
.zb-tag--live { color: var(--wp--preset--color--white); background: var(--wp--preset--color--green); }
.zb-tag--soon { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--gold); }
.zb-tag--planned { color: var(--wp--preset--color--ink-60); border: 1px solid var(--zb-border-strong); }

/* ---------- Timeline (Gmina dla klimatu) ---------- */

.zb-timeline > * {
	border-top: 1px solid var(--zb-border-strong);
	padding: clamp(16px, 2vw, 22px) 0;
}
.zb-timeline > *:last-child { border-bottom: 1px solid var(--zb-border-strong); }

.zb-timeline__year {
	font: 600 12px/1.4 var(--wp--preset--font-family--sans);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--green);
}

/* ---------- Checklists ---------- */

.zb-checklist { list-style: none; margin: 0; padding: 0; }
.zb-checklist li {
	border-top: 1px solid var(--zb-border);
	padding: 12px 0;
	font: 400 16.5px/1.6 var(--wp--preset--font-family--serif);
}
.zb-checklist li:last-child { border-bottom: 1px solid var(--zb-border); }

.zb-checklist--boxes li::before {
	content: "\2610";
	color: var(--wp--preset--color--green);
	margin-right: 10px;
}

/* ---------- Masked / faded photography ---------- */

.zb-photo-fade {
	overflow: hidden;
}
.zb-photo-fade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.68) contrast(0.93);
	opacity: 0.94;
	-webkit-mask-image: radial-gradient(118% 132% at 50% 36%, #000 40%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(118% 132% at 50% 36%, #000 40%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- Data tables: strip WordPress's default cell grid ---------- */

.wp-block-table.zb-table table,
.wp-block-table.zb-table--scale table {
	border-collapse: collapse;
}
.wp-block-table.zb-table td,
.wp-block-table.zb-table th,
.wp-block-table.zb-table--scale td,
.wp-block-table.zb-table--scale th {
	border-style: solid;
	border-top-width: 0 !important;
	border-left-width: 0 !important;
	border-right-width: 0 !important;
}

/* ---------- Data table (funding programmes) ---------- */

.wp-block-table.zb-table table { table-layout: fixed; }

.wp-block-table.zb-table th {
	font: 600 10.5px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-60);
	border-bottom: 1px solid var(--zb-border-strong);
	padding: 0 10px 9px 0;
	text-align: left;
}
.wp-block-table.zb-table td {
	font: 400 15.5px/1.5 var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink-70);
	border-bottom: 1px solid var(--zb-border);
	padding: 16px 10px 16px 0;
	vertical-align: baseline;
}
.wp-block-table.zb-table td:first-child {
	font: 500 19px/1.3 var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink);
}
.wp-block-table.zb-table th:nth-child(1), .wp-block-table.zb-table td:nth-child(1) { width: 33%; }
.wp-block-table.zb-table th:nth-child(2), .wp-block-table.zb-table td:nth-child(2) { width: 27%; }
.wp-block-table.zb-table th:nth-child(3), .wp-block-table.zb-table td:nth-child(3) { width: 23%; }
.wp-block-table.zb-table th:nth-child(4), .wp-block-table.zb-table td:nth-child(4) { width: 17%; padding-right: 0; }

/* ---------- Data table (AQI colour scale) ---------- */

.zb-swatch {
	display: block;
	width: 18px;
	height: 18px;
}

.wp-block-table.zb-table--scale table { table-layout: fixed; width: 100%; }
.wp-block-table.zb-table--scale td {
	font: 400 15.5px/1.5 var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink-70);
	border-bottom: 1px solid var(--zb-border);
	padding: 13px 14px 13px 0;
	vertical-align: middle;
}
.wp-block-table.zb-table--scale tr:first-child td { padding-top: 0; }
.wp-block-table.zb-table--scale tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.wp-block-table.zb-table--scale td:first-child { width: 34px; padding-right: 0; }
.wp-block-table.zb-table--scale td:nth-child(2) {
	width: 150px;
	font: 600 13.5px/1.3 var(--wp--preset--font-family--sans);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}
.wp-block-table.zb-table--scale td:nth-child(3) { width: auto; }

/* ---------- Breadcrumb ---------- */

.zb-breadcrumb {
	font: 500 12px/1.4 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-55);
	display: flex;
	gap: 12px;
	align-items: baseline;
}
.zb-breadcrumb a { color: var(--wp--preset--color--green) !important; }

/* ---------- News list rows ---------- */

.zb-news-row {
	border-bottom: 1px solid var(--zb-border);
	padding: clamp(16px, 2vw, 22px) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	align-items: baseline;
	text-decoration: none !important;
}
.zb-news-row:hover { background: rgba(28, 106, 68, 0.045); }
.zb-news-row__date {
	flex: 0 0 92px;
	font: 600 12px/1.4 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--green);
}
.zb-news-row__body {
	flex: 1 1 320px;
	min-width: 0;
}
.zb-news-row__title {
	flex: 1 1 320px;
	min-width: 0;
	font: 400 clamp(20px, 2.2vw, 25px)/1.3 var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink);
}
.zb-news-row__excerpt {
	max-width: 60ch;
	font: 400 16px/1.6 var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink-70);
	margin: 0;
}
.zb-news-row__cat {
	flex: 0 1 140px;
	font: 500 10.5px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-55);
}

/* ---------- Footer ---------- */

.zb-footer {
	border-top: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--utility);
}
.zb-footer a { color: var(--wp--preset--color--ink-70) !important; }
.zb-footer__brand {
	font: 400 clamp(20px, 2.2vw, 25px)/1.1 var(--wp--preset--font-family--serif);
}
.zb-footer__brand span { color: var(--wp--preset--color--green); }
.zb-footer__heading {
	font: 600 10.5px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-55);
	margin-bottom: 3px;
	display: block;
}
.zb-footer__marks {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 40px);
	align-items: center;
	border-top: 1px solid var(--zb-border);
	padding-top: clamp(18px, 2.2vw, 24px);
}
.zb-footer__mark-slot {
	width: 150px;
	height: 52px;
	border: 1px dashed rgba(19, 22, 26, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font: 400 10px/1.3 ui-monospace, Menlo, monospace;
	color: var(--wp--preset--color--ink-55);
	padding: 4px;
}
.zb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	border-top: 1px solid var(--zb-border);
	padding-top: 14px;
	font: 400 12px/1.5 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-55);
}

/* ---------- Utility ---------- */

.zb-max-330 { max-width: 330px; }
.zb-max-360 { max-width: 360px; }
.zb-max-420 { max-width: 420px; }

@media (max-width: 600px) {
	.zb-brand__strapline { display: none; }
}

/* ---------- Section rhythm (between major blocks on a page) ----------
   WordPress only emits the CSS needed for a *custom* blockGap value via a
   per-instance generated class/rule, and that generation is unreliable for
   the outermost block inside a synced pattern (it silently falls back to
   the theme's default 1.6rem gap). Setting the vertical rhythm with plain
   CSS avoids depending on that mechanism entirely. */
.zb-section-gap > * + * {
	margin-top: clamp(34px, 4.5vw, 64px);
}
.zb-section-gap--home > * + * {
	margin-top: clamp(44px, 5.5vw, 84px);
}
.zb-gap-16-22 > * + * {
	margin-top: clamp(16px, 2vw, 22px);
}
.zb-gap-26-40 > * + * {
	margin-top: clamp(26px, 3vw, 40px);
}
.zb-gap-30-52 > * + * {
	margin-top: clamp(30px, 4vw, 52px);
}
.zb-gap-28-44 > * + * {
	margin-top: clamp(28px, 3.4vw, 44px);
}
.zb-gap-24-38 > * + * {
	margin-top: clamp(24px, 3vw, 38px);
}

/* ---------- Flex-row gaps (same WordPress blockGap-clamp() limitation as
   above, but for flex/flex-wrap containers: setting `gap` directly in plain
   CSS handles both the row-gap and column-gap needed when items wrap). ---------- */
.zb-fgap-18-44 { gap: clamp(18px, 3vw, 44px); }
.zb-fgap-20-44 { gap: clamp(20px, 3vw, 44px); }
.zb-fgap-20-48 { gap: clamp(20px, 3vw, 48px); }
.zb-fgap-24-52 { gap: clamp(24px, 3.4vw, 52px); }
.zb-fgap-24-56 { gap: clamp(24px, 4vw, 56px); }
.zb-fgap-26-60 { gap: clamp(26px, 4vw, 60px); }
.zb-fgap-28-64 { gap: clamp(28px, 4vw, 64px); }

/* ---------- Auto-generated layout utility classes (Gutenberg validation-safe) ---------- */
.zb-fx-1-1-440px { flex: 1 1 440px; }
.zb-mw-20ch { max-width: 20ch; }
.zb-mw-54ch { max-width: 54ch; }
.zb-fx-1-1-320px { flex: 1 1 320px; }
.zb-mh-clamp-210px-26vw-370px { min-height: clamp(210px, 26vw, 370px); }
.zb-fx-1-1-520px { flex: 1 1 520px; }
.zb-fx-1-1-230px { flex: 1 1 230px; }
.zb-mw-330px { max-width: 330px; }
.zb-mw-12ch { max-width: 12ch; }
.zb-fx-0-0-auto { flex: 0 0 auto; }
.zb-fx-1-1-380px { flex: 1 1 380px; }
.zb-mw-none { max-width: none; }
.zb-mw-14ch { max-width: 14ch; }
.zb-fx-1-1-360px { flex: 1 1 360px; }
.zb-fx-1-1-480px { flex: 1 1 480px; }
.zb-fx-1-1-260px { flex: 1 1 260px; }
.zb-mw-360px { max-width: 360px; }
.zb-fx-1-1-420px { flex: 1 1 420px; }
.zb-mw-30ch { max-width: 30ch; }
.zb-mw-46ch { max-width: 46ch; }
.zb-mw-18ch { max-width: 18ch; }
.zb-fx-1-1-300px { flex: 1 1 300px; }
.zb-mw-44ch { max-width: 44ch; }
.zb-mw-16ch { max-width: 16ch; }
.zb-mw-720px { max-width: 720px; }
.zb-mw-60ch { max-width: 60ch; }
.zb-mw-70ch { max-width: 70ch; }
.zb-mw-50ch { max-width: 50ch; }
.zb-mh-clamp-190px-22vw-320px { min-height: clamp(190px, 22vw, 320px); }
.zb-fx-1-1-240px { flex: 1 1 240px; }
.zb-mw-320px { max-width: 320px; }
.zb-mw-34ch { max-width: 34ch; }
.zb-fx-0-0-56px { flex: 0 0 56px; }
.zb-mw-52ch { max-width: 52ch; }
.zb-fx-1-1-220px { flex: 1 1 220px; }
.zb-mw-300px { max-width: 300px; }
.zb-fx-1-1-460px { flex: 1 1 460px; }
.zb-mw-48ch { max-width: 48ch; }