/* Gallery layout matched to the existing room listing. */

.room-gallery{
    --gallery-brown:var(--brand);
    --gallery-brown-dark:#684729;
    width:min(1440px, calc(100vw - 40px));
    max-width:none;
    height:min(810px, calc(100dvh - 48px));
    max-height:none;
    padding:0;
    border:0;
    border-radius:7px;
    background:#fff;
    box-shadow:0 18px 60px rgba(0,0,0,.3);
    color:var(--gallery-brown-dark);
    overflow:hidden;
}
.room-gallery::backdrop{background:rgba(0,0,0,.72)}
.room-gallery__shell{display:flex;flex-direction:column;height:100%;min-height:0}
.room-gallery__header{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    padding:7px 15px 7px 24px;
}
.room-gallery__mode{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:none;
    padding:4px 10px;
    border:1px solid rgba(133,95,57,.32);
    border-radius:20px;
    background:#fff;
    color:var(--gallery-brown);
    font-size:12px;
    font-weight:600;
    line-height:1;
}
.room-gallery__title{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin:0;
    color:var(--gallery-brown-dark);
    font-size:14px;
    font-weight:600;
    text-align:center;
}
.room-gallery__actions{display:flex;align-items:center;gap:9px;flex:none}
.room-gallery__availability{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 12px;
    border-radius:18px;
    border:1px solid rgba(133,95,57,.28);
    background:#f3eae0;
    color:var(--gallery-brown-dark);
    font-size:12px;
    font-weight:600;
    line-height:1.1;
    text-decoration:none;
}
.room-gallery__availability:hover{background:#e9dac9;color:var(--gallery-brown-dark)}
.room-gallery__close{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    color:var(--gallery-brown);
    font-size:16px;
}
.room-gallery__tabs{
    display:flex;
    align-items:stretch;
    gap:4px;
    flex:none;
    min-height:34px;
    padding:0 13px;
    border-bottom:1px solid #e5e8ee;
    box-shadow:0 2px 4px rgba(0,0,0,.08);
    color:var(--gallery-brown);
    font-size:12px;
    font-weight:600;
    overflow-x:auto;
    z-index:1;
}
.room-gallery__tab{
    flex:none;
    padding:8px 13px;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:var(--gallery-brown-dark);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}
.room-gallery__tab:hover{background:#f8f2eb;color:var(--gallery-brown)}
.room-gallery__tab.is-active{border-bottom-color:var(--gallery-brown);color:var(--gallery-brown)}
.room-gallery__panel{display:flex;flex-direction:column;flex:1;min-height:0}
.room-gallery__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:clamp(150px,22vw,310px);
    gap:9px;
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:8px 9px 20px;
    align-content:start;
}
.room-gallery [hidden]{display:none!important}
.room-gallery__tile,.room-gallery__thumb{border:0;padding:0;overflow:hidden;cursor:pointer}
.room-gallery__tile{border-radius:3px;background:#eee9e2;box-shadow:0 1px 5px rgba(0,0,0,.18)}
.room-gallery__tile img{display:block;width:100%;height:100%;object-fit:cover}
.room-gallery__tile:hover img{transform:scale(1.025)}
.room-gallery__tile img{transition:transform .2s ease}
.room-gallery__viewer{display:flex;flex-direction:column;flex:1;min-height:0;background:#2b241e}
.room-gallery__stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden}
.room-gallery__stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.room-gallery__arrow{
    position:absolute;
    top:50%;
    z-index:1;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    padding:0;
    transform:translateY(-50%);
    border:0;
    border-radius:50%;
    background:#fff;
    color:var(--gallery-brown-dark);
    box-shadow:0 2px 5px rgba(0,0,0,.22);
}
.room-gallery__arrow--prev{left:7px}
.room-gallery__arrow--next{right:7px}
.room-gallery__filmstrip{
    display:flex;
    align-items:center;
    gap:8px;
    flex:none;
    height:68px;
    padding:7px 14px;
    overflow-x:auto;
    background:#201a15;
}
.room-gallery__thumb{width:73px;height:48px;flex:none;border-radius:2px;opacity:.75}
.room-gallery__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.room-gallery__thumb.is-active{outline:2px solid #bb8b58;outline-offset:-2px;opacity:1}
.room-gallery button:focus-visible,.room-gallery a:focus-visible{outline:3px solid var(--gallery-brown);outline-offset:2px}
@media(max-width:700px){
    .room-gallery{width:calc(100vw - 36px);}
    .room-gallery__header{padding-inline:10px;gap:6px}
    .room-gallery__title{font-size:12px}
    .room-gallery__availability{max-width:110px;text-align:center;font-size:11px}
    .room-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,35vw,210px)}
}
@media(max-width:430px){
    .room-gallery__title{display:none}
    .room-gallery__actions{margin-left:auto}
}