/* V4 / media controls. Rectangular photography, opaque viewer, local glass only. */
.gallery-controls,
button.gallery-photo[data-lightbox],
button.video-poster[data-video],
#media-dialog,
.v3-experiences .v3-photo-arrow,
.v2-route-card .route-arrow,
.v3-route .route-arrow{
  --v4-media-blue:var(--v4-blue,#006d9b);
  --v4-media-deep:var(--v4-blue-deep,#075f8d);
  --v4-media-ink:var(--v4-ink,#102b3c);
  --v4-media-light-solid:#e9f3f8;
  --v4-media-dark-solid:#075f8d;
  --v4-media-line:rgba(18,91,125,.32);
  --v4-media-shadow:0 3px 9px rgba(9,49,70,.12),inset 0 1px 0 rgba(255,255,255,.9);
}

/* Large parents and image surfaces never receive backdrop filters. */
.gallery-controls,
button.gallery-photo[data-lightbox],
button.video-poster[data-video],
#media-dialog{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
button.gallery-photo[data-lightbox],
button.video-poster[data-video]{border-radius:0}

.gallery-controls button[data-gallery-prev],
.gallery-controls button[data-gallery-next],
#media-dialog .media-close,
.v3-experiences .v3-photo-arrow,
.v2-route-card .route-arrow,
.v3-route .route-arrow{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  padding:0;
  border:1px solid var(--v4-media-line);
  border-radius:999px;
  background-color:var(--v4-media-light-solid);
  background-image:linear-gradient(155deg,rgba(255,255,255,.75),rgba(255,255,255,0) 66%);
  color:var(--v4-media-ink);
  box-shadow:var(--v4-media-shadow);
  font-size:23px;
  font-weight:500;
  line-height:1;
  opacity:1;
  transition:transform 160ms ease,background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease;
}
.gallery-controls button[data-gallery-prev],
.gallery-controls button[data-gallery-next],
#media-dialog .media-close{cursor:pointer;touch-action:manipulation}

/* A small visual expansion cue; the photograph remains the existing button. */
button.gallery-photo[data-lightbox]::after{
  content:"↗";
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--v4-media-line);
  border-radius:999px;
  background-color:var(--v4-media-light-solid);
  background-image:linear-gradient(155deg,rgba(255,255,255,.75),rgba(255,255,255,0) 66%);
  color:var(--v4-media-ink);
  box-shadow:var(--v4-media-shadow);
  font-size:22px;
  font-weight:500;
  line-height:1;
  pointer-events:none;
  transition:transform 160ms ease,background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease;
}

button.video-poster[data-video] .video-play{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  padding:0 0 0 2px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  background-color:var(--v4-media-dark-solid);
  background-image:linear-gradient(155deg,rgba(255,255,255,.22),rgba(255,255,255,0) 68%);
  color:#fff;
  box-shadow:0 4px 12px rgba(3,27,40,.25),inset 0 1px 0 rgba(255,255,255,.38);
  font-size:19px;
  line-height:1;
  opacity:1;
  transform:translate(-50%,-50%);
  transition:transform 160ms ease,background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease;
}
button.video-poster[data-video] .video-status{
  background:#102b3c;
  color:#fff;
  border:1px solid rgba(255,255,255,.32);
  border-radius:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Opaque viewer base and backdrop: no full-screen or nested blur. */
#media-dialog{
  background:#102b3c;
  color:#f5fbff;
  border:1px solid #557384;
  border-radius:0;
  box-shadow:0 18px 54px rgba(3,20,30,.32);
}
#media-dialog::backdrop{
  background:rgba(3,20,31,.9);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
#media-dialog .media-dialog__bar{
  background:#102b3c;
  border-bottom:1px solid rgba(225,243,252,.18);
  border-radius:0;
}
#media-dialog .media-dialog__content{background:#102b3c;border-radius:0}
#media-dialog .media-dialog__content>img,
#media-dialog .media-dialog__content>video,
#media-dialog .media-dialog__content>iframe{border-radius:0}
#media-dialog .media-dialog__bar h2{color:#f5fbff}
#media-dialog .media-dialog__caption{color:#e5f2f8}

/* Progressive enhancement is limited to 44–48 px controls. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .gallery-controls button[data-gallery-prev],
  .gallery-controls button[data-gallery-next],
  #media-dialog .media-close,
  .v3-experiences .v3-photo-arrow,
  .v2-route-card .route-arrow,
  .v3-route .route-arrow,
  button.gallery-photo[data-lightbox]::after{
    background-color:var(--v4-glass-light,rgba(232,246,253,.9));
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  button.video-poster[data-video] .video-play{
    background-color:var(--v4-glass-dark,rgba(7,74,107,.9));
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
}

.gallery-controls button[data-gallery-prev]:focus-visible,
.gallery-controls button[data-gallery-next]:focus-visible,
#media-dialog .media-close:focus-visible{
  outline:3px solid var(--v4-media-blue);
  outline-offset:4px;
}
/* Inset double ring stays visible within the horizontally clipped gallery. */
button.gallery-photo[data-lightbox]:focus-visible,
button.video-poster[data-video]:focus-visible{
  outline:3px solid var(--v4-media-blue);
  outline-offset:-3px;
}
button.gallery-photo[data-lightbox]:focus-visible::before,
button.video-poster[data-video]:focus-visible::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:5;
  border:2px solid #fff;
  border-radius:0;
  box-shadow:0 0 0 1px #102b3c;
  pointer-events:none;
}

