/* ==========================================
   Aero Glass Window - Translucent & Frosted
   ========================================== */

/* Translucent Aero Window Outer Frame */
.aero-window {
  --hue: 210;
  --radius: 8px;
  --frame: 9px;

  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  font-family: Garamond, "Baskerville", "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 14px;
  color: #1b1b1b;

  /* Highly translucent background fill (12% opacity) */
  background-color: hsla(var(--hue), 70%, 85%, 0.12) !important;

  /* Frosted Glass Blur */
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  /* Aero glass highlights */
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
    inset 0 0 15px rgba(255, 255, 255, 0.2) !important;
}

/* Translucent Inner Body Area */
.aero-window .aero-body {
  margin: 0 var(--frame);
  padding: 12px;

  /* Lightweight semi-transparent white tint for text contrast */
  background-color: rgba(255, 255, 255, 0.15) !important;

  color: #1b1b1b;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==========================================
   Photo Gallery - Fullscreen Lightbox Fix
   ========================================== */

/* 1. Neutralize containing blocks on parents when checked */
.gallery-aero-card:has(input:checked),
.gallery-aero-card:has(input:checked) label {
  z-index: 9999999 !important;
  isolation: auto !important;
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* 2. Fullscreen clickable backdrop (clicking closes lightbox) */
.gallery-aero-card input:checked {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 10000000 !important;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.85); /* Dark overlay background */
}

/* 3. Centered Lightbox Image */
.gallery-aero-card input:checked + img {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  width: auto !important;
  height: auto !important;
  z-index: 10000001 !important;
  object-fit: contain !important;
  border-radius: 4px;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  pointer-events: none; /* Passes click through to input for closing */
}