/* ==========================================================================
   Tronexo Blog — /blog/ archive layout.
   Uses tokens from tronexo-tokens.css and glass filter #glass-icon from
   header.php SVG library.
   ========================================================================== */


/* -------------------------------------------------------------- Container */

.tx-blog{
	position: relative;
	padding: 0 0 clamp(60px, 8vw, 110px);
	color: #fff;
	overflow-x: clip;
	--tx-blog-accent-rgb: var(--brand-primary-rgb);
	--tx-blog-muted: rgba(255, 255, 255, 0.58);
	--tx-blog-border: rgba(255, 255, 255, 0.10);
	--tx-blog-surface: rgba(255, 255, 255, 0.03);
	--tx-blog-surface-hover: rgba(255, 255, 255, 0.05);
	--tx-blog-radius: 20px;
}


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

.tx-blog__hero{
	padding: clamp(50px, 7vw, 100px) 0 clamp(30px, 4vw, 52px);
	text-align: center;
}
.tx-blog__hero-label{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brand-primary);
	margin-bottom: 22px;
}
.tx-blog__hero-label::before{
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-primary);
	box-shadow: 0 0 10px var(--brand-primary);
	animation: txPulse 2s infinite;
}
.tx-blog__hero-title{
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2.4rem, 1.2rem + 5vw, 5.4rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0 0 20px;
	color: #fff;
}
.tx-blog__hero-title-accent{
	background: linear-gradient(100deg, var(--brand-primary), var(--brand-accent-cyan));
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}
.tx-blog__hero-subtitle{
	font-size: clamp(14px, 0.3vw + 13px, 17px);
	line-height: 1.7;
	color: var(--tx-blog-muted);
	max-width: 52ch;
	margin: 0 auto clamp(28px, 3vw, 40px);
}
.tx-blog__container{
	box-sizing: border-box;
	width: 100%;
	max-width: 1750px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}


/* -------------------------------------------------------------- Search */

.tx-blog__search{
	position: relative;
	max-width: 560px;
	margin: 0 auto;
}
.tx-blog__search-icon{
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	pointer-events: none;
	color: rgba(255, 255, 255, 0.5);
	z-index: 2;
}
.tx-blog__search-icon svg{ width: 100%; height: 100%; display: block; }

/* WP search form output — .search-form > .search-field + .search-submit */
.tx-blog__search .search-form{
	position: relative;
	display: block;
}
.tx-blog__search .search-field{
	width: 100%;
	font-family: var(--font-body);
	font-size: 15px;
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 18px 24px 18px 50px;
	outline: none;
	backdrop-filter: url(#glass-icon) blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition: border-color .25s ease, background .25s ease;
}
.tx-blog__search .search-field::placeholder{ color: rgba(255, 255, 255, 0.4); }
.tx-blog__search .search-field:focus{
	border-color: rgba(var(--brand-primary-rgb), 0.55);
	background: rgba(255, 255, 255, 0.07);
}
/* Hide the submit button — search is live-debounced. ENTER still submits the
   form which our JS intercepts. Kept in DOM for accessibility. */
.tx-blog__search .search-submit{
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* -------------------------------------------------------------- Layout */

.tx-blog__layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px);
	gap: clamp(28px, 3vw, 52px);
	align-items: start;
	margin-bottom: clamp(40px, 5vw, 64px);
}
.tx-blog__main{ min-width: 0; }
.tx-blog--archive .tx-blog__aside{
	padding-top: calc(clamp(36px, 4vw, 56px) + clamp(22px, 1vw + 18px, 32px) + 18px);
}

/* Author archives keep Digitaal's PHP markup; this scopes the visual treatment
   to body.author so regular archives and the AJAX /blog/ grid are untouched. */
