/* ==========================================================================
   HERO-09: CASCADE/STACK SLIDER (.sentio-hcs)
   ==========================================================================
   Merged from two sources during the Batch 3 hero-cascade port (2026-04-18):
   (1) the legacy block at frontend.css:39403-39462, which is ACTIVE styling
       that complements the inline with box-shadow, typography color/size,
       mobile breakpoint, and .sentio-hcs__counter bg/color;
   (2) the inline <style> at hero-cascade.php:1593-1641, which was loaded
       later in the document and overrode overlapping properties.

   This file preserves the current cascade order — frontend.css content
   first, inline content second — so computed styles match the pre-port
   render exactly.
   ========================================================================== */

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

.sentio-hcs {
	position: relative; width: 100%; height: var(--hcs-height, 600px);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; background: var(--hcs-container-bg, #f0f0f0);
}

.sentio-hcs__stack {
	position: relative;
	width: var(--hcs-card-width, 75%); height: 85%;
}

.sentio-hcs__card {
	position: absolute; inset: 0;
	border-radius: var(--hcs-card-radius, 16px);
	overflow: hidden; cursor: grab;
	box-shadow: 0 4px 24px rgba(0,0,0,0.15);
	transition: transform var(--hcs-transition, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
	            opacity var(--hcs-transition, 600ms) ease,
	            box-shadow var(--hcs-transition, 600ms) ease;
	will-change: transform;
}
.sentio-hcs__card:active { cursor: grabbing; }
.sentio-hcs__card--active { box-shadow: 0 8px 40px rgba(0,0,0,0.25); }

.sentio-hcs__card-inner { position: relative; width: 100%; height: 100%; perspective: 800px; }
.sentio-hcs__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sentio-hcs__overlay { position: absolute; inset: 0; z-index: 1; }
.sentio-hcs__content {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: var(--hcs-content-pad, 40px);
}
.sentio-hcs__subtitle { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.85); margin: 0 0 8px; }
.sentio-hcs__title { font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 12px; line-height: 1.2; }
.sentio-hcs__desc { font-size: 15px; color: rgba(255,255,255,0.8); margin: 0 0 20px; line-height: 1.5; }
.sentio-hcs__btn {
	display: inline-flex; padding: 12px 28px; border-radius: 8px;
	background: var(--hcs-btn-bg, #fff); color: var(--hcs-btn-color, #111);
	font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.3s;
	line-height: 1.2;
}

/* Counter */
.sentio-hcs__counter {
	position: absolute; top: 20px; right: 20px; z-index: 20;
	padding: 6px 16px; border-radius: 20px;
	background: var(--hcs-counter-bg, rgba(0,0,0,0.5));
	color: var(--hcs-counter-color, #fff); font-size: 14px; font-weight: 600;
}
.sentio-hcs__counter-current { font-weight: 700; }

@media (max-width: 767px) {
	.sentio-hcs__stack { width: 90%; }
	.sentio-hcs__title { font-size: 24px; }
	.sentio-hcs__content { padding: 24px; }
}

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

/* ---- Cascade Hero — critical inline CSS ---- */
.sentio-hcs{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--hcs-height,600px);overflow:hidden;perspective:1200px}

/* stack wrapper */
.sentio-hcs__stack{position:relative;width:var(--hcs-card-width,75%);height:100%}

/* individual card */
.sentio-hcs__card{position:absolute;inset:0;transition:transform var(--hcs-transition,600ms) ease,opacity var(--hcs-transition,600ms) ease;cursor:grab;will-change:transform}
.sentio-hcs__card:active{cursor:grabbing}

/* card inner */
.sentio-hcs__card-inner{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--hcs-card-radius,16px)}

/* card bg image */
.sentio-hcs__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* overlay */
.sentio-hcs__overlay{position:absolute;inset:0;z-index:1}

/* content */
.sentio-hcs__content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:40px;gap:12px}

/* subtitle */
.sentio-hcs__subtitle{font-size:14px;text-transform:uppercase;letter-spacing:1.5px;margin:0}
/* title */
.sentio-hcs__title{margin:0;line-height:1.15}
/* description */
.sentio-hcs__desc{margin:0;line-height:1.6;max-width:500px}

/* button */
.sentio-hcs__btn{display:inline-block;text-decoration:none;font-weight:600;transition:background .3s,color .3s,transform .3s;text-align:center;box-sizing:border-box}
.sentio-hcs__btn:hover{transform:translateY(-2px)}

/* counter badge */
.sentio-hcs__counter{position:absolute;top:16px;right:16px;z-index:20;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;pointer-events:none}

/* dots */
.sentio-hcs__dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:8px}
.sentio-hcs__dot{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);cursor:pointer;transition:background .3s,transform .3s,border-color .3s;padding:0}
.sentio-hcs__dot--active{background:#fff;border-color:#fff;transform:scale(1.3)}
.sentio-hcs__dot:hover{border-color:#fff}

/* arrows */
.sentio-hcs__arrow{position:absolute;top:50%;z-index:20;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#333;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s,box-shadow .3s;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sentio-hcs__arrow:hover{background:#fff;transform:translateY(-50%) scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.sentio-hcs__arrow--prev{left:16px}
.sentio-hcs__arrow--next{right:16px}

/* ==========================================================================
   A11Y — WCAG 2.1 AA (added 2026-04-21, Tier 2 retro-audit)
   ========================================================================== */

/* Visually-hidden sr-only announcer. */
.sentio-hcs__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;
}

/* Focus-visible ring on dots, arrows, and cards (when focusable). */
.sentio-hcs__dot:focus-visible,
.sentio-hcs__arrow:focus-visible {
	outline: 3px solid var(--hcs-focus-ring, #6C63FF);
	outline-offset: 3px;
}

/* Reduced-motion: zero card/dot/arrow/button transitions. JS also short-circuits
   the animating guard so nav is instant under PRM. Autoplay is disabled in JS. */
@media (prefers-reduced-motion: reduce) {
	.sentio-hcs,
	.sentio-hcs * {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
	}
	.sentio-hcs__arrow:hover {
		transform: translateY(-50%) !important;
	}
	.sentio-hcs__btn:hover {
		transform: none !important;
	}
}