/* =======================================================================
   DRAFT STANDARD — gallery-masonry.css (Vehicle Detail UI + Docs Typography)

   FILE
     • src/main/resources/static/css/gallery-masonry.css

   PURPOSE
     • Provide a single, modular, scalable style system for:
         1) Vehicle detail page layout
         2) Title/subtitle typography
         3) CTA buttons
         4) Masonry-style image grid
         5) Lightbox modal (close/prev/next/enlarge)
         6) Narrative/notes readability
         7) Documents section readability + premium link styling
         8) OPTIONAL gallery branding watermark overlay (non-destructive)

   WHY YOU GOT SCREWED UP BEFORE
     • Partial CSS blocks can collide silently with existing selectors.
     • If the “docs sync” block exists twice, the later one wins.
     • If links don’t have the class the CSS expects, nothing changes.
     • This full-file approach restores a single-source-of-truth.

   CORE DESIGN CONTRACT (HTML ↔ CSS)
     Expected classes/IDs in templates:
       • Title:          .vd-title
       • Subtitle/meta:  .vd-subtitle (optional)
       • Gallery grid:   .vd-gallery
       • Gallery item:   .vd-gallery-item
       • Notes section:  .vd-notes, .vd-notes-title, .vd-notes-text
       • Docs section:   .vd-docs, .vd-docs-title, .vd-docs-list
       • Lightbox IDs:
           #vdLightbox, #vdLightboxClose, #vdLightboxPrev,
           #vdLightboxNext, #vdLightboxImage, #vdLightboxCaption

   SAFE DEFAULTS
     • Variables use modern, legible defaults.
     • You can tune safely in :root without hunting 12 selectors.

   WATERMARK DESIGN NOTE
     • This watermark is a CSS overlay on the *gallery thumbnails*.
     • It does NOT remove or alter your current visible brand line under images.
     • Position is controlled by a wrapper class on .vd-page:
         - vd-watermark-tr (ACTIVE)
         - vd-watermark-tl
         - vd-watermark-br
         - vd-watermark-bl
     • If you later want the same mark inside the lightbox,
       we can add a wrapper element around #vdLightboxImage
       (because pseudo-elements cannot attach to <img>).

   ======================================================================= */


/* -----------------------------------------------------------------------
   0) ROOT TOKENS — SINGLE SOURCE OF TRUTH
--------------------------------------------------------------------------- */
:root {
    /* ---------------------------
       Vehicle Title Typography
       --------------------------- */
    --vd-title-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --vd-title-font-size: clamp(1.6rem, 2.2vw, 2.25rem);
    --vd-title-font-weight: 700;
    --vd-title-letter-spacing: 0.01em;
    --vd-title-line-height: 1.15;

    /* ---------------------------
       Body / Support Text
       --------------------------- */
    --vd-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --vd-body-font-size: 1rem;
    --vd-body-line-height: 1.55;

    /* ---------------------------
       Color System (neutral premium)
       --------------------------- */
    --vd-text-color: #151515;
    --vd-muted-text-color: #444;
    --vd-surface-bg: #ffffff;
    --vd-soft-surface-bg: #f7f7f7;
    --vd-border-color: rgba(0, 0, 0, 0.08);

    /* ---------------------------
       CTA System
       --------------------------- */
    --vd-cta-bg: #111;
    --vd-cta-text: #fff;
    --vd-cta-hover-bg: #000;
    --vd-cta-radius: 12px;
    --vd-cta-padding-y: 0.85rem;
    --vd-cta-padding-x: 1.1rem;
    --vd-cta-font-size: 1rem;
    --vd-cta-font-weight: 600;

    /* ---------------------------
       Gallery System
       --------------------------- */
    --vd-gallery-gap: 10px;
    --vd-gallery-radius: 10px;
    --vd-gallery-hover-scale: 1.01;

    /* ---------------------------
       Gallery Watermark (OPTIONAL)
       ---------------------------
       IMPORTANT:
         Keep the master offset for backwards safety.
         Then override X/Y for precision nudges.
    --------------------------- */
    --vd-watermark-enabled: 1; /* 1 = ON, 0 = OFF */
    --vd-watermark-image: url("/images/logo-badge-footer.png");
    --vd-watermark-size: 64px; /* try 48px, 72px, 88px */
    --vd-watermark-opacity: 0.22; /* try 0.16–0.32 */

    /* MASTER offset (legacy + quick tuning) */
    --vd-watermark-offset: 10px;

    /* Precision offsets (default to master) */
    --vd-watermark-offset-x: var(--vd-watermark-offset);
    /* DRAFT: NUDGE DOWN HERE without affecting left/right distance */
    --vd-watermark-offset-y: var(--vd-watermark-offset);

    --vd-watermark-blur: 0px; /* keep 0 for crisp mark */

    /* ---------------------------
       Lightbox System
       --------------------------- */
    --vd-modal-backdrop: rgba(0, 0, 0, 0.86);
    --vd-modal-control-bg: rgba(255, 255, 255, 0.08);
    --vd-modal-control-bg-hover: rgba(255, 255, 255, 0.16);
    --vd-modal-control-radius: 10px;

    --vd-modal-close-size: 76px;
    --vd-modal-nav-size: 88px;
    --vd-modal-close-icon-size: 3.0rem;
    --vd-modal-nav-icon-size: 3.0rem;

    /* ---------------------------
       Docs Typography Sync Aliases
       --------------------------- */
    --vd-vehicle-title-font-family: var(--vd-title-font-family);
    --vd-vehicle-title-font-size: var(--vd-title-font-size);
    --vd-vehicle-title-font-weight: var(--vd-title-font-weight);
    --vd-vehicle-title-letter-spacing: var(--vd-title-letter-spacing);
    --vd-vehicle-title-line-height: var(--vd-title-line-height);

    /* Docs-specific tuning knobs */
    --vd-docs-link-color: var(--vd-text-color);
    --vd-docs-link-hover-opacity: 0.85;
    --vd-docs-title-bottom-gap: 0.75rem;
    --vd-docs-list-gap: 0.35rem;
}


