/* Photo sliders and the full-screen viewer (ht-gallery.js) — one look on every page. */

/* dots: current = large white, the rest shrink toward an edge with more photos beyond it */
.htd{overflow:hidden;height:14px;max-width:100%;pointer-events:none}
/* the dots sit in a frosted dark pill (iOS-style), so they read on any photo */
.htg__d{background:rgba(28,30,33,.62);box-shadow:0 0 0 9px rgba(28,30,33,.62),0 6px 18px 8px rgba(0,0,0,.18);border-radius:999px;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
.htd__s{display:flex;height:100%;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.htd i{flex:0 0 18px;height:100%;display:grid;place-items:center}
.htd i::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.42);transition:width .25s,height .25s,background-color .25s,opacity .25s}
.htd i.htd--a::before{width:9px;height:9px;background:#fff}
.htd i.htd--1s::before{width:6.5px;height:6.5px}
.htd i.htd--2::before{width:5px;height:5px}
.htd i.htd--3::before{width:3.5px;height:3.5px}
.htd i.htd--4::before{width:0;height:0;opacity:0}

/* slider */
.htg{position:relative;min-width:0}
.htg__t{scrollbar-width:none}
.htg__t::-webkit-scrollbar{display:none}
.htg:not(.htg--m) .htg__t,.htg--dark .htg__t{display:flex!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;grid-template-columns:none!important;gap:0!important}
.htg:not(.htg--m) .htg__s,.htg--dark .htg__s{flex:0 0 100%!important;width:100%;max-width:100%;scroll-snap-align:center;scroll-snap-stop:always;grid-row:auto!important;grid-column:auto!important}
.htg:not(.htg--m) .htg__s[hidden]{display:block!important}
.htg__t:focus-visible{outline:3px solid rgba(24,174,151,.55);outline-offset:2px}
/* a soft shade under the dots so they read on bright photos */
.htg::after{content:"";position:absolute;inset-inline:0;bottom:0;height:56px;background:linear-gradient(to top,rgba(6,22,33,.38),transparent);pointer-events:none;border-radius:inherit;opacity:0}
.htg:has(.htg__d)::after{opacity:0}
.htg__d{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:2}
.htg__nav{position:absolute;top:50%;z-index:2;width:38px;height:38px;margin-top:-19px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#0c2b3f;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 6px 18px -6px rgba(6,22,33,.45);opacity:0;transition:opacity .2s,transform .2s,background-color .2s}
.htg__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.htg__nav--next{inset-inline-end:12px}
.htg__nav--prev{inset-inline-start:12px}
[dir="rtl"] .htg__nav--next svg,.htg__nav--prev svg{transform:scaleX(-1)}
[dir="rtl"] .htg__nav--prev svg{transform:none}
.htg:hover .htg__nav,.htg__nav:focus-visible{opacity:1}
.htg__nav:hover{background:#fff;color:#18ae97;transform:scale(1.06)}
.htg__nav[hidden]{display:none}
@media (hover:none){.htg__nav{display:none}}

/* phones only: the page keeps its own mosaic / grid on wider screens */
@media (min-width:761px){
  .htg--m::after,.htg--m .htg__d,.htg--m .htg__nav{display:none}
}
@media (max-width:760px){
  .htg--m .htg__t{display:flex!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;grid-template-columns:none!important;grid-template-rows:none!important;gap:0!important}
  .htg--m .htg__t{border-radius:14px}
  .htg--m .htg__s{flex:0 0 100%!important;width:100%;max-width:100%;scroll-snap-align:center;scroll-snap-stop:always;grid-row:auto!important;grid-column:auto!important;border-radius:0!important}
}

/* full-screen viewer */
html.htv-lock{overflow:hidden}
.htv{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:#fff}
.htv::backdrop{background:rgba(5,16,24,.94)}
.htv[open]{display:block}
.htv .htg{height:100%}
.htv .htg::after{display:none}
.htv .htg__t{height:100%}
.htv .htg__s{display:grid!important;place-items:center;padding:64px max(16px,env(safe-area-inset-left,0px)) 56px max(16px,env(safe-area-inset-right,0px))}
.htv .htg__s img{max-width:min(100%,1400px);max-height:100%;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.htv .htg__d{bottom:max(30px,calc(env(safe-area-inset-bottom,0px) + 14px))}
.htv .htg__nav{opacity:1;width:48px;height:48px;margin-top:-24px;background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.htv .htg__nav:hover{background:#18ae97;color:#fff}
.htv__x{position:fixed;top:max(16px,env(safe-area-inset-top,0px));inset-inline-end:max(16px,env(safe-area-inset-right,0px));z-index:3;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);display:grid;place-items:center;padding:0}
.htv__x:hover{background:#18ae97}

.htd--sm{height:10px}
.htd--sm i{flex-basis:12px}
.htg--sm .htg__d{box-shadow:0 0 0 6px rgba(28,30,33,.62)}
.htd--sm i::before{width:5px;height:5px}
.htd--sm i.htd--a::before{width:6.5px;height:6.5px}
.htd--sm i.htd--1s::before{width:4.5px;height:4.5px}
.htd--sm i.htd--2::before{width:3.5px;height:3.5px}
.htd--sm i.htd--3::before{width:2.5px;height:2.5px}
.htg--sm .htg__d{bottom:12px}
.htg--sm .htg__nav{top:42%}
.htg--sm::after{height:34px}
.htg--sm .htg__nav{width:28px;height:28px;margin-top:-14px}
.htg--sm .htg__nav svg{width:14px;height:14px}
.htg--sm .htg__nav--next{inset-inline-end:6px}.htg--sm .htg__nav--prev{inset-inline-start:6px}

@media (prefers-reduced-motion:reduce){.htd__s,.htd i::before,.htg__nav{transition:none}.htg__t{scroll-behavior:auto}}