/* =========================================================
   GALLERY
   - six selected homepage images
   - hover spotlight / zoom
   - responsive full-screen slider for every gallery image
   ========================================================= */

.hm-gallery{
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fff 10%,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,0) 74%,
      #fff 92%,
      #fff 100%
    ),
    radial-gradient(720px 420px at 18% 20%, rgba(31,138,91,.10), transparent 60%),
    radial-gradient(720px 420px at 82% 10%, rgba(201,162,39,.10), transparent 60%);
}

.hm-gallery__grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.hm-shot{
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow:hidden;
  border-radius: 24px;
  background: #0f172a;
  box-shadow: 0 22px 60px rgba(15,23,42,.12);

  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease;

  --mx: .5;
  --my: .5;
}

.hm-shot::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index: 2;
  pointer-events:none;
  border-radius: 26px;
  background: conic-gradient(
    from 180deg,
    rgba(31,138,91,0),
    rgba(31,138,91,.30),
    rgba(201,162,39,.30),
    rgba(31,138,91,0)
  );
  opacity: 0;
  filter: blur(12px);
  transition: opacity 220ms ease;
}

.hm-shot::after{
  content:"";
  position:absolute;
  inset: 1px;
  z-index: 2;
  pointer-events:none;
  border-radius: 23px;
  background: transparent;
}

.hm-shot__bg{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform: scale(1.06);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1), filter 240ms ease;
}

.hm-shot__veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(
      520px 320px at calc(var(--mx) * 100%) calc(var(--my) * 100%),
      rgba(255,255,255,.20),
      transparent 60%
    ),
    rgba(0,0,0,.06);
  clip-path: inset(0 0 0 0 round 24px);
  transition: clip-path 520ms cubic-bezier(.2,.8,.2,1);
}

.hm-shot:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(15,23,42,.18);
}

.hm-shot:hover::before{ opacity: 1; }

.hm-shot:hover .hm-shot__bg{
  transform: scale(1.12)
    translate(
      calc((var(--mx) - .5) * 14px),
      calc((var(--my) - .5) * 14px)
    );
  filter: saturate(1.08) contrast(1.02);
}

.hm-shot:hover .hm-shot__veil{
  clip-path: inset(8px 8px 8px 8px round 22px);
}

.hm-shot:focus-visible{
  outline: 3px solid rgba(31,138,91,.55);
  outline-offset: 4px;
}

/* Fixed six-slot editorial layout. */
.hm-shot--1{ grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 420px; }
.hm-shot--2{ grid-column: 8 / span 5; grid-row: 1 / span 1; min-height: 200px; }
.hm-shot--3{ grid-column: 8 / span 5; grid-row: 2 / span 1; min-height: 200px; }
.hm-shot--4{ grid-column: 1 / span 4; grid-row: 3 / span 1; min-height: 220px; }
.hm-shot--5{ grid-column: 5 / span 4; grid-row: 3 / span 1; min-height: 220px; }
.hm-shot--6{ grid-column: 9 / span 4; grid-row: 3 / span 1; min-height: 220px; }

@media (max-width: 980px){
  .hm-gallery__grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .hm-shot--1{ grid-column: 1 / span 6; min-height: 360px; }
  .hm-shot--2{ grid-column: 1 / span 3; }
  .hm-shot--3{ grid-column: 4 / span 3; }
  .hm-shot--4{ grid-column: 1 / span 2; }
  .hm-shot--5{ grid-column: 3 / span 2; }
  .hm-shot--6{ grid-column: 5 / span 2; }
}

@media (max-width: 620px){
  .hm-gallery__grid{ grid-template-columns: 1fr; }
  .hm-shot{ min-height: 240px; }
  .hm-shot--1,
  .hm-shot--2,
  .hm-shot--3,
  .hm-shot--4,
  .hm-shot--5,
  .hm-shot--6{
    grid-column: auto;
    grid-row:auto;
  }
}

/* =========================================================
   FULL-SCREEN GALLERY SLIDER
   ========================================================= */

.hm-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:grid;
  grid-template-columns: minmax(48px, 72px) minmax(0, 1fr) minmax(48px, 72px);
  align-items:center;
  gap: 12px;
  padding: 28px 24px;

  background: rgba(8,15,26,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  opacity: 0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.hm-lightbox.is-open{
  opacity: 1;
  visibility:visible;
  pointer-events:auto;
}

.hm-lightbox__stage{
  position:relative;
  min-width:0;
  width:100%;
  height:min(84vh, 900px);
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}

.hm-lightbox__img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:20px;
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
  opacity:1;
  transform:scale(1);
  transition: opacity 150ms ease, transform 150ms ease;
  -webkit-user-drag:none;
  user-select:none;
}

.hm-lightbox__img.is-changing{
  opacity:.45;
  transform:scale(.992);
}

.hm-lightbox__counter{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  min-width:62px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(15,23,42,.56);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  text-align:center;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
}

.hm-lightbox__close,
.hm-lightbox__nav{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.hm-lightbox__close:hover,
.hm-lightbox__nav:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.28);
}

.hm-lightbox__close:focus-visible,
.hm-lightbox__nav:focus-visible{
  outline:3px solid rgba(255,255,255,.70);
  outline-offset:3px;
}

.hm-lightbox__close{
  position:absolute;
  top:max(16px, env(safe-area-inset-top));
  right:max(16px, env(safe-area-inset-right));
  z-index:2;
  width:48px;
  height:48px;
  border-radius:16px;
  font-size:30px;
  line-height:1;
}

.hm-lightbox__nav{
  width:56px;
  height:56px;
  justify-self:center;
  border-radius:18px;
  font-size:44px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hm-lightbox__nav:active,
.hm-lightbox__close:active{
  transform:scale(.94);
}

.hm-lightbox__nav[hidden]{
  display:none;
}

@media (max-width: 760px){
  .hm-lightbox{
    grid-template-columns: 1fr;
    padding:
      max(66px, calc(env(safe-area-inset-top) + 56px))
      12px
      max(74px, calc(env(safe-area-inset-bottom) + 62px));
  }

  .hm-lightbox__stage{
    height:calc(100dvh - 150px);
  }

  .hm-lightbox__img{
    border-radius:14px;
  }

  .hm-lightbox__nav{
    position:absolute;
    z-index:2;
    bottom:max(14px, env(safe-area-inset-bottom));
    width:52px;
    height:52px;
    border-radius:16px;
    font-size:40px;
  }

  .hm-lightbox__nav--prev{ left:calc(50% - 62px); }
  .hm-lightbox__nav--next{ right:calc(50% - 62px); }

  .hm-lightbox__counter{
    bottom:8px;
  }
}

@media (prefers-reduced-motion: reduce){
  .hm-shot,
  .hm-shot__bg,
  .hm-shot__veil,
  .hm-lightbox,
  .hm-lightbox__img,
  .hm-lightbox__close,
  .hm-lightbox__nav{
    transition:none;
  }
}