/* -----------------------------------------------------------------------
   1) PAGE WRAPPER + BASE TEXT
--------------------------------------------------------------------------- */
.vd-page {
    background: var(--vd-surface-bg);
    color: var(--vd-text-color);
    font-family: var(--vd-body-font-family);
    font-size: var(--vd-body-font-size);
    line-height: var(--vd-body-line-height);
}

.vd-section {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}


/* -----------------------------------------------------------------------
   2) TITLE + SUBTITLE
--------------------------------------------------------------------------- */
.vd-title {
    font-family: var(--vd-title-font-family);
    font-size: var(--vd-title-font-size);
    font-weight: var(--vd-title-font-weight);
    letter-spacing: var(--vd-title-letter-spacing);
    line-height: var(--vd-title-line-height);
    margin: 0 0 0.35rem 0;
}

.vd-subtitle {
    color: var(--vd-muted-text-color);
    margin: 0 0 1rem 0;
}


/* -----------------------------------------------------------------------
   3) CTA BUTTONS
--------------------------------------------------------------------------- */
.vd-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 1.25rem 0;
}

.vd-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--vd-cta-bg);
    color: var(--vd-cta-text);

    border: 1px solid var(--vd-border-color);
    border-radius: var(--vd-cta-radius);

    padding: var(--vd-cta-padding-y) var(--vd-cta-padding-x);

    font-size: var(--vd-cta-font-size);
    font-weight: var(--vd-cta-font-weight);
    text-decoration: none;

    transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

.vd-cta:hover {
    background: var(--vd-cta-hover-bg);
    transform: translateY(-1px);
}

.vd-cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* -----------------------------------------------------------------------
   4) GALLERY — MASONRY-LIKE GRID
--------------------------------------------------------------------------- */
.vd-gallery {
    column-count: 1;
    column-gap: var(--vd-gallery-gap);
}

@media (min-width: 576px) {
    .vd-gallery { column-count: 2; }
}
@media (min-width: 992px) {
    .vd-gallery { column-count: 3; }
}
@media (min-width: 1200px) {
    .vd-gallery { column-count: 4; }
}

.vd-gallery-item {
    break-inside: avoid;
    margin: 0 0 var(--vd-gallery-gap) 0;

    /* Required for watermark positioning */
    position: relative;
}

.vd-gallery-item img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: var(--vd-gallery-radius);
    border: 1px solid var(--vd-border-color);

    transition: transform 140ms ease, opacity 140ms ease;
    cursor: zoom-in;
}

