/* Colonial Aesthetics & Wellness — Our Space
   ============================================================
   Only the circular gallery and the team band live here. The hero,
   section shells, prose and closing CTA all come from patient.css,
   which this page loads first — see the <link> order in
   OurSpace.html. Nothing in this file redefines a patient.css class.

   The gallery is a ring of circular thumbnails around a portrait
   stage. Hovering or focusing a thumbnail brings that photograph to
   the stage. All nine stage images are in the DOM at once and
   crossfade on opacity, which is what makes the swap seamless — and
   it also means every photograph is in the prerendered HTML rather
   than appearing only after JavaScript runs.

   Below 900px a nine-item ring cannot hold a usable thumbnail size,
   so it unrolls into a stage with a scrolling filmstrip beneath it.
   ============================================================ */

/* ---------- The ring ---------- */

.os-gallery {
  --ring: 720px;   /* the square the ring is drawn inside */
  --radius: 292px; /* centre of ring to centre of each thumbnail */
  --thumb: 92px;
  display: flex;
  justify-content: center;
}

.os-ring {
  position: relative;
  width: var(--ring);
  height: var(--ring);
  flex: none;
}

/* The hairline the thumbnails sit on. Decorative — it is what makes
   the arrangement read as a ring rather than as scattered circles. */
.os-ring::before {
  content: "";
  position: absolute;
  inset: calc(var(--ring) / 2 - var(--radius));
  border: 1px solid var(--c-stone);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- The stage ---------- */

.os-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 348px;
  margin: -174px 0 0 -130px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-stone);
  box-shadow: var(--e-md);
}

.os-stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* Settles the last few percent as it fades up, so the photograph
     reads as arriving at the centre rather than blinking on. */
  transform: scale(1.04);
  transition:
    opacity var(--d-enter) var(--ease-out),
    transform 520ms var(--ease-out);
}

.os-stage-img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Caption over the photograph, following the site's photo-card
   pattern: teal scrim bottom-to-top, gold eyebrow, white heading. */
.os-stage-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 48px 18px 16px;
  background: linear-gradient(
    to top,
    rgba(12, 42, 46, 0.88) 0%,
    rgba(12, 42, 46, 0.62) 45%,
    rgba(12, 42, 46, 0) 100%
  );
  color: var(--c-white);
  text-align: left;
  animation: os-cap-in var(--d-enter) var(--ease-out) both;
}

.os-stage-cap .os-cap-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 6px;
}

.os-stage-cap .os-cap-title {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  margin-bottom: 4px;
}

.os-stage-cap .os-cap-note {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

@keyframes os-cap-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- The thumbnails ---------- */

.os-thumbs {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.os-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--thumb);
  height: var(--thumb);
  margin: calc(var(--thumb) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-stone);
  cursor: pointer;
  /* --a is set per item in the markup. The second rotate cancels the
     first so the photograph stays upright on the ring. */
  transform:
    rotate(var(--a))
    translateY(calc(var(--radius) * -1))
    rotate(calc(var(--a) * -1))
    scale(1);
  transition:
    transform var(--d-hover) var(--ease-out),
    box-shadow var(--d-hover) var(--ease-out);
}

.os-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The ring on the active thumbnail is drawn as an inset shadow so it
   sits inside the circle and does not shift the layout. */
.os-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(26, 41, 46, 0.12);
  transition: box-shadow var(--d-hover) var(--ease-out);
}

.os-thumb[aria-pressed="true"]::after {
  box-shadow: inset 0 0 0 2px var(--c-sea);
}

.os-thumb[aria-pressed="true"] {
  transform:
    rotate(var(--a))
    translateY(calc(var(--radius) * -1))
    rotate(calc(var(--a) * -1))
    scale(1.1);
  box-shadow: var(--e-md);
}

@media (hover: hover) and (pointer: fine) {
  .os-thumb:hover {
    transform:
      rotate(var(--a))
      translateY(calc(var(--radius) * -1))
      rotate(calc(var(--a) * -1))
      scale(1.1);
    box-shadow: var(--e-md);
  }
}

.os-thumb:focus-visible {
  outline: 2px solid var(--c-sea);
  outline-offset: 3px;
}

/* ---------- Team band ---------- */

.os-band {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 767px) {
  .os-band { padding: 0 16px; }
}

.os-band img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.os-band figcaption {
  max-width: var(--maxw-narrow);
  margin: 20px auto 0;
  font-size: 13px;
  font-style: italic;
  color: var(--c-slate);
  text-align: center;
}

/* ---------- Narrow layouts ---------- */

/* At this width nine thumbnails on a ring are smaller than a
   comfortable tap target, so the ring unrolls. */
@media (max-width: 899px) {
  .os-ring {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .os-ring::before { display: none; }

  /* Stays positioned: the nine stage images and the caption are
     absolutely positioned against it. Made static, they resolve
     against .os-ring instead and cover the whole column. The offsets
     the ring layout uses are reset here instead. */
  .os-stage {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    width: min(320px, 78vw);
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .os-thumbs {
    position: static;
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    padding: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .os-thumbs li { flex: none; scroll-snap-align: center; }

  /* Relative, not static: ::after draws the selection ring against
     this box. Static hands it to .os-ring and nine ring-sized
     circles stack over the gallery. */
  .os-thumb,
  .os-thumb[aria-pressed="true"] {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    width: 64px;
    height: 64px;
    transform: none;
  }
  .os-thumb[aria-pressed="true"] { box-shadow: var(--e-sm); }
}

@media (max-width: 639px) {
  .os-band img { aspect-ratio: 4 / 3; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .os-stage-img,
  .os-thumb,
  .os-thumb::after {
    transition: none;
  }
  .os-stage-img { transform: none; }
  .os-stage-img.is-active { transform: none; }
  .os-stage-cap { animation: none; }

  /* Drop the scale but keep the ring placement. Scoped to the ring
     layout: below 900px the thumbnails are in a flat row and must
     keep the transform: none the narrow-layout rules give them. */
  @media (min-width: 900px) {
    .os-thumb[aria-pressed="true"],
    .os-thumb:hover {
      transform:
        rotate(var(--a))
        translateY(calc(var(--radius) * -1))
        rotate(calc(var(--a) * -1));
    }
  }
}