/* /explore: one fixed screen with the building in 3D, the filter panel, a home's card with the apartment in 3D,
   and the enquiry form as a popup. The page itself never scrolls. */
html:has(body.is-explore), body.is-explore { height: 100%; overflow: hidden; overscroll-behavior: none; }
.ex {
  --ink: var(--base-color-neutral--dark, #200314);
  position: relative;
  height: 100svh;
  background: var(--base-color-system--grey, #f1efeb);
  color: var(--ink);
  overflow: hidden;
}
.ex_stage { position: absolute; inset: 0; touch-action: none; }
.ex_stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.ex_stage canvas:active { cursor: grabbing; }
.ex_poster {
  position: absolute; inset: 0; pointer-events: none;
  background: url(/Assets/ContentPhotos/Photos/vivienne-aerial.webp) center / cover no-repeat;
  transition: opacity .8s ease;
}
.ex.is-ready .ex_poster { opacity: 0; }
.ex.is-loading .ex_poster { opacity: .35; }
.ex_start, .ex_status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: var(--ink); color: #fff; border: 0; border-radius: 2rem; padding: .95rem 1.4rem; font: inherit; font-size: .95rem;
  margin: 0; white-space: nowrap;
}
.ex_status { background: rgba(32, 3, 20, .85); }
.ex_start[hidden], .ex_status[hidden] { display: none; }

/* panels over the 3D */
.ex_panel, .ex_card {
  position: absolute; z-index: 4; top: 12rem;
  background: rgba(255, 255, 255, .95);
  border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgba(32, 3, 20, .12);
  padding: 1.4rem;
}
.ex_panel { left: 3%; width: 23rem; display: flex; flex-direction: column; gap: .9rem; }
.ex_head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ex_title { font-family: var(--fonts--reckless-font); font-weight: 300; font-size: 2.1rem; line-height: 1.05; margin: 0; }
.ex_head_count, .ex_toggle { display: none; }
.ex_lead { margin: 0; font-size: .95rem; line-height: 1.45; }
.ex_group { display: flex; flex-wrap: wrap; gap: .35rem; }
.ex_group button, .ex_reset, .ex_toggle, .ex_view_bar button {
  font: inherit; font-size: .85rem; color: var(--ink); background: transparent;
  border: 1px solid rgba(32, 3, 20, .28); border-radius: 2rem; padding: .4rem .8rem; cursor: pointer;
}
.ex_group button[aria-pressed="true"], .ex_view_bar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ex_check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; margin: 0; }
.ex_check input { width: 1rem; height: 1rem; accent-color: var(--ink); }
.ex_foot { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; opacity: .85; }
.ex_legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin: 0 .35rem 0 0; vertical-align: -1px; }
.ex_legend i.is-sold { margin-left: .8rem; }
.ex_legend .is-available { background: #8a4a62; }
.ex_legend .is-sold { background: #c9c4bc; }
.ex_reset { align-self: flex-start; }

/* a home's card: the apartment in 3D (or its plan), then its facts and the price button */
.ex_card { right: 3%; width: 24rem; display: flex; flex-direction: column; gap: .7rem; max-height: calc(100svh - 13rem); overflow: auto; }
.ex_card[hidden] { display: none; }
.ex_view { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: .6rem; overflow: hidden; background: #fff; border: 1px solid rgba(32, 3, 20, .08); flex: none; }
.ex_home3d, .ex_view img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex_home3d canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ex_home3d canvas:active { cursor: grabbing; }
.ex_view img { object-fit: contain; }
.ex_home3d[hidden], .ex_view img[hidden] { display: none; }
.ex_view_status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: .85rem; background: rgba(255, 255, 255, .9); padding: .4rem .8rem; border-radius: 1rem; }
.ex_view_status[hidden] { display: none; }
.ex_view_bar { display: flex; gap: .35rem; align-items: center; }
.ex_view_bar button[hidden] { display: none; }
.ex_big { margin-left: auto; }
.ex_card h2 { font-family: var(--fonts--reckless-font); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin: 0; padding-right: 2rem; }
.ex_card dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; font-size: .95rem; }
.ex_card dt { opacity: .6; }
.ex_card dd { margin: 0; }
.ex_state { display: inline-block; padding: .1rem .55rem; border-radius: 1rem; font-size: .8rem; background: #e8d9df; }
.ex_state[data-state="Sold"] { background: #e6e2dc; color: rgba(32, 3, 20, .7); }
.ex_close { position: absolute; top: .7rem; right: .8rem; z-index: 2; background: rgba(255, 255, 255, .85); border: 0; border-radius: 50%; width: 2rem; height: 2rem; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); }
.ex_btn { font: inherit; font-size: 1rem; background: var(--ink); color: #fff; border: 0; border-radius: 2rem; padding: .9rem 1.2rem; cursor: pointer; flex: none; }
.ex_btn:hover { background: #3a0c27; }
.ex_more { font-size: .9rem; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* larger view: the card fills most of the screen, the apartment takes the room */
.ex_card.is-big {
  top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%);
  width: min(94vw, 1180px); height: min(88svh, 860px); max-height: none; z-index: 1003;
  display: grid; grid-template-columns: minmax(0, 1fr) 19rem; grid-auto-rows: min-content; gap: .9rem 1.5rem;
  align-content: start;
}
.ex_card.is-big .ex_view { grid-column: 1; grid-row: 1 / span 8; aspect-ratio: auto; height: calc(min(88svh, 860px) - 2.8rem); }
.ex_card.is-big > :not(.ex_view):not(.ex_close) { grid-column: 2; }
.ex_card.is-big .ex_view_bar { padding-right: 2.5rem; }
.ex.has-big::after { content: ""; position: absolute; inset: 0; background: rgba(32, 3, 20, .35); z-index: 1002; }

/* the label that follows the mouse over a home */
.ex_tip {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; gap: .1rem;
  background: rgba(32, 3, 20, .92); color: #fff; border-radius: .5rem; padding: .5rem .75rem;
  font-size: .85rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
}
.ex_tip[hidden] { display: none; }
.ex_tip b { font-family: var(--fonts--reckless-font); font-weight: 400; font-size: 1.05rem; }
.ex_tip span { opacity: .85; }
.ex_tip[data-state="Sold"] span { opacity: .65; }

/* the enquiry form as a popup */
.ex_popup {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(32, 3, 20, .45); padding: 1rem; overflow: auto;
}
.ex_popup[hidden] { display: none; }
.ex_popup_box { position: relative; width: 100%; max-width: 28rem; max-height: calc(100svh - 2rem); overflow: auto; border-radius: 1rem; }
.ex_popup .form_slot { margin: 0; }
.ex_popup .landing_card { max-width: none; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .3); padding-top: 2.2rem; }
.ex_popup .landing_card > h2 { padding-right: 2.2rem; }

/* phones and tablets: the 3D fills the screen; the panel folds into a bar at the bottom; the card is a sheet */
@media (max-width: 991px) {
  .ex_panel { top: auto; left: .75rem; right: .75rem; bottom: .75rem; width: auto; padding: .9rem 1rem; gap: .7rem; max-height: 70svh; overflow: auto; }
  .ex_head { align-items: center; flex-wrap: wrap; row-gap: .4rem; }
  .ex_head .ex_title { flex: 1 1 100%; }
  .ex_title { font-size: 1.25rem; }
  .ex_head_count { display: block; font-size: .8rem; opacity: .75; white-space: nowrap; }
  .ex_toggle { display: inline-block; flex: none; }
  .ex_panel:not(.is-open) > :not(.ex_head) { display: none; }
  .ex.has-card .ex_panel { display: none; }
  .ex_card { top: auto; left: .75rem; right: .75rem; bottom: .75rem; width: auto; max-height: 66svh; padding: 1rem; gap: .55rem; }
  .ex_view { aspect-ratio: 16 / 10; }
  .ex_card h2 { font-size: 1.25rem; }
  .ex_card.is-big { width: auto; height: auto; top: .75rem; bottom: .75rem; left: .75rem; right: .75rem; transform: none; display: flex; }
  .ex_card.is-big .ex_view { flex: 1 1 auto; height: auto; min-height: 45svh; }
}