/* ==========================================================================
   Krontalhof – isometric building view (#iso) linked to the rental tables
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Settings
   -------------------------------------------------------------------------- */

#iso {
  /* Vertical offset of the floors above a selected flat (click), in SVG user units */
  --iso-lift: -1200px;
  /* Vertical offset of the floors above a hovered flat */
  --iso-peek: -1200px;

  --iso-color-active: var(--kth-color-accent);
  --iso-color-hover: var(--kth-color-primary);

  /* Space reserved for the sticky site header plus some breathing room */
  --iso-header-offset: 160px;
  --iso-max-height: min(75vh, calc(100vh - var(--iso-header-offset)));

  --iso-duration-lift: 0.6s;
  --iso-duration-color: 0.25s;
}

/* --------------------------------------------------------------------------
   2. Container
   -------------------------------------------------------------------------- */

#iso {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: var(--iso-max-height);
  margin-inline: auto;
  padding-block: 10px;
  /* Lifted floors may extend beyond the viewBox */
  overflow: visible;
}

/* --------------------------------------------------------------------------
   3. Floors
   -------------------------------------------------------------------------- */

#iso .level {
  transition: transform var(--iso-duration-lift) ease;
}

#iso .level.lifted {
  transform: translateY(var(--iso-lift));
}

/* While hovering, .peek alone defines the position (the selection lift is paused) */
#iso .haus.peeking .level.lifted {
  transform: none;
}

#iso .haus.peeking .level.peek {
  transform: translateY(var(--iso-peek));
}

/* --------------------------------------------------------------------------
   4. Flats
   Only wall surfaces (.iso-wall) are tinted. The JS sets --iso-dark per surface
   so the three facade sides keep their shading; windows stay untouched.
   -------------------------------------------------------------------------- */

#iso .flat {
  cursor: pointer;
  /* Browsers render outlines on SVG groups inconsistently; keyboard focus
     is shown via the fill colour below instead. */
  outline: none;
}

#iso .flat .iso-wall {
  transition: fill var(--iso-duration-color) ease;
}

#iso .flat.hover:not(.active) .iso-wall,
#iso .flat:focus-visible:not(.active) .iso-wall {
  fill: color-mix(in srgb, var(--iso-color-hover), black var(--iso-dark, 0%));
}

#iso .flat.active .iso-wall {
  fill: color-mix(in srgb, var(--iso-color-active), black var(--iso-dark, 0%));
}

/* Locked areas (e.g. petrol station): lift on hover only, not selectable */
#iso .flat.locked {
  cursor: default;
}

/* --------------------------------------------------------------------------
   5. Tables
   !important is needed to override the row striping of the PowerPack widget.
   -------------------------------------------------------------------------- */

tr.flat-row {
  cursor: pointer;
}

tr.flat-row.locked {
  cursor: default;
}

tr.flat-row.hover td {
  background-color: rgb(0 0 0 / 0.04) !important;
}

tr.flat-row.active td {
  background-color: var(--iso-color-active, var(--kth-color-accent)) !important;
  color: #fff;
}

tr.flat-row.active td :is(.pp-table-cell-text, a, svg) {
  color: inherit;
}

/* --------------------------------------------------------------------------
   6. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #iso .level,
  #iso .flat .iso-wall {
    transition: none;
  }
}