/* ==========================================================================
   Facility photography

   The client's own photographs of the hospital. Where two are supplied for one
   slot they cross-fade in place: one element, two stacked sources, no layout
   shift and no carousel library. The user asked for images that "flip" rather
   than sit static.
   ========================================================================== */

.fol-photo {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bs-light);
  line-height: 0;
}
.fol-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cross-fade: the second image sits over the first and fades in and out.
   Both are in the DOM, so there is no reflow when they swap. */
.fol-photo-fade { position: relative; }
.fol-photo-fade img { position: relative; }
.fol-photo-fade img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: folCrossfade 12s ease-in-out infinite;
}
@keyframes folCrossfade {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* A still image is better than a moving one for anyone who has asked for
   reduced motion; show only the first source. */
@media (prefers-reduced-motion: reduce) {
  .fol-photo-fade img + img { animation: none; opacity: 0; }
}

/* Caption. These photographs are evidence, so saying what they show is worth
   the space - "our theatre" carries more than an unlabelled room. */
.fol-photo-cap {
  display: block;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--bs-body-color);
  margin-top: .6rem;
  line-height: 1.5;
}

/* ------------------------------------------------------ procedure pages -- */

.fol-proc-photo {
  margin-bottom: 1.75rem;
  aspect-ratio: 4 / 3;
}

/* ------------------------------------------------------- pillar banners -- */

.fol-pillar-photo {
  aspect-ratio: 24 / 10;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------- credentials -- */

/* The building sits behind the licence numbers, faint enough that the figures
   stay the subject. */
.fol-cred-bg {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
}
.fol-cred-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(241, 246, 247, .93);
}

/* --------------------------------------------------------------- mobile -- */

@media (max-width: 767px) {
  .fol-pillar-photo { aspect-ratio: 16 / 10; }
}