/**
 * News Element — common layout utility classes shared by all blocks.
 */

.ne-d-flex {
	display: flex;
}
.ne-d-block {
	display: block;
}
.ne-v-center {
	align-items: center;
}

.ne-gutter {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 -20px -20px;
}

.ne-df-20 {
	flex: 0 0 33.33%;
	max-width: 33.33%;
	box-sizing: border-box;
	padding: 0 0 20px 20px;
}

.ne-df-33 {
	flex: 0 0 33.33%;
	max-width: 33.33%;
	box-sizing: border-box;
	padding: 0 0 20px 20px;
}

.no-overflow {
	overflow: hidden;
}

.pos-relative {
	position: relative;
}

.ne-grid-items.loading {
	opacity: 0.55;
}

/* Unstyled list: no bullets, margin or padding. */
.raw-style {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* Line clamp support: a "Line clamp" control only sets -webkit-line-clamp;
   the rest of the clamp setup lives here. */
.line-clip {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

/* Thumbnail wrapper: anchors overlays (.khboverlaythumb, counters).
   Blocks set its size. */
.ft-thumbwrap {
	position: relative;
}

/* Shade layer over the image. Empty by default; a block's Background group
   control targets {{WRAPPER}} .ft-thumbwrap.has-overlay::after. Sits under
   overlays (.khboverlaythumb, counter) and lets clicks reach the link. */
.ft-thumbwrap.has-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Keep the counter number above the shade (.khboverlaythumb already has
   z-index: 1). :where() so block styles can still position it. */
:where(.ft-thumbwrap.has-overlay) .counter {
	position: relative;
	z-index: 1;
}

/* Featured image fills its .ft-thumbwrap; the wrapper sets the size. */
.ft-thumbwrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

/* Zoom the image on hover (all blocks). */
.ft-thumbwrap:hover img {
	transform: scale(1.04);
}

/* Text links (post titles, meta, category tags, read more, term names,
   heading links): the hover colour and background ease in instead of
   switching. The class is printed by Khobish_Helper and the block templates. */
.ne-link {
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, text-decoration-color 0.3s ease, opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ft-thumbwrap img,
	.ne-link {
		transition: none;
	}
}

/* abs-excerpt: caption sits over the image instead of below it. Clicks pass
   through to the image link except on the caption's own links. */
.abs-excerpt .excerpt-wrap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.abs-excerpt .excerpt-wrap a {
	pointer-events: auto;
}

/* No featured image: striped placeholder <img> from
   Khobish_Helper::madmag_lazy_img(). Sized by .ft-thumbwrap img. */
.ne-thumb-ph {
	background: repeating-linear-gradient(135deg, #e9edf5 0 12px, #e1e6f0 12px 24px);
}

/* Thumbnail category-overlay wrapper, positioned over the featured image.
   Blocks with a different placement (e.g. Counter Post A's bottom-left)
   override position/top/left/bottom in their own stylesheet. */
.khboverlaythumb {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
}

/* Category badge overlay from Khobish_Helper::khobish_single_category_bg(),
   shared by every block that prints a .khboverlaythumb (hero-grid3, …). */
.khboverlaythumb .catbg-wrap {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.khboverlaythumb .cat-bg {
	display: inline-block;
	padding: 4px 10px;
	background: var(--ne-color-primary, #ea0000);
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
}

/* "Short line" meta item: a row of its own holding a short rule, which follows
   the card's text alignment. Post meta → Short line color / width / spacing. */
.ne-line {
	display: block;
	margin: 12px 0;
	line-height: 0;
}

.ne-line::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 1px;
	background: #e5e5e5;
	vertical-align: top;
}

/* "Author with avatar" meta item (Khobish_Helper::khobish_author( true )):
   a round photo in front of the name. Post meta → Avatar size resizes it. */
.ne-meta.has-avatar a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

.ne-meta .ne-avatar {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* "Author profile" meta item (Khobish_Helper::khobish_author_profile()):
   a 44 px round photo beside the name and a short bio. Colours come from
   the Post meta text / link controls. */
.ne-author-profile {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 12px;
}

.ne-author-profile .ne-ap-avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.ne-author-profile .ne-ap-img {
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

.ne-author-profile .ne-ap-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ne-author-profile .ne-meta {
	display: block;
	margin: 0;
}

.ne-author-profile .ne-ap-desc {
	line-height: 1.45;
}

/* "Date with clock icon" / "Comments with icon" meta items (Khobish_Helper::khobish_meta_icon()):
   an outline icon in the meta colour, a little lighter than the text. */
.ne-meta-ico {
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.3em;
	vertical-align: -0.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.65;
}

/* "Read more button with arrow": text and arrow in one row; padding, border and
   colours come from the block's Read more controls. */
.ne-readmore-btn.has-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.ne-btn-arrow {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* "Vertical separator" meta item: an empty span, drawn as a thin bar like the dash / dot items' spacing.
   In :where() so a block's own look (Counter Post A) still wins; Separator color sets currentColor. */
:where(.ne-separator--vert)::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin: 0 6px;
	vertical-align: -0.1em;
	background: currentColor;
}

/* Filter navigation + pagination (shared by blocks; ported from
   ne-blog-magazine's blocks/grid/assets/frontend.css). */

/* Filter tabs ------------------------------------------------------------ */

.ne-grid-filter {
	margin-bottom: 24px;
}

.ne-grid-filter .rightpart {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
}

.ne-grid-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	min-width: 0;
}

.ne-grid-tabs > li {
	flex: 0 0 auto;
	margin: 0;
	white-space: nowrap;
}

.ne-grid-tabs > li.notneeded,
.ne-grid-more.notneeded {
	display: none;
}

a.ne-grid-tab,
.ne-grid-more-toggle {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 3px;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

a.ne-grid-tab:hover,
a.ne-grid-tab.active,
.ne-grid-more.open .ne-grid-more-toggle {
	color: #fff;
	background: var(--ne-color-primary, #ea0000);
}

.ne-grid-more {
	position: relative;
	flex: 0 0 auto;
	margin-left: 6px;
}

.ne-grid-more-list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	display: none;
	min-width: 160px;
	padding: 6px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ne-grid-more.open .ne-grid-more-list {
	display: block;
}

.ne-grid-more-list > li {
	margin: 0;
}

.ne-grid-more-list a.ne-grid-tab {
	display: block;
}

/* Title in the tab row (Filter tabs → Title in the tab row) and the line after
   it (Style → Filter tabs → Middle line, transparent until a colour is set):
   the tabs keep their natural width at the end of the row and the line fills
   the space between, e.g. tagDiv's "GLOBAL NEWS ——— All ▾". */
.ne-grid-filter.has-title {
	display: flex;
	align-items: center;
}

.ne-grid-filter .ne-grid-title {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.ne-grid-line {
	flex: 1 1 auto;
	min-width: 20px;
	margin: 0 16px;
	border-top: 1px solid transparent;
}

.ne-grid-line:last-child {
	margin-right: 0;
}

.ne-grid-filter.has-title .rightpart {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
}

/* View-all link (Filter tabs → View-all link text) at the end of the row; colours,
   type and padding come from Style → Filter tabs → View-all link. */
.ne-grid-filter.has-more {
	display: flex;
	align-items: center;
}

.ne-grid-filter.has-more:not(.has-title) .rightpart {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.ne-grid-viewall {
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
}

.ne-grid-filter .rightpart + .ne-grid-viewall {
	margin-left: 16px;
}

/* Tabs as a dropdown (Filter tabs → Tabs as a dropdown): assets/js/grid.js moves
   every tab into the "More" list and names the active term on its toggle. */
.ne-grid-filter.tabs-dd .ne-grid-tabs {
	display: none;
}

.ne-grid-filter.tabs-dd .ne-grid-more {
	margin-left: 0;
}

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

.ne-grid-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
}

.ne-grid-pagination[hidden] {
	display: none;
}

.ne-grid-pagination a,
.ne-grid-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 36px;
	padding: 9px 20px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ne-grid-pagination .page-numbers {
	padding: 9px 12px;
}

/* :where() keeps the default below each block's Pagination colour controls,
   which use the same specificity and would otherwise lose to this file. */
:where(.ne-grid-wrap) .ne-grid-pagination a {
	color: #fff;
	background: var(--ne-color-primary, #ea0000);
}

.ne-grid-pagination .page-numbers.current {
	color: #fff;
	background: var(--ne-color-secondary, #101010);
}

.ne-grid-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	background: none;
}

.ne-grid-pagination a.inactive {
	opacity: 0.35;
	pointer-events: none;
}

.ne-grid-pagination a.xlspin {
	opacity: 0.6;
	pointer-events: none;
}

.ne-grid-pagination a.xlspin::after {
	content: '';
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ne-grid-spin 0.7s linear infinite;
}

/* Infinite scroll: no button, a spinner while the next page loads. */
.ne-grid-pagination.type-infinite .ne-grid-loadmore {
	display: none;
}

.ne-grid-spinner {
	display: none;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: var(--ne-color-primary, #ea0000);
	border-radius: 50%;
	animation: ne-grid-spin 0.7s linear infinite;
}

.ne-grid-pagination.type-infinite.is-loading .ne-grid-spinner {
	display: inline-block;
}

@keyframes ne-grid-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Themes underline content links; keep the tab/pagination controls clean
   without raising the specificity of their colour rules. */
.ne-grid-wrap .ne-grid-filter a,
.ne-grid-wrap .ne-grid-pagination a {
	text-decoration: none;
}

/* Post title: <h2 class="ne-title"> from Khobish_Helper, wrapping
   an <a> when linked. Blocks' Title controls style the
   heading; the link inherits from it. */
.ne-title {
	margin: 0;
}

/* "html" lifts the inherit just above themes' and page builders' link colours
   (Hello Elementor's "a", an Elementor kit's ".elementor-kit-N a", ".entry-content a":
   0,1,1 or less) and keeps it below the blocks' own title colour controls
   ("{{WRAPPER}} .ne-title a": 0,2,1 and up). */
html .ne-title a {
	color: inherit;
	text-decoration: none;
}

/* Pre title (modules/pre-title): a short line before the title text, in upper
   case and in the post's first category colour (--ne-cat, set inline; the
   title colour when the category has none). "Pre title (own line)" in a meta
   list prints it as a line of its own. */
.ne-pretitle {
	color: var(--ne-pt-clr, var(--ne-cat, inherit));
	text-transform: uppercase;
}

/* Post title → "Pre title color" (--ne-pt-clr) replaces the category colour and
   "Pre title: lighten" (--ne-pt-light) mixes white into it for dark backgrounds. */
@supports (color: color-mix(in srgb, red 50%, white)) {
	.ne-pretitle {
		color: color-mix(in srgb, var(--ne-pt-clr, var(--ne-cat, currentColor)) calc(100% - var(--ne-pt-light, 0%)), #fff);
	}
}

.ne-pretitle--line {
	display: block;
	font-weight: 700;
}

/* "Personal meta bar" post meta (bottom_personal): author | share | comments
   as three equal bordered cells. */
.ne-personal-meta {
	display: flex;
	width: 100%;
	margin-top: 15px;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	font-size: 13px;
}

.ne-personal-meta > div {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 8px;
	border-right: 1px solid #eee;
}

.ne-personal-meta > div:last-child {
	border-right: 0;
}

.ne-personal-meta a {
	color: inherit;
	text-decoration: none;
}

.ne-pm-author a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ne-pm-author img {
	border-radius: 50%;
}

.ne-pm-share {
	gap: 12px;
}

.ne-pm-share a {
	display: inline-flex;
}

/* Editor only: blocks inside a ne container (or its inner container) sit flush left
   and right, since the editor's auto side margins would otherwise centre them. */
.editor-styles-wrapper .ne-econ .wp-block {
	margin-left: 0;
	margin-right: 0;
}

/* Carousel pagination styles (Pagination style control; assets/js/carousel.js adds the classes).
   Bars and the autoplay timer are ported from the News Element Block carousel. Sizes and colours
   are CSS variables that the block's Pagination controls set on .splide__pagination; the
   values here are only the fallbacks. */
.splide__pagination {
	--ne-ring-width: 2px;
	--ne-ring-offset: 3px;
}

/* Timer ring (dots + autoplay): a ring around the active dot fills clockwise over the
   autoplay interval. --ne-pg-angle (0-360deg) is driven by Splide's autoplay progress. */
.ne-carousel .splide__pagination__page {
	position: relative;
}

.splide__pagination.ne-pg-timer:not(.ne-pg--bars) .splide__pagination__page.is-active::after {
	content: "";
	position: absolute;
	inset: calc(-1 * (var(--ne-ring-offset) + var(--ne-ring-width)));
	border-radius: 50%;
	background: conic-gradient(var(--ne-ring-color, currentColor) var(--ne-pg-angle, 0deg), transparent 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ne-ring-width) - 0.5px), #000 calc(100% - var(--ne-ring-width) + 0.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - var(--ne-ring-width) - 0.5px), #000 calc(100% - var(--ne-ring-width) + 0.5px));
	pointer-events: none;
}

/* Bars: every page is a bar and the active one fills from the left. With the timer on, the
   fill grows over the autoplay interval (--ne-pg-rate, 0-1); without it the bar is full.
   The rules are specific enough to beat the dot colour / size controls. */
.splide__pagination.ne-pg--bars li {
	line-height: 0;
}

.ne-carousel .splide__pagination.ne-pg--bars .splide__pagination__page {
	width: var(--ne-bar-width, 32px);
	height: var(--ne-bar-height, 4px);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--ne-bar-radius, 2px);
	background: var(--ne-bar-color, rgba(0, 0, 0, 0.15));
	opacity: 1;
	overflow: hidden;
	transform: none;
}

.ne-carousel .splide__pagination.ne-pg--bars .splide__pagination__page.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0;
	-webkit-mask: none;
	mask: none;
	background: var(--ne-bar-active, currentColor);
	transform-origin: left center;
	transform: scaleX(1);
	pointer-events: none;
}

.ne-carousel .splide__pagination.ne-pg--bars.ne-pg-timer .splide__pagination__page.is-active::after {
	transform: scaleX(var(--ne-pg-rate, 0));
}

.splide__pagination--rtl.ne-pg--bars .splide__pagination__page.is-active::after {
	transform-origin: right center;
}

/* Bars full width: the bars share the row. */
.splide__pagination.ne-pg--stretch {
	flex-wrap: nowrap;
}

.splide__pagination.ne-pg--stretch li {
	flex: 1 1 0;
	min-width: 0;
}

.ne-carousel .splide__pagination.ne-pg--stretch .splide__pagination__page {
	width: 100%;
}

/* Caption category badges (.catbg-wrap printed by the cat_bg meta item): as
   inline-block their padding takes up line height instead of painting over
   the title below, and a small margin keeps the badge off the title's
   ascenders. :where() keeps it a default the block controls override. */
:where(.excerpt-wrap .cat-bg, .sc-content .cat-bg, .pgbg-meta .cat-bg) {
	display: inline-block;
	margin-bottom: 8px;
}