/* css/page-our-office.css : our-office.html. Owner: wave B.
   Body composition: belladental-int/06 opener + belladental-int/04 pin/pill trio (visit block),
   a real photo pair, and the 06 "Payments" H2 + centred paragraph device.
   Adapted spec: v2-specs/interiors-spec-our-office.md (delta ids OO1-OO11 cited inline).
   Loaded LAST, after tokens.css + site.css + interior.css. Every selector is scoped to this
   page's own .oo-* classes inside .sheet-body; the chassis (.figure, .bleed, .pill, .sheet-h2,
   .sheet-h3) is used as is, never restyled. */

/* ------------------------------------------------------------------ 1 opener (belladental-int/06)
   Recipe: 1128x564 candid photo, the full inner container (94% of the card) -> the full well, 2:1 */
.oo-open img { aspect-ratio: 2 / 1; object-fit: cover; }
/* intro: Montserrat 16/300 centred ~30 below the photo -> Open Sans 16/27.2 centred, capped at the
   chassis measure (OO7) */
.oo-intro { max-width: var(--measure); margin: 30px auto 0; text-align: center; font: 400 16px/27.2px var(--font-body); color: var(--body-ink); text-wrap: balance; }

/* ------------------------------------------------------------------ 2 visit block (belladental-int/04 trio)
   Recipe: centred 27.424 heading (+ icon chip, dropped: OO2), three 345.9 columns with 45.2 gaps
   (4% of the container), each medallion (dropped: OO2) + 27.424 H3 + a full-column pill ~15 below.
   Titles sit on one row and the actions on the next, so a two-line title never staggers the pills */
.oo-visit { margin-top: 56px; }
.oo-visit__h { margin: 0; text-align: center; }
.oo-trio {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto;
  column-gap: 4%; row-gap: 16px; margin-top: 30px; text-align: center;
}
.oo-unit { display: contents; }
.oo-unit:nth-child(1) > * { grid-column: 1; }
.oo-unit:nth-child(2) > * { grid-column: 2; }
.oo-unit:nth-child(3) > * { grid-column: 3; }
.oo-unit__h { grid-row: 1; align-self: end; font: 400 27.424px/1.25 var(--font-display); color: var(--steel-pale); text-wrap: balance; }
.oo-unit > :last-child { grid-row: 2; }
/* column 1: the address in the pill's 48px slot (OO3); columns 2-3: the FLAVOR atom, full column */
.oo-addr { min-height: 48px; font: 400 16px/24px var(--font-body); color: var(--body-ink); }
.oo-pill { width: 100%; }

/* ------------------------------------------------------------------ 3 photo pair (OO5)
   belladental's own 2-col geometry (541.4 / 45.2 / 541.4 = 48 / 4 / 48), 4:3 frames */
.oo-pair { display: grid; grid-template-columns: 48fr 4fr 48fr; margin-top: 64px; }
.oo-pair__fig { margin: 0; }
.oo-pair__fig:last-child { grid-column: 3; }
.oo-pair__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }

/* ------------------------------------------------------------------ 4 sections (belladental-int/06 "Payments")
   Recipe: H2 36.56 centred ~110 below the block above, then a centred 16px paragraph */
.oo-sec { margin-top: 96px; text-align: center; }
.oo-sec .sheet-h2 { margin: 0; }
.oo-sec p { max-width: var(--measure); margin: 12px auto 0; font: 400 16px/27.2px var(--font-body); color: var(--body-ink); text-wrap: balance; }
.oo-sec p + p { margin-top: 14px; }

/* ------------------------------------------------------------------ tablet (<= 900): the trio stacks
   (mobile.md tablet stack; at 900 a third of the well is too narrow for the pill labels) */
@media (max-width: 900px) {
  .oo-trio { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .oo-unit > *, .oo-unit:nth-child(n) > * { grid-column: 1; grid-row: auto; }
  .oo-unit__h { align-self: auto; }
  .oo-unit:not(:first-child) .oo-unit__h { margin-top: 28px; }
  .oo-addr, .oo-pill { margin-top: 12px; justify-self: center; }
  .oo-addr { min-height: 0; }
  .oo-pill { width: auto; }                            /* OO10: never stretched */
}

/* ------------------------------------------------------------------ phone (<= 600, house system) */
@media (max-width: 600px) {
  .oo-open img { aspect-ratio: 4 / 3; }                /* OO8: the separate phone crop */
  .oo-intro { margin-top: 18px; }
  .oo-visit { margin-top: 34px; }
  .oo-trio { margin-top: 18px; }
  .oo-unit__h { font-size: 24px; }                     /* explicit (chassis deck value) */
  .oo-pair { grid-template-columns: 1fr; row-gap: 16px; margin-top: 38px; }
  .oo-pair__fig, .oo-pair__fig:last-child { grid-column: 1; margin-inline: calc(50% - var(--sheet-inner) / 2); }
  .oo-sec { margin-top: 58px; }
}