/* Stacking plan: the axonometric drawing of the five floors next to the
   area per floor. Hovering a floor in the drawing or in the list
   highlights it in both, with :has() and no JavaScript. The figures
   stay readable in the list, so nothing depends on the hover.

   The drawing colors come from the stacking plan file. The faces are
   tints between the brand colors, so they live here as local tokens. */

.stack {
  --theme-stack-roof: #fbf6f3;
  --theme-stack-plant-side: #e6d2c5;
  --theme-stack-face-front: #ede2e1;
  --theme-stack-face-side: #ddcfcf;
  --theme-stack-ribbon-front: #c87879;
  --theme-stack-highlight: color-mix(in srgb, var(--theme-color-secondary) 55%, transparent);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    'intro intro intro'
    'drawing drawing table';
  gap: var(--theme-space-md) var(--theme-space-lg);
  align-items: center;
  padding: var(--theme-section-space) var(--theme-bleed);
}

.stack__intro {
  grid-area: intro;
  max-width: 40rem;
}

.stack__drawing {
  grid-area: drawing;
  display: block;
  width: 100%;
  height: auto;
  margin-inline-start: calc(-1 * var(--theme-escape));
  overflow: visible;
}

.stack__roof {
  fill: var(--theme-stack-roof);
}

.stack__plant-top {
  fill: var(--theme-stack-roof);
}

.stack__plant-front {
  fill: var(--theme-color-highlight);
}

.stack__plant-side {
  fill: var(--theme-stack-plant-side);
}

.stack__face-front {
  fill: var(--theme-stack-face-front);
}

.stack__face-side {
  fill: var(--theme-stack-face-side);
}

.stack__ribbon-front {
  fill: var(--theme-stack-ribbon-front);
}

.stack__ribbon-side {
  fill: var(--theme-color-secondary);
}

.stack__outline,
.stack__outline--thin,
.stack__mullion {
  stroke: var(--theme-color-primary);
  stroke-miterlimit: 10;
}

.stack__outline {
  fill: none;
  stroke-width: 0.3px;
}

.stack__outline--thin {
  stroke-width: 0.2px;
}

.stack__mullion {
  fill: none;
  stroke-width: 0.1px;
}

.stack__mullion--bold {
  stroke-width: 0.2px;
}

/* Only the floor zones take the pointer; lines and ribbons drawn on top
   of them let it through. */
.stack__drawing > :not(.stack__zone) {
  pointer-events: none;
}

.stack__zone {
  fill: transparent;
  cursor: default;
  transition: fill 0.2s var(--theme-ease-signature);
}

/* Floor table */

.stack__table {
  grid-area: table;
}

.stack__floors {
  list-style: none;
}

.stack__floor,
.stack__total {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  column-gap: 12px;
  padding: 12px 8px;
  border-top: 1px solid var(--theme-color-rule);
  transition: background-color 0.2s var(--theme-ease-signature);
}

.stack__number {
  font-size: var(--theme-text-sm);
  font-weight: var(--theme-font-weight-bold);
  color: var(--theme-color-secondary);
  font-variant-numeric: tabular-nums;
}

.stack__name {
  font-weight: var(--theme-font-weight-bold);
  color: var(--theme-color-heading);
}

.stack__area {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--theme-color-heading);
}

.stack__split {
  grid-column: 2 / -1;
  font-size: var(--theme-text-sm);
}

.stack__total {
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--theme-color-rule);
  font-weight: var(--theme-font-weight-bold);
  color: var(--theme-color-heading);
}

.stack__note {
  margin-top: 12px;
  font-size: var(--theme-text-sm);
  font-style: italic;
}

/* One floor at a time: hovering it in the drawing or the list lights
   up the same floor in both. */
.stack:has([data-floor='04']:hover) .stack__zone[data-floor='04'],
.stack:has([data-floor='03']:hover) .stack__zone[data-floor='03'],
.stack:has([data-floor='02']:hover) .stack__zone[data-floor='02'],
.stack:has([data-floor='01']:hover) .stack__zone[data-floor='01'],
.stack:has([data-floor='00']:hover) .stack__zone[data-floor='00'] {
  fill: var(--theme-stack-highlight);
}

.stack:has([data-floor='04']:hover) .stack__floor[data-floor='04'],
.stack:has([data-floor='03']:hover) .stack__floor[data-floor='03'],
.stack:has([data-floor='02']:hover) .stack__floor[data-floor='02'],
.stack:has([data-floor='01']:hover) .stack__floor[data-floor='01'],
.stack:has([data-floor='00']:hover) .stack__floor[data-floor='00'] {
  background: var(--theme-color-highlight);
}

/* Large screens: text, building and floor list side by side, set on a
   diagonal: text at the top left, the building in the middle, the floor
   list lower on the right. */
@media (width >= 1200px) {
  .stack {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
    grid-template-areas: 'intro drawing table';
    gap: var(--theme-space-lg);
  }

  .stack__intro {
    align-self: start;
  }

  .stack__table {
    align-self: end;
    margin-top: clamp(96px, 12vw, 240px);
  }

  .stack__drawing {
    margin-inline-start: 0;
  }
}

@media (width <= 800px) {
  .stack {
    grid-template-columns: 1fr;
    grid-template-areas:
      'intro'
      'drawing'
      'table';
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack__zone,
  .stack__floor {
    transition: none;
  }
}