/* ==========================================================================
   carousel.css — Raviva Dental
   "Inside Our Clinic" image carousel shown on the homepage, just below the
   services grid. Supports arrow navigation and an automated loop.
   Images are read from /assets/images/clinic/ (see index.php + functions.php).

   v8.1.0: arrows and dots used to be absolutely-positioned on top of the
   photo itself. Restructured to match the same pattern already used by
   .testimonial-slider (assets/css/testimonials.css): the outer
   .clinic-carousel-wrap carries side padding, which is what gives the
   prev/next arrows room to sit in the gutter beside the image instead of
   over it, and .clinic-carousel-dots now lives outside that wrapper as
   its own centered row underneath. See components/clinic-carousel.php
   for the full annotated markup.
   ========================================================================== */

.clinic-gallery {
    background: var(--ice);
}

/* Outer wrapper — NOT the Swiper element itself (that's .clinic-carousel
   below). Its side padding is the mechanism that keeps the arrows off
   the photo: they're positioned at left:0/right:0 *of this element*,
   which is wider than the image box, so they land in the padding gutter
   instead of overlapping it. */
.clinic-carousel-wrap {
    position: relative;
    padding: 0 62px;
}

/* .clinic-carousel is the actual Swiper root (kept edge-to-edge, no
   padding, so Swiper's own width calculations stay accurate) and the
   only element that's rounded/clipped — the visual "image box".
   .clinic-carousel-track doubles as Swiper's ".swiper-wrapper" — see
   components/clinic-carousel.php + assets/js/components/slider-init.js.
   Swiper's own stylesheet (assets/vendor/swiper) supplies the flex
   layout, transform transitions, and overflow clipping. */
.clinic-carousel {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--cream);
}

.clinic-slide {
    position: relative;
    aspect-ratio: 16 / 8;
    background: var(--cream);
}

.clinic-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clinic-slide .clinic-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 34px;
    background: linear-gradient(0deg, rgba(20,28,28,0.75) 0%, rgba(20,28,28,0) 100%);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ---------- Carousel arrows ----------
   Positioned outside the image box (in the wrapper's side padding, see
   .clinic-carousel-wrap above) so they never overlap the photo, and
   never affect the centering of the dots below, which live in their
   own independent row (see .clinic-carousel-dots further down). ---------- */
.clinic-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--cream);
    color: var(--dark);
    display: grid;
    place-items: center;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--shadow-soft);
    transition: 0.25s ease;
    z-index: 2;
}

.clinic-carousel-arrow:hover {
    background: var(--brown-deep);
    color: var(--white);
}

.clinic-carousel-arrow.prev { left: 0; }
.clinic-carousel-arrow.next { right: 0; }

/* ---------- Pagination dots ----------
   Deliberately a sibling of .clinic-carousel-wrap, not a child of it,
   so this sits on its own centered row beneath the image box instead of
   overlaying it, and lines up centered under the image regardless of
   the wrapper's side padding for the arrows. Colors are tuned for this
   section's light (--ice) background, unlike the testimonial slider's
   matching .slider-dots, which sit on a dark section. */
.clinic-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
}

/* Swiper injects <span class="swiper-pagination-bullet"> elements into
   .clinic-carousel-dots (see pagination.el in slider-init.js) — restyled
   here to match this site's original dot design exactly. */
.clinic-carousel-dots .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--brown-deep);
    background: transparent;
    opacity: 1;
    margin: 0;
    cursor: pointer;
    transition: 0.25s ease;
}

.clinic-carousel-dots .swiper-pagination-bullet-active {
    background: var(--brown-deep);
    width: 24px;
    border-radius: 6px;
}

/* ---------- Clinic walkthrough video (added v9.5.1) ----------
   Sits above the photo carousel inside the same "Take a Look Inside"
   section. Deliberately mirrors .clinic-carousel's visual language
   (28px rounded corners, --shadow-soft, --cream background) so the
   video reads as part of the same gallery rather than a bolted-on
   block, while staying a little narrower (max-width below) so it
   reads as the single "featured" item above the multi-photo strip. */
.clinic-video-block {
    width: 90%;
    margin: 0 auto 56px;
}

/* Standalone tour section (components/clinic-tour-video.php), placed
   directly below the hero — it has no photo carousel beneath it, so it
   doesn't need the bottom margin that separates the video from the
   carousel further down the "Our Facilities and Technology" section. */
.clinic-video-block--standalone {
    margin-bottom: 0;
}

.clinic-tour-section {
    padding-top: 90px;
}

.clinic-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--cream);
}

.clinic-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Poster (a real frame from the clip) paints instantly; the actual
       .mp4 is only fetched once assets/js/components/clinic-video.js's
       IntersectionObserver confirms this block is near the viewport —
       see the annotated markup in components/clinic-carousel.php. */
    background: var(--cream);
}

.clinic-video-caption {
    margin: 22px auto 0;
    max-width: 640px;
    text-align: center;
    color: var(--ink-soft);
}

/* Empty state — shown until real clinic photos are added to
   /assets/images/clinic/ */
.clinic-carousel-empty {
    aspect-ratio: 16 / 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 40px;
    color: var(--ink-soft);
    background: linear-gradient(160deg, var(--sand) 0%, var(--ice) 100%);
}

.clinic-carousel-empty i {
    font-size: 40px;
    color: var(--brown-deep);
}

.clinic-carousel-empty strong {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    color: var(--dark);
    font-weight: 500;
}

@media (max-width: 900px) {
    .clinic-slide { aspect-ratio: 4 / 3; }
    .clinic-carousel-wrap { padding: 0 44px; }
    .clinic-carousel-arrow { width: 42px; height: 42px; font-size: 15px; }
    .clinic-video-block { margin-bottom: 44px; }
}

@media (max-width: 600px) {
    .clinic-slide .clinic-caption { padding: 18px 20px; font-size: 13.5px; }
    /* Below this width there isn't enough side room for a 42px arrow
       plus a comfortably-sized image without the arrows starting to
       crowd it — same trade-off already made for .slider-arrow in
       testimonials.css at its own small-phone breakpoint. Dots (now
       below the image, unaffected by wrapper padding) plus swipe
       gestures remain fully available. */
    .clinic-carousel-wrap { padding: 0 8px; }
    .clinic-carousel-arrow { width: 36px; height: 36px; font-size: 13px; }
}