/* ======================================================================
   FILE: src/main/resources/static/css/gallery.css
   VEHICLE DETAIL — GALLERY + GLIGHTBOX UI (NO INLINE CSS; PAGE-AGNOSTIC)
   PURPOSE:
     • Give you simple “knobs” to scale/tweak arrows (on-page hero),
       lightbox close “X”, left/right arrows, and the bottom counter.
   HOW TO USE:
     • Change only the variables in :root below to size/position things.
     • No hardcoding elsewhere; HTML can stay exactly as you have it.
   LOAD ORDER:
     • Include glightbox.min.css BEFORE this file so these styles override.
   DRAFT NOTES (kept):
     • All sizes are in px/rem so you can bump with confidence.
     • Nothing here assumes Bootstrap except the optional --bs-* color.
     • If you don’t load Bootstrap, keep the border but replace the CSS var
       with a literal color (see comment in .v-hero-wrap).
   ====================================================================== */
@charset "UTF-8";

/* 0) GLOBAL KNOBS — edit these values to size/position controls everywhere */
:root {
    /* --- On-page (non-lightbox) hero arrows over the big image --- */
    --gallery-hero-btn-size: 64px;    /* Disc diameter for hero arrows; ↑ bigger, ↓ smaller (common: 56–72px). */
    --gallery-hero-icon-size: 34px;   /* Chevron “‹/›” size inside the discs; pair with btn-size for balance. */
    --gallery-hero-edge-gap: 0.75rem; /* Distance from image edges; .75–1rem typical. ↑ moves inwards from edge. */

    /* --- GLightbox overlay controls (prev/next/close + bottom counter) --- */
    --lb-btn-size: 64px;              /* Circle button diameter in overlay; ≥48px for touch accessibility. */
    --lb-icon-size: 28px;             /* SVG icon size inside overlay controls; 24–32px typical. */
    --lb-arrow-offset: 28px;          /* Gap of overlay arrows from viewport edges; ↑ = more inward. */
    --lb-close-offset-x: 22px;        /* Right offset of close “X”; ↑ moves leftward away from edge. */
    --lb-close-offset-y: 20px;        /* Top offset of close “X”; ↑ moves downward. */
    --lb-counter-size: 16px;          /* “1 / 26” counter font-size; bump to 18px for large screens. */

    /* --- Color and background tuning (safe defaults; adjust to taste) --- */
    --gallery-hero-disc-bg: rgba(0,0,0,.45);       /* Hero arrow disc bg; increase alpha for darker button. */
    --gallery-hero-disc-bg-hover: rgba(0,0,0,.6);  /* Hover state for hero arrow discs; slightly darker. */
    --gallery-hero-icon-color: #fff;               /* Hero chevron color; swap to brand color if desired. */
    --gallery-hero-focus-ring: #0d6efd;            /* Keyboard focus outline; match your brand primary. */
}

/* Safety: make absolutely sure GLightbox sits on top of any sticky headers/modals. */
.glightbox-container {
    z-index: 2147483647; /* Max-ish z-index; if overlay is still hidden, the other element uses position + absurd z-index. */
}

/* ====== HERO image + thumbnails (on the page, not the lightbox) ====== */

.v-hero {                                   /* Main (hero) image inside the page */
    width: 100%;                               /* Fill container width; control max-width on parent card/col. */
    height: auto;                              /* Preserve aspect ratio; change to fixed height + object-fit:cover to crop. */
    display: block;                            /* Remove inline-gap below images; helps vertical rhythm. */
}

.v-hero-wrap {                               /* Container that holds hero + overlay arrows */
    position: relative;                        /* Required anchor for absolutely-positioned .v-nav arrows. */
    overflow: hidden;                          /* Clip overflow so round corners hide arrow bleed on xs screens. */
    border-radius: .375rem;                    /* ≈ Bootstrap .rounded; raise to .5rem/.75rem for rounder. */
    border: 1px solid var(--bs-secondary);     /* Needs Bootstrap CSS var. No Bootstrap? Replace with rgba(108,117,125,.5). */
    /* MOVE BLOCK:
       Use margin utilities in markup (e.g., .mb-2) to separate from thumbnails.
       To nudge arrow vertical alignment, adjust top in .v-nav or tweak translateY below. */
}

.v-thumb {                                   /* Thumbnails under the hero */
    height: 72px;                               /* 60–96px common; ↑ for bigger strip, ↓ for denser grid. */
    width: auto;                                /* Auto width to maintain aspect ratio. */
    object-fit: contain;                        /* Show entire image; switch to cover for filled squares with cropping. */
    display: block;                             /* Eliminate stray baseline gaps in inline context. */
    cursor: pointer;                            /* Click affordance to communicate interactivity. */
}

.v-thumb.is-active {                          /* Blue outline around the active thumbnail */
    outline: 3px solid #0d6efd;                 /* Thicker ring improves visibility on dark images; use brand color. */
    outline-offset: 2px;                        /* Adds visual gap between the image edge and the ring. */
}

.doc-link { word-break: break-word; }         /* Allow long filenames to wrap instead of overflowing the card. */

/* ====== HERO overlay nav arrows (left/right) ======
   These are the arrows you see on the page (not in the lightbox).
   Increase width/height and font-size to make them bigger. */

