/* Vision Realty news — Figma NW Website, archive 1196:12818.
 * Type comes from the Newway scale in style.css (--nw-*); this file only
 * handles layout, colour assignment and the geometry taken off the frame. */
.vision-news-page .ct-container,
.vision-news-page .ct-container-full,
.vision-single-news .ct-container,
.vision-single-news .ct-container-full {
	max-width: none !important;
	padding: 0 !important;
}

.vision-news-page main,
.vision-single-news main {
	padding: 0 !important;
	margin: 0 !important;
	background: var(--vision-bg);
	color: var(--vision-body);
}

.vision-news-shell,
.vision-article__shell {
	width: var(--vision-container);
	margin-inline: auto;
}

.vision-news-archive,
.vision-article {
	width: 100%;
	font-family: var(--vision-font-body);
	background: var(--vision-bg);
}

/* Date row — clock icon + 8px + Body 14. Shared by hero and cards (1196:12896). */
.vision-news-date {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: var(--nw-body-14);
	letter-spacing: var(--nw-body-14-ls);
	color: var(--vision-body);
}

.vision-news-date .vision-icon { flex: 0 0 auto; }

/* Head — 1196:12855. Title block 601px, search 425x57, vertically centred. */
.vision-news-head { padding-top: 20px; }

.vision-news-head__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.vision-news-head__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 601px;
}

.vision-news-head h1 {
	margin: 0;
	font: var(--nw-h1);
	letter-spacing: var(--nw-h1-ls);
	text-transform: uppercase;
	color: var(--vision-primary);
}

.vision-news-head__intro p {
	margin: 0;
	font: var(--nw-body-16);
	letter-spacing: var(--nw-body-16-ls);
	color: var(--vision-body);
}

.vision-news-search {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: 425px;
	height: 57px;
	padding: 12px;
	border: 1px solid var(--vision-primary);
	border-radius: 100px;
	background: transparent;
}

.vision-news-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 8px 16px !important;
	font: var(--nw-body-16) !important;
	letter-spacing: var(--nw-body-16-ls);
	color: var(--vision-body);
}

.vision-news-search input::placeholder { color: var(--vision-body); opacity: .5; }

/* Blocksy gives every [type=submit] a 40px min-height, which turns this into an
 * ellipse — min-height beats height, so it has to be reset explicitly. */
.vision-news-search button {
	display: grid;
	place-items: center;
	flex: 0 0 33px;
	box-sizing: border-box;
	width: 33px;
	height: 33px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vision-primary);
	color: #fff;
	cursor: pointer;
}

/* Hero — 1196:12866. 1280x720, content inset 58/55, arrows bottom right. */
.vision-news-featured { margin-top: 32px; }

.vision-news-hero-swiper {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
}

.vision-news-hero {
	position: relative;
	display: block;
	aspect-ratio: 1280 / 720;
	color: #fff;
	overflow: hidden;
}

.vision-news-hero > img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.vision-news-hero:hover > img { transform: scale(1.025); }

.vision-news-hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(24, 20, 16, .85) 0%, rgba(24, 20, 16, .15) 45%, rgba(24, 20, 16, 0) 70%);
}

