/* =========================================================================
   VCMS Hero Slider – frontend styles
   5 effects: slide | fade | zoom | kenburns | parallax
   10 nav styles: classic | minimal | floating | bottom-bar | top-bar |
                  edge | numbered | vertical-side | fraction | none
   8 arrow styles: sides-center | sides-lower | sides-upper | bottom-corners |
                   top-corners | bottom-center | diagonal | right-stack
   ========================================================================= */

/* -- CSS Variables -------------------------------------------------------- */
:root {
	--vcms-hero-h:          85vh;
	--vcms-hero-dur:        900ms;
	--vcms-hero-title-sz:   2.5rem;
	--vcms-hero-accent:     #46a049;
	--vcms-hero-arrow-sz:   48px;
	--vcms-hero-dot-sz:     10px;
	--vcms-hero-dot-sz-a:   28px;
	--vcms-hero-text-shadow: 0 1px 4px rgba(0,0,0,.45);
}

/* -- Prevent horizontal overflow caused by theme negative-margin rows ----- */
/* Impreza sets body{overflow-x:hidden} which via CSS propagation makes body  */
/* act as overflow:visible. When a vertical scrollbar appears (hero adds height)*/
/* the row negative-margins spill 24px beyond the viewport. Explicitly setting  */
/* html prevents that loophole.                                                 */
html { overflow-x: hidden; }

/* -- Reset ---------------------------------------------------------------- */
.vcms-hero *,
.vcms-hero *::before,
.vcms-hero *::after { box-sizing: border-box; }

/* =========================================================================
   Container
   ========================================================================= */
.vcms-hero {
	position:            relative;
	width:               100%;
	height:              var(--vcms-hero-h);
	overflow:            hidden;
	background:          #111;
	-webkit-user-select: none;
	user-select:         none;
}

/* =========================================================================
   Track + Slides
   ========================================================================= */
.vcms-hero-track {
	position: relative;
	width:    100%;
	height:   100%;
}

.vcms-hero-slide {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	visibility: hidden;
}
.vcms-hero-slide.active { visibility: visible; z-index: 2; }

.vcms-hero-bg {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center center;
	display:         block;
	pointer-events:  none;
}

.vcms-hero-overlay {
	position:       absolute;
	inset:          0;
	z-index:        1;
	pointer-events: none;
}

/* =========================================================================
   Text Content
   ========================================================================= */
.vcms-hero-content {
	position: absolute;
	inset:    0;
	z-index:  3;
	display:  flex;
	padding:  4vw 6vw;
}
.vcms-hero-content--left   { justify-content: flex-start; text-align: left;   }
.vcms-hero-content--center { justify-content: center;      text-align: center; }
.vcms-hero-content--right  { justify-content: flex-end;    text-align: right;  }
.vcms-hero-content--top    { align-items: flex-start; }
.vcms-hero-content--middle { align-items: center;     }
.vcms-hero-content--bottom { align-items: flex-end;   }

.vcms-hero-inner {
	max-width:   750px;
	width:       100%;
	flex-shrink: 0;
}

/* Light text (default) */
.vcms-hero-content .vcms-hero-badge,
.vcms-hero-content .vcms-hero-heading,
.vcms-hero-content .vcms-hero-subtext {
	color:       #fff;
	text-shadow: var(--vcms-hero-text-shadow);
}
/* Dark text override */
.vcms-hero--text-dark .vcms-hero-badge,
.vcms-hero--text-dark .vcms-hero-heading,
.vcms-hero--text-dark .vcms-hero-subtext {
	color:       #1a202c;
	text-shadow: 0 1px 2px rgba(255,255,255,.4);
}

/* Badge */
.vcms-hero-badge {
	display:         inline-flex;
	align-items:     center;
	gap:             7px;
	font-size:       0.78rem;
	font-weight:     700;
	letter-spacing:  .1em;
	text-transform:  uppercase;
	background:      rgba(255,255,255,.15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border:          1px solid rgba(255,255,255,.25);
	border-radius:   100px;
	padding:         5px 14px 5px 10px;
	margin-bottom:   16px;
}
.vcms-hero-badge-dot {
	width:         8px;
	height:        8px;
	background:    #46d461;
	border-radius: 50%;
	flex-shrink:   0;
	animation:     vcms-pulse 2s ease-in-out infinite;
}
@keyframes vcms-pulse {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%       { transform: scale(1.4); opacity: .7; }
}

/* Heading — uses CSS variable for admin-controlled size */
.vcms-hero-heading {
	margin:         0 0 18px;
	font-size:      var(--vcms-hero-title-sz, 2.5rem);
	font-weight:    800;
	line-height:    1.1;
	letter-spacing: -.02em;
}

/* Subtext */
.vcms-hero-subtext {
	margin:    0 0 28px;
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.65;
	opacity:   .9;
	max-width: 580px;
}
.vcms-hero-content--center .vcms-hero-subtext {
	margin-left:  auto;
	margin-right: auto;
}

/* Buttons */
.vcms-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vcms-hero-content--center .vcms-hero-actions { justify-content: center; }
.vcms-hero-content--right  .vcms-hero-actions { justify-content: flex-end; }

.vcms-hero-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             7px;
	padding:         13px 26px;
	border-radius:   50px;
	font-size:       0.9rem;
	font-weight:     700;
	text-decoration: none;
	letter-spacing:  .02em;
	transition:      transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	cursor:          pointer;
	white-space:     nowrap;
}
.vcms-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }

