/* ==========================================================================
   Multimedia (multimedia.html): page-specific layout only; components come from
   components.css. Sections: hero (title, line, 360° tour button),
   photos (room filters, contact-sheet grid, "Show more"), 360° tour.
   The 360° tour block (.tour-x, .pano) moved here from studio.css on 19 Oct 2026.
   Contextual tokens (--fg, --rule, --accent…) so themed sections work.
   ========================================================================== */

/* ---- Hero ----------------------------------------------------------------- */
.mm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5.5rem));
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
  background: var(--ink); color: var(--cream);
}
.mm-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 40% at 88% 8%, rgba(124, 204, 191, .13), transparent 70%),
    radial-gradient(50% 45% at 4% 62%, rgba(255, 106, 43, .14), transparent 72%);
}
.mm-hero__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  align-items: end; gap: 1.5rem clamp(2rem, 5vw, 6rem);
}
.mm-hero__intro { display: grid; gap: 1.5rem; padding-bottom: .9rem; }
.mm-hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: rgba(243, 235, 224, .84); max-width: 34ch; }
.mm-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 1100px) {
  .mm-hero__head { grid-template-columns: 1fr; }
  .mm-hero__intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .mm-hero { padding-top: calc(var(--header-h) + 2.25rem); }
  .mm-hero__intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .mm-hero__ctas .btn { flex: 1 1 auto; }
}

/* ---- Photos ------------------------------------------------------------------- */
.mm-photos { padding-top: clamp(2rem, 4vw, 3.5rem); }
.mm-photos__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* filters + count */
.mm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.mm-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.mm-bar__status { margin: 0; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* the contact sheet: uniform 3:2 frames (portrait photos are cropped here, shown whole in the lightbox) */
.mm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, .9rem); }
/* with JS the grid shows 20 photos at a time (multimedia.js marks it .is-paged once it has done so); until
   then the photos after the first 20 stay out of the layout, so the browser does not lazy-load them while
   the deferred scripts download. Without JS (no .js flag) every photo shows. */
.js .mm-grid:not(.is-paged) > .mm-photo:nth-child(n+21) { display: none; }
.mm-photo__link { display: block; border-radius: var(--r-xs); }
.mm-photo__link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(243, 235, 224, .06);
}
.mm-more { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

@media (max-width: 1279px) { .mm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .mm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .mm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  /* one row of filters that scrolls sideways, edge to edge */
  .mm-filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); width: calc(100% + var(--gutter) * 2);
  }
  .mm-filters::-webkit-scrollbar { display: none; }
  .mm-filters .chip { flex: none; }
  .mm-more .btn { width: 100%; }
}

/* ---- 360 tour --------------------------------------------------------------------- */
/* the photos above are dark too (the cream videos section that sat between them went on 20 Oct 2026): a hairline marks the new section */
.tour-x { background: var(--ink); border-top: 1px solid var(--rule); padding-bottom: clamp(4rem, 7vw, 7rem); }
.tour-x__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 1.25rem clamp(2rem, 5vw, 6rem); margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.tour-x__title { max-width: 14ch; }
.tour-x__aside { color: var(--muted); max-width: 42ch; justify-self: end; }
@media (max-width: 900px) { .tour-x__head { grid-template-columns: 1fr; } .tour-x__aside { justify-self: start; } }
.pano {
  position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%;
  aspect-ratio: 2.35 / 1; border-radius: var(--r-sm); color: var(--cream); background: var(--ink-3);
  box-shadow: var(--shadow-2);
}
.pano__viewport { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pano__img {
  position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none;
  transform: translateX(-50%);
  filter: brightness(.6) saturate(.88) contrast(1.05);
  transition: filter .7s;
}
.pano.is-live .pano__img { left: 0; transform: none; will-change: transform; }
.pano:hover .pano__img, .pano:focus-visible .pano__img { filter: brightness(.74) saturate(1); }
.pano::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 13, 12, .35), transparent 35%, transparent 55%, rgba(15, 13, 12, .82)),
              radial-gradient(70% 90% at 50% 50%, transparent 50%, rgba(8, 6, 5, .45));
}
.pano__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(167, 233, 220, .35) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(167, 233, 220, .2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
.pano__ruler {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 1; pointer-events: none; opacity: .55;
  background:
    repeating-linear-gradient(90deg, rgba(243, 235, 224, .55) 0 1px, transparent 1px 60px) 0 100% / auto 14px repeat-x,
    repeating-linear-gradient(90deg, rgba(243, 235, 224, .3) 0 1px, transparent 1px 12px) 0 100% / auto 6px repeat-x;
}
.pano__center {
  position: absolute; left: 50%; top: 47%; z-index: 2; width: clamp(120px, 12vw, 180px); aspect-ratio: 1;
  transform: translate(-50%, -50%); display: grid; place-items: center;
}
.pano__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(167, 233, 220, .7);
  box-shadow: 0 0 0 10px rgba(124, 204, 191, .06), inset 0 0 40px rgba(124, 204, 191, .15);
}
.pano__ring::before { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 12px var(--hot); }
.pano__core {
  display: grid; place-items: center; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: var(--mint); color: var(--ink); font-size: clamp(1.35rem, 2vw, 1.9rem); letter-spacing: -.03em;
  box-shadow: 0 0 60px rgba(124, 204, 191, .45);
  transition: transform .6s var(--ease-out), background-color .4s;
}
.pano:hover .pano__core, .pano:focus-visible .pano__core { transform: scale(1.1); background: var(--cream); }
.pano__label {
  position: absolute; left: clamp(1rem, 3vw, 2.5rem); right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1.4rem, 3vw, 2.5rem); z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .5rem 2rem;
}
.pano__title { font-size: clamp(1.8rem, 3.8vw, 3.8rem); line-height: 1; letter-spacing: -.03em; }
.pano__meta { color: rgba(243, 235, 224, .78); }
@media (max-width: 1000px) { .pano { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) {
  .pano { aspect-ratio: 4 / 5; margin-inline: calc(var(--gutter) * -1); width: auto; border-radius: 0; }
  .pano__label { flex-direction: column; align-items: start; }
}