.vision-news-hero__content {
	position: absolute;
	left: 58px;
	right: 58px;
	bottom: 55px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.vision-news-hero .vision-news-date { color: var(--vision-accent-light); }

.vision-news-hero__content strong {
	font: var(--nw-h3);
	letter-spacing: var(--nw-h3-ls);
	color: var(--vision-bg);
}

.vision-news-hero__nav {
	position: absolute;
	right: 39px;
	bottom: 55px;
	z-index: 2;
	display: flex;
	gap: 32px;
}

.vision-news-hero__nav button {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.vision-news-hero__nav button:hover { color: var(--vision-accent-light); }

/* Category tabs — 1196:12878. Left aligned, 16px gutters, active underline. */
.vision-news-tabs {
	display: flex;
	gap: 16px;
	margin-top: 20px;
	overflow-x: auto;
	scrollbar-width: none;
}

.vision-news-tabs::-webkit-scrollbar { display: none; }

.vision-news-tabs a {
	flex: 0 0 auto;
	padding: 16px 0;
	border-bottom: 1px solid transparent;
	font: var(--nw-body-16);
	letter-spacing: var(--nw-body-16-ls);
	color: var(--vision-body);
	text-decoration: none;
	white-space: nowrap;
}

.vision-news-tabs a:hover { color: var(--vision-primary); }

.vision-news-tabs a.is-active {
	font-weight: 600;
	color: var(--vision-primary);
	border-bottom-color: var(--vision-primary);
}

/* Listing — main 952 + 20px gutter + 307 sidebar (1196:12889). */
.vision-news-listing { padding: 32px 0 77px; transition: opacity .2s ease; }
.vision-news-listing.is-loading { opacity: .5; pointer-events: none; }

.vision-news-layout {
	display: grid;
	grid-template-columns: minmax(0, 952px) 307px;
	gap: 20px;
	align-items: start;
}

.vision-news-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

/* Card — 1196:12893. Media 460x260 r16, then a flat 16px-gap stack. */
.vision-news-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	height: 100%;
}

.vision-news-card__media {
	display: block;
	aspect-ratio: 460 / 260;
	border-radius: 16px;
	overflow: hidden;
	background: var(--vision-bg-2);
}

.vision-news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.vision-news-card:hover .vision-news-card__media img { transform: scale(1.035); }

.vision-news-card__body { display: flex; flex-direction: column; gap: 16px; flex: 1; }

.vision-news-card__title {
	margin: 0;
	font: var(--nw-body-18);
	letter-spacing: var(--nw-body-18-ls);
}

/* Two lines is the cap, not a reserved block — a one-line title must not leave
 * a hole. Cards stretch to the row height and the slack collects above the
 * read-more link (margin-top:auto), so only the links line up across a row. */
.vision-news-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--vision-title);
	text-decoration: none;
}

.vision-news-card__title a:hover { color: var(--vision-primary); }

.vision-news-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font: var(--nw-body-16);
	letter-spacing: var(--nw-body-16-ls);
	color: var(--vision-body);
}

.vision-news-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font: var(--nw-btn-sm);
	color: var(--vision-primary);
	text-decoration: none;
}


.vision-news-card__more .vision-icon { transition: transform .2s ease; }
.vision-news-card__more:hover .vision-icon { transform: translateX(4px); }

/* Sidebar — 1196:13017. Divider rule + 20px inset, no cards or boxes. */
.vision-news-sidebar {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	padding-left: 20px;
	border-left: 1px solid rgba(90, 78, 62, .5);
}

.vision-news-sidebox { display: flex; flex-direction: column; gap: 16px; }
.vision-news-sidebox__list { display: flex; flex-direction: column; gap: 16px; }

.vision-news-sidebox__title {
	width: fit-content;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--vision-title);
	font: var(--nw-sidebar-title);
	letter-spacing: -.18px;
	text-transform: uppercase;
	color: var(--vision-title);
}

.vision-news-sidebox + .vision-news-sidebox .vision-news-sidebox__title { border-bottom-color: rgba(90, 78, 62, .5); }

