/* =========================================================
   Sports Vault Arena Gallery Page
   Compact, responsive full-page slideshow UI.
   Uses the existing landing.css variables, navigation,
   typography, brand colors, and button language.
   ========================================================= */

.gallery-page{
  min-height:100svh;
  background:var(--ink-navy);
  overflow-x:hidden;
}

.gallery-page .site-nav{
  --gallery-nav-h:71px;
}

.gallery-main{
  min-height:calc(100svh - var(--gallery-nav-h, 71px));
  transition:margin-top .28s ease;
  background:
    radial-gradient(circle at 16% 12%,rgba(255,68,56,.18),transparent 34%),
    radial-gradient(circle at 88% 80%,rgba(255,182,39,.14),transparent 38%),
    linear-gradient(135deg,var(--ink-deep),var(--ink-navy) 54%,#0c2a45);
}

.gallery-shell{
  position:relative;
  width:100%;
  min-height:calc(100svh - var(--gallery-nav-h, 71px));
  overflow:hidden;
  isolation:isolate;
}

.gallery-stage{
  position:relative;
  width:100%;
  min-height:calc(100svh - var(--gallery-nav-h, 71px));
  outline:none;
  background:#071727;
  cursor:pointer;
  touch-action:manipulation;
}

.gallery-stage::before,
.gallery-stage::after{
  content:"";
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}

.gallery-stage::before{
  z-index:0;
  background-image:var(--gallery-active-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(30px);
  transform:scale(1.16);
  opacity:.96;
  will-change:background-image,transform;
}

.gallery-stage::after{
  z-index:1;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.05),transparent 30%),
    linear-gradient(180deg,rgba(6,20,32,.28),rgba(6,20,32,.38));
}

.gallery-stage:focus-visible,
.gallery-control-btn:focus-visible,
.gallery-mini-btn:focus-visible,
.gallery-transition-btn:focus-visible{
  outline:3px solid var(--champion-gold);
  outline-offset:3px;
}

.gallery-slides,
.gallery-slide{
  position:absolute;
  inset:0;
}

.gallery-slides{
  z-index:2;
}

.gallery-slide{
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:scale(1.012);
  transition:opacity 900ms ease,visibility 900ms ease,transform 5200ms ease;
  background:var(--ink-deep);
}

.gallery-slide:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,23,39,.18),transparent 20%,transparent 75%,rgba(7,23,39,.50)),
    linear-gradient(90deg,rgba(7,23,39,.18),transparent 18%,transparent 82%,rgba(7,23,39,.16));
}

.gallery-slide.is-active{
  z-index:1;
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

.gallery-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}

.gallery-shell.transition-cross-fade .gallery-slide{
  transition:opacity 1100ms ease-in-out,visibility 1100ms ease-in-out,transform 1100ms ease-in-out;
}

.gallery-shell.transition-zoom-fade .gallery-slide{
  transform:scale(1.065);
  transition:opacity 1200ms ease,visibility 1200ms ease,transform 7600ms ease;
}

.gallery-shell.transition-zoom-fade .gallery-slide.is-active{
  transform:scale(1);
}

.gallery-counter{
  position:absolute;
  top:clamp(10px,1.7vw,20px);
  right:clamp(10px,1.8vw,24px);
  z-index:5;
  min-width:64px;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(7,23,39,.64);
  color:#fff;
  font-family:'Space Mono',monospace;
  font-size:.72rem;
  line-height:1.2;
  text-align:center;
  backdrop-filter:blur(10px);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}

.gallery-controls{
  position:fixed;
  left:50%;
  bottom:clamp(10px,2vh,20px);
  z-index:260;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 24px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  background:rgba(7,23,39,.68);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 42px rgba(0,0,0,.34);
}

.gallery-primary-controls,
.gallery-secondary-controls{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.gallery-control-btn{
  width:auto;
  min-width:0;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 13px;
  font-size:.74rem;
  line-height:1;
  letter-spacing:.035em;
  white-space:nowrap;
}

.gallery-control-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.92rem;
  line-height:1;
}

.gallery-toggle-btn{
  min-width:86px;
}

.gallery-transition-btn{
  min-width:94px;
}

.gallery-timer-control{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.055);
  overflow:hidden;
}

