/* ==========================================================================
   Brandolero Cortina Slider — Base Layout
   Handles: full-width breakout, vertical 50/50 split, navigation, typography.
   Preset stylesheets override custom properties and add decorative touches.
   ========================================================================== */

/* ── CSS Custom Properties (base defaults; presets override) ─────────────── */

.bcrt-slider {
	--bcrt-font-headline: system-ui, -apple-system, sans-serif;
	--bcrt-font-body:     system-ui, -apple-system, sans-serif;

	/* Button colours — presets provide their own values */
	--bcrt-btn-primary-bg:       rgba(255, 255, 255, 0.90);
	--bcrt-btn-primary-text:     #111111;
	--bcrt-btn-primary-bg-hover: rgba(255, 255, 255, 1);

	--bcrt-btn-secondary-border: rgba(255, 255, 255, 0.70);
	--bcrt-btn-secondary-text:   inherit;
	--bcrt-btn-secondary-bg-hover: rgba(255, 255, 255, 0.12);

	/* Arrow / dot chrome */
	--bcrt-chrome-bg:        rgba(255, 255, 255, 0.15);
	--bcrt-chrome-bg-hover:  rgba(255, 255, 255, 0.30);
	--bcrt-chrome-border:    rgba(255, 255, 255, 0.25);
	--bcrt-chrome-color:     #ffffff;
}

/* ── Full-width breakout ─────────────────────────────────────────────────── */

.bcrt-slider {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left:  -50vw;
	margin-right: -50vw;
	overflow: hidden;
	height: var(--bcrt-height, 100vh);
	box-sizing: border-box;
}

/* ── Track ───────────────────────────────────────────────────────────────── */

.bcrt-track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ── Slides ──────────────────────────────────────────────────────────────── */

.bcrt-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	/* Hidden by default; JS controls all visibility transitions */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.bcrt-slide.bcrt-slide--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ── Vertical split halves ───────────────────────────────────────────────── */

