/* media-723 — Homepage ad slider styling (Figma "Слайдер" 3289:25077 / mobile 3432:31275).
   Markup: .tn-slider > .tn-slider__viewport.swiper > .swiper-wrapper > .swiper-slide
   > [Advanced Ads tracking wrapper] > a.tn-slide ; pagination sits below the card.
   (see inc/class-tn-slide-ad-type.php + class-tn-slider-group-type.php + js/tn-slider.js) */

/* Homepage grid fix: the content column is a flex item with min-width:auto, so a
   wide child keeps it at min-content and the 3-column row (left+content+right)
   overflows → the right sidebar wraps. Letting it shrink restores the grid. */
.main-page__content {
	min-width: 0;
}

/* Outer wrapper — fluid, not clipped (so pagination can sit below the rounded card). */
.tn-slider {
	position: relative;
	width: 100%;
	min-width: 0;
	margin: 0 0 24px;
}

/* The rounded, clipped Swiper viewport (Swiper adds overflow:hidden itself). */
.tn-slider__viewport {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
}

/* Neutralise the Advanced Ads wrapper <div> between the slide and the link,
   so the slide fills the whole carousel cell. */
.tn-slider .swiper-slide {
	display: flex;
	height: auto;
}
.tn-slider .swiper-slide > * {
	flex: 1 1 auto;
	margin: 0 !important;
	display: flex;
}

/* The slide — full-bleed background image, text overlaid on the left. */
.tn-slider .tn-slide {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	width: 100%;
	min-height: 255px;
	padding: 16px 58px;
	color: #fff;
	text-decoration: none;
	box-sizing: border-box;
}
/* Dark gradient overlay for text legibility (Figma: darker on the left, clears to the right). */
.tn-slider .tn-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .36) 45%, rgba(0, 0, 0, 0) 62%);
	pointer-events: none;
}

.tn-slide__body {
	position: relative;
	z-index: 1;
	flex: 0 1 55%;
	max-width: 55%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tn-slide__heading {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	line-height: 29px;
	font-weight: 700;
	margin: 0;
}
/* Wrap accent words in <span class="tn-accent"> inside the Heading field. */
.tn-slide__heading .tn-accent {
	color: #00ff40;
}

.tn-slide__desc {
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
	opacity: .95;
}

.tn-slide__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 4px;
}

.tn-slide__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	border-radius: 6px;
	background: var(--tn-badge-bg, #002809);
	border: .5px solid var(--tn-badge-border, #00ff2b);
	color: var(--tn-badge-color, #b3ffa2);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.tn-slide__badge::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tn-badge-border, #00ff2b);
}

/* Side creative — right on desktop, on top on mobile (over the background fon). */
.tn-slide__media {
	position: relative;
	z-index: 1;
	flex: 1 1 45%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.tn-slide__img {
	max-width: 100%;
	max-height: 240px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
/* Mobile-only creative is hidden on desktop; the desktop/plain one shows here. */
.tn-slide__img--mobile {
	display: none;
}

/* Arrows — circle with a border, at the card edges, desktop only. */
.tn-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.tn-slider__arrow:hover {
	background: rgba(0, 0, 0, .45);
	border-color: #fff;
}
.tn-slider__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.tn-slider__arrow--prev {
	left: 10px;
}
.tn-slider__arrow--prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}
.tn-slider__arrow--next {
	right: 10px;
}
.tn-slider__arrow--next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}
.tn-slider__arrow.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}

/* Pagination — below the card. Inactive = small dark-blue dot; active = green pill. */
.tn-slider__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding-top: 12px;
}
.tn-slider__pagination .swiper-pagination-bullet {
	position: relative;
	width: 12px;
	height: 12px;
	margin: 0 !important;
	border-radius: 50%;
	background: #1c2f53;
	opacity: 1;
	cursor: pointer;
	transition: background .2s ease;
}
/* active — same navy circle with a bright cyan dot inside (Figma). */
.tn-slider__pagination .swiper-pagination-bullet-active::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #00e0ff;
}

/* Autoplay progress bar — bottom edge of the card (JS sets width + per-slide color). */
.tn-slider__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	height: 6px;
	background: rgba(255, 255, 255, .15);
}
.tn-slider__progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: #00ff40; /* default; JS overrides per slide from data-progress-color */
}
/* Single-slide slider: there's no autoplay timer to drive the bar, so loop the fill
   with CSS instead. JS adds this class and sets animation-duration from the group's
   data-autoplay-delay (js/tn-slider.js). */