.gallery-mini-btn{
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:1.08rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}

.gallery-mini-btn:hover{
  background:rgba(255,182,39,.18);
  color:var(--champion-gold);
}

.gallery-timer-label{
  display:inline-flex;
  min-width:45px;
  height:36px;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'Space Mono',monospace;
  font-size:.74rem;
  line-height:1;
  border-left:1px solid rgba(255,255,255,.15);
  border-right:1px solid rgba(255,255,255,.15);
}

.gallery-empty{
  min-height:calc(100svh - var(--gallery-nav-h, 71px));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(100% - 44px,860px);
  margin:0 auto;
  text-align:center;
  padding:48px 0;
}

.gallery-empty .section-tag{
  justify-content:center;
}

.gallery-empty h1{
  font-size:clamp(2.2rem,5vw,4.4rem);
  margin:10px 0 18px;
}

.gallery-empty p{
  max-width:720px;
  color:#D6E2EF;
}

.gallery-empty strong{
  color:var(--champion-gold);
}

@media (max-width:991px){
  .gallery-controls{
    gap:7px;
    padding:7px 9px;
    border-radius:18px;
  }

  .gallery-primary-controls,
  .gallery-secondary-controls{
    gap:7px;
  }

  .gallery-control-btn{
    min-height:36px;
    padding:8px 11px;
    font-size:.70rem;
  }

  .gallery-toggle-btn{
    min-width:78px;
  }

  .gallery-transition-btn{
    min-width:84px;
  }

  .gallery-timer-control{
    min-height:36px;
  }

  .gallery-mini-btn,
  .gallery-timer-label{
    height:34px;
  }

  .gallery-mini-btn{
    width:33px;
  }

  .gallery-timer-label{
    min-width:42px;
  }
}