body.author .blog-posts{
	max-width: 1750px;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 86px) clamp(20px, 4vw, 56px) clamp(60px, 8vw, 110px);
	color: #fff;
	--tx-blog-accent-rgb: var(--brand-primary-rgb);
	--tx-blog-muted: rgba(255, 255, 255, 0.58);
	--tx-blog-border: rgba(255, 255, 255, 0.10);
	--tx-blog-surface: rgba(255, 255, 255, 0.03);
	--tx-blog-surface-hover: rgba(255, 255, 255, 0.05);
	--tx-blog-radius: 20px;
}
body.author .blog-posts .tm-blog-sidebar-row{
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px);
	gap: clamp(28px, 3vw, 52px);
	align-items: start;
	margin: 0;
}
body.author .blog-posts .tm-blog-sidebar-row > [class*="col-lg-"]{
	width: auto;
	max-width: none;
	padding: 0;
}
body.author .blog-posts .main-content-area{ min-width: 0; }
body.author .blog-posts .main-content-area > .row{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 24px);
	margin: 0;
}
body.author .blog-posts .main-content-area > .row > [class*="col-"]{
	width: auto;
	max-width: none;
	padding: 0;
}
body.author .blog-posts .main-content-area article{
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--tx-blog-surface) !important;
	border: 1px solid var(--tx-blog-border);
	border-radius: var(--tx-blog-radius);
	backdrop-filter: url(#glass-icon) blur(11px) saturate(180%);
	-webkit-backdrop-filter: blur(11px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 30px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
body.author .blog-posts .main-content-area article:hover{
	transform: translateY(-5px);
	border-color: rgba(var(--brand-primary-rgb), 0.4);
}
body.author .blog-posts article .entry-header,
body.author .blog-posts article .thumb-wrapper,
body.author .blog-posts article .post-thumb,
body.author .blog-posts article .post-thumb-inner,
body.author .blog-posts article .thumb,
body.author .blog-posts article .thumb a{
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}
body.author .blog-posts article .entry-header{
	background: #0a0e14;
	overflow: hidden;
}
body.author .blog-posts article .thumb{
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0a0e14;
	overflow: hidden;
}
body.author .blog-posts article .thumb a{
	position: absolute;
	inset: 0;
	height: 100%;
}
body.author .blog-posts article .thumb img{
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.author .blog-posts article .entry-content{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 20px !important;
	background: transparent !important;
}
body.author .blog-posts article .entry-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 7px 12px;
	margin: 0 0 10px !important;
	padding: 0 !important;
	list-style: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-transform: uppercase;
}
body.author .blog-posts article .entry-meta li{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
}
body.author .blog-posts article .entry-meta li.likes{ display: none; }
body.author .blog-posts article .entry-meta a{
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}
body.author .blog-posts article .entry-meta a:hover{
	color: var(--brand-primary);
	text-decoration: none;
}
body.author .blog-posts article .entry-title{
	margin: 0 0 10px !important;
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(15px, 0.4vw + 13px, 17px) !important;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
body.author .blog-posts article .entry-title a{
	color: inherit;
	text-decoration: none;
}
body.author .blog-posts article .entry-title a:hover{
	color: var(--brand-primary);
	text-decoration: none;
}
body.author .blog-posts article .post-excerpt{
	flex: 1;
	margin: 0 0 16px;
	color: var(--tx-blog-muted);
	font-size: 13px;
	line-height: 1.55;
}
body.author .blog-posts article .mascot-post-excerpt{ color: inherit; }
body.author .blog-posts article .post-btn-readmore{ margin-top: auto; }
body.author .blog-posts article .post-btn-readmore a{
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0;
	color: var(--brand-primary) !important;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}
body.author .blog-posts article .post-btn-readmore a:hover{
	color: #fff !important;
	text-decoration: none;
}
body.author .blog-posts .pagination{
	justify-content: center;
	gap: 6px;
	margin: clamp(28px, 4vw, 48px) 0 0;
}
body.author .blog-posts .pagination .page-link{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 12px !important;
	border: 1px solid var(--tx-blog-border) !important;
	background: var(--tx-blog-surface) !important;
	color: rgba(255, 255, 255, 0.75) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
body.author .blog-posts .pagination .page-link:hover{
	background: var(--tx-blog-surface-hover) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
}
body.author .blog-posts .pagination .active .page-link{
	background: rgba(var(--brand-primary-rgb), 0.15) !important;
	color: var(--brand-primary) !important;
	border-color: rgba(var(--brand-primary-rgb), 0.4) !important;
}
body.author .blog-posts .sidebar-area{
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
}

/* Sticky sidebar. NO max-height / overflow — those turn the aside into its
   own scroll container and defeat sticky UX. If content is taller than the
   viewport, the sidebar just extends downward and stays pinned as the main
   column scrolls past.
   `height: fit-content` guards against a Digitaal / grid rule that would
   otherwise stretch the aside to fill the row height — an aside as tall as
   its container has no room to "stick" within itself. */
.tx-blog__aside{
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
	align-self: start;
	height: -moz-fit-content;
	height: fit-content;
	min-height: 0;
	max-height: none;
}

/* Defensive: any Digitaal / Mascot ancestor with overflow:hidden silently
   breaks position:sticky on descendants. Force overflow:visible on html,
   body and every common wrapper on pages containing .tx-blog. `:has()`
   scopes the reset to blog pages only. !important because Digitaal's own
   CSS is loaded later in the cascade and reasserts otherwise. */
html:has(body.blog .tx-blog),
body.blog:has(.tx-blog),
body.blog:has(.tx-blog) #wrapper,
body.blog:has(.tx-blog) #wrapper-content,
body.blog:has(.tx-blog) #main-content-wrapper,
body.blog:has(.tx-blog) #page-content,
body.blog:has(.tx-blog) .main-content,
body.blog:has(.tx-blog) .main-content-wrapper,
body.blog:has(.tx-blog) .site-content,
body.blog:has(.tx-blog) .site,
body.blog:has(.tx-blog) main{
	overflow: visible !important;
}
/* Some Digitaal wrappers also set contain/transform — those create a new
   containing block and break sticky's reference to viewport. Neutralise. */
body.blog:has(.tx-blog) .main-content,
body.blog:has(.tx-blog) .main-content-wrapper{
	transform: none !important;
	filter: none !important;
	contain: none !important;
	will-change: auto !important;
}


/* -------------------------------------------------------------- Featured card */

.tx-post-featured{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	text-decoration: none;
	color: inherit;
	border-radius: 26px;
	overflow: hidden;
	border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
	background: var(--tx-blog-surface);
	backdrop-filter: url(#glass-icon) blur(13px) saturate(180%);
	-webkit-backdrop-filter: blur(13px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 60px -18px rgba(0, 0, 0, 0.6);
	transition: border-color .4s ease;
}
.tx-post-featured:hover{ border-color: rgba(var(--brand-primary-rgb), 0.5); }
.tx-post-featured__media{
	position: relative;
	min-height: 260px;
	overflow: hidden;
}
.tx-post-featured__image{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left;
}
.tx-post-featured__scrim{
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(1, 4, 7, 0.5), transparent 60%);
	pointer-events: none;
}
.tx-post-featured__body{
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tx-post-featured__tags{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.tx-post-featured__tag{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}
.tx-post-featured__tag--pinned{
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--bg-deep);
	background: var(--brand-primary);
	padding: 6px 12px;
	border-radius: 999px;
}
.tx-post-featured__title{
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
	color: #fff;
}
.tx-post-featured__excerpt{
	font-size: 14px;
	line-height: 1.65;
	color: var(--tx-blog-muted);
	margin: 0 0 22px;
	max-width: 46ch;
}
.tx-post-featured__meta{
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.tx-post-featured__cta{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bg-deep);
	background: linear-gradient(100deg, var(--brand-primary), var(--brand-accent-cyan));
	padding: 13px 26px;
	border-radius: 999px;
}
.tx-post-featured__author{
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}


/* -------------------------------------------------------------- List header */

.tx-blog__list-header{
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: clamp(36px, 4vw, 56px) 0 18px;
}
.tx-blog__featured:empty + .tx-blog__list-header{ margin-top: 0; }
.tx-blog__list-title{
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
	color: #fff;
}
.tx-blog__list-count{
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}


/* -------------------------------------------------------------- Category tabs */

.tx-blog__cats{
	display: flex;
	align-items: flex-end;
	gap: 2px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--tx-blog-border);
	overflow-x: auto;
	scrollbar-width: none;
}
.tx-blog__cats::-webkit-scrollbar{ display: none; }
.tx-blog__cat{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 12px 16px 14px;
	margin-bottom: -1px;
	color: rgba(255, 255, 255, 0.5);
	transition: color .25s ease, border-color .25s ease;
	white-space: nowrap;
	cursor: pointer;
}
.tx-blog__cat:hover{ color: rgba(255, 255, 255, 0.85); }
.tx-blog__cat.is-active{
	color: #fff;
	font-weight: 800;
	border-bottom-color: var(--brand-primary);
}
.tx-blog__cat-count{
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
	padding: 2px 7px;
	border-radius: 999px;
}
.tx-blog__cat.is-active .tx-blog__cat-count{
	color: var(--brand-primary);
	background: rgba(var(--brand-primary-rgb), 0.12);
}


/* -------------------------------------------------------------- Grid + cards */

.tx-blog__state{ position: relative; }
.tx-blog__state[data-loading="1"]{ opacity: 0.55; pointer-events: none; transition: opacity .2s ease; }

.tx-blog__grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 24px);
}
.tx-blog__grid:empty{ display: none; }

.tx-post-card{
	display: flex;
	flex-direction: column;
	border-radius: var(--tx-blog-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--tx-blog-border);
	background: var(--tx-blog-surface);
	backdrop-filter: url(#glass-icon) blur(11px) saturate(180%);
	-webkit-backdrop-filter: blur(11px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 30px rgba(0, 0, 0, 0.3);
	transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
.tx-post-card:hover{
	transform: translateY(-5px);
	border-color: rgba(var(--brand-primary-rgb), 0.4);
}
.tx-post-card__media{
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #0a0e14;
}
.tx-post-card__image{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.tx-post-card__scrim{
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(1, 4, 7, 0.6), transparent 55%);
	pointer-events: none;
}
.tx-post-card__cat{
	position: absolute;
	left: 12px;
	top: 12px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bg-deep);
	padding: 6px 11px;
	border-radius: 999px;
}
.tx-post-card__body{
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.tx-post-card__title{
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(15px, 0.4vw + 13px, 17px);
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 10px;
	color: #fff;
}
.tx-post-card__excerpt{
	font-size: 13px;
	line-height: 1.55;
	color: var(--tx-blog-muted);
	margin: 0 0 16px;
	flex: 1;
}
.tx-post-card__meta{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}


/* -------------------------------------------------------------- Empty state */

.tx-blog__empty{
	padding: 60px 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 15px;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: var(--tx-blog-radius);
}
.tx-blog__empty[hidden]{ display: none; }


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

.tx-blog__pagination{
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: clamp(28px, 4vw, 48px);
	flex-wrap: wrap;
}
.tx-blog__pagination:empty{ display: none; }
.tx-blog__page-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid var(--tx-blog-border);
	background: var(--tx-blog-surface);
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tx-blog__page-btn:hover:not(:disabled):not(.is-active){
	background: var(--tx-blog-surface-hover);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}
.tx-blog__page-btn.is-active{
	background: rgba(var(--brand-primary-rgb), 0.15);
	color: var(--brand-primary);
	border-color: rgba(var(--brand-primary-rgb), 0.4);
	cursor: default;
}
.tx-blog__page-btn:disabled{ opacity: 0.35; cursor: not-allowed; }
.tx-blog__page-gap{
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.35);
	padding: 0 4px;
}


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

/* Outer .widget = just spacing between widgets. Digitaal has its own defaults
   on .widget that would fight our frame, so we intentionally leave it bare. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget{
	margin-bottom: clamp(18px, 2vw, 26px);
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget:last-child{ margin-bottom: 0; }

/* Visual frame lives on .widget-inner (the actual content container).
   Uses #container-glass filter (strong refraction) + multi-layer inset
   highlights for liquid-glass look. !important is required because the
   Digitaal widget defaults win specificity otherwise. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-inner{
	border-radius: 22px !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	background-color: rgba(255, 255, 255, 0.03) !important;
	-webkit-backdrop-filter: url(#container-glass) !important;
	        backdrop-filter: url(#container-glass) !important;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.18),
		inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.10),
		inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.55),
		inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.45),
		inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.45),
		inset 0 0 6px 6px rgba(255, 255, 255, 0.07),
		inset 0 0 2px 2px rgba(255, 255, 255, 0.05),
		0 0 12px rgba(0, 0, 0, 0.18) !important;
	overflow: hidden;
	padding: 0;
	margin: 0;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-title{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: transparent;
	line-height: 1.2;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-title::before{ content: none; }

/* Widget title parts — brand icon square + label + right-side action (Follow / Live). */
.tx-widget-title__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}
.tx-widget-title__icon svg{
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}
.tx-widget-title__icon--ig svg{ width: 15px; height: 15px; }
.tx-widget-title__icon--tv svg{ width: 15px; height: 15px; }
.tx-widget-title__icon--x{
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
}
.tx-widget-title__icon--ig{
	background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
	color: #fff;
	font-size: 12px;
}
.tx-widget-title__icon--tv{
	background: #131722;
	border: 1px solid rgba(41, 98, 255, 0.6);
	color: #2962FF;
	font-size: 11px;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-title .tx-widget-title__action{
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-primary);
	text-decoration: none;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-title .tx-widget-title__action:hover{ text-decoration: underline; }
.tx-widget-title__live{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}
.tx-widget-title__live::before{
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-primary);
	box-shadow: 0 0 8px var(--brand-primary);
	animation: txPulse 2s infinite;
}
@keyframes txPulse{
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(1.4); }
}

/* Widget content sits edge-to-edge. Feeds like Smash Balloon / TradingView
   have their own internal padding; Custom HTML widgets manage spacing inline. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-inner > :not(.widget-title){ padding: 0; }

/* Custom HTML widget outputs raw content in .textwidget/.custom-html-widget. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .custom-html-widget,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .textwidget{
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget a{ color: var(--brand-primary); text-decoration: none; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget a:not(.tx-blog-cta):hover{ text-decoration: underline; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget p{ margin: 0 0 10px; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget p:last-child{ margin-bottom: 0; }

/* Get Funded CTA — inside a Custom HTML widget. Green-tinted variant of the
   glass frame with radial glow + gradient button. Uses :has() so the frame
   automatically re-tints itself when the CTA is present. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-inner:has(.tx-blog-cta){
	border-color: rgba(var(--brand-primary-rgb), 0.3);
	background:
		radial-gradient(circle at 30% 0%, rgba(var(--brand-primary-rgb), 0.18), transparent 70%),
		rgba(6, 9, 12, 0.5);
}
.tx-blog-cta{
	display: block;
	padding: 26px 22px;
	color: #fff;
	text-decoration: none;
}
.tx-blog-cta:hover,
.tx-blog-cta:focus{
	text-decoration: none; /* kill inherited .widget a:hover underline */
}
.tx-blog-cta__eyebrow{
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-primary);
	margin-bottom: 10px;
}
.tx-blog-cta__title{
	display: block;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 20px;
	text-transform: uppercase;
	line-height: 1.05;
	margin-bottom: 14px;
	color: #fff;
}
.tx-blog-cta__button{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bg-deep);
	background: linear-gradient(100deg, var(--brand-primary), var(--brand-accent-cyan));
	padding: 11px 22px;
	border-radius: 999px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.tx-blog-cta:hover .tx-blog-cta__button{
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), 0.35);
}