.bcrt-half {
	flex: 0 0 50%;
	width: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

/* ── Content half ────────────────────────────────────────────────────────── */

.bcrt-half-content {
	display: flex;
	align-items: center;
	padding: 48px max(48px, 8vw);
}

.bcrt-content-inner {
	max-width: 580px;
	width: 100%;
}

/* Center-aligned variant */
.bcrt-text-center .bcrt-content-inner {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.bcrt-text-center .bcrt-cta-group {
	justify-content: center;
}

/* ── Media half ──────────────────────────────────────────────────────────── */

.bcrt-half-media {
	position: relative;
	overflow: hidden;
}

.bcrt-media-inner {
	position: absolute;
	inset: 0;
}

.bcrt-media-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.bcrt-media-overlay {
	position: absolute;
	inset: 0;
	background: #000000;
	pointer-events: none;
	z-index: 1;
	/* opacity set inline from admin overlay_opacity setting */
}

/* ── PNG overlay object (straddles the midline) ──────────────────────────── */

.bcrt-overlay-obj-wrap {
	position: absolute;
	top: 50%;
	right: 15%;
	transform: translateY(-50%);
	z-index: 10;
	pointer-events: none;
}

.bcrt-overlay-obj {
	display: block;
	max-height: 60vh;
	width: auto;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

.bcrt-eyebrow {
	display: block;
	font-family: var(--bcrt-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: inherit;
	margin: 0 0 14px;
}

.bcrt-headline {
	font-family: var(--bcrt-font-headline);
	font-size: clamp(2rem, 4.5vw, 4rem);
	font-weight: 700;
	line-height: 1.05;
	color: inherit;
	margin: 0 0 18px;
}

.bcrt-subheadline {
	font-family: var(--bcrt-font-body);
	font-size: clamp(0.95rem, 1.8vw, 1.2rem);
	line-height: 1.6;
	color: inherit;
	opacity: 0.80;
	margin: 0 0 28px;
}

.bcrt-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.bcrt-btn {
	display: inline-block;
	font-family: var(--bcrt-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 32px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	line-height: 1;
	white-space: nowrap;
}

.bcrt-btn:hover {
	transform: translateY(-1px);
}

.bcrt-btn-primary {
	background: var(--bcrt-btn-primary-bg);
	color: var(--bcrt-btn-primary-text);
	border: 2px solid transparent;
}

.bcrt-btn-primary:hover {
	background: var(--bcrt-btn-primary-bg-hover);
}

.bcrt-btn-secondary {
	background: transparent;
	color: var(--bcrt-btn-secondary-text, inherit);
	border: 2px solid var(--bcrt-btn-secondary-border);
}

.bcrt-btn-secondary:hover {
	background: var(--bcrt-btn-secondary-bg-hover);
}

/* ── Navigation arrows ───────────────────────────────────────────────────── */

.bcrt-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bcrt-chrome-bg);
	border: 1px solid var(--bcrt-chrome-border);
	color: var(--bcrt-chrome-color);
	cursor: pointer;
	transition: background 0.2s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 0;
}

.bcrt-arrow:hover {
	background: var(--bcrt-chrome-bg-hover);
}

.bcrt-arrow svg {
	display: block;
	flex-shrink: 0;
}

.bcrt-arrow-prev {
	left: 24px;
}

.bcrt-arrow-next {
	right: 24px;
}

/* ── Dot indicators ──────────────────────────────────────────────────────── */

.bcrt-dots {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	gap: 8px;
	align-items: center;
}

.bcrt-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.40);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.bcrt-dot.bcrt-dot-active,
.bcrt-dot[aria-selected="true"] {
	background: rgba(255, 255, 255, 0.95);
	transform: scale(1.3);
}

/* ── Responsive — 767px and below ────────────────────────────────────────── */

@media (max-width: 767px) {

	/* ── 1. Slider: always fullscreen on mobile ──────────────────────────── */
	.bcrt-slider {
		width: 100vw !important;
		height: 100vh !important;
		position: relative !important;
		overflow: hidden !important;
	}

	/* ── 2. Track: position:absolute so it fills the slider explicitly.
	         Desktop uses position:relative; this makes the chain unambiguous. */
	.bcrt-track {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* ── 3. Slide: absolute fill of track, flex column.
	         No min-height override — inset:0 already fills 100vh. */
	.bcrt-slide {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* ── 4. Content half: sizes to its own text content only.
	         flex:0 0 auto means the browser measures the natural content height.
	         No min-height, no max-height, no fixed height — content determines size.
	         Works for both DOM orders (image-bottom and image-top). */
	.bcrt-half-content {
		flex: 0 0 auto !important;
		height: auto !important;
		min-height: unset !important;
		max-height: none !important;
		padding: 20px 24px !important;
		align-items: flex-start !important;
	}

	/* ── 5. Media half: takes ALL remaining vertical space after content.
	         flex:1 1 0% — starts from 0 and grows to fill, ignoring intrinsic size.
	         position:relative + overflow:hidden are the containing block for
	         the absolutely-positioned media-inner inside. */
	.bcrt-half-media {
		flex: 1 1 0% !important;
		position: relative !important;
		overflow: hidden !important;
		min-height: 25vh !important;
	}

	/* ── 6. Media inner: explicit absolute fill of media half.
	         inset:0 alone works, but width+height belt-and-suspenders this for
	         Android WebView and older mobile browsers. */
	.bcrt-media-inner {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* ── 7. Background image / video: fill media-inner edge to edge. */
	.bcrt-media-bg {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
	}

	/* ── 8. Dark overlay: fill the media half. */
	.bcrt-media-overlay {
		position: absolute !important;
		inset: 0 !important;
	}

	/* ── 9. PNG overlay: straddles the slide midline.
	         .bcrt-overlay-obj-wrap is a direct child of .bcrt-slide (position:absolute,
	         fills 100vh). top:50% = 50vh = approximate boundary between the halves.
	         right:8% keeps it clear of the content text. */
	.bcrt-overlay-obj-wrap {
		position: absolute !important;
		top: 50% !important;
		right: 8% !important;
		transform: translateY(-50%) !important;
		z-index: 10 !important;
		pointer-events: none !important;
	}

	/* ── 10. Overlay image: constrained so it never covers text content.
	          Both max-height and max-width active simultaneously. */
	.bcrt-overlay-obj {
		max-height: 30vh !important;
		max-width: 50vw !important;
		height: auto !important;
		width: auto !important;
		display: block !important;
	}

	/* ── Content layout ──────────────────────────────────────────────────── */

	.bcrt-content-inner {
		max-width: 100% !important;
	}

	.bcrt-text-center .bcrt-content-inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ── Typography: override both base and preset values ─────────────────
	      Cinematic preset sets headline to clamp(2.4rem,5.5vw,5rem) — without
	      !important here it wins over this mobile rule. */
	.bcrt-eyebrow {
		font-size: 0.7rem !important;
		letter-spacing: 2px !important;
		margin-bottom: 8px !important;
	}

	.bcrt-headline {
		font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
		line-height: 1.15 !important;
		margin-bottom: 10px !important;
	}

	.bcrt-subheadline {
		font-size: clamp(0.85rem, 3vw, 1rem) !important;
		margin-bottom: 16px !important;
	}

	/* ── Buttons: 44px min-height for tap targets ────────────────────────── */
	.bcrt-btn {
		min-height: 44px !important;
		padding: 10px 20px !important;
		font-size: 0.85rem !important;
	}

	/* ── Navigation ──────────────────────────────────────────────────────── */
	.bcrt-arrow {
		width: 36px !important;
		height: 36px !important;
	}

	.bcrt-arrow svg {
		width: 18px !important;
		height: 18px !important;
	}

	.bcrt-arrow-prev {
		left: 8px !important;
	}

	.bcrt-arrow-next {
		right: 8px !important;
	}

	.bcrt-dots {
		bottom: 10px !important;
		gap: 6px !important;
	}

	.bcrt-dot {
		width: 8px !important;
		height: 8px !important;
	}
}

/* ── Responsive — 480px and below ────────────────────────────────────────── */

@media (max-width: 480px) {

	/* Smaller overlay on very small phones */
	.bcrt-overlay-obj {
		max-height: 25vh !important;
		max-width: 45vw !important;
	}

	/* Tighter padding */
	.bcrt-half-content {
		padding: 16px 20px !important;
	}

	/* Further reduce headline */
	.bcrt-headline {
		font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
		margin-bottom: 8px !important;
	}

	.bcrt-subheadline {
		margin-bottom: 12px !important;
	}
}

/* ── Loading state — hide content until JS runs entrance animation ───────── */

/*
 * .bcrt-loading is added by the PHP shortcode.
 * JS removes it (after double rAF) before running the entrance animation.
 * This prevents a flash of unstyled content when the page first loads.
 *
 * The active slide (slide 0) remains visible (opacity: 1 via .bcrt-slide--active)
 * but its text/overlay/media are hidden so the JS entrance animation runs cleanly.
 */

.bcrt-slider.bcrt-loading .bcrt-slide--active .bcrt-eyebrow,
.bcrt-slider.bcrt-loading .bcrt-slide--active .bcrt-headline,
.bcrt-slider.bcrt-loading .bcrt-slide--active .bcrt-subheadline,
.bcrt-slider.bcrt-loading .bcrt-slide--active .bcrt-cta-group,
.bcrt-slider.bcrt-loading .bcrt-slide--active .bcrt-overlay-obj,
.bcrt-slider.bcrt-loading .bcrt-slide--active .bcrt-half-media {
	opacity: 0;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.bcrt-btn,
	.bcrt-arrow,
	.bcrt-dot {
		transition: none;
	}
}