/* ═══════════════════════════════════════════════════════════════════════════
   ivs-chevnav — reusable slideshow chevrons (prev / next).
   ─────────────────────────────────────────────────────────────────────────
   The homepage banner's chevrons, lifted out so every slideshow on the site
   speaks with one voice (rule-wajib/komponen.md, backlog ekstraksi #2).
   Previously this recipe was written out three times: .map-section in
   style.css, .ivs-fthero in pages/featured-tours.css, and a boxed variant
   in tour-v5.css — exactly the drift this file exists to stop.

   The class stays `.ivs-bnav` (the name the markup has always used); only
   the FILE carries the component name, matching the backlog entry.

   NOTE — style.css keeps its own `.map-section .ivs-bnav` block. That file
   is legacy and off-limits (rule-wajib/arsitektur-komponen.md), and its
   rules are (0,2,0) against this file's (0,1,0), so on the homepage banner
   the legacy block still wins. Both describe the same chevron, so the
   result is identical; the duplicate goes when style.css is next opened
   for a redesign, not before.

   The look:
   · no box, no border, no fill — a bare chevron over the photograph
   · a 46px hit area regardless, so it stays easy to tap
   · its own drop-shadow, because the photo behind is never the same twice
     and cannot be trusted to supply contrast
   · a hairline drawn outward on hover, in the direction the chevron points
   · the chevron itself nudges the way it points

   Markup contract: resources/views/partials/ivs-bnav.blade.php
   (that partial also pulls this stylesheet in, once per page).

   Positioning is deliberately NOT set here: each host decides where its
   chevrons sit (see the "Placement" block at the bottom for the default
   left/right inset, which a host can override).
   ═══════════════════════════════════════════════════════════════════════════ */

.ivs-bnav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    /* No box, but still a 46px target: the chevron is drawn small and the
       button must stay easy to hit on a touch screen. */
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    /* The photograph behind is never the same twice, so the chevron
       carries its own contrast rather than trusting the wash. */
    filter: drop-shadow(0 1px 6px rgba(16, 15, 13, 0.7));
    transition: opacity 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.ivs-bnav-icon {
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto;
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The rule, drawn outward from the chevron on hover. */
.ivs-bnav::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: 0;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

/* Each rule starts at the chevron and travels the way it points. */
.ivs-bnav-prev::after {
    right: 50%;
    margin-right: 14px;
}

.ivs-bnav-next::after {
    left: 50%;
    margin-left: 14px;
}

.ivs-bnav:hover,
.ivs-bnav:focus-visible {
    opacity: 1;
}

.ivs-bnav:hover::after,
.ivs-bnav:focus-visible::after {
    width: 30px;
}

.ivs-bnav-prev:hover .ivs-bnav-icon,
.ivs-bnav-prev:focus-visible .ivs-bnav-icon {
    transform: translateX(-3px);
}

.ivs-bnav-next:hover .ivs-bnav-icon,
.ivs-bnav-next:focus-visible .ivs-bnav-icon {
    transform: translateX(3px);
}

/* Nothing is left behind by a click.
   ─────────────────────────────────────────────────────────
   Three separate things draw a box on a bare button, and only
   one of them shows up in getComputedStyle:

     • Bootstrap's `button:focus { outline: -webkit-focus-ring-color }`
     • the browser's own tap highlight, which is a paint-time
       effect and reports nothing to script
     • the focus ring on plain :focus, which fires for a mouse
       click as well as for Tab

   All three are cleared here. The ring comes back on
   :focus-visible only, so a pointer leaves the chevron clean
   while someone tabbing through still sees where they are.
   `!important` is needed because style.css already forces
   `button:focus { outline: 0 !important }` further up, and the
   keyboard ring has to win over that. */
.ivs-bnav:focus {
    outline: none;
}

.ivs-bnav:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px;
}

/* ── Placement ──
   The default inset. A host that needs its chevrons elsewhere overrides
   these two rules with its own scope (e.g. `.tv5-hero .ivs-bnav-prev`). */
.ivs-bnav-prev { left: 22px; }
.ivs-bnav-next { right: 22px; }

/* ── Narrower ──
   The slideshow takes the whole width on a phone, so the chevrons tuck in.
   The 46px target is kept: it is the hit area, not the drawing. */
@media (max-width: 767px) {
    .ivs-bnav-prev { left: 8px; }
    .ivs-bnav-next { right: 8px; }

    .ivs-bnav-icon {
        width: 21px;
        height: 21px;
    }

    /* There is no hover on a touch screen, so the rule would only ever
       flash after a tap. The chevron alone does the work there. */
    .ivs-bnav::after {
        content: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-bnav,
    .ivs-bnav-icon,
    .ivs-bnav::after {
        transition: none;
    }

    .ivs-bnav-prev:hover .ivs-bnav-icon,
    .ivs-bnav-next:hover .ivs-bnav-icon,
    .ivs-bnav-prev:focus-visible .ivs-bnav-icon,
    .ivs-bnav-next:focus-visible .ivs-bnav-icon {
        transform: none;
    }
}