/* ============================================================
   360° VIRTUAL TOUR — Pannellum wrapper styling
   ============================================================ */
.tour-stage { position: relative; width: 100%; height: clamp(460px, 88svh, 900px); background: #07100a; overflow: hidden; }
.tour-stage::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 130px; background: linear-gradient(rgba(7,16,10,0.55), transparent); z-index: 5; pointer-events: none; }
#panorama { width: 100%; height: 100%; }
#panorama .pnlm-load-box { background: rgba(7,16,10,0.7); }

/* scene label */
.tour-scene { position: absolute; top: 96px; left: var(--gutter); z-index: 6; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.tour-scene .eyebrow { color: var(--gold-300); }
.tour-scene .eyebrow::before { background: var(--gold-300); }
.tour-scene h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 52px); color: #fff; line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,0.5); }

/* drag hint */
.tour-hint { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 10px; background: rgba(7,16,10,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(6px); padding: 10px 18px; border-radius: var(--r-pill); font-size: 13.5px; transition: opacity .6s; pointer-events: none; }
.tour-hint svg { width: 18px; height: 18px; color: var(--gold-300); animation: tour-sway 2.4s ease-in-out infinite; }
@keyframes tour-sway { 0%,100%{ transform: translateX(-5px);} 50%{ transform: translateX(5px);} }
@media (prefers-reduced-motion: reduce){ .tour-hint svg { animation: none; } }

/* scene rail */
.tour-rail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 10px; overflow-x: auto; padding: 16px var(--gutter) 18px; background: linear-gradient(transparent, rgba(7,16,10,0.78)); scrollbar-width: thin; }
.tour-rail::-webkit-scrollbar { height: 6px; }
.tour-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
.tour-thumb { flex: none; width: 132px; height: 82px; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,255,255,0.25); cursor: pointer; position: relative; padding: 0; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.tour-thumb:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.6); }
.tour-thumb.active { border-color: var(--gold-400); }
.tour-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 11px; font-weight: 600; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,0.8)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-thumb.active span { color: var(--gold-300); }

/* badge top-right */
.tour-badge { position: absolute; top: 96px; right: var(--gutter); z-index: 6; display: inline-flex; align-items: center; gap: 9px; background: rgba(7,16,10,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(6px); padding: 9px 15px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; }
.tour-badge svg { width: 16px; height: 16px; color: var(--gold-300); }

/* intro below */
.tour-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.tour-intro h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; }
.tour-intro p { color: var(--text-soft); font-size: 16px; margin-top: 16px; max-width: 52ch; }
.tour-scenes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tour-scenes-list div { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); }
.tour-scenes-list svg { width: 17px; height: 17px; color: var(--brand); flex: none; }

@media (max-width: 760px) {
  .tour-scene h2 { font-size: 26px; }
  .tour-scene { top: 80px; }
  .tour-badge { display: none; }
  .tour-intro { grid-template-columns: 1fr; }
  .tour-hint { bottom: 140px; }
}