/* Cards / Boxes */
.card, .box{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card h2, .box h2, .card h3, .box h3{ margin:0 0 8px; }
.card > * + *, .box > * + *{ margin-top:10px; }

/* Gallery */

/* --- Mosaic layout: 1 wide hero on top, 2 items below --- */
.gallery--mosaic{
  /* make the wrapper stretch but never overflow its container */
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 18px;
  /* mobile: stack 1, then 2, then 3 */
  grid-template-columns: 1fr;
}

@media (min-width: 900px){
  .gallery--mosaic{
    grid-template-columns: 1fr 1fr;        /* two columns */
    grid-template-areas:
      "hero  hero"                          /* first row: hero spans both */
      "side1 side2";                        /* second row: two items */
  }
  .gallery--mosaic .is-hero  { grid-area: hero; }
  .gallery--mosaic .is-side1 { grid-area: side1; }
  .gallery--mosaic .is-side2 { grid-area: side2; }
}

/* --- Cards / items --- */
.gallery__item{
  position: relative;
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--card);

  /* show ENTIRE image (no crop), centered */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* smooth hover */
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.gallery__item:hover{
  transform: scale(1.02);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

/* Sizing driven by min/max clamps so the container “fits” naturally */
.gallery--mosaic .is-hero{
  /* wide “hero” feel; scales with viewport but capped */
  aspect-ratio: 16 / 9;
  min-height: clamp(220px, 40vw, 420px);
}
.gallery--mosaic .is-side1,
.gallery--mosaic .is-side2{
  aspect-ratio: 4 / 3;
  min-height: clamp(180px, 28vw, 320px);
}

/* Caption chip */
.gallery__item figcaption{
  position:absolute; left:12px; right:12px; bottom:12px;
  padding:6px 10px; font-size:.9rem; color:#fff;
  background: rgba(0,0,0,.55); border-radius:8px;
}

.gallery__item--1{background-image:url("../img/light_demonstration.webp")}
.gallery__item--2{background-image:url("../img/stock.webp")}
.gallery__item--3{background-image:url("../img/industrial_install.webp")}
.gallery__item--4{background-image:url("../img/window_install_header.webp")}
.gallery__item--5{background-image:url("../img/securing_window.webp")}
.gallery__item--6{background-image:url("../img/two_story_install.webp")}
@media (prefers-reduced-motion:reduce){.gallery__item{transition:none;transform:none}}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;               /* hidden until .show */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.82);
  z-index: 2000;               /* above header/drawer */
}
.lightbox.show{ display:flex; }

.lightbox__img{
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  border-radius: 6px;
}

.lightbox button{
  position: absolute;
  appearance: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(4px);
}
.lightbox button:hover{ background: rgba(255,255,255,.18); }

.lightbox__close{ top: 10px; right: 12px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }


/* Uploads Section */

.section--uploads h2{ text-align:center; margin-bottom:8px }
.section--uploads p{ text-align:center; color:var(--muted) }

.upload{ max-width:860px; margin:18px auto }
.upload__drop{
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:2px dashed var(--border); border-radius:12px; padding:28px;
  background:color-mix(in srgb, var(--card) 80%, transparent); text-align:center;
}
.upload__drop.is-drag{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent) }
.upload__hint{ color:var(--muted) }

.upload__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin:16px 0 }
.upload__item{ border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--card) }
.upload__thumb{ aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; display:block }
.upload__meta{ font-size:.85rem; padding:6px 8px; display:flex; justify-content:space-between; align-items:center }
.upload__progress{ height:4px; background:var(--border) }
.upload__progress > span{ display:block; height:100%; width:0%; background:var(--accent) }

.upload__controls{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px }
@media (max-width:720px){ .upload__controls{ grid-template-columns:1fr } }
.upload__note{ font-size:.9rem; color:var(--muted) }
.upload__status{ margin-top:8px }

/* --- Cards / Boxes / Buttons already live here --- */

/* Service Cards (from services.css) */
.service-list{display:grid;gap:14px}
.service-card{padding:16px 18px}
.service-card h3{margin:0 0 8px;line-height:1.25}
.service-card p{margin:0 0 12px;color:var(--muted)}
.service-card .btn{margin-top:4px}

/* Stat list (moved from about.css) */
.stats-list{margin:12px 0 0;padding:0;list-style:none}
.stats-list li{
  background: color-mix(in srgb, var(--card), var(--text) 4%);
  border:1px solid var(--border);
  padding:10px 12px;border-radius:10px;margin:8px 0;font-weight:600
}
.stats-list small{display:block;font-weight:400;color:var(--muted)}

/* Fullscreen overlay */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;                 /* hidden until .show */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.82);
  z-index: 2000;                 /* above header/drawer */
}

/* Visible state */
.lightbox.show{ display:flex; }

/* Image */
.lightbox__img{
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  border-radius: 6px;
}

/* Buttons (reset & style) */
.lightbox button{
  position: absolute;
  appearance: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(4px);
}
.lightbox button:hover{ background: rgba(255,255,255,.18); }

/* Positions */
.lightbox__close{ top: 10px; right: 12px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* Prevent page scroll while open (JS toggles body style) */
/* --- Nav list reset & inline items --- */
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { display: inline-block; margin: 0 .75rem; }
.nav a { text-decoration: none; }

/* If header is fixed, give main breathing room (adjust to your header height) */
body.admin-bar .site-header { top: 32px; }
main { padding: 0; }