/* Carousel prev/next arrows — shared component (client request via Liam,
   2026-08-25: arrows as well as pagination dots on every JS carousel).

   ── WHY IT LOOKS LIKE THIS ──────────────────────────────────────────────

   The dots are already a consistent component across three stylesheets, with
   an identical recipe and only the COLOUR differing per surface:

     20px box · border-radius 50% · 1px solid · transparent fill
     · fills solid when [aria-current="true"]
     ink on cream/cornflower (gallery, home) · white on the floorplans' dark band

   The arrows reuse that recipe at 2x rather than inventing a second visual
   idea: same border weight, same radius, same transparent-to-solid-fill state
   change, 40px instead of 20px. The state that fills a dot is "current"; the
   state that fills an arrow is hover/focus, which is the closest equivalent
   for a control that has no persistent state of its own.

   ── WHY IN THE DOT ROW AND NOT OUTSIDE THE CONTENT ──────────────────────

   The container is 1600px of content plus 40px of side padding, so at a
   1680px viewport the gutter OUTSIDE the content is exactly 40px per side —
   a 40px circle would touch both edges — and below 1680 the container goes
   fluid and there is no gutter at all. Arrows outside the content therefore
   only work above roughly 1780px, which is not a pattern, it is an
   exception. Overlaying the slides works at every width but the gallery is
   entirely photography, and a chevron over a light photo needs a scrim to
   stay visible.

   The dot row already exists, is already centred, already has its clearance
   above, and is never hidden at any breakpoint — so the arrows sit in it:

       (prev)  * * *  (next)

   One behaviour at every width, which is also the answer to "what do we do
   on tablet and mobile where there is no negative space": nothing special.

   ── THE CHEVRON ─────────────────────────────────────────────────────────

   assets/icon-chevron-down.svg, rotated. A MASK rather than the back-bar's
   inline SVG, for two reasons: the colour has to change per surface and on
   hover, which a mask makes a CSS property; and it needs no new asset file.
   That second reason is not cosmetic — CLAUDE.md records that the four
   mask-referenced icons carry NO cache-buster (static CSS cannot interpolate
   a version), so adding or overwriting one of them is a documented trap.
   Rotating a file that is already shipped avoids it entirely. */

.vl-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* arrow-to-dot-run breathing room; the dots keep their own 10px */
}

/* Source order is prev, next, with the dots div between them in the markup —
   see the `order` rule below. */
.vl-carousel-arrow--prev {
    order: 1;
}

.vl-carousel-arrow--next {
    order: 3;
}

/* The dots div is the MIDDLE child but is rendered after prev and before next
   (one part emits both buttons — see template-parts/carousel-nav.php), so
   `order` puts it back between them. Matched as "not an arrow" so this serves
   all three dot classes without naming any of them.

   margin-top:0 because each dot run carries its own node-derived 50px to clear
   the slides above; inside this row that would push the dots below the arrows.
   The clearance moves to .vl-carousel-nav itself, set PER SURFACE, since each
   run's value is its own node read (see the three consumer sheets). */
.vl-carousel-nav > :not(.vl-carousel-arrow) {
    order: 2;
    margin-top: 0;
}

.vl-carousel-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px; /* 2x the 20px dot */
    height: 40px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit; /* the surface sets this on .vl-carousel-nav */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* The chevron itself. currentColor means one rule serves both the ink and the
   white surfaces, and the hover swap below needs no second mask rule. */
.vl-carousel-arrow::before {
    content: '';
    display: block;
    width: 18px;  /* the asset is 21x11; 18x9 keeps that ratio inside a 40px box */
    height: 9px;
    background-color: currentColor;
    -webkit-mask: url("../assets/icon-chevron-down.svg") no-repeat center / contain;
    mask: url("../assets/icon-chevron-down.svg") no-repeat center / contain;
}

/* The asset points DOWN, so prev is +90deg (points left) and next is -90deg. */
.vl-carousel-arrow--prev::before {
    transform: rotate(90deg);
}

.vl-carousel-arrow--next::before {
    transform: rotate(-90deg);
}

/* Fills solid on hover, exactly as a dot fills when it becomes current. The
   chevron flips to the BAND colour, which each surface supplies as
   --vl-carousel-arrow-on (there is no way to read "the background behind me"
   in CSS, so it is stated per surface alongside the colour). */
.vl-carousel-arrow:hover,
.vl-carousel-arrow:focus-visible {
    background-color: currentColor;
}

.vl-carousel-arrow:hover::before,
.vl-carousel-arrow:focus-visible::before {
    background-color: var(--vl-carousel-arrow-on, var(--vl-cream));
}

/* Focus ring follows each surface's existing dot convention rather than the
   sitewide cornflower, which vanishes on a cornflower band. */
.vl-carousel-arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Touch target: 40px is under the 44px guidance, which is fine for a mouse
   but not for a thumb. Bumped where the pointer is coarse rather than at a
   width breakpoint, so a touch laptop gets it too. */
@media (hover: none) {
    .vl-carousel-arrow {
        width: 44px;
        height: 44px;
    }
}

/* Reduced motion: the fill transition is decorative. */
@media (prefers-reduced-motion: reduce) {
    .vl-carousel-arrow {
        transition: none;
    }
}