/* =========================================================================
   VRG Homepage Slider
   Self-contained banner carousel. Uses the site's existing brand tokens
   (--navy, --gold, --radius-lg, --shadow-lg, --transition …) so it blends
   with the rest of the design. No external dependencies.
   ========================================================================= */

.vrg-slider {
    width: 100%;
    background: var(--navy-deep, #0a1a3f);
}

.vrg-slider-viewport {
    position: relative;
    width: 100%;
    /* Responsive banner height: scales with viewport width but capped so it
       never dominates huge TV / ultra-wide screens. Fixed ratio => no CLS. */
    height: clamp(240px, 40vw, 640px);
    margin: 0 auto;
    overflow: hidden;
    background: var(--navy-deep, #0a1a3f);
    touch-action: pan-y;              /* allow vertical page scroll, capture horizontal swipe */
}

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

/* ---- Individual slide (cross-fade) ---- */
.vrg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.8s;
    z-index: 1;
}

.vrg-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
    z-index: 2;
}

.vrg-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Blurred backdrop = fills any letterbox area so the real image is never
   cropped or distorted on odd aspect ratios (mobile, ultra-wide, TV). */
.vrg-slide-bg {
    position: absolute;
    inset: -6%;                      /* slight bleed hides blurred edges */
    background-size: cover;
    background-position: center;
    filter: blur(22px) brightness(0.55);
    transform: scale(1.08);
    z-index: 0;
}

/* Foreground image: contained + centered => proportional, no crop, no stretch. */
.vrg-slide-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    -webkit-user-select: none;
    user-select: none;
}

/* Subtle zoom on the active slide for a premium feel. */
.vrg-slide.is-active .vrg-slide-img {
    animation: vrgKenBurns 7s ease-out forwards;
}

@keyframes vrgKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}

/* ---- Caption overlay (optional) ---- */
.vrg-slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 5vw, 4rem);
    background: linear-gradient(to top,
                rgba(10, 26, 63, 0.85) 0%,
                rgba(10, 26, 63, 0.45) 45%,
                rgba(10, 26, 63, 0) 100%);
    color: var(--text-on-dark, #fff);
    pointer-events: none;
}

.vrg-slide-caption-inner {
    max-width: 1140px;
    margin: 0 auto;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.7s ease 0.25s, opacity 0.7s ease 0.25s;
}

.vrg-slide.is-active .vrg-slide-caption-inner {
    transform: translateY(0);
    opacity: 1;
}

.vrg-slide-caption h2 {
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: clamp(1.25rem, 3.2vw, 2.4rem);
    font-weight: 700;
    margin: 0 0 0.35rem;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.vrg-slide-caption p {
    font-size: clamp(0.85rem, 1.6vw, 1.1rem);
    margin: 0;
    max-width: 60ch;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* ---- Navigation arrows ---- */
.vrg-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: clamp(38px, 4vw, 52px);
    height: clamp(38px, 4vw, 52px);
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--navy, #0f2557);
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    cursor: pointer;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 37, 87, 0.18));
    opacity: 0;
    transition: opacity var(--transition, 0.3s ease),
                background var(--transition, 0.3s ease),
                transform var(--transition, 0.3s ease);
}

.vrg-slider-viewport:hover .vrg-slider-arrow,
.vrg-slider-arrow:focus-visible {
    opacity: 1;
}

.vrg-slider-arrow:hover {
    background: var(--gold, #d4a017);
    color: #fff;
}

.vrg-slider-prev { left: clamp(8px, 1.5vw, 24px); }
.vrg-slider-next { right: clamp(8px, 1.5vw, 24px); }

/* Always show arrows on touch devices (no hover). */
@media (hover: none) {
    .vrg-slider-arrow { opacity: 0.9; }
}

/* ---- Pagination dots ---- */
.vrg-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(10px, 2vw, 22px);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.vrg-slider-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition, 0.3s ease),
                border-color var(--transition, 0.3s ease),
                transform var(--transition, 0.3s ease);
}

.vrg-slider-dot:hover { transform: scale(1.2); }

.vrg-slider-dot.is-active {
    background: var(--gold, #d4a017);
    border-color: var(--gold, #d4a017);
    transform: scale(1.15);
}

/* ---- Accessibility: honour reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .vrg-slide,
    .vrg-slide.is-active,
    .vrg-slide-caption-inner {
        transition: opacity 0.2s linear;
    }
    .vrg-slide.is-active .vrg-slide-img { animation: none; }
}

/* ---- Small screens: keep dots clear of captions ---- */
@media (max-width: 575.98px) {
    .vrg-slide-caption { padding-bottom: 2.5rem; }
}