.stay-media { margin: 0 0 8px; }
.stay-media-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 8px; border-radius: 16px; overflow: hidden; height: clamp(300px, 36vw, 510px); background: #e9eae4; }
.stay-media-grid.has-side-photos { grid-template-columns: 1.8fr 1fr; }
.stay-media-cover, .stay-media-side a { display: block; position: relative; min-width: 0; min-height: 0; overflow: hidden; cursor: zoom-in; }
.stay-media-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.stay-media-cover:hover img, .stay-media-side a:hover img { transform: scale(1.025); filter: brightness(.96); }
.stay-media-cover:focus-visible, .stay-media-side a:focus-visible { outline-offset: -5px; z-index: 2; }
.stay-media-side { display: grid; grid-auto-rows: 1fr; gap: 8px; min-height: 0; }
.media-cover-hint { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 7px; background: #142d35bf; backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; }
.media-cover-hint svg { width: 16px; height: 16px; }
.stay-media-actions { position: absolute; bottom: 20px; right: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; pointer-events: none; }
.media-action { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 16px; border: 1px solid #ffffffb3; border-radius: 8px; background: #fffffff5; color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 3px 18px #102c3a26; }
.media-action:hover { background: #fff0e7; }
.media-action svg { width: 17px; height: 17px; }
.media-action>span { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 4px; background: #eef0e9; }
.media-action-video { background: #153d45ed; color: #fff; border-color: #ffffff40; }
.media-action-video:hover { background: #23545c; }
.media-action-video>span { background: #ffffff26; }
.stay-media-caption { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 10px; margin: 13px 1px 11px; }
.stay-media-caption>span:first-child { display: flex; align-items: center; gap: 5px; }
.stay-media-caption strong { color: var(--ink); font-weight: 700; }
.stay-media-thumbs { display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 7px; }
.stay-media-thumb { flex: 0 0 96px; height: 68px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #eef0e9; }
.stay-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stay-media-thumb:hover { outline: 2px solid var(--coral); outline-offset: 2px; }
.stay-media-thumb.is-video, .viewer-thumb.is-video { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; color: #fff; background: #28484f; font-size: 9px; }
.stay-media-thumb.is-video svg, .viewer-thumb.is-video svg { width: 22px; height: 22px; fill: #ffffff20; }
body.gallery-open { overflow: hidden; }
.media-viewer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; color: #fff; background: #10272eeF; backdrop-filter: blur(20px); overflow: hidden; }
.media-viewer::backdrop { background: #0c2029e8; }
.media-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.media-viewer-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 32px; border-bottom: 1px solid #ffffff12; }
.media-viewer-header>div:first-child { min-width: 0; }
.media-viewer-header>div>span { display: block; color: #b8c8c5; font-size: 8px; letter-spacing: 2px; font-weight: 700; margin-bottom: 5px; }
.media-viewer-header h2 { font: 600 19px/1.35 var(--sans); letter-spacing: -.3px; color: #fff; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.media-viewer-tools { display: flex; gap: 10px; flex-shrink: 0; }
.media-tool, .media-step { display: inline-flex; justify-content: center; align-items: center; background: #ffffff0d; border: 1px solid #ffffff26; border-radius: 8px; color: #fff; min-width: 46px; min-height: 46px; gap: 8px; padding: 11px; }
.media-tool>span { font-size: 11px; }
.media-tool svg { width: 20px; height: 20px; }
.media-tool:hover, .media-step:hover { background: #ffffff20; }
.media-tool:focus-visible, .media-step:focus-visible, .viewer-thumb:focus-visible { outline: 2px solid #eebf91; outline-offset: 3px; }
.media-tool[aria-pressed=true] { background: #fff; color: #183e45; }
.media-viewer-body { min-height: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 20px; align-items: center; padding: 18px 24px; }
.media-step { justify-self: center; width: 46px; height: 46px; border-radius: 50%; }
.media-previous { grid-column: 1; grid-row: 1; }
.media-next { grid-column: 3; grid-row: 1; }
.media-viewer-stage { grid-column: 2; grid-row: 1; position: relative; height: 100%; min-height: 0; min-width: 0; overflow: auto; display: flex; align-items: center; justify-content: center; border-radius: 7px; touch-action: pan-y pinch-zoom; }
.media-viewer-image { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; cursor: zoom-in; }
.media-viewer-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 7px; }
.media-viewer-stage.is-zoomed { display: block; touch-action: pan-x pan-y pinch-zoom; }
.media-viewer-stage.is-zoomed .media-viewer-image { max-width: none; max-height: none; width: 200%; height: auto; margin: 0; cursor: zoom-out; }
.media-viewer [hidden] { display: none !important; }
.media-load-error { position: absolute; bottom: 20px; left: 15px; right: 15px; border-radius: 7px; background: #0d242fee; padding: 18px; text-align: center; color: #fff; font-size: 13px; }
.media-load-error>a { display: inline-block; text-decoration: underline; margin-left: 8px; }
.media-viewer-footer { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 2px 24px 14px; font-size: 11px; color: #c7d3d2; }
.media-viewer-footer p { margin: 0; color: #fff; font-size: 12px; }
.media-keyboard-hint { font-size: 10px; color: #97afae; }
.media-keyboard-hint>span { margin: 0 7px; }
.media-viewer-thumbs { display: flex; gap: 9px; overflow-x: auto; padding: 8px 24px 22px; min-height: 100px; border-top: 1px solid #ffffff12; scrollbar-color: #577477 transparent; }
.viewer-thumb { flex: 0 0 86px; width: 86px; height: 62px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; opacity: .55; }
.viewer-thumb:first-child { margin-left: auto; }
.viewer-thumb:last-child { margin-right: auto; }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer-thumb[aria-pressed=true] { opacity: 1; border-color: #f4c1a9; }
.viewer-thumb:hover { opacity: 1; }
@media (max-width: 760px) {
    .stay-media-grid { height: 350px; border-radius: 11px; }
    .stay-media-grid.has-side-photos { grid-template-columns: 1fr; }
    .stay-media-side { display: none; }
    .media-cover-hint { left: 12px; top: 12px; font-size: 9px; padding: 9px 11px; }
    .stay-media-actions { right: 12px; left: 12px; bottom: 12px; gap: 6px; }
    .media-action { font-size: 10px; padding: 11px 12px; gap: 7px; }
    .stay-media-caption { font-size: 9px; gap: 6px; }
    .stay-media-caption>span:last-child { font-size: 8px; }
    .stay-media-thumb { flex-basis: 80px; height: 58px; }
    .media-viewer-header { padding: max(16px, env(safe-area-inset-top)) 16px 15px; gap: 12px; }
    .media-viewer-header h2 { font-size: 16px; }
    .media-viewer-header>div>span { font-size: 7px; }
    .media-viewer-tools { gap: 7px; }
    .media-tool { min-width: 44px; min-height: 44px; padding: 10px; }
    .media-tool>span { display: none; }
    .media-viewer-body { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) 44px; gap: 16px; padding: 14px 14px 10px; }
    .media-viewer-body.is-single-media { grid-template-rows: minmax(0, 1fr); }
    .media-viewer-stage { grid-column: 1/-1; grid-row: 1; border-radius: 4px; }
    .media-step { width: 44px; height: 44px; }
    .media-previous { grid-column: 1; grid-row: 2; justify-self: end; }
    .media-next { grid-column: 2; grid-row: 2; justify-self: start; }
    .media-viewer-footer { padding: 5px 16px 10px; }
    .media-keyboard-hint { display: none; }
    .media-viewer-thumbs { min-height: 88px; padding: 9px 16px max(15px, env(safe-area-inset-bottom)); gap: 8px; }
    .viewer-thumb { flex-basis: 74px; width: 74px; height: 54px; }
    .media-load-error { font-size: 11px; bottom: 8px; padding: 12px; }
}
@media (max-width: 400px) {
    .stay-media-grid { height: 300px; }
    .media-action { font-size: 9px; padding: 10px; }
    .media-action svg { width: 15px; height: 15px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .media-viewer-header { padding: 8px 20px; }
    .media-viewer-header>div>span, .media-viewer-thumbs { display: none; }
    .media-viewer-body { grid-template-columns: 48px minmax(0,1fr) 48px; grid-template-rows: minmax(0,1fr); padding: 8px 16px; gap: 12px; }
    .media-viewer-stage { grid-column: 2; }
    .media-previous { grid-column: 1; grid-row: 1; }
    .media-next { grid-column: 3; grid-row: 1; }
    .media-viewer-footer { padding: 5px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .stay-media-grid img { transition: none; }
}