/**
 * Side Ads - Front-end styles (external fallback; inline critical CSS wins).
 * Both groups reveal via transform (GPU-smooth, honors duration): the whole
 * div slides in, Featured strip leading. Left slides right; right slides left.
 *
 * v1.1.9: Featured image removed from slide-out panels. Item width
 * reduced from 414px -> 260px (32 strip + 228 body). Strip narrowed
 * from 36px -> 32px to hide the collapsed tab 4px further off-screen
 * (visible portion is now ~36px instead of ~40px).
 *
 * v1.1.14: Two behavior changes:
 *   1. z-index dropped from 2147483646 -> 100 so any popup / modal
 *      backdrop on the site correctly stacks ABOVE the tabs.
 *   2. Added .side-ads-tabs--hidden state (toggled by an INLINE
 *      scroll-away controller emitted from class-side-ads-frontend.php
 *      alongside the critical CSS) so the tabs fade out when they
 *      visually reach the theme's main content wrapper bottom (which
 *      equals the .site-footer top on GeneratePress) and fade back in
 *      on scroll-up. JS is inlined — not enqueued — because the active
 *      child theme's `remove_script_version_query` filter strips
 *      `?ver=` from every non-child asset, defeating cache-busting on
 *      an external JS file.
 */

.side-ads-tabs {
	position: fixed;
	bottom: 150px;
	top: auto;
	transform: none;
	display: flex;
	flex-direction: column;
	gap: 15px;
	z-index: 100;
	pointer-events: none;
	margin: 0;
	padding: 0;
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s linear 0s;
}

/* v1.1.11: Fade the whole group out when it touches .site-footer (added via JS). */
.side-ads-tabs.side-ads-tabs--hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}

.side-ads-tabs--left { left: 0; right: auto; align-items: flex-start; }
.side-ads-tabs--right { right: 0; left: auto; align-items: flex-end; }

.side-ads-item {
	position: relative;
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	height: 100px;
	width: 260px;
	overflow: hidden;
	pointer-events: auto;
	margin: 0;
	padding: 0;
	border: 2px solid #aebfcf;
	background: #fbfdfe;
	box-shadow: 0 6px 22px rgba(40, 60, 80, 0);
	text-decoration: none;
	color: #1c2b36;
	will-change: transform;
}

.side-ads-tabs--left .side-ads-item {
	flex-direction: row-reverse;
	border-left: 0;
	border-radius: 0 15px 16px 0;
	transform: translateX(-224px);
	transition: transform 4.8s cubic-bezier(.16, 1, .3, 1), box-shadow 1.4s ease, border-color .5s ease;
}

.side-ads-tabs--left .side-ads-item:hover,
.side-ads-tabs--left .side-ads-item:focus {
	transform: translateX(0);
}

.side-ads-tabs--right .side-ads-item {
	flex-direction: row;
	border-right: 0;
	border-radius: 15px 0 0 16px;
	transform: translateX(224px);
	transition: transform 4.8s cubic-bezier(.16, 1, .3, 1), box-shadow 1.4s ease, border-color .5s ease;
}

.side-ads-tabs--right .side-ads-item:hover,
.side-ads-tabs--right .side-ads-item:focus {
	transform: translateX(0);
}

.side-ads-item:hover,
.side-ads-item:focus {
	box-shadow: 0 8px 30px rgba(40, 60, 80, .18);
	text-decoration: none;
	outline: none;
}

.side-ads-item.is-fallback { border-color: #bcc6cf; }

.side-ads-strip {
	flex: 0 0 32px;
	width: 32px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e4e9ee9c !important;
}

.side-ads-tab__label {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .5px;
	line-height: 1;
	transition: color .3s ease;
}

.side-ads-tab-1-label { color: #c6753a; }
.side-ads-item-tab-1:hover .side-ads-tab-1-label { color: #b95f1d; }
.side-ads-tab-2-label { color: #7fa858; }
.side-ads-item-tab-2:hover .side-ads-tab-2-label { color: #578928; }
.side-ads-tab-3-label { color: #4b95bf; }
.side-ads-item-tab-3:hover .side-ads-tab-3-label { color: #2c7ba8; }

.side-ads-panel__body {
	flex: 0 0 228px;
	width: 228px;
	padding: 8px 14px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	opacity: 0;
	transform: translateX(12px);
	transition: opacity .8s ease 0s, transform 1s cubic-bezier(.16, 1, .3, 1) 0s;
}

.side-ads-tabs--right .side-ads-panel__body { transform: translateX(-12px); }

.side-ads-tabs--left .side-ads-panel__body { padding-left: 21px; }

.side-ads-item:hover .side-ads-panel__body {
	opacity: 1;
	transform: translateX(0);
}

.side-ads-panel__title {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	margin: 0 0 4px;
	color: #1c2b36;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.side-ads-panel__excerpt {
	font-size: 13px;
	line-height: 1.35;
	color: #5a6873;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 823.98px) {
	.side-ads-tabs { display: none !important; }
}