.vision-side-project { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.vision-side-project img { width: 100%; aspect-ratio: 287 / 162; border-radius: 5px; object-fit: cover; }
.vision-side-project__body { display: flex; flex-direction: column; gap: 8px; }
.vision-side-project__head { display: flex; flex-direction: column; gap: 4px; }
.vision-side-project strong { font: var(--nw-body-18); letter-spacing: var(--nw-body-18-ls); color: var(--vision-primary); }
.vision-side-project small { font: var(--nw-body-14); letter-spacing: var(--nw-body-14-ls); color: var(--vision-body); }
.vision-side-project__price { font: var(--nw-btn-sm); color: var(--vision-primary); }

.vision-side-news { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; }
.vision-side-news img { flex: 0 0 140px; width: 140px; height: 105px; border-radius: 8px; object-fit: cover; background: #d9d9d9; }
.vision-side-news > span { display: flex; min-width: 0; flex-direction: column; gap: 8px; }

.vision-side-news strong {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: var(--nw-btn-sm);
	color: var(--vision-title);
}

.vision-side-news:hover strong { color: var(--vision-primary); }
.vision-side-news time { font: var(--nw-desc); letter-spacing: var(--nw-desc-ls); color: var(--vision-body); }

/* Pagination — 1196:13067. 40px cells, 12px gutters, filled arrow buttons. */
.vision-news-pagination {
	width: var(--vision-container);
	margin: 32px auto 0;
}

.vision-news-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

.vision-news-pagination .page-numbers {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	border-radius: 8px;
	font: var(--nw-btn-lg);
	color: var(--vision-body);
	text-decoration: none;
}

.vision-news-pagination .page-numbers.current {
	border: 1px solid var(--vision-primary);
	color: var(--vision-primary);
}

.vision-news-pagination a.page-numbers:hover { color: var(--vision-primary); }

.vision-news-pagination .prev,
.vision-news-pagination .next {
	background: var(--vision-primary);
	color: #fff;
}

.vision-news-pagination .prev { margin-right: 4px; }
.vision-news-pagination .next { margin-left: 4px; }
.vision-news-pagination .prev:hover,
.vision-news-pagination .next:hover { color: #fff; opacity: .85; }
.vision-news-pagination .vision-page-arrow { display: grid; place-items: center; }

.vision-news-empty { padding: 64px; text-align: center; background: var(--vision-bg-2); border-radius: 12px; }
.vision-news-empty h3 { margin: 0 0 8px; font: var(--nw-h3); letter-spacing: var(--nw-h3-ls); color: var(--vision-title); }

/* Home: 242:12812. */
.vision-home-news { padding: 96px 0 88px; background: var(--vision-bg-2); overflow: hidden; }
.vision-home-news__inner { width: var(--vision-container); margin-inline: auto; text-align: center; }
.vision-home-news__eyebrow { margin: 0 0 10px; color: var(--vision-primary); font-size: 12px; font-weight: 700; letter-spacing: .18em; }
.vision-home-news__heading { margin: 0 0 42px; color: var(--vision-title); font: 700 clamp(34px, 3.4vw, 48px)/1.25 var(--vision-font-heading); }
.vision-home-news-swiper { overflow: visible; }
/* Home "Tin tức & Thị trường" reuses the archive card (16:9 media + meta +
 * excerpt + Đọc tiếp). Let slides size to content so cards align in a row. */
.vision-home-news-swiper .swiper-slide { height: auto; }
.vision-home-news-swiper .vision-news-card { height: 100%; }
.vision-home-news__card { position: relative; display: block; height: 406px; overflow: hidden; border-radius: 4px; text-align: left; color: #fff; }
/* Neutralise Blocksy's blue a:hover — the card keeps white text. */
.vision-home-news__card:hover,
.vision-home-news__card:focus { color: #fff; }
.vision-home-news__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.vision-home-news__card:hover img { transform: scale(1.04); }
.vision-home-news__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,25,19,.88) 0%, rgba(31,25,19,.08) 64%); }
.vision-home-news__content { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; }
.vision-home-news__content strong {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: 700 19px/1.42 var(--vision-font-heading);
	transition: color .2s ease;
}
.vision-home-news__card:hover .vision-home-news__content strong,
.vision-home-news__card:focus .vision-home-news__content strong { color: var(--vision-primary); }
.vision-home-news__content time { margin-top: 12px; font-size: 12px; opacity: .85; }
.vision-home-news__all { display: inline-flex; align-items: center; gap: 10px; margin-top: 38px; color: var(--vision-primary); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: opacity .2s ease; }
/* Keep brand colour on hover (Blocksy turns links blue). */
.vision-home-news__all:hover,
.vision-home-news__all:focus { color: var(--vision-primary); opacity: .8; }

/* Single article — Figma 1196:12572. Full-width 1280 column, no side rail:
 * the orange circles down the left edge are the site-wide floating widget
 * (1196:12813), not article share controls. */

/* Breadcrumb — 1196:12614. Full-bleed orange band, flush under the menu. */
.vision-article-crumb {
	background: var(--vision-primary);
	font: var(--nw-body-18);
	letter-spacing: var(--nw-body-18-ls);
	color: var(--vision-bg);
}

.vision-article-crumb .vision-article__shell {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 80px;
}

.vision-article-crumb a { color: inherit; text-decoration: none; }
.vision-article-crumb a:hover { text-decoration: underline; }
.vision-article-crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vision-article__body { padding-top: 40px; }

/* Header — 1196:12618. Left aligned, eyebrow sits tight against the title. */
.vision-article__header { display: flex; flex-direction: column; gap: 16px; }
.vision-article__titles { display: flex; flex-direction: column; }

.vision-article__eyebrow {
	margin: 0;
	font: 700 16px/1.5 var(--vision-font-body);
	letter-spacing: 1.28px;
	text-transform: uppercase;
	color: var(--vision-primary);
}

.vision-article__header h1 {
	margin: 0;
	font: var(--nw-h2);
	letter-spacing: var(--nw-h2-ls);
	color: var(--vision-title);
}

.vision-article__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.vision-article__meta-facts { display: flex; align-items: center; gap: 16px; }
.vision-article__meta-rule { width: 1px; height: 14px; background: var(--vision-body); }

.vision-article__share {
	display: flex;
	align-items: center;
	gap: 12px;
	font: var(--nw-body-14);
	letter-spacing: var(--nw-body-14-ls);
	color: var(--vision-body);
}

.vision-article__share-icons { display: flex; align-items: center; gap: 8px; }

.vision-article__share-icons a,
.vision-article__share-icons button {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--vision-body);
	border-radius: 100px;
	background: transparent;
	color: var(--vision-body);
	cursor: pointer;
}

.vision-article__share-icons a:hover,
.vision-article__share-icons button:hover,
.vision-article__share-icons button.is-copied {
	border-color: var(--vision-primary);
	background: var(--vision-primary);
	color: #fff;
}

/* Hero — 1196:12638. 1280x720. */
.vision-article__hero {
	margin-top: 32px;
	aspect-ratio: 1280 / 720;
	border-radius: 16px;
	overflow: hidden;
	background: var(--vision-bg-2);
}

.vision-article__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Body copy — 1196:12639. Body 16 throughout, 32px between blocks. */
.vision-article__content {
	margin-top: 32px;
	font: var(--nw-body-16);
	letter-spacing: var(--nw-body-16-ls);
	color: var(--vision-body);
}

.vision-article__content > :first-child { margin-top: 0; }
.vision-article__content > :last-child { margin-bottom: 0; }
.vision-article__content p { margin: 0 0 32px; }

.vision-article__content h2 {
	margin: 32px 0;
	font: var(--nw-h3);
	letter-spacing: var(--nw-h3-ls);
	color: var(--vision-title);
}

/* Figma's article body (1196:12639) only specs paragraphs, so the subheading
 * and pull-quote styles below are ours for WP rich text. Both use the Semibold
 * 18 token deliberately: at Regular 400 an h3 would carry no weight contrast
 * against the 16px body copy around it. */
.vision-article__content h3 {
	margin: 32px 0 16px;
	font: var(--nw-btn-lg);
	letter-spacing: var(--nw-body-18-ls);
	color: var(--vision-title);
}

.vision-article__content img {
	width: 100%;
	aspect-ratio: 1280 / 720;
	object-fit: cover;
	margin-block: 32px;
	border-radius: 16px;
}

.vision-article__content blockquote {
	margin: 32px 0;
	padding: 24px 28px;
	border-left: 3px solid var(--vision-primary);
	background: var(--vision-bg-2);
	color: var(--vision-title);
	font: var(--nw-btn-lg);
	letter-spacing: var(--nw-body-18-ls);
}

.vision-article__content a { color: var(--vision-primary); }
.vision-article__content ul,
.vision-article__content ol { margin: 0 0 32px; padding-left: 24px; }
.vision-article__content li { margin-bottom: 8px; }

/* Pill buttons shared by both CTA blocks — 190x51, 100px radius. */
.vision-pill {
	display: grid;
	place-items: center;
	width: 190px;
	height: 51px;
	box-sizing: border-box;
	border-radius: 100px;
	font: var(--nw-btn);
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .2s ease;
}

.vision-pill:hover { opacity: .85; }
.vision-pill--solid { background: var(--vision-bg); color: var(--vision-primary); }
.vision-pill--line { border: 1px solid var(--vision-primary); color: var(--vision-primary); }
.vision-pill--ghost { border: 1px solid var(--vision-bg); color: var(--vision-bg); }

/* Mid-article promo — 1196:12643. 640 cream panel + 640 image, 16px radius. */
.vision-article-promo { margin-top: 40px; }

.vision-article-promo__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	aspect-ratio: 1280 / 360;
	border-radius: 16px;
	overflow: hidden;
}