@media(hover:hover) and (pointer:fine){
  .gallery-controls button[data-gallery-prev]:hover:not(:disabled),
  .gallery-controls button[data-gallery-next]:hover:not(:disabled),
  #media-dialog .media-close:hover{
    transform:translateY(-1px);
    border-color:rgba(0,109,155,.58);
    color:var(--v4-media-deep);
    box-shadow:0 4px 11px rgba(9,49,70,.16),inset 0 1px 0 #fff;
  }
  button.gallery-photo[data-lightbox]:hover::after,
  .v3-experiences .v3-route-link:hover .v3-photo-arrow,
  .v2-route-card>a:hover .route-arrow,
  .v3-route>a:hover .route-arrow{
    transform:translateY(-1px);
    border-color:rgba(0,109,155,.58);
    color:var(--v4-media-deep);
    box-shadow:0 4px 11px rgba(9,49,70,.16),inset 0 1px 0 #fff;
  }
  button.video-poster[data-video]:hover .video-play{
    transform:translate(-50%,-50%) translateY(-1px);
    border-color:rgba(255,255,255,.88);
    box-shadow:0 5px 14px rgba(3,27,40,.26),inset 0 1px 0 rgba(255,255,255,.65);
  }
}

.gallery-controls button[data-gallery-prev]:active:not(:disabled),
.gallery-controls button[data-gallery-next]:active:not(:disabled),
#media-dialog .media-close:active,
button.gallery-photo[data-lightbox]:active::after{
  transform:translateY(0);
  background-color:var(--v4-media-deep);
  background-image:none;
  border-color:#d7edf7;
  color:#fff;
  box-shadow:inset 0 1px 3px rgba(3,27,40,.23);
}
button.video-poster[data-video]:active .video-play{
  transform:translate(-50%,-50%);
  background-color:var(--v4-media-deep);
  background-image:none;
  border-color:#fff;
  color:#fff;
  box-shadow:inset 0 1px 3px rgba(3,27,40,.23);
}
.gallery-controls button[data-gallery-prev]:disabled,
.gallery-controls button[data-gallery-next]:disabled{
  background:#dce9f0;
  color:#526b7a;
  border-color:#b7cad5;
  box-shadow:none;
  opacity:1;
  cursor:default;
  transform:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Keep both focus rings above hover and pressed-state shadows. */
.gallery-controls button[data-gallery-prev]:focus-visible,
.gallery-controls button[data-gallery-next]:focus-visible,
#media-dialog .media-close:focus-visible{
  box-shadow:0 0 0 2px #fff,var(--v4-media-shadow);
}
button.video-poster[data-video]:focus-visible .video-play{
  box-shadow:0 0 0 2px #fff,0 0 0 5px var(--v4-media-blue);
}

@media(max-width:540px){
  .gallery-controls button[data-gallery-prev],
  .gallery-controls button[data-gallery-next]{width:44px;height:44px;min-width:44px;min-height:44px;font-size:21px}
  button.gallery-photo[data-lightbox]::after{top:10px;right:10px}
  .v3-experiences .v3-photo-arrow,
  .v2-route-card .route-arrow,
  .v3-route .route-arrow{width:44px;height:44px;min-width:44px;min-height:44px;font-size:22px}
}
@media(hover:none),(pointer:coarse){
  .gallery-controls button[data-gallery-prev]:hover,
  .gallery-controls button[data-gallery-next]:hover,
  #media-dialog .media-close:hover,
  button.gallery-photo[data-lightbox]:hover::after,
  .v3-experiences .v3-photo-arrow,
  .v2-route-card .route-arrow,
  .v3-route .route-arrow{transform:none}
  button.video-poster[data-video]:hover .video-play{transform:translate(-50%,-50%)}
  button.gallery-photo[data-lightbox]:hover img{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .gallery-controls button[data-gallery-prev],
  .gallery-controls button[data-gallery-next],
  #media-dialog .media-close,
  .v3-experiences .v3-photo-arrow,
  .v2-route-card .route-arrow,
  .v3-route .route-arrow,
  button.gallery-photo[data-lightbox]::after,
  button.video-poster[data-video] .video-play{transition:none}
  .gallery-controls button[data-gallery-prev]:hover,
  .gallery-controls button[data-gallery-next]:hover,
  #media-dialog .media-close:hover,
  button.gallery-photo[data-lightbox]:hover::after,
  .v3-experiences .v3-route-link:hover .v3-photo-arrow,
  .v2-route-card>a:hover .route-arrow,
  .v3-route>a:hover .route-arrow{transform:none}
  button.video-poster[data-video]:hover .video-play{transform:translate(-50%,-50%)}
  button.gallery-photo[data-lightbox] img{transition:none}
  button.gallery-photo[data-lightbox]:hover img{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .gallery-controls button[data-gallery-prev],
  .gallery-controls button[data-gallery-next],
  #media-dialog .media-close,
  .v3-experiences .v3-photo-arrow,
  .v2-route-card .route-arrow,
  .v3-route .route-arrow,
  button.gallery-photo[data-lightbox]::after{
    background-color:var(--v4-media-light-solid);
    background-image:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  button.video-poster[data-video] .video-play{
    background-color:var(--v4-media-dark-solid);
    background-image:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .gallery-controls button[data-gallery-prev]:active:not(:disabled),
  .gallery-controls button[data-gallery-next]:active:not(:disabled),
  #media-dialog .media-close:active,
  button.gallery-photo[data-lightbox]:active::after{background-color:var(--v4-media-deep)}
}