/* Native WP widgets (search / categories / recent_posts) get default padding.
   Not the recommended path — user should use Custom HTML — but supported. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-inner > .search-form,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-inner > ul{ padding: 14px 18px 18px; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-inner > ul{ list-style: none; margin: 0; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-inner > ul li{ padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
:is(.tx-blog__aside, .tm-blog-sidebar-row) .widget-inner > ul li:last-child{ border-bottom: none; }

/* Smash Balloon Custom Twitter Feeds — flatten its own chrome inside our card.
   Rule of thumb: reset background/border/margin/padding on all wrappers. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-tweets,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-tweet,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-tweet-content{
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-tweet{
	padding: 15px 18px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-tweet:last-child{ border-bottom: none !important; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-header,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-load-more{ display: none !important; } /* referred header is our own .widget-title */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-tweet-text{
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin-bottom: 10px !important;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-tweet-meta,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-author-box{
	font-size: 11px !important;
	color: rgba(255, 255, 255, 0.4) !important;
}
/* :is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-author-avatar,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-author-screenname{ display: none !important; } */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-context a,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .ctf-context{ color: rgba(255, 255, 255, 0.4) !important; }

/* Smash Balloon Instagram Feed — grid look flush inside card, no plugin chrome. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram,
:is(.tx-blog__aside, .tm-blog-sidebar-row) .sb-instagram-feed,
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram .sb_instagram_header,
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram .sbi_follow_btn,
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram .sbi_footer{ background: transparent !important; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram{ padding: 0 !important; margin: 0 !important; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram .sb_instagram_header,
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram .sbi_footer,
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram #sbi_load{ display: none !important; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram #sbi_images{
	padding: 3px !important;
	gap: 3px !important;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram .sbi_item{ padding: 0 !important; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) #sb_instagram .sbi_photo{ border-radius: 0 !important; }

/* TradingView Timeline widget.
   Explicit `height` (not min-height) is required — the plugin's iframe uses
   `height: calc(100% - 32px)` inline, which resolves to 0 when the parent
   only has min-height. Consequence: news items get clipped and the copyright
   line floats mid-widget with a large empty area below. */
:is(.tx-blog__aside, .tm-blog-sidebar-row) .tradingview-widget-container{
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	height: 400px !important;
	display: flex;
	flex-direction: column;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .tradingview-widget-container__widget{
	flex: 1 1 auto;
	min-height: 0;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .tradingview-widget-container iframe{
	display: block;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .tradingview-widget-copyright{
	flex: 0 0 auto;
	font-size: 9px !important;
	letter-spacing: 0.02em !important;
	color: rgba(255, 255, 255, 0.35) !important;
	padding: 6px 14px !important;
	line-height: 1.3 !important;
	text-align: center;
}
:is(.tx-blog__aside, .tm-blog-sidebar-row) .tradingview-widget-copyright a{ color: rgba(255, 255, 255, 0.5) !important; }
:is(.tx-blog__aside, .tm-blog-sidebar-row) .tradingview-widget-copyright .blue-text{ color: var(--brand-primary) !important; }

@media (max-width: 640px){
	:is(.tx-blog__aside, .tm-blog-sidebar-row) .tradingview-widget-container{ height: 420px; }
}


/* -------------------------------------------------------------- Responsive */

@media (max-width: 960px){
	body.author .blog-posts .tm-blog-sidebar-row{
		grid-template-columns: minmax(0, 1fr);
	}
	body.author .blog-posts .sidebar-area{
		position: static;
	}
	.tx-blog__layout{ grid-template-columns: minmax(0, 1fr); }
	.tx-blog__aside{
		position: static;
		max-height: none;
		overflow-y: visible;
	}
	.tx-blog--archive .tx-blog__aside{
		padding-top: 0;
	}
}
@media (max-width: 600px){
	body.author .blog-posts{
		padding: 42px 16px 70px;
	}
	body.author .blog-posts .main-content-area > .row{
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	body.author .blog-posts article .entry-content{
		padding: 18px !important;
	}
	.tx-post-featured{ grid-template-columns: 1fr; }
	.tx-blog__grid{ grid-template-columns: 1fr; }
	.tx-blog__cats{
		-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
		mask-image: linear-gradient(90deg, #000 92%, transparent);
	}
	.tx-blog__search .search-field{ padding: 15px 22px 15px 46px; font-size: 14px; }
	.tx-blog__search-icon{ left: 18px; }
	.tx-blog__search .search-submit{ display: none; }
}


/* -------------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce){
	.tx-post-card, .tx-post-featured, .tx-blog__page-btn{
		transition: none !important;
	}
	.tx-post-card:hover{ transform: none; }
}