/* ============================================================================
   Orilogy Banner - homepage hero carousel

   Full-viewport slides that cross-fade. Every slide is stacked in the same
   grid cell rather than laid out in a row, so the section's height is the
   tallest slide and nothing reflows as slides change.

   Content sits vertically centred between a 120px top inset and a 50px
   bottom one - the top clears the fixed site header, the bottom leaves room
   for the dots without the text drifting into them.
   ========================================================================= */

.oban {
	--oban-ink: var(--e-global-color-primary, #241f20);
	--oban-cream: var(--e-global-color-secondary, #f2ebde);
	--oban-pad-top: 120px;
	--oban-pad-bottom: 50px;

	position: relative;
	display: grid;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
}

/* Prefer the dynamic viewport unit where it exists: on mobile browsers 100vh
   is the height WITHOUT the address bar, so the hero is taller than the
   screen and the bottom of the text hides under the chrome. */
@supports (min-height: 100svh) {
	.oban {
		min-height: 100svh;
	}
}

.oban * {
	box-sizing: border-box;
}

.oban-track {
	display: grid;
	grid-template-areas: "slide";
	width: 100%;
}

/* Every slide occupies the SAME grid cell, so they overlay for the fade. */
.oban-slide {
	grid-area: slide;
	position: relative;
	display: grid;
	align-items: center;              /* the vertical centring */
	width: 100%;
	min-height: 100vh;
	padding: var(--oban-pad-top) 0 var(--oban-pad-bottom);

	color: inherit;
	text-decoration: none;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .7s ease, visibility .7s ease;
}

@supports (min-height: 100svh) {
	.oban-slide {
		min-height: 100svh;
	}
}

.oban-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

/* A linked slide is an <a> wrapping everything - make the affordance real. */
a.oban-slide {
	cursor: pointer;
}

/* The slide's own background: centred, covering, and fixed to the viewport
   so it holds still while the page scrolls past it. */
.oban-slide {
	background-image: var(--oban-img);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.oban-inner {
	width: min(1340px, 100%);
	margin: 0 auto;
	padding-inline: 18px;
}

.oban-content {
	max-width: 620px;
}

/* Sized so "Beauty Has Always Been Yours." breaks onto two lines inside the
   620px content block, which is how the hero was composed. The previous
   clamp resolved to 66px at 1280 and ran the headline onto one long line. */
.oban-title {
	margin: 0 0 22px;
	font-size: clamp(32px, 3.6vw, 58px);
	line-height: 1.08;
	font-weight: 400;
	color: var(--oban-ink);
}

/* Description and button share a row on desktop, stack on mobile. */
.oban-row {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 34px);
}

.oban-desc {
	flex: 1 1 auto;
	margin: 0;
	max-width: 42ch;
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.6;
	color: var(--oban-ink);
}

/* A span, not a link - the whole slide is already the anchor. It only has to
   LOOK like a button; the click is handled by the slide around it. */
.oban-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;
	padding: 0 34px;

	background: #fff;
	color: var(--oban-ink);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .2s ease, transform .2s ease;
}

.oban-slide:hover .oban-btn {
	background: var(--oban-cream);
	transform: translateY(-1px);
}

/* ------------------------------------------------------------- controls -- */

.oban-dots {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 3;

	display: flex;
	gap: 8px;
}

.oban-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: rgba(36, 31, 32, .3);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
}

.oban-dot.is-active {
	width: 22px;
	border-radius: 999px;
	background: var(--oban-ink);
}

.oban-dot:focus-visible {
	outline: 2px solid var(--oban-ink);
	outline-offset: 2px;
}

/* A single slide needs no chrome. */
.oban.is-single .oban-dots {
	display: none;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 767px) {
	.oban {
		--oban-pad-top: 96px;
		--oban-pad-bottom: 64px;
	}

	.oban-content {
		max-width: none;
	}

	.oban-slide {
		background-image: var(--oban-img-m, var(--oban-img));

		/* iOS Safari does not honour background-attachment: fixed - it either
		   ignores it or paints the image at the wrong scale, and on Android it
		   is a known source of scroll jank. Pinned backgrounds are a desktop
		   affordance; on a phone the hero simply scrolls with the page. */
		background-attachment: scroll;
	}

	/* Stack the button under the description, left-aligned. */
	.oban-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.oban-desc {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oban-slide,
	.oban-btn,
	.oban-dot {
		transition-duration: .01ms;
	}
}

/* ----------------------------------------------------------------------------
   Swipe

   pan-y hands horizontal gestures to the script while leaving vertical
   scrolling to the browser. Without it iOS treats a sideways drag as a page
   pan and the swipe never reaches the JS. It goes on the slides as well as the
   section - the slide is the element actually under the finger, and a child
   with the default touch-action overrides its parent.

   user-drag:none stops a linked slide (the whole slide is an <a>) from
   starting the browser's native link drag the moment the mouse moves.
   ------------------------------------------------------------------------- */
.oban,
.oban-slide {
	touch-action: pan-y;
}

.oban-slide {
	-webkit-user-drag: none;
}

.oban.is-dragging,
.oban.is-dragging * {
	-webkit-user-select: none;
	user-select: none;
}

.oban.is-dragging a.oban-slide {
	cursor: grabbing;
}