/* =====================================================
   Grandhashala Responsive Carousel — Frontend Styles
   v1.2.1  — fixes: dots overlaid on image, whitespace
   ===================================================== */

/* ── Hard reset: nuke any theme interference ─────── */
.gh-carousel,
.gh-carousel *,
.gh-carousel *::before,
.gh-carousel *::after {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
}

/* ── Wrapper ──────────────────────────────────────── */
.gh-carousel {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    /* Desktop: 1200×628 */
    aspect-ratio: 1200 / 628 !important;
    overflow: hidden !important;
    /* Zero out every possible theme gap */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: #000 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    /* Prevent text-node whitespace from adding height */
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* Tablet: 768×400 */
@media (max-width: 1023px) {
    .gh-carousel { aspect-ratio: 768 / 400 !important; }
}

/* Mobile: 640×335 */
@media (max-width: 767px) {
    .gh-carousel { aspect-ratio: 640 / 335 !important; }
}

/* ── Block wrapper that WordPress wraps around the block ── */
/* Blocksy / Twenty* themes often add margin to .wp-block-* */
.wp-block-grandhashala-carousel {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* ── Slide ────────────────────────────────────────── */
.gh-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    transition: opacity var(--gh-spd, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
    white-space: normal;
}

.gh-slide.active {
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 1;
}

/* ── Image — full cover, absolutely zero gap ─────── */
.gh-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    /* Nuke every possible theme rule that adds space */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    vertical-align: bottom !important;
    line-height: 0 !important;
    /* Theme image max-width overrides */
    max-width: 100% !important;
    max-height: 100% !important;
}

/* ── Pagination Dots — INSIDE the image area ─────── */
/*
 * Key fix: .gh-carousel has overflow:hidden + aspect-ratio,
 * so position:absolute bottom:14px puts dots ON the image,
 * never below it. The z-index stack is:
 *   slides  z-index: 0 / 1
 *   vignette z-index: 2
 *   dots    z-index: 10  ← always on top
 */
.gh-dots {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    /* Semi-transparent pill so dots read on any image */
    background: rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1 !important;
    /* Safety: never let dots overflow the carrier */
    max-width: calc(100% - 24px);
    flex-wrap: wrap;
    pointer-events: auto;
}

.gh-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.50) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background 300ms ease, width 300ms ease, border-radius 300ms ease;
    flex-shrink: 0;
    outline: none;
    display: block !important;
}

.gh-dot:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

.gh-dot.active {
    background: #ffffff !important;
    width: 22px !important;
    border-radius: 4px !important;
}

/* ── Hover vignette (z-index BELOW dots) ────────── */
.gh-carousel.gh-hovered::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.12) 100%);
}

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gh-slide,
    .gh-dot { transition: none !important; }
}