.vcms-hero-btn--primary {
	background: var(--vcms-hero-accent);
	color:      #fff;
	box-shadow: 0 4px 14px rgba(70,160,73,.45);
}
.vcms-hero-btn--primary:hover { background: #3a8f3d; color: #fff; }

.vcms-hero-btn--secondary {
	background:      rgba(255,255,255,.14);
	color:           #fff;
	border:          1.5px solid rgba(255,255,255,.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.vcms-hero-btn--secondary:hover { background: rgba(255,255,255,.24); color: #fff; }
.vcms-hero--text-dark .vcms-hero-btn--secondary {
	background:  rgba(0,0,0,.08);
	color:       #1a202c;
	border-color: rgba(0,0,0,.25);
}

/* Text entrance animation */
.vcms-hero-slide .vcms-hero-inner > * {
	opacity:    0;
	transform:  translateY(22px);
	transition: opacity .55s ease, transform .55s ease;
}
.vcms-hero-slide.active .vcms-hero-inner > * { opacity: 1; transform: translateY(0); }
.vcms-hero-slide.active .vcms-hero-badge   { transition-delay: .15s; }
.vcms-hero-slide.active .vcms-hero-heading { transition-delay: .3s;  }
.vcms-hero-slide.active .vcms-hero-subtext { transition-delay: .45s; }
.vcms-hero-slide.active .vcms-hero-actions { transition-delay: .6s;  }

/* =========================================================================
   Navigation wrapper — base
   ========================================================================= */
.vcms-hero-nav {
	position:       absolute;
	inset:          0;
	pointer-events: none;
	z-index:        10;
}
.vcms-hero-nav > * { pointer-events: auto; }

/* Hide arrows/dots when their modifier class is absent */
.vcms-hero-nav:not(.vcms-hero-nav--arrows) .vcms-hero-arrow { display: none; }
.vcms-hero-nav:not(.vcms-hero-nav--dots)   .vcms-hero-dots  { display: none; }

/* =========================================================================
   Arrow base
   ========================================================================= */
.vcms-hero-arrow {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         11;
	width:           var(--vcms-hero-arrow-sz);
	height:          var(--vcms-hero-arrow-sz);
	background:      rgba(255,255,255,.15);
	border:          1.5px solid rgba(255,255,255,.35);
	border-radius:   50%;
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	transition:      background .2s ease, transform .2s ease, opacity .2s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	-webkit-appearance: none;
	appearance:      none;
	padding:         0;
}
.vcms-hero-arrow:hover { background: rgba(255,255,255,.3); }
.vcms-hero-arrow--prev:not([disabled]):hover { transform: translateY(-50%) scale(1.08); }
.vcms-hero-arrow--next:not([disabled]):hover { transform: translateY(-50%) scale(1.08); }

/* SVG scales proportionally with arrow size (42% of container, clamped) */
.vcms-hero-arrow svg {
	width:  clamp(14px, calc(var(--vcms-hero-arrow-sz) * .42), 32px);
	height: clamp(14px, calc(var(--vcms-hero-arrow-sz) * .42), 32px);
	display: block;
}

.vcms-hero-arrow--prev { left:  clamp(10px, 2vw, 24px); }
.vcms-hero-arrow--next { right: clamp(10px, 2vw, 24px); }

/* Disabled / non-loop boundary state */
.vcms-hero-arrow[disabled] {
	opacity: 0.25;
	cursor:  default;
	pointer-events: none;
}

/* =========================================================================
   Dots base
   ========================================================================= */
.vcms-hero-dots {
	position:        absolute;
	bottom:          22px;
	left:            50%;
	transform:       translateX(-50%);
	z-index:         11;
	display:         flex;
	align-items:     center;
	gap:             8px;
	background:      rgba(0,0,0,.25);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius:   100px;
	padding:         6px 10px;
}

.vcms-hero-dot {
	width:         var(--vcms-hero-dot-sz);
	height:        var(--vcms-hero-dot-sz);
	border-radius: 50%;
	background:    rgba(255,255,255,.45);
	border:        none;
	cursor:        pointer;
	transition:    width .3s ease, height .3s ease, background .3s ease, border-radius .3s ease;
	padding:       0;
	-webkit-appearance: none;
	appearance:    none;
	flex-shrink:   0;
}
.vcms-hero-dot.active {
	width:         var(--vcms-hero-dot-sz-a);
	border-radius: 5px;
	background:    #fff;
}

/* =========================================================================
   Counter base
   ========================================================================= */
.vcms-hero-counter {
	position:        absolute;
	top:             18px;
	right:           18px;
	z-index:         11;
	font-size:       0.78rem;
	font-weight:     700;
	color:           rgba(255,255,255,.8);
	background:      rgba(0,0,0,.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius:   100px;
	padding:         4px 10px;
	letter-spacing:  .06em;
	display:         flex;
	align-items:     center;
	gap:             4px;
}
.vcms-hero-counter-sep { opacity: .6; }

/* =========================================================================
   EFFECT: fade
   ========================================================================= */
.vcms-hero--fade .vcms-hero-slide {
	opacity:    0;
	visibility: hidden;
	transition: opacity var(--vcms-hero-dur) ease,
	            visibility 0s var(--vcms-hero-dur);
}
.vcms-hero--fade .vcms-hero-slide.active {
	opacity:    1;
	visibility: visible;
	transition: opacity var(--vcms-hero-dur) ease;
}

/* =========================================================================
   EFFECT: slide
   ========================================================================= */
.vcms-hero--slide .vcms-hero-track {
	display:    flex;
	transition: transform var(--vcms-hero-dur) cubic-bezier(.76, 0, .24, 1);
}
.vcms-hero--slide .vcms-hero-slide { position: relative; flex-shrink: 0; visibility: visible; }

/* =========================================================================
   EFFECT: zoom
   ========================================================================= */
.vcms-hero--zoom .vcms-hero-slide {
	opacity: 0; visibility: hidden;
	transition: opacity var(--vcms-hero-dur) ease, visibility 0s var(--vcms-hero-dur);
}
.vcms-hero--zoom .vcms-hero-slide .vcms-hero-bg {
	transform: scale(1);
	transition: transform calc(var(--vcms-hero-dur) * 5) ease-out;
}
.vcms-hero--zoom .vcms-hero-slide.active { opacity: 1; visibility: visible; transition: opacity var(--vcms-hero-dur) ease; }
.vcms-hero--zoom .vcms-hero-slide.active .vcms-hero-bg { transform: scale(1.08); }

/* =========================================================================
   EFFECT: kenburns
   ========================================================================= */
.vcms-hero--kenburns .vcms-hero-slide {
	opacity: 0; visibility: hidden;
	transition: opacity var(--vcms-hero-dur) ease, visibility 0s var(--vcms-hero-dur);
}
.vcms-hero--kenburns .vcms-hero-slide .vcms-hero-bg { transform-origin: center center; animation: none; }
.vcms-hero--kenburns .vcms-hero-slide.active { opacity: 1; visibility: visible; transition: opacity var(--vcms-hero-dur) ease; }
.vcms-hero--kenburns .vcms-hero-slide.active .vcms-hero-bg {
	animation: vcms-kenburns var(--vcms-kb-dur, 8s) ease-out forwards;
}
@keyframes vcms-kenburns {
	0%   { transform: scale(1.0)  translate(0,    0);     }
	100% { transform: scale(1.12) translate(-2%, -1.5%);  }
}
.vcms-hero--kenburns .vcms-hero-slide.active:nth-child(even) .vcms-hero-bg {
	animation-name: vcms-kenburns-alt;
}
@keyframes vcms-kenburns-alt {
	0%   { transform: scale(1.0)  translate(0,   0);   }
	100% { transform: scale(1.12) translate(2%, 1.5%); }
}

/* =========================================================================
   EFFECT: parallax
   ========================================================================= */
.vcms-hero--parallax .vcms-hero-slide {
	opacity: 0; visibility: hidden;
	transition: opacity var(--vcms-hero-dur) ease, visibility 0s var(--vcms-hero-dur);
}
.vcms-hero--parallax .vcms-hero-slide .vcms-hero-bg {
	transform:  translateX(0);
	transition: transform calc(var(--vcms-hero-dur) * 2.5) cubic-bezier(.25, .46, .45, .94);
}
.vcms-hero--parallax .vcms-hero-slide.leaving  .vcms-hero-bg { transform: translateX(-12%); }
.vcms-hero--parallax .vcms-hero-slide.entering .vcms-hero-bg { transform: translateX(6%); }
.vcms-hero--parallax .vcms-hero-slide.active   { opacity: 1; visibility: visible; transition: opacity var(--vcms-hero-dur) ease; }
.vcms-hero--parallax .vcms-hero-slide.active   .vcms-hero-bg { transform: translateX(0); }

/* =========================================================================

   NAV STYLE 1 — Classic  (default, already styled above)
   Round frosted glass arrows on sides · circle dots bottom centre · counter top-right

   ========================================================================= */
/* No overrides needed — base styles produce this look */

/* =========================================================================
   NAV STYLE 2 — Minimal
   Bare chevron arrows, no background · dash dots · counter hidden
   ========================================================================= */
.vcms-hero--nav-minimal .vcms-hero-arrow {
	background:  transparent;
	border:      none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow:  none;
	/* width/height from --vcms-hero-arrow-sz */
}
.vcms-hero--nav-minimal .vcms-hero-arrow svg { stroke-width: 1.8; }
.vcms-hero--nav-minimal .vcms-hero-arrow:hover { background: rgba(255,255,255,.1); border-radius: 50%; }
.vcms-hero--nav-minimal .vcms-hero-arrow--prev:not([disabled]):hover { transform: translateY(-50%) translateX(-2px); }
.vcms-hero--nav-minimal .vcms-hero-arrow--next:not([disabled]):hover { transform: translateY(-50%) translateX(2px); }

.vcms-hero--nav-minimal .vcms-hero-dot {
	width:         18px;
	height:        3px;
	border-radius: 2px;
	background:    rgba(255,255,255,.4);
}
.vcms-hero--nav-minimal .vcms-hero-dot.active {
	width:         32px;
	height:        3px;
	border-radius: 2px;
	background:    #fff;
}
.vcms-hero--nav-minimal .vcms-hero-dots { background: transparent; padding: 4px 6px; }
.vcms-hero--nav-minimal .vcms-hero-counter { display: none; }

/* =========================================================================
   NAV STYLE 3 — Floating
   Large 64px white arrows with strong drop shadow · glowing dots · bottom
   ========================================================================= */
.vcms-hero--nav-floating .vcms-hero-arrow {
	/* width/height from --vcms-hero-arrow-sz */
	background: rgba(255,255,255,.9);
	color:      #1a202c;
	border:     none;
	box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	top:        65%;
}
.vcms-hero--nav-floating .vcms-hero-arrow:hover { background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.vcms-hero--nav-floating .vcms-hero-arrow--prev:not([disabled]):hover { transform: translateY(-50%) scale(1.06); }
.vcms-hero--nav-floating .vcms-hero-arrow--next:not([disabled]):hover { transform: translateY(-50%) scale(1.06); }
.vcms-hero--nav-floating .vcms-hero-arrow svg { stroke-width: 2; }

.vcms-hero--nav-floating .vcms-hero-dot {
	width:         12px;
	height:        12px;
	background:    rgba(255,255,255,.5);
	box-shadow:    0 0 6px rgba(255,255,255,.4);
}
.vcms-hero--nav-floating .vcms-hero-dot.active {
	width:         12px;
	height:        12px;
	border-radius: 50%;
	background:    #fff;
	box-shadow:    0 0 0 3px rgba(255,255,255,.35);
}
.vcms-hero--nav-floating .vcms-hero-dots { background: rgba(0,0,0,.2); padding: 8px 14px; gap: 10px; }
.vcms-hero--nav-floating .vcms-hero-counter { display: none; }

/* =========================================================================
   NAV STYLE 4 — Bottom Bar
   All controls in one frosted-glass pill at bottom  ← • • • →
   ========================================================================= */
.vcms-hero--nav-bottom-bar .vcms-hero-nav {
	top:             auto;
	left:            50%;
	bottom:          20px;
	right:           auto;
	width:           auto;
	height:          auto;
	inset:           auto;
	position:        absolute;
	transform:       translateX(-50%);
	display:         flex;
	align-items:     center;
	gap:             6px;
	background:      rgba(0,0,0,.48);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border:          1px solid rgba(255,255,255,.15);
	border-radius:   50px;
	padding:         8px 14px;
	pointer-events:  auto;
}
.vcms-hero--nav-bottom-bar .vcms-hero-arrow {
	position:   static;
	transform:  none;
	width:      clamp(22px, calc(var(--vcms-hero-arrow-sz) * .65), 52px);
	height:     clamp(22px, calc(var(--vcms-hero-arrow-sz) * .65), 52px);
	background: transparent;
	border:     none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.vcms-hero--nav-bottom-bar .vcms-hero-arrow:hover { background: rgba(255,255,255,.15); }
.vcms-hero--nav-bottom-bar .vcms-hero-arrow--prev:not([disabled]):hover { transform: none; }
.vcms-hero--nav-bottom-bar .vcms-hero-arrow--next:not([disabled]):hover { transform: none; }
.vcms-hero--nav-bottom-bar .vcms-hero-arrow svg {
	width:  clamp(10px, calc(var(--vcms-hero-arrow-sz) * .27), 22px);
	height: clamp(10px, calc(var(--vcms-hero-arrow-sz) * .27), 22px);
}
.vcms-hero--nav-bottom-bar .vcms-hero-dots {
	position:    static;
	transform:   none;
	background:  transparent;
	padding:     0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.vcms-hero--nav-bottom-bar .vcms-hero-counter { display: none; }
/* Show arrows even without vcms-hero-nav--arrows in bar (bar includes them) */
.vcms-hero--nav-bottom-bar .vcms-hero-nav:not(.vcms-hero-nav--arrows) .vcms-hero-arrow {
	display: none;
}

/* =========================================================================
   NAV STYLE 5 — Top Bar
   Same pill bar but at the top of the slider
   ========================================================================= */
.vcms-hero--nav-top-bar .vcms-hero-nav {
	inset:           auto;
	position:        absolute;
	top:             20px;
	left:            50%;
	transform:       translateX(-50%);
	display:         flex;
	align-items:     center;
	gap:             6px;
	background:      rgba(0,0,0,.48);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border:          1px solid rgba(255,255,255,.15);
	border-radius:   50px;
	padding:         8px 14px;
	pointer-events:  auto;
}
.vcms-hero--nav-top-bar .vcms-hero-arrow {
	position:   static;
	transform:  none;
	width:      clamp(22px, calc(var(--vcms-hero-arrow-sz) * .65), 52px);
	height:     clamp(22px, calc(var(--vcms-hero-arrow-sz) * .65), 52px);
	background: transparent;
	border:     none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.vcms-hero--nav-top-bar .vcms-hero-arrow:hover { background: rgba(255,255,255,.15); }
.vcms-hero--nav-top-bar .vcms-hero-arrow--prev:not([disabled]):hover { transform: none; }
.vcms-hero--nav-top-bar .vcms-hero-arrow--next:not([disabled]):hover { transform: none; }
.vcms-hero--nav-top-bar .vcms-hero-arrow svg {
	width:  clamp(10px, calc(var(--vcms-hero-arrow-sz) * .27), 22px);
	height: clamp(10px, calc(var(--vcms-hero-arrow-sz) * .27), 22px);
}
.vcms-hero--nav-top-bar .vcms-hero-dots {
	position:   static;
	transform:  none;
	background: transparent;
	padding:    0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.vcms-hero--nav-top-bar .vcms-hero-counter {
	position: static;
	transform: none;
	background: transparent;
	padding: 0;
	font-size: 0.72rem;
	border-radius: 0;
	backdrop-filter: none;
}
.vcms-hero--nav-top-bar .vcms-hero-nav:not(.vcms-hero-nav--arrows) .vcms-hero-arrow { display: none; }

/* =========================================================================
   NAV STYLE 6 — Edge
   Full-height gradient edge arrows, dots bottom, counter top-right
   ========================================================================= */
.vcms-hero--nav-edge .vcms-hero-arrow {
	top:            0;
	transform:      none;
	height:         100%;
	border-radius:  0;
	width:          70px;
	background:     linear-gradient(to right, rgba(0,0,0,.32), transparent);
	border:         none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	opacity:        0;
	transition:     opacity .3s ease;
}
.vcms-hero--nav-edge:hover .vcms-hero-arrow { opacity: 1; }
.vcms-hero--nav-edge .vcms-hero-arrow--prev { left: 0; }
.vcms-hero--nav-edge .vcms-hero-arrow--next {
	right:       0;
	left:        auto;
	background:  linear-gradient(to left, rgba(0,0,0,.32), transparent);
}
.vcms-hero--nav-edge .vcms-hero-arrow:hover { background: linear-gradient(to right, rgba(0,0,0,.5), transparent); }
.vcms-hero--nav-edge .vcms-hero-arrow--next:hover { background: linear-gradient(to left, rgba(0,0,0,.5), transparent); }
.vcms-hero--nav-edge .vcms-hero-arrow[disabled] { opacity: 0 !important; }
.vcms-hero--nav-edge .vcms-hero-arrow svg { width: 24px; height: 24px; }

/* =========================================================================
   NAV STYLE 7 — Numbered
   Large bold counter bottom-centre · text PREV/NEXT arrows · no dots
   ========================================================================= */
.vcms-hero--nav-numbered .vcms-hero-dots  { display: none; }

.vcms-hero--nav-numbered .vcms-hero-counter {
	top:             auto;
	right:           auto;
	bottom:          54px;
	left:            50%;
	transform:       translateX(-50%);
	background:      transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding:         0;
	border-radius:   0;
	font-size:       2.2rem;
	font-weight:     900;
	letter-spacing:  -.02em;
	gap:             10px;
}
.vcms-hero--nav-numbered .vcms-hero-counter-sep { opacity: .35; }

.vcms-hero--nav-numbered .vcms-hero-arrow {
	top:         auto;
	bottom:      16px;
	transform:   none;
	border-radius: 6px;
	width:        auto;
	height:       36px;
	padding:      0 16px;
	gap:          6px;
	font-size:    0.72rem;
	font-weight:  800;
	letter-spacing: .1em;
	text-transform: uppercase;
	background:   rgba(255,255,255,.14);
	border:       1px solid rgba(255,255,255,.3);
}
.vcms-hero--nav-numbered .vcms-hero-arrow:hover { background: rgba(255,255,255,.25); }
.vcms-hero--nav-numbered .vcms-hero-arrow--prev:not([disabled]):hover { transform: none; }
.vcms-hero--nav-numbered .vcms-hero-arrow--next:not([disabled]):hover { transform: none; }
.vcms-hero--nav-numbered .vcms-hero-arrow--prev { left: calc(50% - 120px); }
.vcms-hero--nav-numbered .vcms-hero-arrow--next { right: calc(50% - 120px); }
.vcms-hero--nav-numbered .vcms-hero-arrow::after {
	content:     attr(data-label);
	font-size:   0.68rem;
	font-weight: 800;
	letter-spacing: .1em;
}
.vcms-hero--nav-numbered .vcms-hero-arrow svg { width: 14px; height: 14px; }

/* =========================================================================
   NAV STYLE 8 — Vertical Side
   Vertical dot strip on right edge · counter top-left · no arrows
   ========================================================================= */
.vcms-hero--nav-vertical-side .vcms-hero-arrow { display: none !important; }

.vcms-hero--nav-vertical-side .vcms-hero-dots {
	left:        auto;
	right:       16px;
	bottom:      auto;
	top:         50%;
	transform:   translateY(-50%);
	flex-direction: column;
	background:  rgba(0,0,0,.25);
	padding:     8px 5px;
	gap:         8px;
}
.vcms-hero--nav-vertical-side .vcms-hero-dot {
	width:         var(--vcms-hero-dot-sz);
	height:        var(--vcms-hero-dot-sz);
}
.vcms-hero--nav-vertical-side .vcms-hero-dot.active {
	width:         var(--vcms-hero-dot-sz);
	height:        var(--vcms-hero-dot-sz-a);
	border-radius: 5px;
}

.vcms-hero--nav-vertical-side .vcms-hero-counter {
	top:    18px;
	right:  auto;
	left:   18px;
}

/* =========================================================================
   NAV STYLE 9 — Fraction
   Large "3 / 8" counter top-left · small arrows bottom-right · no dots
   ========================================================================= */
.vcms-hero--nav-fraction .vcms-hero-dots { display: none; }

.vcms-hero--nav-fraction .vcms-hero-counter {
	top:         20px;
	right:       auto;
	left:        20px;
	font-size:   2rem;
	font-weight: 900;
	letter-spacing: -.02em;
	background:  rgba(0,0,0,.45);
	padding:     8px 18px;
	border-radius: 10px;
	gap:         8px;
}

.vcms-hero--nav-fraction .vcms-hero-arrow {
	top:    auto;
	bottom: 18px;
	/* width/height from --vcms-hero-arrow-sz */
}
.vcms-hero--nav-fraction .vcms-hero-arrow--prev {
	left:  auto;
	right: 70px;
}
.vcms-hero--nav-fraction .vcms-hero-arrow--next {
	right: 18px;
}
.vcms-hero--nav-fraction .vcms-hero-arrow--prev:not([disabled]):hover { transform: none; }
.vcms-hero--nav-fraction .vcms-hero-arrow--next:not([disabled]):hover { transform: none; }

/* =========================================================================
   NAV STYLE 10 — None
   All controls hidden — autoplay or swipe only
   ========================================================================= */
.vcms-hero--nav-none .vcms-hero-nav { display: none; }

/* =========================================================================
   ARROW POSITION STYLES — 8 variants
   Applied as .vcms-hero--arrow-{style} on the container element.
   Arrow size is driven by --vcms-hero-arrow-sz set in the inline style.
   ========================================================================= */

/* ── Hover-only show/hide ─────────────────────────────────────────────── */
.vcms-hero--arrows-hover .vcms-hero-arrow {
	opacity:        0;
	pointer-events: none;
	transition:     opacity .4s ease, background .2s ease, box-shadow .2s ease;
}
.vcms-hero--arrows-hover:hover        .vcms-hero-arrow:not([disabled]),
.vcms-hero--arrows-hover:focus-within .vcms-hero-arrow:not([disabled]) {
	opacity:        1;
	pointer-events: auto;
}

/* 1. Sides Center — default position, no overrides needed */

/* 2. Sides Lower — arrows at 70% height */
.vcms-hero--arrow-sides-lower .vcms-hero-arrow { top: 70%; }

/* 3. Sides Upper — arrows at 30% height */
.vcms-hero--arrow-sides-upper .vcms-hero-arrow { top: 30%; }

/* 4. Bottom Corners — prev bottom-left, next bottom-right */
.vcms-hero--arrow-bottom-corners .vcms-hero-arrow {
	top:       auto;
	bottom:    clamp(12px, 2vw, 24px);
	transform: none;
}
.vcms-hero--arrow-bottom-corners .vcms-hero-arrow--prev { left:  clamp(12px, 2vw, 24px); }
.vcms-hero--arrow-bottom-corners .vcms-hero-arrow--next { right: clamp(12px, 2vw, 24px); }
.vcms-hero--arrow-bottom-corners .vcms-hero-arrow--prev:not([disabled]):hover { transform: scale(1.06); }
.vcms-hero--arrow-bottom-corners .vcms-hero-arrow--next:not([disabled]):hover { transform: scale(1.06); }

/* 5. Top Corners — prev top-left, next top-right */
.vcms-hero--arrow-top-corners .vcms-hero-arrow {
	top:       clamp(12px, 2vw, 24px);
	transform: none;
}
.vcms-hero--arrow-top-corners .vcms-hero-arrow--prev { left:  clamp(12px, 2vw, 24px); }
.vcms-hero--arrow-top-corners .vcms-hero-arrow--next { right: clamp(12px, 2vw, 24px); }
.vcms-hero--arrow-top-corners .vcms-hero-arrow--prev:not([disabled]):hover { transform: scale(1.06); }
.vcms-hero--arrow-top-corners .vcms-hero-arrow--next:not([disabled]):hover { transform: scale(1.06); }

/* 6. Bottom Center — both arrows at bottom, flanking the dots bar */
.vcms-hero--arrow-bottom-center .vcms-hero-arrow {
	top:       auto;
	bottom:    18px;
	transform: none;
}
.vcms-hero--arrow-bottom-center .vcms-hero-arrow--prev {
	left:  auto;
	right: calc(50% + 88px);
}
.vcms-hero--arrow-bottom-center .vcms-hero-arrow--next {
	right: auto;
	left:  calc(50% + 88px);
}
.vcms-hero--arrow-bottom-center .vcms-hero-arrow--prev:not([disabled]):hover { transform: translateX(-3px); }
.vcms-hero--arrow-bottom-center .vcms-hero-arrow--next:not([disabled]):hover { transform: translateX(3px); }

/* 7. Diagonal — prev at bottom-left, next at top-right */
.vcms-hero--arrow-diagonal .vcms-hero-arrow--prev {
	top:       auto;
	bottom:    clamp(14px, 2vw, 28px);
	left:      clamp(14px, 2vw, 28px);
	transform: none;
}
.vcms-hero--arrow-diagonal .vcms-hero-arrow--next {
	top:       clamp(14px, 2vw, 28px);
	right:     clamp(14px, 2vw, 28px);
	transform: none;
}
.vcms-hero--arrow-diagonal .vcms-hero-arrow--prev:not([disabled]):hover { transform: scale(1.08) rotate(-5deg); }
.vcms-hero--arrow-diagonal .vcms-hero-arrow--next:not([disabled]):hover { transform: scale(1.08) rotate(5deg); }

/* 8. Right Stack — both arrows stacked on right side (↑ prev above ↓ next) */
.vcms-hero--arrow-right-stack .vcms-hero-arrow {
	left:  auto;
	right: clamp(12px, 2vw, 24px);
}
.vcms-hero--arrow-right-stack .vcms-hero-arrow--prev {
	top:       calc(50% - var(--vcms-hero-arrow-sz) - 4px);
	transform: none;
}
.vcms-hero--arrow-right-stack .vcms-hero-arrow--next {
	top:       calc(50% + 4px);
	transform: none;
}
.vcms-hero--arrow-right-stack .vcms-hero-arrow--prev svg { transform: rotate(-90deg); }
.vcms-hero--arrow-right-stack .vcms-hero-arrow--next svg { transform: rotate(90deg); }
.vcms-hero--arrow-right-stack .vcms-hero-arrow--prev:not([disabled]):hover { transform: translateY(-3px); }
.vcms-hero--arrow-right-stack .vcms-hero-arrow--next:not([disabled]):hover { transform: translateY(3px); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 768px) {
	.vcms-hero {
		/* Respect the admin-set height but cap at the safe viewport height so
		   dots stay above the browser chrome / home indicator on phones.
		   100svh = "small viewport height" (excludes retractable browser UI).
		   The 100vh fallback fires on older browsers that lack svh support. */
		height: min(var(--vcms-hero-h), 100vh);
		height: min(var(--vcms-hero-h), 100svh);
		/* Guarantee a sensible minimum so the slider is never too short. */
		min-height: 420px;
	}

	/* Extra bottom padding keeps text content clear of the dots nav bar. */
	.vcms-hero-content { padding: 5vw 5vw 72px; }
	.vcms-hero-inner   { max-width: 100%; }
	.vcms-hero-heading { font-size: clamp(1.4rem, 5vw, var(--vcms-hero-title-sz, 2.5rem)); }
	.vcms-hero-subtext { font-size: 0.95rem; margin-bottom: 20px; }
	.vcms-hero-btn     { padding: 11px 20px; font-size: 0.82rem; }

	/* Dots: sit above safe-area-inset-bottom (home bar on notched phones). */
	.vcms-hero-dots {
		bottom: max(22px, env(safe-area-inset-bottom, 22px));
	}

	/* Cap arrow size on mobile — keep user setting but clamp to 44px max */
	.vcms-hero-arrow {
		width:  clamp(28px, var(--vcms-hero-arrow-sz), 44px);
		height: clamp(28px, var(--vcms-hero-arrow-sz), 44px);
	}

	/* Numbered — stack counter above arrows */
	.vcms-hero--nav-numbered .vcms-hero-counter { font-size: 1.6rem; bottom: 60px; }
	.vcms-hero--nav-numbered .vcms-hero-arrow--prev { left: calc(50% - 90px); }
	.vcms-hero--nav-numbered .vcms-hero-arrow--next { right: calc(50% - 90px); }

	/* Fraction — smaller counter */
	.vcms-hero--nav-fraction .vcms-hero-counter { font-size: 1.4rem; padding: 6px 14px; }

	/* Edge — always visible on mobile */
	.vcms-hero--nav-edge .vcms-hero-arrow { opacity: .7; width: 50px; }
}

@media (max-width: 480px) {
	.vcms-hero-content--center .vcms-hero-actions,
	.vcms-hero-content--left   .vcms-hero-actions,
	.vcms-hero-content--right  .vcms-hero-actions {
		justify-content: center;
	}
	.vcms-hero-badge { font-size: 0.7rem; }

	/* Slightly smaller heading on very narrow screens */
	.vcms-hero-heading { font-size: clamp(1.2rem, 4.5vw, 1.8rem); }

	/* Tighten subtext and button spacing */
	.vcms-hero-subtext { font-size: 0.88rem; margin-bottom: 16px; -webkit-line-clamp: 3; }
	.vcms-hero-btn     { padding: 10px 18px; font-size: 0.8rem; }

	/* Bar styles — shrink on small screens */
	.vcms-hero--nav-bottom-bar .vcms-hero-nav,
	.vcms-hero--nav-top-bar    .vcms-hero-nav { padding: 6px 10px; gap: 4px; }

	.vcms-hero--nav-vertical-side .vcms-hero-dots { right: 10px; }
}

/* =========================================================================
   Prefers-reduced-motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.vcms-hero-slide,
	.vcms-hero-slide .vcms-hero-bg,
	.vcms-hero-slide .vcms-hero-inner > *,
	.vcms-hero-arrow,
	.vcms-hero-dot,
	.vcms-hero-btn {
		transition: none !important;
		animation:  none !important;
	}
}