/* ==========================================================================
   OTN theme: Facilities page layout (DESIGN.md 8.7), ported from the
   mockups' assets/css/pages/facilities.css.

   Each section (the otn/facilities-section pattern) is a block 48px from
   the one before, with a 1px rule between blocks: its text first, in the
   reading column (760px), then its photos as a gallery across the full
   container, then the photo credit (the gallery's caption) where there is
   one. Galleries hold any number of photos (admin plan 9.2): two or more go
   2-up from 480px; a single photo or a pair fills its own width (end of
   this file) instead of leaving empty gallery columns. Browsers without
   :has() keep the shared gallery layout.
   ========================================================================== */

/* Reading column: at most 760px; paragraphs stay within the measure */
.otn-facilities__text {
  max-width: var(--otn-w-reading);
}

/* A block: text, gallery and credit stacked in that order, 24px apart.
   :root because each block is its section's first block, and core's
   ":root :where(.is-layout-flow) > :first-child" (0,2,0) would otherwise
   take the 48px away */
:root .otn-facilities__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--otn-space-5);
  margin-top: var(--otn-space-7);
}

/* 48px either side of the 1px rule between blocks (each block sits in its
   own container: .otn-facilities__section) */
.otn-facilities__block + .otn-facilities__block,
.otn-facilities__section + .otn-facilities__section > .otn-facilities__block {
  padding-top: var(--otn-space-7);
  border-top: var(--otn-border-hair);
}

/* The mockups' credit paragraph, 12px under the photos it credits */
.otn-facilities__block > .otn-credit {
  margin-top: calc(var(--otn-space-3) - var(--otn-space-5));
}

/* Half a section under the last block, before "Back to top" (whose own
   spacing does the rest) */
.otn-facilities__section:last-child,
.otn-facilities__section:has(+ :not(.otn-facilities__section)) {
  padding-bottom: calc(var(--otn-section-y) / 2);
}

/* 480-599px: a gallery of two or more photos goes 2-up a step earlier
   than the shared gallery (single photos stay full width). Bounded at
   600px, where the shared gallery is 2-up anyway. */
@media (min-width: 480px) and (max-width: 599.98px) {
  :root .otn-facilities__block .wp-block-gallery.has-nested-images.otn-gallery:has(> figure:nth-of-type(2)),
  .otn-facilities__block .otn-gallery:has(> li:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A single photo: one column up to the reading column's 760px, on the
   same left edge as the text */
@media (min-width: 600px) {
  :root .otn-facilities__block .wp-block-gallery.has-nested-images.otn-gallery:has(> figure:only-of-type),
  .otn-facilities__block .otn-gallery:has(> li:only-child) {
    grid-template-columns: minmax(0, var(--otn-w-reading));
  }
}

/* A pair: two equal columns across the container (about 594px each at 1440) */
@media (min-width: 900px) {
  :root .otn-facilities__block .wp-block-gallery.has-nested-images.otn-gallery:has(> figure:nth-of-type(2):last-of-type),
  .otn-facilities__block .otn-gallery:has(> li:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The Facilities card (otn/facilities-card): the photo across the card's top */
.otn-facility-card > .wp-block-image {
  align-self: stretch;
  margin-bottom: var(--otn-space-4);
}

.otn-facility-card > .wp-block-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}