/* ===========================
   Virtual Tour
   =========================== */

body { margin: 0; font-family: Arial, sans-serif; background:#fff; color:#000; }
.container-narrow { margin: 0 auto; padding: 3rem; }

.vt-header { display:flex; align-items:center; }
.vt-title  { margin:0; padding:2.25rem 0 1.25rem; font-size:1.8rem; font-weight:800; text-transform:uppercase; }
.vt-dot    { width:1.6rem; height:1.6rem; border-radius:50%; background:#C14E42; display:inline-block; margin-left:.5rem; }

.vt-rule   { border:none; border-top:1px solid #cfcfcf; }

/* Hero */
.vt-hero        { width:100%; }
.vt-hero-figure { margin:0; position:relative; }
.vt-hero-img    { width:100%; height:auto; display:block; }

/* Overlay / play */
.vt-overlay {
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;         /* allow clicks only on the anchor */
}

.vt-play-btn {
  position:absolute;
  width:200px; height:200px;   /* click target around the circle */
  border-radius:50%;
  pointer-events:auto;         /* clickable */
  text-decoration:none;
  /* invisible layer over the circle/triangle to make the whole area clickable */
}

/* Rotating text circle */
.vt-circle {
  width: 260px; height: 260px;
  animation: vt-rotate 12s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.vt-circle-text {
  font-size: 14px;
  letter-spacing: .2em;
  fill: #ffffff;
  text-transform: uppercase;
  font-weight: 800;
}

/* Triangle play icon in the middle */
.vt-play-triangle {
  position:absolute;
  width: 0; height: 0;
  border-left: 28px solid #fff;     /* triangle color */
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  transform: translateX(6px);       /* optical centering */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Copy under image */
.vt-copy { padding: 3rem; }
.vt-copy p { line-height: 1.75; color:#222; }

/* Animation */
@keyframes vt-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 900px) {
  .container-narrow { padding: 2rem; }
  .vt-circle { width: 220px; height: 220px; }
  .vt-play-btn { width: 170px; height: 170px; }
  .vt-play-triangle { border-left-width: 24px; border-top-width: 15px; border-bottom-width: 15px; }
}
@media (max-width: 600px) {
  .vt-circle { width: 200px; height: 200px; }
  .vt-play-btn { width: 150px; height: 150px; }
  .vt-play-triangle { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
}