.tn-slider__progress-fill--loop {
	animation: tn-progress-fill 4000ms linear infinite;
}
@keyframes tn-progress-fill {
	from { width: 0; }
	to { width: 100%; }
}

/* Mobile (< 768px) — full-bg image at top, text stacked at the bottom over a
   bottom-up dark-green gradient; no arrows/dots (Figma mobile 3432:31275).
   Tablets/desktop (≥768px) keep the horizontal desktop slide. */
@media (max-width: 767.98px) {
	.tn-slider__viewport {
		border-radius: 22px;
	}
	/* Same elements, stacked: side creative on top, text below, over the fon.
	   flex-start on column-reverse packs content at the BOTTOM, so the text always sits at
	   the bottom and the top holds the image — or, on a slide with no image, matching empty
	   space (slides are equal-height on mobile, see autoHeight in js/tn-slider.js). */
	.tn-slider .tn-slide {
		flex-direction: column-reverse;
		align-items: stretch;
		justify-content: flex-start;
		aspect-ratio: auto;
		min-height: 0;
		max-height: none;
		gap: 20px;
		padding: 24px 20px 36px;
		background-position: center;
	}
	/* With a dedicated vertical mobile background, reserve space at the top so the image's
	   upper (subject) area shows above the text instead of being covered by it. Percentage
	   padding is relative to card width, so it scales with the screen. Tune the reveal
	   height by overriding --tn-mobile-bg-top (e.g. 40% for less, 70% for more). */
	.tn-slider .tn-slide[data-bg-mobile] {
		padding-top: var(--tn-mobile-bg-top, 55%);
		background-position: top center;
	}
	.tn-slider .tn-slide::before {
		background: linear-gradient(to top, #002c18 55%, rgba(0, 44, 24, 0) 80%);
	}
	/* Don't let the text block grow to fill the slide — with justify-content:flex-end the
	   text then sits at the bottom and any reserved space (equal-height slides) lands at the
	   TOP, matching where the creative image sits on other slides. */
	.tn-slide__body {
		flex: 0 0 auto;
		max-width: none;
		gap: 18px;
	}
	.tn-slide__media {
		flex: 0 0 auto;
		justify-content: center;
	}
	.tn-slide__img {
		max-height: 240px;
	}
	/* On mobile, a dedicated vertical creative replaces the desktop one (when set). */
	.tn-slide__img--desktop {
		display: none;
	}
	.tn-slide__img--mobile {
		display: block;
		max-height: 420px; /* allow taller vertical creatives */
	}
	.tn-slide__heading {
		font-size: 26px;
	}
	.tn-slider__arrow {
		display: none;
	}
	/* pagination dots stay visible on mobile */
}

/* media-723 — plain image banner. A slide with no heading/description/badges, just the
   creative image (see $is_image_banner in inc/class-tn-slide-ad-type.php). The slide box
   follows the creative's natural aspect ratio: full width, no crop, no text overlay. The
   customer uploads the whole banner as the "Desktop creative" (+ a vertical "Mobile
   creative" for <768px). Rules live last so they win on source order over the base +
   mobile layout above at equal specificity. */
.tn-slide.tn-slide--image {
	display: block;
	align-items: stretch;
	gap: 0;
	min-height: 0;
	padding: 0;
}
/* No legibility gradient over a self-contained banner. */
.tn-slide.tn-slide--image::before {
	display: none;
}
.tn-slide--image .tn-slide__media {
	flex: none;
	width: 100%;
	display: block;
}
/* Height follows the image — drop the side-creative max-height cap. */
.tn-slide--image .tn-slide__img {
	width: 100%;
	max-width: 100%;
	max-height: none;
	height: auto;
	object-fit: contain;
}

@media (max-width: 767.98px) {
	/* Undo the stacked mobile layout: the (vertical) creative fills the width at its own
	   aspect ratio — no reserved top space, no bottom gradient. Three classes so this beats
	   the .tn-slider .tn-slide[data-bg-mobile] padding-top rule at equal weight, later. */
	.tn-slider .tn-slide.tn-slide--image {
		flex-direction: row;
		aspect-ratio: auto;
		padding: 0;
		gap: 0;
	}
	.tn-slider .tn-slide.tn-slide--image .tn-slide__img--mobile {
		max-height: none;
	}
}