/* =====================================================================
   MyvanCMS — 360 virtual tour viewer
   ---------------------------------------------------------------------
   Styles partials/tour_viewer.php for both modes (third-party embed and
   self-hosted Pannellum panorama). Loaded site-wide from layouts/public.php;
   costs nothing on a page with no .tour element.

   Uses ONLY the tokens palace.css already defines — --pl-brand, --pl-ink,
   --pl-line — so the viewer inherits the site's palette rather than
   introducing a second one.
   ===================================================================== */

.tour{margin:0}

/* --- The frame ------------------------------------------------------
   A fixed 16:9 box via aspect-ratio, so the poster, the iframe and the
   panorama canvas all occupy exactly the same space and the page does not
   reflow when one replaces another. Reserving the box up front is also what
   keeps this section out of the page's CLS score.
   ------------------------------------------------------------------ */
.tour__frame{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:20px;              /* matches .story-figure in palace.css */
  background:var(--pl-ink);
  isolation:isolate;               /* keeps the scrim's blend off the page */
}

.tour__poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Sits over the poster so the button reads against a bright photo. */
.tour__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(23,27,42,.30) 0%, rgba(23,27,42,.55) 100%);
}

/* --- The play affordance -------------------------------------------- */
.tour__play{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  width:100%;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:1rem;
}

.tour__badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.7rem 1.15rem;
  border-radius:999px;
  background:var(--pl-brand);
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  font-size:1.05rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .25s ease, background-color .25s ease;
}

.tour__badge i{font-size:1.15em;line-height:1}

.tour__cta{
  font-size:.95rem;
  font-weight:600;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

.tour__play:hover .tour__badge,
.tour__play:focus-visible .tour__badge{
  transform:scale(1.06);
  background:var(--pl-ink);
}

/* The button fills the frame, so the default focus ring would trace the whole
   box and read as a page-wide outline. Put it on the badge instead. */
.tour__play:focus{outline:none}
.tour__play:focus-visible .tour__badge{outline:3px solid #fff;outline-offset:3px}

/* --- The loaded viewer ---------------------------------------------- */
.tour__stage{position:absolute;inset:0}
.tour__stage iframe{width:100%;height:100%;border:0;display:block}

/* Pannellum mounts its own chrome inside here; it ships its own stylesheet,
   which is only loaded on demand alongside the script. */
.tour__stage .pnlm-container{background:var(--pl-ink);border-radius:0}

.tour.is-loading .tour__badge::after{
  content:"";
  width:1em;height:1em;
  margin-left:.15rem;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  animation:tour-spin .7s linear infinite;
}

@keyframes tour-spin{to{transform:rotate(360deg)}}

/* --- Failure --------------------------------------------------------
   If the script or the provider will not load, the poster stays and this
   line explains why. An empty black box with no message is the one outcome
   worth engineering against.
   ------------------------------------------------------------------ */
.tour__fallback{
  position:absolute;
  left:50%;
  bottom:1rem;
  transform:translateX(-50%);
  margin:0;
  max-width:min(90%, 46ch);
  padding:.55rem .9rem;
  border-radius:10px;
  background:rgba(23,27,42,.88);
  color:#fff;
  font-size:.85rem;
  text-align:center;
}

.tour__caption{
  margin:.85rem 0 0;
  color:#5c5560;
  font-size:.92rem;
}

/* --- Small screens ---------------------------------------------------
   4:3 rather than 16:9 below 576px: a 360 view is about looking around a
   space, and a letterbox on a narrow screen leaves too little vertical
   field for that to feel like anything.
   ------------------------------------------------------------------ */
@media (max-width:575.98px){
  .tour__frame{aspect-ratio:4/3;border-radius:14px}
  .tour__badge{font-size:.95rem;padding:.6rem 1rem}
  .tour__cta{font-size:.85rem}
}

@media (prefers-reduced-motion:reduce){
  .tour__badge{transition:none}
  .tour__play:hover .tour__badge,
  .tour__play:focus-visible .tour__badge{transform:none}
  .tour.is-loading .tour__badge::after{animation:none}
}

/* =====================================================================
   The "360" pill on a listing card (public/_project_card.php).
   Positioned against .project-card__media, opposite the existing type and
   status badges so the three never collide.
   ===================================================================== */
.project-card__360{
  position:absolute;
  right:.75rem;
  bottom:.75rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.3rem .6rem;
  border-radius:999px;
  background:rgba(23,27,42,.82);
  color:#fff;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  pointer-events:none;         /* the whole card is the link */
  backdrop-filter:blur(3px);
}

.project-card__360 i{font-size:1em;line-height:1}

/* =====================================================================
   Home page "Explore in 360" teaser card. A link, not a viewer — see the
   section comment in public/home.php.
   ===================================================================== */
.tour-teaser{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  height:100%;
}

.tour-teaser__media{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:20px;
  aspect-ratio:16/11;
  background:var(--pl-brand-soft);
}

.tour-teaser__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}

.tour-teaser:hover .tour-teaser__media img,
.tour-teaser:focus-visible .tour-teaser__media img{transform:scale(1.06)}

.tour-teaser__badge{
  position:absolute;
  left:.85rem;
  top:.85rem;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:var(--pl-brand);
  color:#fff;
  font-size:.76rem;
  font-weight:700;
  line-height:1;
}

.tour-teaser__body{display:block;padding:.9rem .2rem 0}

.tour-teaser__name{
  display:block;
  font-weight:700;
  color:var(--pl-ink);
  transition:color .2s ease;
}

.tour-teaser:hover .tour-teaser__name{color:var(--pl-brand)}

.tour-teaser__loc{
  display:block;
  margin-top:.2rem;
  font-size:.86rem;
  color:#5c5560;
}

@media (prefers-reduced-motion:reduce){
  .tour-teaser__media img{transition:none}
  .tour-teaser:hover .tour-teaser__media img,
  .tour-teaser:focus-visible .tour-teaser__media img{transform:none}
  .tour-teaser__name{transition:none}
}

/* A small inline "360" button inside a unit-type card. */
.utype-360{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:.6rem;
  padding:.35rem .75rem;
  border:1px solid var(--pl-line);
  border-radius:999px;
  background:transparent;
  color:var(--pl-brand);
  font-size:.8rem;
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}

.utype-360:hover,
.utype-360:focus-visible{background:var(--pl-brand);color:#fff}

@media (prefers-reduced-motion:reduce){
  .utype-360{transition:none}
}