/* "La casa": all the photos as a grid, starting with the chosen place (js/galleria.js) */
.gal { position: fixed; inset: 0; z-index: 250; perspective: 1400px; }
.gal-back { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 25%, rgba(36, 27, 19, .97), rgba(15, 11, 8, .995)); }
.gal-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 104px var(--gut) 70px; }
.gal-in { max-width: 1280px; margin: 0 auto; }
.gal-head { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gut) 26px;
  background: linear-gradient(180deg, rgba(19, 14, 10, .96) 55%, rgba(19, 14, 10, 0)); pointer-events: none; }
.gal-head > * { pointer-events: auto; }
.gal-head .over { margin: 0 0 6px; }
.gal-head h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); }
.gal-sec { margin: 0 0 50px; }
.gal-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(230, 211, 184, .12); }
.gal-h .over { margin: 0 0 6px; min-height: 1em; }
.gal-h h3 { margin: 0; font-size: clamp(28px, 2.6vw, 36px); }
.gal-h span { flex: none; font: 400 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gal-tile { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #1f1711; cursor: zoom-in;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transform-origin: 50% 100%; }
.gal-tile.big { grid-column: span 2; grid-row: span 2; }
.gal-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; }
.gal-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(230, 211, 184, 0); transition: box-shadow .5s; pointer-events: none; }
.gal-tile:hover img, .gal-tile:focus-visible img { transform: scale(1.07); }
.gal-tile:hover::after, .gal-tile:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(230, 211, 184, .7); }
.gal-ghost { position: absolute; z-index: 3; top: 0; left: 0; object-fit: cover; box-shadow: 0 40px 100px rgba(0, 0, 0, .7); pointer-events: none; will-change: transform, width, height; }
.gal-sheen { position: absolute; z-index: 4; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(100deg, transparent 35%, rgba(246, 234, 214, .85) 50%, transparent 65%); }
.gal-open { overflow: hidden; }
@media (max-width: 759px) {
  .gal-scroll { padding: 92px 12px 50px; }
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gal-tile { border-radius: 12px; }
  .gal-tile.big { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .gal-sec { margin-bottom: 38px; }
}

/* B&B Pilella: the grid is dark on the light site, so it sets its own colours */
.gal { --ink: #f6efe3; --gold: #c9a982; --gold-hi: #e6d3b8; --muted: rgba(246, 239, 227, .7); color: #f6efe3; }
.gal .over { color: #e6d3b8; }
.gal h2, .gal h3 { color: #f6efe3; }
.gal .gal-x { background: rgba(246, 239, 227, .12); color: #f6efe3; box-shadow: inset 0 0 0 1px rgba(246, 239, 227, .32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* B&B Pilella: every room has its own gallery colours (data-room is set when the gallery opens) */
.gal[data-room="avorio"] { --gb1: #f4ead9; --gb2: #e6d6bb; --gink: #3b2f22; --gacc: #8a6a3f; }
.gal[data-room="perla"] { --gb1: #eef0f3; --gb2: #d6dbe2; --gink: #2c3440; --gacc: #6b7a8f; }
.gal[data-room="bianca"] { --gb1: #ffffff; --gb2: #efede8; --gink: #34302b; --gacc: #9a8e7c; }
.gal[data-room] .gal-back { background: radial-gradient(120% 90% at 50% 20%, var(--gb1), var(--gb2)); }
.gal[data-room] .gal-head { background: linear-gradient(180deg, var(--gb1) 55%, rgba(255, 255, 255, 0)); }
.gal[data-room] { --ink: var(--gink); color: var(--gink); }
.gal[data-room] h2, .gal[data-room] h3 { color: var(--gink); }
.gal[data-room] .over, .gal[data-room] .gal-h span { color: var(--gacc); }
.gal[data-room] .gal-h { border-bottom-color: color-mix(in srgb, var(--gacc) 30%, transparent); }
.gal[data-room] .gal-x { background: rgba(255, 255, 255, .7); color: var(--gink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gacc) 40%, transparent); }
.gal[data-room] .gal-tile { box-shadow: 0 16px 34px -12px rgba(60, 45, 30, .35); background: var(--gb2); }