/* Treasure Property Media 0.1.0 — calm in-flow media strip. Selectors start with `body #unit-data .tvr-pm` so they outrank
   the owners' own trigger styles; position/visibility are !important because Floor Plans and Virtual Tours keep writing
   inline right/bottom/visibility and CSS variables on the buttons they own. */

/* Originals that sat on the photo: hidden only once the strip exists, kept in the DOM for their owners. */
#unit-data.tvr-pm-on > .gallery-wrapper > #open-gallery-btn,
#unit-data.tvr-pm-on > .mobile-gallery-wrapper > #open-mobile-gallery-btn,
#unit-data.tvr-pm-on > .gallery-wrapper > .tvr-virtual-tour-gallery-trigger,
#unit-data.tvr-pm-on > .mobile-gallery-wrapper > .tvr-virtual-tour-gallery-trigger,
#unit-data.tvr-pm-on > .gallery-wrapper > .tvr-fp-jump,
#unit-data.tvr-pm-on > .mobile-gallery-wrapper > .tvr-fp-jump { display: none !important; }

body #unit-data .tvr-pm {
  --tvr-pm-navy: var(--tvr-navy, #0f2a3f);
  --tvr-pm-line: #7a8794;
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--tvr-pm-columns, 1), minmax(0, 1fr));
  grid-template-rows: none;
  grid-template-areas: none;
  gap: 8px;
  width: 100%;
  margin: 12px 0 4px;
  padding: 0 16px;
}
body #unit-data .tvr-pm[hidden] { display: none !important; }
body #unit-data .tvr-pm[data-count="2"] { --tvr-pm-columns: 2; }
body #unit-data .tvr-pm[data-count="3"] { --tvr-pm-columns: 3; }
body #unit-data .tvr-pm[data-count="4"] { --tvr-pm-columns: 4; }

body #unit-data .tvr-pm .tvr-pm-item {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: auto !important;
  float: none !important;
  /* Adopted owner buttons arrive with Design System grid placement and order; the strip owns placement now. */
  grid-area: auto !important;
  grid-row: auto !important;
  grid-column: auto !important;
  order: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  flex: initial;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  border: 1px solid var(--tvr-pm-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--tvr-pm-navy) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none;
  font: 600 13px/1.2 var(--tvr-body, Montserrat, system-ui, sans-serif) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body #unit-data .tvr-pm .tvr-pm-icon { display: block !important; flex: none !important; width: 20px !important; height: 20px !important; margin: 0 !important; color: inherit !important; fill: none !important; stroke: currentColor !important; }
body #unit-data .tvr-pm .tvr-pm-icon * { fill: none !important; stroke: currentColor !important; }
body #unit-data .tvr-pm .tvr-pm-label { display: block; overflow: visible; color: inherit !important; font: inherit !important; }
body #unit-data .tvr-pm .tvr-pm-item:hover { background: #faf6ef !important; border-color: var(--tvr-pm-navy) !important; color: var(--tvr-pm-navy) !important; }
body #unit-data .tvr-pm .tvr-pm-item:active { background: #f1ebe0 !important; }
body #unit-data .tvr-pm .tvr-pm-item:focus-visible { outline: 3px solid var(--tvr-pm-navy) !important; outline-offset: 2px !important; background: #fff !important; color: var(--tvr-pm-navy) !important; }

/* A single item (photos only) reads as one plain full-width button. */
body #unit-data .tvr-pm[data-count="1"] .tvr-pm-item { flex-direction: row !important; gap: 8px !important; min-height: 48px !important; }

/* Very narrow phones with all four items: two rows rather than shrinking or clipping labels. */
@media (max-width: 359px) {
  body #unit-data .tvr-pm[data-count="4"] { --tvr-pm-columns: 2; }
  body #unit-data .tvr-pm[data-count="4"] .tvr-pm-item { flex-direction: row !important; gap: 8px !important; min-height: 48px !important; }
}

/* Tablet and desktop: one row of pill buttons. */
@media (min-width: 600px) {
  body #unit-data .tvr-pm { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  body #unit-data .tvr-pm .tvr-pm-item,
  body #unit-data .tvr-pm[data-count="1"] .tvr-pm-item {
    flex-direction: row !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    flex: 0 0 auto !important;
  }
  body #unit-data .tvr-pm .tvr-pm-icon { width: 18px !important; height: 18px !important; }
}
@media (min-width: 986px) {
  body #unit-data .tvr-pm { max-width: 1320px; margin: -16px auto 16px; padding: 0 24px; } /* aligns with the live photo grid and title edge */
}

@media (prefers-reduced-motion: reduce) {
  body #unit-data .tvr-pm .tvr-pm-item { transition: none !important; }
}