/* squeeze-gallery.css v1.0.0 (2026-09-24) - photo gallery in the 21st.dev "Squeeze Carousel" look.
   Pairs with /js/squeeze-gallery.js; markup contract documented there. First user: the 10 Tiran Island pages.
   >= 780px: active photo wide at the start edge + the next 4 as strips (JS sets --sq-o / --sq-w per item, tablet
   scales the strips with --sq-k), hover-grow, arrows bottom-start. < 780px: scroll-snap swipe slider + counter. */
.sqg{--sq-k:1;position:relative}
.sqg-track{display:flex}
.sqg-item{position:relative;display:block;min-width:0;padding:0;border:0;margin:0;background:#e2e8f0;color:inherit;font:inherit;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.sqg-item img{display:block;width:100%;height:100%;object-fit:cover}
.sqg-item picture{display:block;width:100%;height:100%}
.sqg-item:focus-visible{outline:3px solid var(--ttd-gold,#d4a96c);outline-offset:-3px}
.sqg-nav{display:none}
.sqg-btn{width:34px;height:34px;padding:0;border-radius:50%;background:#fff;border:1px solid #1c1917;color:#1c1917;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,box-shadow .2s ease}
.sqg-btn:hover{background:#f7f7f7;box-shadow:0 2px 4px rgba(0,0,0,.12)}
.sqg-btn:focus-visible{outline:2px solid var(--ttd-accent,#284878);outline-offset:2px}
.sqg-btn svg{display:block;pointer-events:none}
.sqg-count{display:none}

@media (min-width:780px){
.sqg-track{height:clamp(320px,52vw,500px)}
.sqg-item{order:var(--sq-o,0);flex:0 0 calc(var(--sq-w,0px) * var(--sq-k));margin-inline-start:8px;border-radius:12px;transition:flex .55s cubic-bezier(.22,.61,.36,1),margin .55s cubic-bezier(.22,.61,.36,1),opacity .35s ease}
.sqg-item.is-active{order:0;flex:1 1 0px;margin-inline-start:0;cursor:zoom-in}
.sqg-item.is-off{flex-basis:0px;margin-inline-start:0;opacity:0;pointer-events:none}
.sqg.sqg-instant .sqg-item{transition:none}
.sqg-item.is-active::after{content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;background:rgba(15,23,42,0);opacity:0;transition:background .2s,opacity .2s;pointer-events:none}
.sqg-item.is-active:hover::after{background:rgba(15,23,42,.28);opacity:1}
.sqg-nav{display:flex;gap:8px;position:absolute;inset-inline-start:12px;bottom:12px;z-index:3}
[dir="rtl"] .sqg-btn svg{transform:scaleX(-1)}
}
@media (min-width:780px) and (max-width:1023.98px){
.sqg{--sq-k:.7}
}
@media (min-width:780px) and (hover:hover){
.sqg-item:not(.is-active):not(.is-off):hover{flex-basis:calc((var(--sq-w,0px) + 24px) * var(--sq-k))}
}

@media (max-width:779.98px){
.sqg-track{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:12px}
.sqg-track::-webkit-scrollbar{display:none}
.sqg-item{flex:0 0 100%;aspect-ratio:4/3;scroll-snap-align:center;scroll-snap-stop:always}
.sqg-count{display:block;position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:600;line-height:1;padding:6px 10px;border-radius:999px;pointer-events:none;font-variant-numeric:tabular-nums}
[dir="rtl"] .sqg-count{right:auto;left:10px}
}

@media (prefers-reduced-motion:reduce){
.sqg-item{transition:none!important}
.sqg-track{scroll-behavior:auto}
}