/*
 * PowerSynch Addons — News page
 * Pixel-matched to Figma (node 11766:8947).
 *
 * Every selector is written as ".psad-news <thing>" rather than bare
 * ".psad-<thing>". Two reasons: it can never leak into the rest of the site,
 * and the extra class outweighs the rules an Elementor kit prints for global
 * typography and buttons (".elementor-kit-123 button { ... }"), which would
 * otherwise repaint the filter pills, the select and the pagination buttons
 * on the front end while looking fine in the editor.
 */

.psad-news {
	--psad-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--psad-font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--psad-green-400: #339433;
	--psad-green-600: #006e00;
	--psad-black: #161717;
	--psad-dark-900: #070a10;
	--psad-dark-800: #090d15;
	--psad-dark-500: #111827;
	--psad-dark-400: #414652;
	--psad-dark-300: #60646e;
	--psad-dark-100: #b5b7bc;
	--psad-dark-50: #e7e8e9;
	--psad-gray-200: #eaecf0;
	--psad-muted: #646464;
	--psad-white: #fdfdfd;
	--psad-divider: #d9d9d9;

	overflow-wrap: break-word;
	font-family: var(--psad-font-body);
	color: var(--psad-black);
	max-width: 1328px;
	margin: 0 auto;
	padding: 64px 24px 80px;
	box-sizing: border-box;
	position: relative;
}

/* ---------- Section skeleton ----------
   Covers the whole section (hero + grid + sidebar) with a white/gray
   shimmering wave the instant the page paints, sized to the real content's
   own height underneath (no fake placeholder blocks to keep in sync with
layout settings). JS adds "is-ready" once the page has fully loaded
   fading it out to reveal the real content; the <noscript> tag next to it
   hides it outright when JavaScript is unavailable. */
.psad-news__skeleton {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 20px;
	background: linear-gradient(90deg, var(--psad-white) 25%, var(--psad-dark-50) 37%, var(--psad-white) 63%);
	background-size: 400% 100%;
	animation: psad-skeleton-wave 1.4s ease infinite;
}

.psad-news.is-ready .psad-news__skeleton {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

@keyframes psad-skeleton-wave {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.psad-news__skeleton { animation: none; }
}

.psad-news *,
.psad-news *::before,
.psad-news *::after {
	box-sizing: border-box;
}

.psad-news img {
	max-width: 100%;
	display: block;
}

/* Base link reset. Kept deliberately light (one class + the tag) so the
   component rules further down — card/sidebar titles, category links — win on
   their own merits, while still outweighing a theme's bare "a { }" rule. */
.psad-news a {
	text-decoration: none;
	color: inherit;
}

.psad-news .psad-divider {
	display: block;
	border: none;
	border-bottom: 1px solid var(--psad-divider);
	height: 0;
	background: var(--psad-divider);
	margin: 0;
	width: 100%;
	flex-shrink: 0;
}

.psad-news .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Hero ---------- */

/* One card per featured article — the section stacks them when the hero is
   set to show more than one. Both the section and the card are left plain:
   the section is transparent and the card white, so the hero picks up
   whatever the page section behind it uses. */
.psad-news .psad-hero {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 64px;
}

.psad-news .psad-hero__card {
	display: flex;
	align-items: stretch;
	gap: 40px;
	background: #E6F2E6;
	border-radius: 40px;
	overflow: hidden;
	padding: 48px;
}

.psad-news .psad-hero__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	padding: 32px;
	border-radius: 20px;
	background: #fff;
}

.psad-news .psad-hero__top {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.psad-news .psad-hero__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* !important on font-weight only: the active theme's reset stylesheet sets
   a blanket "h1,h2,h3,h4,h5,h6{font-weight:500}" on the bare tag, and some
   Elementor global-typography kits go further and inject their own weight
   for every heading — both can otherwise silently thin out these headings. */
.psad-news .psad-hero__title {
	margin: 0;
	font-family: var(--psad-font-heading);
	font-weight: 600 !important;
	font-size: 24px;
	line-height: 32px !important;
	color: #000;
}

.psad-news .psad-hero__title > a {
	font-weight: 600;
}

.psad-news .psad-hero__excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: #000;
}

.psad-news .psad-hero__meta {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	flex-wrap: wrap;
}

.psad-news .psad-hero__meta-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.psad-news .psad-hero__meta-label {
	font-size: 14px;
	line-height: 22px;
	color: var(--psad-black);
}

.psad-news .psad-hero__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.psad-news .psad-hero__avatar img,
.psad-news .psad-card__avatar img,
.psad-news .psad-hero__avatar .avatar,
.psad-news .psad-card__avatar .avatar {
	width: 40px;
	height: 40px;
	border-radius: 200px;
	object-fit: cover;
	display: block;
}

