@charset "utf-8";
/* CSS Document */

:root{
    --bg:#111;
    --gap:16px;
    --radius:10px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing:border-box;
  }
  *{box-sizing:border-box;}
  /*body{
    margin:0;
    background:var(--bg);
    font-family: system-ui, -apple-system, sans-serif;
    color:#eee;
    padding:24px;
  }*/
  /*h1{
    text-align:center;
    font-weight:600;
    margin-bottom:24px;
  }*/
  .laser-gallery{
    display:grid;
    grid-template-columns: 1fr;
    gap:var(--gap);
    margin-top: 2em;
    /*max-width:1100px;
    margin:0 auto;*/
  }
  @media (min-width:600px){
    .laser-gallery{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width:768px){
    .laser-gallery{ grid-template-columns: repeat(3, 1fr); }
  }
  .thumb{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    cursor:pointer;
    /*aspect-ratio: 4/3;*/
    /*background:#222;*/
  }
  .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition: transform .35s ease, filter .35s ease;
  }
  .thumb-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    background:rgba(0,0,0,0.35);
    transition: opacity .35s ease;
    pointer-events:none;
  }
  .thumb-overlay svg{
    width:32px;
    height:32px;
    fill:none;
    stroke:#fff;
    stroke-width:2;
  }
  .thumb:hover img{
    transform: scale(1.08);
    filter:brightness(0.85);
  }
  .thumb:hover .thumb-overlay{
    opacity:1;
  }

  /* Lightbox */
  .lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.75);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:24px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .lightbox.open{
    display:flex;
  }
  .lightbox img{
    max-width:100%;
    max-height:90vh;
    border-radius:8px;
    box-shadow:0 10px 40px rgba(0,0,0,0.6);
  }
  .lightbox-close, .lightbox-prev, .lightbox-next{
    position:absolute;
    background:rgba(255,255,255,0.1);
    border:none;
    color:#fff;
    font-size:1.5rem;
    cursor:pointer;
    border-radius:50%;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: background .2s ease;
  }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
    background:rgba(255,255,255,0.25);
  }
  .lightbox-close{
    top: calc(20px + env(safe-area-inset-top, 0px));
    right:20px;
  }
  .lightbox-prev{
    left:20px;
    top:50%;
    transform:translateY(-50%);
  }
  .lightbox-next{
    right:20px;
    top:50%;
    transform:translateY(-50%);
  }