.vd-gallery-item img:hover {
    transform: scale(var(--vd-gallery-hover-scale));
    opacity: 0.98;
}


/* -----------------------------------------------------------------------
   4.5) GALLERY BRAND WATERMARK (OPTIONAL, NON-DESTRUCTIVE)

   ACTIVE POSITION (TOP-RIGHT)
     • Ensure your wrapper is:
         class="container my-4 vd-page vd-watermark-tr"

   /OPTION: TOP-LEFT/
     • Change wrapper to:
         class="container my-4 vd-page vd-watermark-tl"

   /OPTION: BOTTOM-RIGHT/
     • Change wrapper to:
         class="container my-4 vd-page vd-watermark-br"

   /OPTION: BOTTOM-LEFT/
     • Change wrapper to:
         class="container my-4 vd-page vd-watermark-bl"

   POSITIONING LOGIC
     • The ::after overlay is always created on each .vd-gallery-item.
     • The wrapper class decides which corner “wins.”
     • If you remove all vd-watermark-* classes,
       the base default anchor is bottom-left.
--------------------------------------------------------------------------- */

/* Base overlay (DEFAULT anchor = bottom-left if no position class present) */
.vd-gallery-item::after {
    content: "";
    display: block;

    position: absolute;

    /* Default anchor = bottom-left */
    left: var(--vd-watermark-offset-x);
    bottom: var(--vd-watermark-offset-y);

    width: var(--vd-watermark-size);
    height: var(--vd-watermark-size);

    background-image: var(--vd-watermark-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* Enable + opacity in one durable line */
    opacity: calc(var(--vd-watermark-opacity) * var(--vd-watermark-enabled));

    pointer-events: none;
    filter: blur(var(--vd-watermark-blur));

    border-radius: 6px;
}

/* ACTIVE: TOP-RIGHT */
.vd-page.vd-watermark-tr .vd-gallery-item::after {
    top: var(--vd-watermark-offset-y);
    right: var(--vd-watermark-offset-x);
    bottom: auto;
    left: auto;
}

/* /OPTION: TOP-LEFT/ */
.vd-page.vd-watermark-tl .vd-gallery-item::after {
    top: var(--vd-watermark-offset-y);
    left: var(--vd-watermark-offset-x);
    bottom: auto;
    right: auto;
}

/* /OPTION: BOTTOM-RIGHT/ */
.vd-page.vd-watermark-br .vd-gallery-item::after {
    bottom: var(--vd-watermark-offset-y);
    right: var(--vd-watermark-offset-x);
    top: auto;
    left: auto;
}

/* /OPTION: BOTTOM-LEFT/ */
.vd-page.vd-watermark-bl .vd-gallery-item::after {
    bottom: var(--vd-watermark-offset-y);
    left: var(--vd-watermark-offset-x);
    top: auto;
    right: auto;
}


/* -----------------------------------------------------------------------
   5) LIGHTBOX MODAL
--------------------------------------------------------------------------- */
.vd-modal {
    position: fixed;
    inset: 0;
    display: none;

    background: var(--vd-modal-backdrop);
    z-index: 9999;
}

.vd-modal.is-open,
.vd-modal--active {
    display: block;
}

.vd-modal-inner {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;

    padding: 2.5rem 1rem;
}

#vdLightboxImage {
    max-width: min(92vw, 1300px);
    max-height: 86vh;

    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

#vdLightboxCaption {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    font-size: 0.95rem;
}

.vd-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;

    width: var(--vd-modal-close-size);
    height: var(--vd-modal-close-size);

    border: 0;
    border-radius: var(--vd-modal-control-radius);

    background: var(--vd-modal-control-bg);
    color: #fff;

    font-size: var(--vd-modal-close-icon-size);
    line-height: 1;
    cursor: pointer;

    transition: background 120ms ease, opacity 120ms ease;
}

.vd-modal-close:hover {
    background: var(--vd-modal-control-bg-hover);
}

.vd-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: var(--vd-modal-nav-size);
    height: var(--vd-modal-nav-size);

    border: 0;
    border-radius: var(--vd-modal-control-radius);

    background: var(--vd-modal-control-bg);
    color: #fff;

    font-size: var(--vd-modal-nav-icon-size);
    cursor: pointer;

    transition: background 120ms ease, opacity 120ms ease;
}