.psad-news .psad-hero__author-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-black);
}

.psad-news .psad-hero__date {
	display: flex;
	align-items: center;
	height: 40px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-black);
}

.psad-news .psad-hero__categories {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.psad-news .psad-hero__categories .psad-hero__meta-label {
	color: var(--psad-muted);
	margin-bottom: 4px;
}

.psad-news .psad-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.psad-news .psad-badge {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 2px 10px;
	border: 1.5px solid var(--psad-dark-50);
	border-radius: 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.psad-news .psad-hero__media {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 300px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--psad-dark-50);
}

/* .psad-news prefix bumps specificity above Elementor/theme's generic
   "img{height:auto}" resets (e.g. .elementor-widget-container img), which
   otherwise let the image sit at its intrinsic height and expose the gray
   fallback background of the fixed-height container underneath it. */
.psad-news .psad-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.psad-news .psad-hero__media-fade {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 60%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
	pointer-events: none;
}

/* ---------- Filters ---------- */

.psad-news .psad-filters {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	max-width: 100%;
	margin-bottom: 32px;
}

.psad-news .psad-filters__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.psad-news .psad-pill {
	font-family: var(--psad-font-body);
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--psad-dark-50);
	border-radius: 16px;
	padding: 0 14px;
	height: 38px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-dark-400);
	white-space: nowrap;
	max-width: 100%;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.psad-news .psad-pill:hover,
.psad-news .psad-pill:focus-visible {
	background: var(--psad-black);
	border-color: var(--psad-black);
	color: #fff;
}

/* The active pill keeps its green fill — hovering it shouldn't flip to black. */
.psad-news .psad-pill.is-active:hover,
.psad-news .psad-pill.is-active:focus-visible {
	background: var(--psad-green-400);
	border-color: var(--psad-green-400);
	color: #fff;
}

.psad-news .psad-pill.is-active {
	background: var(--psad-green-400);
	border-color: var(--psad-green-400);
	color: #fff;
}

.psad-news .psad-filters__tag,
.psad-news .psad-filters__sort {
	flex-shrink: 0;
}

/* The first dropdown after the pills is what gets pushed to the right edge;
   any second one then sits beside it. */
.psad-news .psad-filters__pills ~ .psad-filters__tag,
.psad-news .psad-filters__pills ~ .psad-filters__sort {
	margin-left: auto;
}

.psad-news .psad-filters__pills ~ .psad-filters__sort ~ .psad-filters__tag,
.psad-news .psad-filters__pills ~ .psad-filters__tag ~ .psad-filters__sort {
	margin-left: 0;
}

.psad-news .psad-select {
	font-family: var(--psad-font-body);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23414652' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	border: 1.5px solid var(--psad-dark-50);
	border-radius: 16px;
	height: 38px;
	min-width: 168px;
	padding: 0 38px 0 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-dark-400);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.psad-news .psad-select:hover {
	border-color: var(--psad-dark-100);
	color: var(--psad-black);
}

.psad-news .psad-select:focus,
.psad-news .psad-select:focus-visible {
	outline: none;
	border-color: var(--psad-green-400);
}

/* The dropdown list itself is painted by the OS — keep it readable rather
   than inheriting the theme's option colors. */
.psad-news .psad-select option {
	color: var(--psad-black);
	background: #fff;
}

.psad-news[data-loading="1"] .psad-news__grid-wrap,
.psad-news[data-loading="1"] #psad-pagination {
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* ---------- Body layout (grid + sidebar) ---------- */

.psad-news__body {
	display: grid;
	grid-template-columns: 1fr 288px;
	gap: 40px;
	align-items: start;
}

.psad-news__body--no-sidebar {
	grid-template-columns: 1fr;
}

.psad-news__main {
	min-width: 0;
}

/* ---------- Grid ---------- */

.psad-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 24px;
	row-gap: 44px;
}

.psad-news .psad-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.psad-news .psad-card__media {
	display: block;
	position: relative;
	width: 100%;
	height: 242px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--psad-dark-50);
}

.psad-news .psad-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.psad-news .psad-card__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.psad-news .psad-card__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.psad-news .psad-card__category {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-green-600);
}

.psad-news .psad-card__title {
	margin: 0;
	font-family: var(--psad-font-heading);
	font-weight: 600 !important;
	font-size: 20px;
	line-height: 28px;
	color: var(--psad-dark-900);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.psad-news .psad-card__title > a {
	font-weight: 600;
}

.psad-news .psad-card__excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--psad-dark-400);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.psad-news .psad-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.psad-news .psad-card__author-info {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
}

