/* Six short straight-plank cases.
   Chrome, type, and the spec list stay in projects-show.css.
   These rules are the gallery differences only. */

.pb-page figure { margin: 0; }

.pb-page .fx-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pb-open {
  width: 100%;
  height: calc(100svh - 64px);
  background: var(--fx-sand);
}

.pb-sheet {
  background: var(--fx-paper);
  padding: clamp(48px, 6vw, 88px) 0;
}

.pb-lead {
  max-width: 48ch;
  margin: 16px 0 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--fx-ink-soft);
}

.pb-sheet .ps-spec { max-width: 36rem; }

.pb-shared {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--fx-ink-soft);
}

.pb-page .ps-truth { background: var(--fx-linen); }

.pb-page .ps-truth,
.pb-page .fx-faq,
.pb-page .ps-related {
  border-top: 1px solid var(--fx-line);
}

.pb-page .fx-faq h2 {
  font-size: clamp(28px, 3vw, 44px);
  max-width: 18ch;
}

.pb-note {
  margin: 12px 0 0;
  max-width: 28ch;
  color: var(--fx-stone);
  font-size: 15px;
  line-height: 1.5;
}

/* Vaughan: one bleed, then three across from 1024 */
.pb-vaughan .pb-open img { object-position: center 72%; }

.pb-row {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.pb-row .fx-frame { aspect-ratio: 1600 / 1067; }

.pb-vaughan .pb-run img { object-position: center 62%; }

/* Burlington: edge-to-edge field, wide second, portrait third */
.pb-burlington .pb-open img { object-position: center 78%; }

.pb-page figure.pb-wide,
.pb-page figure.pb-portrait {
  aspect-ratio: 1600 / 1067;
  margin-top: 8px;
}

.pb-burlington .pb-wide img { object-position: center 70%; }

.pb-portrait img { object-position: center; }

/* Oakville: inset open, photo on the right, short hall */
.pb-oakville .pb-open {
  height: 72svh;
}

.pb-oakville .pb-open img {
  inset: auto 0 0 0;
  width: 100%;
  height: 220%;
  object-position: center bottom;
}

.pb-place {
  margin-top: 8px;
}

.pb-place .fx-frame { aspect-ratio: 3 / 4; }

.pb-place .fx-frame img { object-position: left center; }

.pb-page figure.pb-hall {
  aspect-ratio: 16 / 7;
  margin: 8px var(--fx-margin) 0;
}

.pb-hall img { object-position: center; }

/* Scarborough: full field, then a left 4:5 */
.pb-scarborough .pb-open img { object-position: center 80%; }

.pb-slope {
  margin-top: 8px;
}

.pb-slope .fx-frame {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.pb-slope .fx-frame img { object-position: center 72%; }

/* Markham: full field, then a right square of the corner */
.pb-markham .pb-open img { object-position: center 82%; }

.pb-corner {
  margin-top: 8px;
}

.pb-corner .fx-frame { aspect-ratio: 1; }

.pb-corner .fx-frame img {
  inset: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 165%;
  object-position: center top;
}

/* Mississauga: a centered doorway, then the threshold */
.pb-mississauga .pb-open {
  margin-inline: auto;
}

.pb-mississauga .pb-open img { object-position: center 42%; }

.pb-door {
  margin: 8px var(--fx-margin) 0;
}

.pb-door .fx-frame {
  aspect-ratio: 1600 / 1067;
}

.pb-door .fx-frame img { object-position: center 65%; }

@media (max-width: 1239px) {
  .pb-vaughan .pb-open img,
  .pb-burlington .pb-open img,
  .pb-scarborough .pb-open img,
  .pb-markham .pb-open img {
    inset: auto 0 0 0;
    width: 100%;
    height: 200%;
    object-position: center bottom;
  }
}

@media (min-width: 800px) {
  .pb-open { height: calc(100svh - 80px); }

  .pb-oakville .pb-open {
    height: 72svh;
    width: 78%;
    margin-left: var(--fx-margin);
  }

  .pb-page figure.pb-wide {
    width: min(1100px, calc(100% - (var(--fx-margin) * 2)));
    margin-left: var(--fx-margin);
    margin-right: var(--fx-margin);
  }

  .pb-page figure.pb-portrait {
    aspect-ratio: 4 / 5;
    width: min(560px, calc(100% - (var(--fx-margin) * 2)));
    margin-left: var(--fx-margin);
    margin-right: 0;
  }

  .pb-place {
    display: grid;
    grid-template-columns: 1fr 46%;
    gap: 28px 32px;
    align-items: end;
    padding: 28px var(--fx-margin) 0;
    margin-top: 8px;
  }

  .pb-place .fx-frame {
    grid-column: 2;
    grid-row: 1;
  }

  .pb-place .pb-note {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .pb-slope {
    padding: 28px var(--fx-margin) 0;
  }

  .pb-slope .fx-frame { width: 68%; }

  .pb-corner {
    display: grid;
    justify-items: end;
    padding: 28px var(--fx-margin) 0;
  }

  .pb-corner .fx-frame { width: 42%; }

  .pb-mississauga .pb-open {
    width: min(56vw, 520px);
  }
}

@media (min-width: 1024px) {
  .pb-row { grid-template-columns: 1fr 1fr 1fr; }

  .pb-slope {
    display: grid;
    grid-template-columns: 68% 1fr;
    gap: 28px 32px;
    align-items: end;
  }

  .pb-slope .fx-frame { width: 100%; }

  .pb-slope .pb-note { margin: 0; }

  .pb-corner {
    grid-template-columns: 1fr 42%;
    align-items: end;
  }

  .pb-corner .fx-frame {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }

  .pb-corner .pb-note {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
  }

  .pb-mississauga .pb-open {
    width: min(42vw, 560px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-page .fx-frame,
  .pb-page .fx-frame img {
    transition: none;
    animation: none;
  }
}