/* The tour opens on the same quiet surface as the architecture portfolio. */
@media (min-width: 1281px) {
  .header .navigation[data-villa-tour-nav] { gap: 16px; }
  .header .navigation[data-villa-tour-nav] a { white-space: nowrap; }
}

.villa-360-page {
  background: var(--paper, #eeece5);
  color: var(--ink, #252729);
}
.villa-360-page .header,
.villa-360-page .header.is-fixed {
  position: relative;
  height: 80px;
  background: var(--paper, #eeece5);
  color: var(--ink, #252729);
  border-bottom: 1px solid var(--line, #cbc7bd);
}
.villa-360-page main { padding: 0; }
.villa-360-heading {
  padding: 18px clamp(24px, 3.5vw, 70px) 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 30px;
}
.villa-360-heading h1 {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.villa-360-heading p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #252729);
}
.villa-360-module { width: 100%; background: #252729; }
.villa-360-module iframe {
  display: block;
  width: 100%;
  height: var(--villa-tour-height, calc(100vh - 180px));
  height: var(--villa-tour-height, calc(100dvh - 180px));
  min-height: 260px;
  border: 0;
}
.villa-360-after {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 30px;
  padding: 25px clamp(24px, 3.5vw, 70px) 30px;
}
.villa-360-after p { margin: 0; font-size: 14px; line-height: 1.65; }
.villa-360-after .quiet-link { font-size: 14px; }
.villa-360-page .footer { margin-top: 0; }
.villa-360-heading .villa-tour-back { font-size: 13px; line-height: 1.5; color: var(--ink, #252729); }
.villa-tour-expanded { overflow: hidden; }
.villa-tour-expanded .villa-360-module {
  position: fixed; inset: 0; z-index: 10000;
  width: 100vw; height: 100vh; width: 100dvw; height: 100dvh;
}
.villa-tour-expanded .villa-360-module iframe { width: 100%; height: 100%; min-height: 0; }

/* An open site menu takes its own row and never covers the panorama. */
@media (max-width: 1280px) {
  .villa-360-page .header,
  .villa-360-page .header.is-fixed {
    display: grid;
    grid-template-columns: 1fr auto;
    height: auto;
    min-height: 80px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .villa-360-page .wordmark { grid-column: 1; grid-row: 1; }
  .villa-360-page .menu-toggle { grid-column: 2; grid-row: 1; }
  .villa-360-page .navigation,
  .villa-360-page .header.is-fixed .navigation {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
    padding: 12px 0 0;
    border-bottom: 0;
  }
  .villa-360-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (max-width: 700px) {
  .villa-360-page .header,
  .villa-360-page .header.is-fixed { min-height: 70px; padding-top: 11px; padding-bottom: 11px; }
  .villa-360-heading { padding-top: 16px; padding-bottom: 17px; }
  .villa-360-heading h1 { font-size: 26px; }
  .villa-360-heading p { font-size: 13px; }
  .villa-360-after { padding-top: 20px; padding-bottom: 25px; }
}