.v-nav {
    position: absolute;                         /* Takes the arrow out of flow and positions over .v-hero. */
    top: 50%;                                   /* Start at middle vertically… */
    transform: translateY(-50%);                /* …then pull up by half its height for true centering. */
    background: var(--gallery-hero-disc-bg);    /* Dark circular background for contrast on bright images. */
    color: var(--gallery-hero-icon-color);      /* Chevron foreground color; high contrast vs background. */
    border: none;                               /* Clean, modern appearance; add 1px solid for a ring if preferred. */
    width: var(--gallery-hero-btn-size);        /* Click target width; aligns with accessibility guidelines. */
    height: var(--gallery-hero-btn-size);       /* Match width for a perfect circle. */
    border-radius: 999px;                       /* Large radius to force a circle regardless of size. */
    display: grid; place-items: center;         /* Centers the chevron without extra wrappers/flex hacks. */
    cursor: pointer;                            /* Pointer cursor on hover for discoverability. */
    user-select: none;                          /* Prevents text selection if the chevron is a text glyph. */
    z-index: 2;                                 /* Sits above image but below lightbox when open. */
}
.v-nav:hover  { background: var(--gallery-hero-disc-bg-hover); } /* Slightly stronger bg on hover for affordance. */
.v-nav:focus  { outline: 2px solid var(--gallery-hero-focus-ring); } /* Visible keyboard focus—keep for a11y. */

.v-prev { left:  var(--gallery-hero-edge-gap); }  /* Horizontal position of left arrow; ↑ value moves inward. */
.v-next { right: var(--gallery-hero-edge-gap); }  /* Horizontal position of right arrow; ↑ value moves inward. */

.v-chevron {                                    /* The “‹” and “›” glyphs inside the buttons */
    font-size: var(--gallery-hero-icon-size);      /* Scale chevrons with disc size for balanced look. */
    line-height: 1;                                /* Tight line-height keeps glyph perfectly centered. */
    /* Optional “stroke” via text-shadow to embolden without font-weight:
       text-shadow: 0 0 1px #000, 0 0 2px #000;
       ↑ Add more layers/offsets for thicker outline/glow effects. */
}

/* ====== GLightbox (the fullscreen viewer) size tweaks ======
   These selectors only affect the LIGHTBOX overlay after you click an image.
   Increase the control buttons (prev/next/close) and the counter text. */

.glightbox .gbtn {                            /* All overlay control buttons: prev, next, close */
    width: var(--lb-btn-size);                   /* Make larger to improve tap-ability on touch devices. */
    height: var(--lb-btn-size);                  /* Match width for perfect circle. */
}
.glightbox .gbtn svg {                        /* The icon inside each overlay button */
    width: var(--lb-icon-size);                  /* Up-size icon for readability on 4K/retina. */
    height: var(--lb-icon-size);                 /* Keep square to preserve icon aspect. */
}

/* Positioning for the “clean” skin (default shipped skin). If you use another
   GLightbox skin, you can mirror these offsets for that skin’s class. */
.glightbox-clean .gprev { left:  var(--lb-arrow-offset); }  /* Move prev arrow inward/outward from left edge. */
.glightbox-clean .gnext { right: var(--lb-arrow-offset); }  /* Move next arrow inward/outward from right edge. */
.glightbox-clean .gclose {
    right: var(--lb-close-offset-x);             /* Nudge the close button horizontally. */
    top:   var(--lb-close-offset-y);             /* Nudge the close button vertically. */
}

/* Bottom counter (e.g., “1 / 26”)
   — Ensure visible even if theme CSS is missing or overridden. */
.glightbox .gcounter {
    font-size: var(--lb-counter-size);           /* Scale for readability without overwhelming the image. */
    letter-spacing: .03em;                       /* Subtle tracking improves legibility on thin numerals. */
    color: #fff;                                 /* Force high contrast on darkened overlays. */
    opacity: 1 !important;                       /* Defend against skins setting low opacity on the counter. */
}

/* Fallback positioning in case the skin’s CSS wasn’t loaded:
   This pins the counter to bottom-center of the viewport. */
.glightbox-container .gcounter {
    position: fixed;                              /* Viewport-anchored so it doesn’t drift during zoom/pan. */
    left: 50%;                                    /* Center horizontally… */
    transform: translateX(-50%);                  /* …with precise subpixel centering. */
    bottom: 18px;                                 /* Raise/lower to taste; 14–24px typical. */
    z-index: 3;                                   /* Above image and overlay chrome. */
    pointer-events: none;                         /* Counter doesn’t block clicks/taps behind it. */
}

/* 5) OPTIONAL: RESPONSIVE NUDGE — shrink controls slightly on very small screens */
@media (max-width: 576px) {
    :root {
        --gallery-hero-btn-size: 56px;         /* Smaller hero discs on phones to avoid covering image. */
        --gallery-hero-icon-size: 28px;        /* Keep icon proportional to new disc size. */
        --lb-btn-size: 56px;                   /* Lightbox controls shrink a touch for thumb reach. */
        --lb-icon-size: 24px;                  /* Icon scales down to match button. */
        --lb-arrow-offset: 20px;               /* Bring arrows closer to edges for more image area. */
        --lb-counter-size: 14px;               /* Slightly smaller counter on small screens. */
    }
    .v-thumb { height: 64px; }               /* Slightly shorter thumbs for tighter vertical stacks. */
}