/* ==========================================================================
   HERO-06: VERTICAL FULLSCREEN SLIDER (.sentio-hvs)
   ==========================================================================
   Merged from two sources during the Batch 3 hero-vertical port (2026-04-18):
   (1) the legacy block at frontend.css:39089-39207 — active styling:
       scroll-snap container, full-image mode, split-counter mode,
       typography, side-nav, progress, mobile breakpoint
   (2) the inline <style> at hero-vertical.php:1366-1437 — critical overrides
       that load later in the document and win the cascade: inline-flex
       container overrides, nav/progress positions, content-animation rules

   Appended below: accessibility block (focus-visible ring, sr-only helper
   class for the live-region announcer, prefers-reduced-motion overrides).
   This is the first widget authored to the full a11y standard from
   docs/widget-authoring-guide.md §Accessibility Requirements.
   ========================================================================== */

/* ----------------------------------------------------------------
   From frontend.css (active complementary styling)
   ---------------------------------------------------------------- */

.sentio-hvs { position: relative; width: 100%; }

.sentio-hvs__container {
	height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory;
	scrollbar-width: none;
}
.sentio-hvs__container::-webkit-scrollbar { display: none; }

/* Slide visibility */
.sentio-hvs__slide { opacity: 0; visibility: hidden; position: absolute; inset: 0; }
.sentio-hvs__slide--active { opacity: 1; visibility: visible; }

/* Columns layout */
.sentio-hvs__columns { display: flex; height: 100%; }
.sentio-hvs__col--content { flex: 0 0 var(--hvs-col-content, 50%); display: flex; align-items: center; }
.sentio-hvs__col--media { flex: 0 0 var(--hvs-col-media, 50%); position: relative; overflow: hidden; }
.sentio-hvs__col-img { width: 100%; height: 100%; object-fit: cover; }

