/* B&B Pilella: three small tour invitations instead of one big card, one for each room. They come in one after the other,
   right after the opening (js/hero.js shows and hides the group); each opens the tour of its room in a new tab. */
.tour-pop.tour-pops { width: auto; right: 24px; bottom: 24px; display: grid; gap: 10px; justify-items: end; border-radius: 0; overflow: visible; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.tour-pops-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(26, 19, 14, .82); color: #f6efe3;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .5); font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.tour-pops-head .tour-pop-x { position: static; width: 28px; height: 28px; }
.tour-mini { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px; width: 288px; padding: 8px 14px 8px 8px; border-radius: 20px;
  background: rgba(26, 19, 14, .86); color: #f6efe3; text-decoration: none; -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(230, 211, 184, .16);
  opacity: 0; transform: translateX(24px) scale(.96); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .4s; }
.tour-pop.on .tour-mini { opacity: 1; transform: none; }
.tour-pop.on .tour-mini:nth-of-type(1) { transition-delay: .1s; }
.tour-pop.on .tour-mini:nth-of-type(2) { transition-delay: .25s; }
.tour-pop.on .tour-mini:nth-of-type(3) { transition-delay: .4s; }
.tour-mini:hover { box-shadow: 0 22px 46px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(230, 211, 184, .45); }
.tour-mini-pic { position: relative; display: block; height: 66px; border-radius: 14px; overflow: hidden; }
.tour-mini-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tour-mini:hover .tour-mini-pic img { transform: scale(1.1); }
.tour-mini-pic i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(246, 239, 227, .9); color: #2a2017; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.tour-mini-pic svg { width: 11px; height: 11px; margin-left: 2px; fill: currentColor; }
.tour-mini b { display: block; font: 400 10px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #e6d3b8; }
.tour-mini strong { display: block; margin-top: 4px; font: 700 23px/1.05 var(--serif); color: #f6efe3; }
.tour-pill { border: 0; cursor: pointer; }
@media (max-width: 759px) {
  .tour-pop.tour-pops { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; transform: none; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: stretch; }
  .tour-pop.tour-pops.on { transform: none; }
  .tour-pops-head { grid-column: 1 / -1; justify-self: center; }
  .tour-mini { width: auto; grid-template-columns: 1fr; gap: 6px; padding: 6px 6px 10px; text-align: center; border-radius: 16px; transform: translateY(18px) scale(.96); }
  .tour-mini-pic { height: 64px; border-radius: 11px; }
  .tour-mini b { font-size: 9px; letter-spacing: .14em; }
  .tour-mini strong { font-size: 18px; }
}