/* "Travel moments" mosaic (partial Template::frontend.blocks.partials.bm-moments, js/bm-moments.js).
   Rounded 16px tiles: a tall tile, two stacked squares, one large tile in the middle, two stacked squares, a tall
   tile (five columns on desktop, the middle one half as wide again, all the same height); two columns below 992px.
   The tile grid runs the full width of the window; the heading is the page's section heading (.sec-head) in the
   content column, drawn the same way here outside the hotel-style pages. */
.bm-mo{padding:26px 0 8px;overflow-x:clip}
.bm-mo .sec-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.bm-mo .sec-head h2{font-family:var(--font-ui,'Poppins',sans-serif);font-size:24px;font-weight:600;line-height:1.3;color:var(--ink,#1d2733);margin:0}
.bm-mo .sec-head .sec-sub{margin:4px 0 0;font-size:12.5px;color:var(--ink-2,#5b6675)}
/* the grid runs the full width of the window with small gutters (the section is outside any .container) */
.bm-mo .mo-wide{width:100%;box-sizing:border-box;padding:0 clamp(16px,2.4vw,40px)}
.bm-mo .mo-grid{--mo-h:clamp(400px,33vw,620px);display:grid;gap:16px;grid-template-rows:repeat(2,calc((var(--mo-h) - 16px) / 2))}
.bm-mo .mo-n7{grid-template-columns:1fr 1fr 1.5fr 1fr 1fr;grid-template-areas:"a b d e g" "a c d f g"}
.bm-mo .mo-n6{grid-template-columns:1fr 1fr 1.5fr 1fr;grid-template-areas:"a b d e" "a c d f"}
.bm-mo .mo-n5{grid-template-columns:1fr 1fr 1.5fr 1fr;grid-template-areas:"a b d e" "a c d e"}
.bm-mo .mo-n4{grid-template-columns:1fr 1fr 1.5fr;grid-template-areas:"a b d" "a c d"}
.bm-mo .mo-a{grid-area:a}.bm-mo .mo-b{grid-area:b}.bm-mo .mo-c{grid-area:c}.bm-mo .mo-d{grid-area:d}
.bm-mo .mo-e{grid-area:e}.bm-mo .mo-f{grid-area:f}.bm-mo .mo-g{grid-area:g}
.bm-mo .mo-tile{position:relative;display:block;overflow:hidden;border-radius:16px;background:#dfe6ee;min-width:0;min-height:0;color:#fff;text-decoration:none}
.bm-mo .mo-tile img,.bm-mo .mo-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.bm-mo a.mo-tile:hover img,.bm-mo a.mo-tile:focus-visible img{transform:scale(1.04)}
.bm-mo .mo-tile:focus-visible{outline:3px solid var(--blue,#0070c0);outline-offset:2px}
.bm-mo .mo-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(to top,rgba(10,18,28,.66),rgba(10,18,28,0));pointer-events:none}
.bm-mo .mo-cap{position:absolute;left:22px;right:18px;bottom:20px;z-index:2;display:block;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.bm-mo .mo-cap b{display:block;font-family:var(--font-ui,'Poppins',sans-serif);font-size:22px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bm-mo .mo-cap small{display:block;font-size:14px;font-weight:500;color:rgba(255,255,255,.9);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-mo .mo-d .mo-cap b{font-size:24px}
.bm-mo .mo-b .mo-cap b,.bm-mo .mo-c .mo-cap b,.bm-mo .mo-e .mo-cap b,.bm-mo .mo-f .mo-cap b{font-size:18px}
.bm-mo .mo-badge{position:absolute;top:20px;left:20px;z-index:2;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--blue,#0070c0);display:grid;place-items:center;font-size:15px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.bm-mo .mo-play{position:absolute;top:50%;left:50%;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#1d2733;display:grid;place-items:center;font-size:15px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.bm-mo .mo-play i{margin-left:3px}
.bm-mo .mo-video.is-playing .mo-play{opacity:0;pointer-events:none}
.bm-mo .mo-video.is-playing:hover .mo-play,.bm-mo .mo-video.is-playing .mo-play:focus-visible{opacity:.9;pointer-events:auto}
.bm-mo .mo-video.is-playing .mo-play i::before{content:"\f04c"}
.bm-mo .mo-noposter{background:linear-gradient(135deg,#24364a,#0f1c2a)}
/* the video dialog (and a photo opened from the mosaic) */
.bm-mo .mo-dlg{position:fixed;inset:0;z-index:1060;background:rgba(8,12,18,.86);display:flex;align-items:center;justify-content:center;padding:16px}
.bm-mo .mo-dlg[hidden]{display:none}
.bm-mo .mo-dlg-box{position:relative;width:min(420px,100%);max-height:92vh}
.bm-mo .mo-dlg-box.wide{width:min(1000px,100%)}
.bm-mo .mo-dlg-frame{position:relative;width:100%;aspect-ratio:9/16;max-height:86vh;border-radius:12px;overflow:hidden;background:#000}
.bm-mo .mo-dlg-box.wide .mo-dlg-frame{aspect-ratio:auto;background:transparent;display:flex;justify-content:center}
.bm-mo .mo-dlg-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bm-mo .mo-dlg-frame img{max-width:100%;max-height:86vh;border-radius:12px;display:block}
.bm-mo .mo-dlg-x{position:absolute;top:-42px;right:0;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:17px;cursor:pointer}
@media (max-width:991px){
  .bm-mo .mo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:none!important;grid-template-rows:none;grid-auto-rows:clamp(130px,24vw,230px);grid-auto-flow:row dense}
  .bm-mo .mo-grid .mo-tile{grid-area:auto}
  /* two columns: tall + two squares, the large tile across, then pairs; a last odd tile runs across */
  .bm-mo .mo-grid .mo-a{grid-row:span 2}
  .bm-mo .mo-grid .mo-d{grid-column:1 / -1;grid-row:span 2}
  .bm-mo .mo-n5 .mo-e,.bm-mo .mo-grid .mo-g{grid-column:1 / -1}
  .bm-mo .mo-cap{left:16px;right:14px;bottom:14px}
  .bm-mo .mo-tile .mo-cap b{font-size:18px}
  .bm-mo .mo-cap small{font-size:13px}
  .bm-mo .mo-badge{top:14px;left:14px;width:32px;height:32px;font-size:13px}
}
@media (max-width:575px){
  .bm-mo .mo-grid{gap:10px;grid-auto-rows:128px}
  .bm-mo .sec-head h2{font-size:20px}
  .bm-mo .mo-cap{left:12px;right:10px;bottom:10px}
  .bm-mo .mo-tile .mo-cap b{font-size:15px}
  .bm-mo .mo-cap small{font-size:12px}
  .bm-mo .mo-badge{width:28px;height:28px;font-size:12px;top:10px;left:10px}
  .bm-mo .mo-tile{border-radius:12px}
}
@media (prefers-reduced-motion:reduce){.bm-mo .mo-tile img{transition:none}.bm-mo a.mo-tile:hover img{transform:none}}