/* Full-image mode */
.sentio-hvs--full-image .sentio-hvs__slide {
	height: 100vh; scroll-snap-align: start; position: relative; overflow: hidden;
}
.sentio-hvs--full-image .sentio-hvs__bg {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sentio-hvs--full-image .sentio-hvs__overlay {
	position: absolute; inset: 0; background: var(--hvs-overlay, rgba(0,0,0,0.3));
}
.sentio-hvs--full-image .sentio-hvs__content {
	position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
	height: 100%; padding: 60px; max-width: var(--hvs-content-max-w, 650px);
}

/* Split-counter mode */
.sentio-hvs--split-counter .sentio-hvs__container { display: flex; }
.sentio-hvs--split-counter .sentio-hvs__panel {
	height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory;
}
.sentio-hvs--split-counter .sentio-hvs__panel--content {
	flex: 0 0 var(--hvs-ratio-content, 50%);
	background: #fff;
}
.sentio-hvs--split-counter .sentio-hvs__panel--media {
	flex: 0 0 var(--hvs-ratio-media, 50%);
}
.sentio-hvs--split-counter .sentio-hvs__section {
	height: 100vh; scroll-snap-align: start; display: flex;
	align-items: center; justify-content: center; padding: 60px;
}
.sentio-hvs--split-counter .sentio-hvs__panel--media .sentio-hvs__section {
	padding: 0;
}
.sentio-hvs--split-counter .sentio-hvs__section img {
	width: 100%; height: 100%; object-fit: cover;
}

.sentio-hvs__subtitle { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 12px; }
.sentio-hvs__title { font-size: 44px; font-weight: 800; margin: 0 0 16px; line-height: 1.15; }
.sentio-hvs__description { font-size: 17px; margin: 0 0 28px; line-height: 1.6; }
.sentio-hvs__button { display: inline-flex; padding: 14px 32px; border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.3s; line-height: 1.2; }

.sentio-hvs__slide--dark .sentio-hvs__subtitle, .sentio-hvs__slide--dark .sentio-hvs__title, .sentio-hvs__slide--dark .sentio-hvs__description { color: #111; }
.sentio-hvs__slide--dark .sentio-hvs__button { background: #111; color: #fff; }
.sentio-hvs__slide--light .sentio-hvs__subtitle, .sentio-hvs__slide--light .sentio-hvs__title, .sentio-hvs__slide--light .sentio-hvs__description { color: #fff; }
.sentio-hvs__slide--light .sentio-hvs__button { background: #fff; color: #111; }

/* Content animation on enter */
.sentio-hvs[data-animation="fade-up"] .sentio-hvs__content-inner > * {
	opacity: 0; transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.sentio-hvs .sentio-hvs__slide--visible .sentio-hvs__content-inner > * {
	opacity: 1; transform: translateY(0);
}

/* Side Nav */
.sentio-hvs__nav {
	position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 100;
	display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
.sentio-hvs__nav-item {
	background: none; border: none; cursor: pointer;
	padding: 0; position: relative; display: flex; align-items: center;
}
.sentio-hvs__nav-dot {
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--hvs-dot-color, rgba(0,0,0,0.3));
	transition: all 0.3s; display: block;
}
.sentio-hvs__nav-item--active .sentio-hvs__nav-dot {
	background: var(--hvs-dot-active, #6C63FF); transform: scale(1.3);
}
.sentio-hvs__nav-label {
	position: absolute; right: 24px; top: 50%;
	transform: translateY(-50%); white-space: nowrap; font-size: 12px; font-weight: 600;
	color: #333; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.sentio-hvs__nav-item:hover .sentio-hvs__nav-label { opacity: 1; }

/* Progress */
.sentio-hvs__progress {
	position: absolute; right: 12px; top: 10%; bottom: 10%; z-index: 100;
	width: var(--hvs-bar-width, 3px); background: rgba(0,0,0,0.1); border-radius: 2px;
}
.sentio-hvs__progress-bar {
	width: 100%; background: var(--hvs-bar-color, #6C63FF); border-radius: 2px;
	height: 0; transition: height 0.2s;
}

@media (max-width: 767px) {
	.sentio-hvs__title { font-size: 28px; }
	.sentio-hvs__content { padding: 30px 20px; }
	.sentio-hvs__nav { right: 8px; }
	.sentio-hvs--split-counter .sentio-hvs__container { flex-direction: column; }
}

/* ----------------------------------------------------------------
   From inline <style> in hero-vertical.php (later-in-cascade overrides)
   ---------------------------------------------------------------- */

.sentio-hvs { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.sentio-hvs__container { width: 100%; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.sentio-hvs__container::-webkit-scrollbar { display: none; }
.sentio-hvs__section,
.sentio-hvs__slide { height: 100vh; min-height: 100vh; max-height: 100vh; scroll-snap-align: start; position: relative; display: flex; overflow: hidden; }
.sentio-hvs--split-counter .sentio-hvs__container { display: flex; overflow: hidden; }
.sentio-hvs--split-counter .sentio-hvs__panel { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: none; }
.sentio-hvs--split-counter .sentio-hvs__panel::-webkit-scrollbar { display: none; }
.sentio-hvs--split-counter .sentio-hvs__panel--content { flex: 0 0 var(--hvs-ratio-content, 50%); }
.sentio-hvs--split-counter .sentio-hvs__panel--media { flex: 0 0 var(--hvs-ratio-media, 50%); }
.sentio-hvs--split-counter .sentio-hvs__section { height: 100vh; min-height: 100vh; max-height: 100vh; scroll-snap-align: start; overflow: hidden; }
/* Full-image & content-left slides container */
.sentio-hvs--full-image .sentio-hvs__slides,
.sentio-hvs--content-left .sentio-hvs__slides { height: auto; }
.sentio-hvs--full-image .sentio-hvs__slide,
.sentio-hvs--content-left .sentio-hvs__slide { height: 100vh; min-height: 100vh; max-height: 100vh; overflow: hidden; }
.sentio-hvs__columns { display: flex; width: 100%; height: 100%; }
.sentio-hvs__col--content { flex: 0 0 var(--hvs-col-content, 50%); display: flex; height: 100%; }
.sentio-hvs__col--media { flex: 0 0 var(--hvs-col-media, 50%); position: relative; overflow: hidden; }
.sentio-hvs__col-img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.sentio-hvs__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
/* Media panel images (split-counter layout) */
.sentio-hvs__panel--media .sentio-hvs__section { overflow: hidden; }
.sentio-hvs__panel--media .sentio-hvs__section img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ensure columns fill parent height */
.sentio-hvs__columns { height: 100%; }
.sentio-hvs__overlay { position: absolute; inset: 0; z-index: 1; }
.sentio-hvs__content { display: grid; align-content: center; position: relative; z-index: 2; width: 100%; height: 100%; box-sizing: border-box; }
/* In full-image layout, columns and content share the slide height */
.sentio-hvs--full-image .sentio-hvs__columns,
.sentio-hvs--content-left .sentio-hvs__columns { position: relative; z-index: 2; height: 100%; }
.sentio-hvs--full-image .sentio-hvs__content,
.sentio-hvs--content-left .sentio-hvs__content { display: grid; align-content: center; }
.sentio-hvs__button { display: inline-block; text-decoration: none; cursor: pointer; transition: background-color 0.3s, color 0.3s; text-align: center; }
.sentio-hvs__nav { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; gap: 12px; }
.sentio-hvs__nav-item { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px; }
.sentio-hvs__nav-dot { width: 10px; height: 10px; background: rgba(0,0,0,0.5); border-radius: 50%; transition: transform 0.3s, background-color 0.3s; }
.sentio-hvs__nav-item--active .sentio-hvs__nav-dot { transform: scale(1.4); background: #000000; }
.sentio-hvs__nav-label { font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.3s; color: #000000; pointer-events: none; }
.sentio-hvs__nav-item:hover .sentio-hvs__nav-label { opacity: 1; }
.sentio-hvs__progress { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 4px; height: 120px; background: rgba(255,255,255,0.2); border-radius: 3px; z-index: 100; overflow: hidden; }
.sentio-hvs__progress-bar { width: 100%; height: 0; border-radius: 3px; transition: height 0.3s; }
.sentio-hvs__floating { position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.sentio-hvs__float { position: absolute; border-radius: 50%; opacity: 0.15; }
.sentio-hvs__float--circle { width: 200px; height: 200px; background: currentColor; top: 20%; right: 10%; animation: sentio-hvs-float 8s ease-in-out infinite; }
.sentio-hvs__float--ring { width: 120px; height: 120px; border: 3px solid currentColor; bottom: 30%; left: 5%; animation: sentio-hvs-float 6s ease-in-out infinite reverse; }
.sentio-hvs__float--sm { width: 60px; height: 60px; top: 60%; right: 30%; animation: sentio-hvs-float 10s ease-in-out infinite; }
@keyframes sentio-hvs-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }
/* Content animation — initial hidden states */
.sentio-hvs__content .sentio-hvs__subtitle,
.sentio-hvs__content .sentio-hvs__title,
.sentio-hvs__content .sentio-hvs__description,
.sentio-hvs__content .sentio-hvs__button { transition: opacity 0.6s ease, transform 0.6s ease; }
/* Fade Up */
[data-animation="fade-up"] .sentio-hvs__content > * { opacity: 0; transform: translateY(30px); }
/* Slide Left */
[data-animation="slide-left"] .sentio-hvs__content > * { opacity: 0; transform: translateX(-30px); }
/* Scale */
[data-animation="scale"] .sentio-hvs__content > * { opacity: 0; transform: scale(0.85); }
/* Active state — reveal content */
.sentio-hvs__section--active[data-animation] .sentio-hvs__content > *,
.sentio-hvs__slide--active[data-animation] .sentio-hvs__content > * { opacity: 1; transform: none; }
/* Staggered delays */
.sentio-hvs__content > *:nth-child(1) { transition-delay: 0s; }
.sentio-hvs__content > *:nth-child(2) { transition-delay: 0.1s; }
.sentio-hvs__content > *:nth-child(3) { transition-delay: 0.2s; }
.sentio-hvs__content > *:nth-child(4) { transition-delay: 0.3s; }
/* Force slide backgrounds & images to remain visible regardless of active class */
.sentio-hvs .sentio-hvs__slide .sentio-hvs__bg,
.sentio-hvs .sentio-hvs__slide .sentio-hvs__col-img { display: block !important; visibility: visible !important; opacity: 1 !important; }
.sentio-hvs .sentio-hvs__section img { display: block !important; visibility: visible !important; opacity: 1 !important; }

/* ----------------------------------------------------------------
   Accessibility (standard per docs/widget-authoring-guide.md §A11y)
   ---------------------------------------------------------------- */

/* Screen-reader-only live region for slide-change announcements. Visually
 * hidden but exposed to AT. Used with aria-live="polite" on the element. */
.sentio-hvs__sr-announce {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Visible focus ring on keyboard-activated interactive elements. Never
 * remove the outline — override user-agent defaults with a high-contrast
 * ring that meets WCAG 2.4.7 Focus Visible + 2.4.11 Focus Not Obscured. */
.sentio-hvs__nav-item:focus-visible {
	outline: 3px solid var(--hvs-focus-ring, #6C63FF);
	outline-offset: 2px;
	border-radius: 6px;
}
.sentio-hvs__button:focus-visible {
	outline: 3px solid var(--hvs-focus-ring, #6C63FF);
	outline-offset: 3px;
}

/* WCAG 2.3.3 Animation from Interactions + WCAG 2.2.2 (via JS) — respect
 * prefers-reduced-motion by zeroing all motion/transitions in this widget.
 * The JS complements this by disabling autoplay and switching scrollTo
 * behavior from 'smooth' to 'auto'. */
@media (prefers-reduced-motion: reduce) {
	.sentio-hvs,
	.sentio-hvs * {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
	/* Floating decorative elements — keep static */
	.sentio-hvs__float--circle,
	.sentio-hvs__float--ring,
	.sentio-hvs__float--sm {
		animation: none !important;
	}
}