/* ─── louelavie.com: car photo viewer ─────────────────────────────────────
 * Styles for public/llv-photos.js. Everything in the viewer is scoped under
 * #llv-pv: the captured theme recolours every button:hover / button:focus,
 * and an id outranks those rules without !important.
 * Dark backdrop, white controls, the brand red as the only accent.
 */

/* The photos that open. */
[data-llv-pv]{cursor:zoom-in}
[data-llv-pv]:focus{outline:none}
[data-llv-pv]:focus-visible{outline:2px solid var(--red,#e31837);outline-offset:-2px}

/* While open, the page behind does not scroll (the script also pins <body>,
   which is what stops it on an iPhone). */
html.llv-pv-lock{overflow:hidden}

/* Solid: even a few percent of see-through left the page's white headings
   ghosting behind the photo. The fade-in comes from opacity instead. */
#llv-pv{position:fixed;inset:0;z-index:2147483000;background:#060606;opacity:0;transition:opacity .18s ease;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent;font-family:Montserrat,system-ui,-apple-system,sans-serif;color:#fff}
#llv-pv[hidden]{display:none}
#llv-pv.is-open{opacity:1}

/* The photo: as large as the screen allows, inside the safe areas, clear of
   the controls. */
#llv-pv .llv-pv-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(64px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(72px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px))}
#llv-pv .llv-pv-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;margin:0;object-fit:contain;border-radius:4px;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;transition:transform .22s ease,opacity .2s ease}
#llv-pv.is-dragging .llv-pv-img{transition:none}

/* Loading ring, only if the full-size file takes a moment. */
#llv-pv .llv-pv-spin{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--red,#e31837);opacity:0;pointer-events:none;animation:llv-pv-spin .8s linear infinite;transition:opacity .2s}
#llv-pv.is-loading .llv-pv-spin{opacity:1;transition-delay:.25s}
@keyframes llv-pv-spin{to{transform:rotate(360deg)}}

/* Buttons: reset everything the theme gives a <button>, then draw ours. */
#llv-pv .llv-pv-btn{position:absolute;-webkit-appearance:none;appearance:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:0;min-height:0;margin:0;padding:0;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(20,20,20,.72);color:#fff;box-shadow:none;font:inherit;line-height:1;letter-spacing:0;text-transform:none;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .15s,border-color .15s}
#llv-pv .llv-pv-btn:focus{outline:none;background:rgba(20,20,20,.72);color:#fff;border-color:rgba(255,255,255,.24)}
#llv-pv .llv-pv-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
#llv-pv .llv-pv-btn:active{background:var(--red,#e31837);border-color:var(--red,#e31837)}
@media (hover:hover){#llv-pv .llv-pv-btn:hover{background:var(--red,#e31837);border-color:var(--red,#e31837);color:#fff}}
#llv-pv .llv-pv-btn[hidden]{display:none}
#llv-pv .llv-pv-btn svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

#llv-pv .llv-pv-close{top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px))}
/* Phone: previous / next sit in the bottom corners, under the thumb. */
#llv-pv .llv-pv-prev{left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}
#llv-pv .llv-pv-next{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}

/* Name and "3 / 12", between the two buttons. */
#llv-pv .llv-pv-bar{position:absolute;left:68px;right:68px;bottom:calc(14px + env(safe-area-inset-bottom,0px));min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;pointer-events:none;text-align:center}
#llv-pv .llv-pv-cap{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.88)}
#llv-pv .llv-pv-cap:empty{display:none}
#llv-pv .llv-pv-count{font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}

/* Larger screens: previous / next at the sides, the photo between them. */
@media (min-width:768px){
  #llv-pv .llv-pv-stage{padding:calc(72px + env(safe-area-inset-top,0px)) 88px calc(76px + env(safe-area-inset-bottom,0px))}
  #llv-pv .llv-pv-btn{width:48px;height:48px}
  #llv-pv .llv-pv-close{top:20px;right:20px}
  #llv-pv .llv-pv-prev,#llv-pv .llv-pv-next{top:50%;bottom:auto;margin-top:-24px}
  #llv-pv .llv-pv-prev{left:20px}
  #llv-pv .llv-pv-next{right:20px}
  #llv-pv .llv-pv-bar{left:88px;right:88px;bottom:20px}
}

@media (prefers-reduced-motion:reduce){
  #llv-pv,#llv-pv .llv-pv-img{transition:none}
}
@media print{#llv-pv{display:none}}

/* The old Elementor gallery (the GT3 Touring page). Elementor's script never
   made it into the capture, so the grid was never laid out and its photos
   never drawn: every item was 0px tall. llv-photos.js adds the classes and
   values that script would have (columns, gaps and shape from the widget's
   own settings), and Elementor's captured e-gallery.css lays it out. */
.llv-pv-egallery{--columns:var(--llv-cols,4);--hgap:var(--llv-gap,0px);--vgap:var(--llv-gap,0px)}
@media (max-width:1024px){.llv-pv-egallery{--columns:var(--llv-cols-t,2);--hgap:var(--llv-gap-t,10px);--vgap:var(--llv-gap-t,10px)}}
@media (max-width:767px){.llv-pv-egallery{--columns:var(--llv-cols-m,2);--hgap:var(--llv-gap-m,0px);--vgap:var(--llv-gap-m,0px)}}
.llv-pv-egallery .e-gallery-image{background-color:#111}