@media (max-width:768px){
  .gallery-main,
  .gallery-shell,
  .gallery-stage,
  .gallery-empty{
    min-height:calc(100svh - var(--gallery-nav-h, 70px));
  }

  .gallery-stage{
    background:#061420;
  }

  .gallery-stage::before,
  .gallery-stage::after{
    display:block;
  }

  .gallery-slide{
    transform:none;
    background:transparent;
  }

  .gallery-slide:after{
    display:none;
  }

  .gallery-slide img{
    object-fit:contain;
    object-position:center center;
    background:transparent;
  }

  .gallery-counter{
    top:10px;
    right:10px;
    min-width:58px;
    padding:5px 9px;
    font-size:.66rem;
  }

  .gallery-controls{
    bottom:8px;
    width:min(calc(100% - 18px),390px);
    max-width:calc(100% - 18px);
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    padding:7px;
    border-radius:18px;
    background:rgba(7,23,39,.72);
  }

  .gallery-primary-controls{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }

  .gallery-secondary-controls{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .gallery-nav-btn,
  .gallery-toggle-btn{
    width:44px;
    min-width:44px;
    max-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    justify-self:center;
    border-radius:999px;
  }

  .gallery-primary-controls .gallery-control-text{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .gallery-control-icon{
    font-size:1.04rem;
  }

  .gallery-toggle-btn .gallery-control-icon{
    font-size:1rem;
  }

  .gallery-timer-control,
  .gallery-transition-btn{
    width:100%;
    min-width:0;
    min-height:38px;
    height:38px;
    border-radius:999px;
  }

  .gallery-transition-btn{
    padding:0 12px;
    font-size:.70rem;
  }

  .gallery-mini-btn,
  .gallery-timer-label{
    height:36px;
  }

  .gallery-mini-btn{
    width:35px;
    font-size:1rem;
  }

  .gallery-timer-label{
    flex:1;
    min-width:0;
    font-size:.70rem;
  }
}

@media (max-width:420px){
  .gallery-controls{
    width:calc(100% - 14px);
    gap:5px;
    padding:6px;
    border-radius:17px;
  }

  .gallery-primary-controls,
  .gallery-secondary-controls{
    gap:6px;
  }

  .gallery-nav-btn,
  .gallery-toggle-btn{
    width:42px;
    min-width:42px;
    max-width:42px;
    height:42px;
    min-height:42px;
  }

  .gallery-control-icon{
    font-size:.98rem;
  }

  .gallery-timer-control,
  .gallery-transition-btn{
    height:36px;
    min-height:36px;
  }

  .gallery-mini-btn,
  .gallery-timer-label{
    height:34px;
  }

  .gallery-mini-btn{
    width:32px;
  }
}

@media (orientation:landscape) and (max-height:540px){
  .gallery-slide img{
    object-fit:contain;
  }

  .gallery-controls{
    bottom:6px;
    width:max-content;
    max-width:calc(100% - 14px);
    display:flex;
    padding:6px 8px;
    gap:6px;
    border-radius:16px;
  }

  .gallery-primary-controls,
  .gallery-secondary-controls{
    width:auto;
    display:inline-flex;
    gap:6px;
  }

  .gallery-control-btn,
  .gallery-toggle-btn,
  .gallery-transition-btn{
    width:auto;
    min-width:0;
    max-width:none;
    height:auto;
    min-height:34px;
    padding:7px 10px;
    font-size:.68rem;
    border-radius:999px;
  }

  .gallery-primary-controls .gallery-control-text{
    position:static;
    width:auto;
    height:auto;
    padding:0;
    margin:0;
    overflow:visible;
    clip:auto;
    white-space:nowrap;
  }

  .gallery-timer-control{
    width:auto;
    min-height:34px;
    height:34px;
  }

  .gallery-mini-btn,
  .gallery-timer-label{
    height:32px;
  }

  .gallery-mini-btn{
    width:31px;
  }

  .gallery-timer-label{
    min-width:38px;
    flex:0 0 auto;
  }

  .gallery-counter{
    top:7px;
    right:7px;
  }
}


/* Desktop/laptop control auto-hide.
   JS enables these classes only for fine-pointer, hover-capable screens. */
.gallery-controls.is-auto-hide-ready{
  transition:opacity .28s ease,transform .28s ease,box-shadow .28s ease;
  will-change:opacity,transform;
}

.gallery-controls.is-auto-hidden:not(:focus-within){
  opacity:0;
  transform:translate(-50%, 14px);
  pointer-events:none;
}

@media (max-width:768px){
  .gallery-controls.is-auto-hide-ready,
  .gallery-controls.is-auto-hidden:not(:focus-within){
    opacity:1;
    transform:translateX(-50%);
    pointer-events:auto;
  }
}


/* When the desktop/laptop navbar auto-hides, remove the sticky header's reserved layout space too. */
.gallery-page.gallery-nav-space-hidden .gallery-main{
  margin-top:calc(-1 * var(--gallery-nav-h, 71px));
  min-height:100svh;
}

.gallery-page.gallery-nav-space-hidden .gallery-shell,
.gallery-page.gallery-nav-space-hidden .gallery-stage{
  min-height:100svh;
}

@media (max-width:768px){
  .gallery-page.gallery-nav-space-hidden .gallery-main{
    margin-top:0;
    min-height:calc(100svh - var(--gallery-nav-h, 70px));
  }

  .gallery-page.gallery-nav-space-hidden .gallery-shell,
  .gallery-page.gallery-nav-space-hidden .gallery-stage{
    min-height:calc(100svh - var(--gallery-nav-h, 70px));
  }
}


/* Desktop/laptop header navbar auto-hide.
   JS enables these classes only for fine-pointer, hover-capable screens. */
.gallery-page .site-nav.is-auto-hide-ready{
  transition:opacity .28s ease,transform .28s ease,box-shadow .28s ease;
  will-change:opacity,transform;
}

.gallery-page .site-nav.is-auto-hidden:not(:focus-within){
  opacity:0;
  transform:translateY(calc(-100% - 2px));
  pointer-events:none;
}

@media (max-width:768px){
  .gallery-page .site-nav.is-auto-hide-ready,
  .gallery-page .site-nav.is-auto-hidden:not(:focus-within){
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .gallery-slide,
  .gallery-shell.transition-cross-fade .gallery-slide,
  .gallery-shell.transition-zoom-fade .gallery-slide,
  .gallery-controls.is-auto-hide-ready,
  .gallery-page .site-nav.is-auto-hide-ready,
  .gallery-main{
    transition:none!important;
    transform:none!important;
  }
}