@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */



/* SPLASH PLAY For PANOS © */

/* Responsive container box locking in a 9:6 aspect ratio */
.pano-placeholder {
  position: relative;
  max-width: 500px; /* Keep this or set to your preferred maximum width */
  margin: 0 auto;
  aspect-ratio: 9 / 6; /* Forces a perfect 9:6 shape automatically */
  cursor: pointer;
  overflow: hidden;
  background-color: #fff;
  display: block;
  border: 3px solid #9b968c;
}

/* Force the iframe player to strictly fill the 9:6 box when loaded */
.pano-placeholder iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Make sure the preview image completely fills the 9:6 container */
.pano-preview {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops edges slightly if your JPEG isn't exactly 9:6 */
  transition: opacity 0.3s ease;
    
}

/* Darken the image slightly on hover */
.pano-placeholder:hover .pano-preview {
  opacity: 0.8;
}

/* Center the play button overlay */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #fff;
  pointer-events: none; 
  transition: background 0.3s ease;
  white-space: nowrap; /* Keeps the button text on one line on small screens */
}

/* Light up the button on hover */
.pano-placeholder:hover .play-button {
  background: #007bff; 
}

.play-icon {
  margin-right: 8px;
}