/**
 * Styles for the "Trips After Post" block (WTE Trips After Post).
 *
 * Non-conflict principles:
 * - Every selector is prefixed with .wtap-... (plugin-specific namespace)
 * - We NEVER touch WP Travel Engine's internal classes
 *   (no .wte-*, no .trip-*, etc.)
 * - Sidebar uses our own markup (.wtap-sidebar-card) — no WTE overrides needed.
 */

/* ─── CSS custom properties ─────────────────────────────────────────────── */

.wtap-trips-after-post,
.wtap-trips-sidebar {
	--wtap-accent:      #c1551c;   /* terracotta */
	--wtap-accent-soft: #f7f0e3;   /* sand */
	--wtap-text:        #1a1a1a;
	--wtap-text-muted:  #6b6b6b;
	--wtap-border:      #e7e2d8;
	--wtap-radius:      12px;
}

/* ─── Bottom block (after post content) ─────────────────────────────────── */

.wtap-trips-after-post {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: clamp(2em, 5vw, 3.5em);
	padding-top: clamp(1.5em, 4vw, 2.5em);
	border-top: 1px solid var(--wtap-border);
	overflow-x: hidden;
}

.wtap-trips-after-post *,
.wtap-trips-after-post *::before,
.wtap-trips-after-post *::after {
	box-sizing: border-box;
}

/* Block header */
.wtap-trips-header {
	text-align: center;
	max-width: 42em;
	margin: 0 auto clamp(1.5em, 4vw, 2.2em);
	padding: 0 1em;
}

.wtap-trips-kicker {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wtap-accent);
	margin: 0 0 0.5em;
}

.wtap-trips-title {
	margin: 0;
	font-size: clamp(1.25em, 3vw, 1.6em);
	line-height: 1.3;
	font-weight: 700;
}

.wtap-trips-subtitle {
	margin: 0.6em 0 0;
	font-size: 0.95em;
	color: var(--wtap-text-muted);
}

.wtap-trips-divider {
	width: 3em;
	height: 3px;
	background: var(--wtap-accent);
	border-radius: 2px;
	margin: 0.9em auto 0;
}

.wtap-trips-wrapper {
	background: var(--wtap-accent-soft);
	border-radius: 14px;
	padding: clamp(1em, 3vw, 1.75em);
}

.wtap-trips-wrapper img {
	max-width: 100%;
	height: auto;
}

/*
 * Splide fix: WTE's gallery slider (.splide) requires JS to initialize.
 * When injected via the_content filter, the Splide init has already run
 * and won't pick up these new elements. As a result, slides are hidden
 * by Splide's own CSS (.splide__list has overflow:hidden, transforms, etc.).
 *
 * Fix: force the slide container and its children to be visible and
 * naturally stacked, so at minimum the first image is always shown.
 * We do NOT touch classes outside .wtap-trips-wrapper.
 */
.wtap-trips-wrapper .splide:not(.is-initialized) .splide__track,
.wtap-trips-wrapper .splide:not(.is-initialized) .splide__list {
	overflow: visible !important;
	transform: none !important;
	display: block !important;
	height: auto !important;
}

.wtap-trips-wrapper .splide:not(.is-initialized) .splide__slide {
	display: none !important;
}

.wtap-trips-wrapper .splide:not(.is-initialized) .splide__slide:first-child {
	display: block !important;
	width: 100% !important;
	transform: none !important;
	opacity: 1 !important;
}

.wtap-trips-wrapper .splide:not(.is-initialized) .splide__slide:first-child img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
}

/*
 * Also trigger Splide re-init after content injection via a small JS snippet
 * (see display.php render_block footer). The CSS above is the fallback for
 * browsers/cases where JS hasn't run yet.
 */

@media (max-width: 36em) {
	.wtap-trips-wrapper {
		padding: 1em;
		border-radius: 10px;
	}
	.wtap-trips-title {
		font-size: 1.2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wtap-trips-after-post * {
		transition: none !important;
		animation: none !important;
	}
}

/* ─── Sticky sidebar ─────────────────────────────────────────────────────── */

.wtap-trips-sidebar {
	display: none !important; /* hidden by default; enabled on wide screens below */
}

@media (min-width: 1024px) {
	.wtap-trips-sidebar {
		display: block !important;
		position: fixed !important;
		top: 7.5em !important;
		right: clamp(0.75em, 2vw, 1.5em) !important;
		left: auto !important;
		bottom: auto !important;
		width: clamp(220px, 16vw, 280px) !important;
		max-height: calc(100vh - 9em) !important;
		overflow-y: auto !important;
		z-index: 99999 !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		float: none !important;
	}

	.wtap-trips-sidebar-inner {
		background: #ffffff;
		border: 1px solid var(--wtap-border);
		border-radius: 14px;
		padding: 1.1em;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}

	.wtap-trips-sidebar-title {
		margin: 0 0 0.9em;
		font-size: 0.9em;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--wtap-text);
	}
}

@media (max-width: 1023px) {
	.wtap-trips-sidebar {
		display: none !important;
	}
}

/* ─── Sidebar mini-card ──────────────────────────────────────────────────── */
/*
 * These styles are for our own .wtap-sidebar-card markup (WP_Query output).
 * We don't touch any WTE class here.
 */

.wtap-sidebar-card {
	display: block;
	margin-bottom: 1.1em;
	border-bottom: 1px solid var(--wtap-border);
	padding-bottom: 1.1em;
}

.wtap-sidebar-card:last-child {
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
}

/* Image wrapper */
.wtap-card-img-wrap {
	display: block;
	overflow: hidden;
	border-radius: var(--wtap-radius);
	margin-bottom: 0.6em;
	line-height: 0;
}

/* The <img> itself — fixed aspect ratio, full width, never distorted */
.wtap-card-img {
	display: block !important;
	width: 100% !important;
	height: 160px !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: var(--wtap-radius);
	transition: transform 0.3s ease;
}

.wtap-card-img-wrap:hover .wtap-card-img {
	transform: scale(1.04);
}

/* Card body */
.wtap-card-body {
	padding: 0 0.1em;
}

.wtap-card-title {
	margin: 0 0 0.35em;
	font-size: 0.88em;
	line-height: 1.35;
	font-weight: 700;
}

.wtap-card-title a {
	color: var(--wtap-text);
	text-decoration: none;
}

.wtap-card-title a:hover {
	color: var(--wtap-accent);
}

.wtap-card-duration {
	margin: 0 0 0.2em;
	font-size: 0.78em;
	color: var(--wtap-text-muted);
}

.wtap-card-price {
	margin: 0 0 0.5em;
	font-size: 0.82em;
	font-weight: 700;
	color: var(--wtap-accent);
}

.wtap-card-btn {
	display: block;
	width: 100%;
	padding: 0.45em 0.8em;
	background: var(--wtap-accent);
	color: #ffffff !important;
	text-align: center;
	text-decoration: none !important;
	font-size: 0.78em;
	font-weight: 700;
	border-radius: 6px;
	transition: background 0.2s ease, transform 0.15s ease;
}

.wtap-card-btn:hover {
	background: #a04415;
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.wtap-card-img,
	.wtap-card-btn {
		transition: none !important;
	}
}