.vision-article-promo__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 16px;
	background: var(--vision-accent-light);
	text-align: center;
}

.vision-article-promo__text { display: flex; flex-direction: column; gap: 16px; max-width: 522px; }

.vision-article-promo__text h2 {
	margin: 0;
	font: 700 24px/1.5 var(--vision-font-heading);
	letter-spacing: var(--nw-h3-ls);
	text-transform: uppercase;
	color: var(--vision-title);
}

.vision-article-promo__text p {
	margin: 0;
	font: var(--nw-body-16);
	letter-spacing: var(--nw-body-16-ls);
	color: var(--vision-body);
}

.vision-article-promo__actions { display: flex; gap: 16px; }
.vision-article-promo__media img { width: 100%; height: 100%; object-fit: cover; }

/* Related — 1196:12573. Rule on top, orange tab beside the heading. */
/* 168px + the 32px the last content block carries = the 200px Figma leaves
 * between the end of the article and the rule. */
.vision-related-news { margin-top: 168px; }
.vision-related-news .vision-article__shell { border-top: 1px solid rgba(90, 78, 62, .5); padding-top: 32px; }

.vision-related-news__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.vision-related-news__head h2 {
	display: flex;
	align-items: center;
	/* Figma puts the text at x=16 measured from the bar, so the 5px bar eats
	 * into the gutter: 5 + 11 = the 16px offset on the frame. */
	gap: 11px;
	margin: 0;
	font: var(--nw-h2);
	letter-spacing: var(--nw-h2-ls);
	text-transform: uppercase;
	color: var(--vision-primary);
}