.vd-modal-nav:hover {
    background: var(--vd-modal-control-bg-hover);
}

.vd-modal-prev {
    left: 14px;
}

.vd-modal-next {
    right: 14px;
}

.vd-modal-close:focus-visible,
.vd-modal-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* -----------------------------------------------------------------------
   6) NOTES / NARRATIVE
--------------------------------------------------------------------------- */
.vd-notes {
    background: var(--vd-soft-surface-bg);
    border: 1px solid var(--vd-border-color);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-top: 1.25rem;
}

.vd-notes-title {
    font-family: var(--vd-title-font-family);
    font-size: clamp(1.15rem, 1.2vw, 1.35rem);
    font-weight: 650;
    margin: 0 0 0.5rem 0;
}

.vd-notes-text {
    margin: 0;
    white-space: pre-wrap;
    color: var(--vd-text-color);
    text-align: left; /* DRAFT DEV18: force narrative.md text to left-align */
}


/* -----------------------------------------------------------------------
   7) DOCUMENTS SECTION
--------------------------------------------------------------------------- */
.vd-docs {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vd-border-color);
}

.vd-docs-title {
    font-family: var(--vd-vehicle-title-font-family);
    font-size: var(--vd-vehicle-title-font-size);
    font-weight: var(--vd-vehicle-title-font-weight);
    letter-spacing: var(--vd-vehicle-title-letter-spacing);
    line-height: var(--vd-vehicle-title-line-height);

    margin: 0 0 var(--vd-docs-title-bottom-gap) 0;
}

.vd-docs-list {
    margin: 0;
    padding: 0;
    list-style: none;

    display: grid;
    gap: var(--vd-docs-list-gap);
}

.vd-docs-link,
.vd-docs-list a {
    font-family: var(--vd-vehicle-title-font-family);
    font-size: var(--vd-vehicle-title-font-size);
    font-weight: var(--vd-vehicle-title-font-weight);
    letter-spacing: var(--vd-vehicle-title-letter-spacing);
    line-height: var(--vd-vehicle-title-line-height);

    color: var(--vd-docs-link-color);
    text-decoration: none;
}

.vd-docs-link:visited,
.vd-docs-list a:visited {
    color: var(--vd-docs-link-color);
}

.vd-docs-link:hover,
.vd-docs-list a:hover {
    opacity: var(--vd-docs-link-hover-opacity);
    text-decoration: underline;
}

.vd-docs-link:focus-visible,
.vd-docs-list a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* =======================================================================
   DRAFT CHEAT SHEET — WATERMARK POSITION + NUDGE + VISIBILITY

   0) REQUIREMENT
      The watermark position classes live on the wrapper:
        .vd-page

      ACTIVE DEFAULT (TOP-RIGHT):
        class="container my-4 vd-page vd-watermark-tr"

      /TOP-LEFT/
        ... vd-page vd-watermark-tl

      /BOTTOM-RIGHT/
        ... vd-page vd-watermark-br

      /BOTTOM-LEFT/
        ... vd-page vd-watermark-bl

   1) NUDGE DOWN (your current request)
      You now have separate X/Y offsets.

      SAFE, minimal change:
        :root {
          --vd-watermark-offset-y: 18px;
        }

      This moves the top-right badge DOWN only
      without changing the right-edge distance.

   2) QUICK OPACITY TUNES
      :root
        --vd-watermark-opacity: 0.22;
      Suggested:
        0.16  subtle
        0.22  balanced
        0.28  strong

      Hard OFF:
        --vd-watermark-enabled: 0;

   3) QUICK SIZE TUNES
      :root
        --vd-watermark-size: 64px;
      Try:
        48px, 72px, 88px

   4) PATH (ONE PLACE)
      :root
        --vd-watermark-image: url("/images/logo-badge-footer.png");

   5) IF YOU EVER THINK CSS IS NOT SERVING
      Your earlier diagnosis was perfect:
        • src updated but target not updated
      Fix pattern:
        • compile/restart
        • cache-bust with ?cb=timestamp

   ======================================================================= */


/* vd-modal control layer fix */
.vd-modal-inner { z-index: 10000; }

.vd-modal-close,
.vd-modal-nav {
    z-index: 10001;
}