/*
 * Згенеровано bin/nv-column-css.php, руками не правити. Після правки карток білдера в
 * style.css чи accessibilit.css: php bin/nv-column-css.php
 *
 * Картки головної у вузькій колонці (бічна панель на компʼютері, docs/tz/bilder-spetsstorinky.md,
 * частина D): ті самі правила, що діють на телефоні шириною 390 px, для блоку з класом
 * nvb-col. Специфічність та сама (:where), порядок той самий: hero.css, accessibilit.css, style.css.
 */

@media not all and (max-width: 1024px) {
	/* accessibilit.css: @media screen and (max-width: 666px) */
	body:is(.am-theme-dark, .am-theme-contrast) .nvb:where(.nvb-col) .nv-col-center .nv-panel {
		background-color: transparent !important;
		background-image: none !important;
	}
	body:is(.am-theme-dark, .am-theme-contrast) .nvb:where(.nvb-col) .nv-col-center .nv-panel h2,
	body:is(.am-theme-dark, .am-theme-contrast) .nvb:where(.nvb-col) .nv-col-center .nv-panel h2 a {
		color: var(--fg) !important;
	}
	body:is(.am-theme-dark, .am-theme-contrast) .nvb:where(.nvb-col) .nv-col-center .nv-panel .nv-k,
	body:is(.am-theme-dark, .am-theme-contrast) .nvb:where(.nvb-col) .nv-col-center .nv-panel .nv-k span {
		color: var(--kick) !important;
	}
	body:is(.am-theme-dark, .am-theme-contrast) .nvb:where(.nvb-col) .nv-col-center .nv-panel .nv-k .nv-k__excl {
		color: var(--excl) !important;
	}
	body.am-theme-dark .nvb:where(.nvb-col) .nv-col-center .nv-panel .nv-k .nv-k__upd {
		color: #ff8a8e !important;
	}

	/* style.css: @media screen and (max-width: 1440px) */
	.container.hero-container.nvb:where(.nvb-col) {
		grid-template-columns: minmax(0, 1fr) 338px;
	}
	.nvb:where(.nvb-col) .nv-col-left {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
		padding-bottom: 28px;
		border-bottom: 1px solid var(--line);
	}
	.nvb:where(.nvb-col) .nv-col-left .nv-tile,
	.nvb:where(.nvb-col) .nv-col-left .nv-tile + .nv-tile {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.nvb:where(.nvb-col) .nv-col-left .nv-tile .nv-body {
		padding-top: 0;
	}
	.nvb:where(.nvb-col) .nv-col-left .nv-tile .nv-ph {
		margin-top: 6px;
	}
	.nvb:where(.nvb-col) .nv-col-left .nv-tile:has(.nv-k) .nv-ph {
		margin-top: 5px;
	}
	.nvb:where(.nvb-col) .nv-tile h2 {
		font-size: 20px;
	}

	/* style.css: @media screen and (max-width: 992px) */
	.container.hero-container.nvb:where(.nvb-col) {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.nvb:where(.nvb-col) .nv-col-left {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding-bottom: 24px;
	}
	.nvb:where(.nvb-col) .nv-col-right {
		padding: 24px 0 0;
		border-left: 0;
		border-top: 1px solid var(--line);
	}
	.nvb:where(.nvb-col) .nv-hero {
		flex: 0 0 auto;
		max-height: none;
	}
	.nvb:where(.nvb-col) .nv-hero__frame {
		flex: 0 0 auto;
		min-height: 0;
		max-height: none;
	}
	.nvb:where(.nvb-col) .nv-hero__link,
	.nvb:where(.nvb-col) .nv-hero .nv-ph,
	.nvb:where(.nvb-col) .nv-hero .nv-ph img {
		height: auto;
	}
	.nvb:where(.nvb-col) .nv-hero .nv-ph img {
		aspect-ratio: 664 / 456;
	}
	.nvb:where(.nvb-col) .nv-lead {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 24px;
	}
	.nvb:where(.nvb-col) .nv-lead h2 {
		font-size: 34px;
		line-height: 1.16;
	}
	.nvb:where(.nvb-col) .nv-t2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.nvb:where(.nvb-col) .nv-t2 .nv-line {
		display: block;
		grid-row: auto;
		margin-top: 0;
		padding: 12px 0 12px 20px;
		border-left: 0;
		border-top: 1px solid var(--line);
	}
	.nvb:where(.nvb-col) .nv-t2 .nv-line:first-child {
		padding-top: 0;
		border-top: 0;
	}

	/* style.css: @media screen and (max-width: 768px) */
	.container.light-builder.nvb:where(.nvb-col),
	.container.hero-container.nvb:where(.nvb-col) {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* style.css: @media screen and (max-width: 666px) */
	.container.light-builder.nvb:where(.nvb-col) {
		padding-top: 16px;
	}
	.container.light-builder.nvb:where(.nvb-col).nv-top--alone {
		padding-bottom: 20px;
	}
	.nvb:where(.nvb-col).nv-top:not(.nv-top--alone) > :last-child {
		padding-bottom: 20px;
	}
	.container.hero-container.nvb:where(.nvb-col),
	.nvb:where(.nvb-col).nv-top + .container.hero-container.nvb {
		padding-top: 24px;
		padding-bottom: 32px;
	}
	.nvb:where(.nvb-col) .nv-k {
		font-size: 12px;
	}
	.nvb:where(.nvb-col) .nv-lead {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.nvb:where(.nvb-col) .nv-lead:not(:last-child) {
		padding-bottom: 20px;
		margin-bottom: 16px;
	}
	.nvb:where(.nvb-col) .nv-lead h2 {
		font-size: 28px;
		line-height: 1.2;
	}
	.nvb:where(.nvb-col) .nv-line h2 {
		font-size: 20px;
		line-height: 1.3;
	}
	.nvb:where(.nvb-col) .nv-col-left {
		gap: 0;
		padding-bottom: 20px;
	}
	.nvb:where(.nvb-col) .nv-col-left .nv-tile,
	.nvb:where(.nvb-col) .nv-col-left .nv-tile + .nv-tile {
		grid-template-columns: 108px minmax(0, 1fr);
		gap: 14px;
		padding: 12px 0;
		border-top: 1px solid var(--line);
	}
	.nvb:where(.nvb-col) .nv-col-left .nv-tile:first-child {
		padding-top: 0;
		border-top: 0;
	}
	.nvb:where(.nvb-col) .nv-tile .nv-ph img {
		aspect-ratio: 4 / 3;
	}
	.nvb:where(.nvb-col) .nv-tile h2 {
		font-size: 19px;
		line-height: 1.3;
	}
	.nvb:where(.nvb-col) .nv-tile .nv-m {
		display: none;
	}
	.nvb:where(.nvb-col) .nv-ph--corners::after {
		display: none;
	}
	.nvb:where(.nvb-col) .nv-hero {
		--nv-hang: 16px;
	}
	.nvb:where(.nvb-col) .nv-hero .nv-hero__ov {
		padding: 0 16px;
	}
	.nvb:where(.nvb-col) .nv-hero--top .nv-hero__ov {
		padding-top: 16px;
	}
	.nvb:where(.nvb-col) .nv-hero .hero-big-banner-title {
		font-size: 20px;
	}
	.nvb:where(.nvb-col) .nv-hero--top > .nv-m {
		margin-top: 12px;
	}
	.nvb:where(.nvb-col) .nv-hero:not(.nv-hero--top) .nv-hero__ov {
		position: relative;
		inset: auto;
		margin-top: calc(-1 * var(--nv-pull, 0px));
	}
	.nvb:where(.nvb-col) .nv-hero:not(.nv-hero--top) .hero-big-banner-title {
		font-size: 17px;
	}
	.nvb:where(.nvb-col) .nv-hero:not(.nv-hero--top) > .nv-m {
		margin-top: 12px;
	}
	.nvb:where(.nvb-col) .nv-hero:not(.nv-hero--top) {
		--nv-shade-edge: rgba(0, 7, 20, .5);
		--nv-shade-kick: rgba(0, 7, 20, .42);
		--nv-shade-over: 20px;
	}
	body:not(.am-theme-contrast) .nvb:where(.nvb-col) .nv-hero:not(.nv-hero--top) .nv-hero__frame:has(.nv-k__excl) {
		--nv-shade-edge: rgba(0, 7, 20, .66);
		--nv-shade-kick: rgba(0, 7, 20, .58);
	}
	.nvb:where(.nvb-col) .nv-hero:not(.nv-hero--top) .nv-hero__frame:has(.nv-k) .nv-hero__ov::before {
		bottom: auto;
		height: calc(var(--nv-pull, 0px) + var(--nv-shade-over));
	}
	.nvb:where(.nvb-col) .nv-hero > .nv-m .nv-m__r,
	.nvb:where(.nvb-col) .nv-hero > .nv-m .nv-m__a {
		display: none;
	}
	.nvb:where(.nvb-col) .nv-hero > .nv-m .nv-m__time::after {
		content: none;
	}
	.nvb:where(.nvb-col) .nv-hero > .nv-m:not(:has(.nv-m__time)) {
		display: none;
	}
	.nvb:where(.nvb-col) .nv-col-center {
		gap: 0;
	}
	.nvb:where(.nvb-col) .nv-col-center > .nv-hero:not(:last-child) {
		margin-bottom: 20px;
	}
	.nvb:where(.nvb-col) .nv-col-center > .avb-item {
		margin: 12px 0;
	}
	.nvb:where(.nvb-col) .nv-col-center .nv-panel {
		align-items: flex-start;
		gap: 14px;
		padding: 12px 0;
		border-top: 1px solid var(--line);
		background: none;
	}
	.nvb:where(.nvb-col) .nv-col-center .nv-panel:first-child {
		padding-top: 0;
		border-top: 0;
	}
	.nvb:where(.nvb-col) .nv-panel .nv-ph {
		flex: 0 0 108px;
	}
	.nvb:where(.nvb-col) .nv-panel .nv-ph--empty {
		display: none;
	}
	.nvb:where(.nvb-col) .nv-panel h2 {
		font-size: 19px;
		line-height: 1.3;
	}
	.nvb:where(.nvb-col) .nv-panel .nv-m {
		display: none;
	}
	.nvb:where(.nvb-col) .nv-col-center .nv-panel h2 {
		color: var(--fg);
	}
	.nvb:where(.nvb-col) .nv-col-center .nv-panel .nv-k,
	.nvb:where(.nvb-col) .nv-col-center .nv-panel .nv-k span {
		color: var(--kick);
	}
	.nvb:where(.nvb-col) .nv-col-center .nv-panel .nv-k .nv-k__excl {
		color: var(--excl);
	}
	.nvb:where(.nvb-col) .nv-col-center .nv-panel .nv-k .nv-k__upd {
		color: #ff8a8e;
	}
	.nvb:where(.nvb-col) .nv-li h2 {
		font-size: 18px;
		line-height: 1.35;
	}
}