.psad-news .psad-card__author-name { color: var(--psad-dark-800); }
.psad-news .psad-card__date { color: var(--psad-dark-300); font-weight: 500; }

.psad-news .psad-no-results {
	grid-column: 1 / -1;
	padding: 48px 0;
	text-align: center;
	color: var(--psad-dark-400);
	font-size: 16px;
}

/* ---------- Sidebar ---------- */

.psad-news__sidebar {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.psad-news .psad-sidebar__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600 !important;
	line-height: 24px;
	color: var(--psad-black);
}

.psad-news .psad-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.psad-news .psad-sidebar__item {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.psad-news .psad-sidebar__item-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.psad-news .psad-sidebar__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.psad-news .psad-sidebar__category {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-green-600);
}

.psad-news .psad-sidebar__item-title {
	margin: 0;
	font-family: var(--psad-font-heading);
	font-weight: 600 !important;
	font-size: 20px;
	line-height: 28px;
	color: var(--psad-dark-900);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.psad-news .psad-sidebar__item-title > a {
	font-weight: 600;
}

.psad-news .psad-sidebar__date {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-dark-300);
}

/* ---------- Pagination ---------- */

.psad-news .psad-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border-top: 1px solid var(--psad-gray-200);
	padding-top: 20px;
	margin-top: 48px;
}

.psad-news .psad-pagination__side {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.psad-news .psad-pagination__side--next { justify-content: flex-end; }

.psad-news .psad-page-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-dark-400);
	padding: 4px 2px;
}

.psad-news .psad-page-btn:hover { color: var(--psad-green-600); }

.psad-news .psad-pagination__numbers {
	display: flex;
	align-items: center;
	gap: 2px;
}

.psad-news .psad-page-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--psad-dark-400);
}

.psad-news .psad-page-num:hover:not(.is-active):not(.psad-page-num--ellipsis) {
	background: var(--psad-dark-50);
}

.psad-news .psad-page-num.is-active {
	background: var(--psad-green-400);
	color: #fff;
}

.psad-news .psad-page-num--ellipsis {
	cursor: default;
}

/* ================= Responsive ================= */

/* Tablet landscape */
@media (max-width: 1024px) {
	.psad-news__body {
		grid-template-columns: 1fr;
	}

	.psad-news__sidebar {
		order: 2;
		padding-top: 8px;
	}

	.psad-news__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablet portrait */
@media (max-width: 860px) {
	.psad-news .psad-hero__card {
		flex-direction: column;
		border-radius: 20px;
		padding: 16px;
	}

	.psad-news .psad-hero__content {
		padding: 24px;
	}

	.psad-news .psad-hero__media {
		height: 280px;
		min-height: 220px;
	}

	.psad-news .psad-hero__meta {
		gap: 24px;
	}
}

/* Mobile */
@media (max-width: 640px) {
	.psad-news {
		padding: 32px 16px 56px;
	}

	.psad-news .psad-hero {
		margin-bottom: 40px;
	}

	.psad-news .psad-hero__title {
		font-size: 20px;
		line-height: 28px;
	}

	.psad-news__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.psad-news .psad-filters {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: 24px;
	}

	.psad-news .psad-filters__pills {
		width: 100%;
	}

	/* Long category names have to wrap on a narrow screen — nowrap pills push
	   the whole page wider than the viewport and produce a horizontal scrollbar. */
	.psad-news .psad-pill {
		white-space: normal;
		height: auto;
		min-height: 38px;
		padding: 7px 14px;
		text-align: left;
	}

	/* Same specificity as the desktop "push the first dropdown right" rules,
	   which would otherwise still apply inside this breakpoint. */
	.psad-news .psad-filters__tag,
	.psad-news .psad-filters__sort,
	.psad-news .psad-filters__pills ~ .psad-filters__tag,
	.psad-news .psad-filters__pills ~ .psad-filters__sort,
	.psad-news .psad-filters__pills ~ .psad-filters__sort ~ .psad-filters__tag,
	.psad-news .psad-filters__pills ~ .psad-filters__tag ~ .psad-filters__sort {
		width: 100%;
		margin-left: 0;
	}

	.psad-news .psad-select { width: 100%; min-width: 0; }

	.psad-news .psad-pagination {
		gap: 8px;
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.psad-news .psad-pagination__side { flex: 0 0 auto; }
	.psad-news .psad-pagination__numbers { flex-wrap: wrap; justify-content: center; }
	.psad-news .psad-page-btn span { display: none; }

	.psad-news__sidebar {
		order: 2;
	}
}