.vision-related-news__head h2::before {
	content: "";
	width: 5px;
	height: 45px;
	background: var(--vision-primary);
}

.vision-related-news__head > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	font: var(--nw-btn-sm);
	color: var(--vision-body);
	text-decoration: none;
}

.vision-related-news__head > a:hover { color: var(--vision-primary); }

.vision-related-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Related card — 1196:12584. 8px inner gaps, UVN Nhan 24 orange title, no excerpt. */
.vision-related-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; height: 100%; }

.vision-related-card__media {
	display: block;
	aspect-ratio: 416 / 234;
	border-radius: 16px;
	overflow: hidden;
	background: var(--vision-bg-2);
}

.vision-related-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.vision-related-card:hover .vision-related-card__media img { transform: scale(1.035); }
.vision-related-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.vision-related-card__title {
	margin: 0;
	font: var(--nw-h3);
	letter-spacing: var(--nw-h3-ls);
}

.vision-related-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--vision-primary);
	text-decoration: none;
}

.vision-related-card__title a:hover { text-decoration: underline; }

.vision-related-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font: var(--nw-btn-sm);
	color: var(--vision-primary);
	text-decoration: none;
}

.vision-related-card__more .vision-icon { transition: transform .2s ease; }
.vision-related-card__more:hover .vision-icon { transform: translateX(4px); }

/* Closing CTA — 1196:12655. 1280x360 image panel under a 60% black scrim. */
.vision-article-cta { margin: 40px 0 54px; }

.vision-article-cta__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 54px;
	aspect-ratio: 1280 / 360;
	padding: 16px;
	border-radius: 16px;
	background: url('../img/sections/sohuu-bg.jpg') center/cover no-repeat;
	text-align: center;
	overflow: hidden;
}

.vision-article-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}

.vision-article-cta__text,
.vision-article-cta__actions { position: relative; }
.vision-article-cta__text { display: flex; flex-direction: column; gap: 16px; color: var(--vision-bg); }

.vision-article-cta__text h2 {
	margin: 0;
	font: 700 24px/1.5 var(--vision-font-heading);
	letter-spacing: var(--nw-h3-ls);
	text-transform: uppercase;
	color: inherit;
}

.vision-article-cta__text p {
	margin: 0;
	font: var(--nw-body-16);
	letter-spacing: var(--nw-body-16-ls);
}

.vision-article-cta__actions { display: flex; gap: 32px; }


/* --- Responsive. The Figma frame is desktop-only at 1440; below that the
 * fixed 952/307 split collapses and the fixed insets scale down. --- */
@media (max-width: 1320px) {
	.vision-news-layout { grid-template-columns: minmax(0, 1fr) 307px; }
	.vision-news-hero__content { left: 40px; right: 40px; bottom: 40px; }
	.vision-news-hero__nav { right: 28px; bottom: 40px; }
}

@media (max-width: 1100px) {
	.vision-news-search { width: 360px; }
	.vision-news-layout { grid-template-columns: minmax(0, 1fr) 280px; }
	.vision-news-grid { gap: 24px; }
}

@media (max-width: 860px) {
	.vision-news-head__row { flex-direction: column; align-items: stretch; gap: 24px; }
	.vision-news-search { width: 100%; }
	.vision-news-hero { aspect-ratio: 4 / 3; }
	.vision-news-hero__content { left: 32px; right: 32px; bottom: 36px; }
	.vision-news-hero__nav { right: 24px; bottom: 36px; }
	.vision-news-layout { grid-template-columns: 1fr; }
	.vision-news-sidebar { position: static; padding-left: 0; border-left: 0; margin-top: 40px; }
	.vision-article__meta { flex-direction: column; align-items: flex-start; gap: 12px; }
	.vision-article-promo__inner { grid-template-columns: 1fr; aspect-ratio: auto; }
	.vision-article-promo__panel { padding: 40px 24px; }
	.vision-article-promo__media { aspect-ratio: 16 / 9; }
	.vision-article-cta__panel { aspect-ratio: auto; padding: 56px 24px; }
	.vision-related-news__grid { grid-template-columns: repeat(2, 1fr); }
	.vision-related-news__grid .vision-related-card:last-child { display: none; }
}

@media (max-width: 620px) {
	.vision-news-shell,
	.vision-article__shell,
	.vision-news-pagination { width: min(100% - 32px, 1280px); }
	.vision-news-head h1 { font-size: 32px; }
	.vision-news-search { height: 52px; }
	.vision-news-hero { aspect-ratio: 3 / 4; }
	.vision-news-hero__content { left: 20px; right: 20px; bottom: 28px; gap: 12px; }
	.vision-news-hero__content strong { font-size: 20px; }
	.vision-news-hero__nav { right: 20px; bottom: 28px; gap: 24px; }
	.vision-news-grid { grid-template-columns: 1fr; }
	.vision-news-listing { padding-bottom: 72px; }
	.vision-side-news img { flex-basis: 110px; width: 110px; height: 82px; }
	.vision-home-news { padding: 72px 16px 68px; }
	.vision-home-news__heading { margin-bottom: 30px; }
	.vision-home-news__card { height: 390px; }
	.vision-article-crumb { font-size: 14px; }
	.vision-article-crumb .vision-article__shell { min-height: 60px; }
	.vision-article__header h1 { font-size: 26px; }
	.vision-article__eyebrow { font-size: 14px; letter-spacing: 1.12px; }
	.vision-article__hero { aspect-ratio: 4 / 3; }
	.vision-related-news { margin-top: 56px; }
	.vision-related-news__grid { grid-template-columns: 1fr; }
	.vision-related-news__grid .vision-related-card:last-child { display: flex; }
	.vision-related-news__head h2 { font-size: 24px; }
	.vision-related-news__head h2::before { height: 34px; }
	.vision-article-cta { margin: 56px 0 40px; }
	.vision-pill { width: 100%; max-width: 260px; }
	.vision-article-promo__actions,
	.vision-article-cta__actions { flex-direction: column; gap: 12px; width: 100%; align-items: center; }
}