/* Danbe Dental - wave C page group: office-info.html, contact.html, reviews.html.
   Loaded AFTER tokens.css, site.css and interior.css on those three pages only.

   Scope law (v2-specs/interiors-plan.md, file ownership): this file adds only what
   these three pages need. It never restyles anything site.css or interior.css owns.
   In particular it adds NO rule that touches `.hours`, `.rv-card`, `.rv-grid`,
   `.rv-top`, `.rv-stars`, `.rv-foot`, `.pill`, `.f2`, `.fld`, `.consent`, `.fine`
   or `.form-status`: the zebra hours table, the review card and the appointment
   form are global components reused pixel-identically (mvendo-int/08 component law
   and the homepage form component).

   Specs: v2-specs/pages/office-info-spec.md, contact-spec.md, reviews-spec.md.
   ------------------------------------------------------------------------- */

/* ===========================================================================
   SHARED SMALL PARTS
   Section-marker icons (mvendo-int/07's red line glyphs, identity-swapped to the
   brand azure and drawn for this build), sheet headings, centered prose.
   =========================================================================== */
.ii-icon {
  display: block; margin: 0 auto 14px;
  width: 34px; height: 34px;
  fill: none; stroke: var(--azure-deep); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ii-h3 {
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 34px; color: var(--ink); text-align: center;
}
.ii-h4 {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 30px; color: var(--ink); text-align: center;
}
.ii-prose {
  margin: 0 auto; max-width: 840px; text-align: center;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--muted-ink);
}
.ii-prose + .ii-prose { margin-top: 18px; }
.ii-note {
  margin: 16px auto 0; max-width: 840px; text-align: center;
  font-size: var(--size-fine); line-height: 20px; color: var(--grey-fine);
}
.ii-note a { color: var(--azure-deep); }

/* a bare-white module: mvendo-int/07's "What to Expect" register, no card */
.ii-bare { width: 100%; }

/* mvendo-int/07's small-caps welcome line above the intro prose. Small caps, but
   no letterspacing: FLAVOR bans letterspacing theatrics. */
.ii-lead {
  margin: 0 auto 18px; max-width: 840px; text-align: center;
  font-variant: small-caps; font-size: 20px; line-height: 28px;
  letter-spacing: 0; color: var(--ink);
}

/* media card: the chassis' flush sheet carrying a 16:9 image */
.ii-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* ===========================================================================
   PILL LINK ROWS (mvendo-int/07: one 600x48 pill over two 487.5x48 pills, 15px
   gap; the standard button atom used as a link list). The atom itself is
   site.css's and is not touched.
   =========================================================================== */
.ii-pills {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 15px;
}
.ii-pill-wide { width: 600px; max-width: 100%; }
.ii-pill-pair { width: 100%; display: flex; gap: 15px; }
.ii-pill-pair > .pill { flex: 1 1 0; min-width: 0; text-align: center; }

/* ===========================================================================
   THE 2-UP (mvendo-int/07's card/photo checkerboard row, and humphries-int/10's
   NAP-card + right-column pairing). Two calc(50% - 15px) tracks with the 30px
   contact gap, exactly as both recipes measure them.
   =========================================================================== */
.ii-2up {
  width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--contact-gap); align-items: start;
}
.ii-col { display: flex; flex-direction: column; gap: var(--contact-gap); }

/* ===========================================================================
   OFFICE INFO: the emergency capsule and the payment super-card are both the
   .int-sheet primitive; only their inner rhythm lives here.
   =========================================================================== */
.ii-capsule { text-align: center; }
.ii-capsule .pill { margin: 22px auto 0; }
.ii-super { text-align: center; }
.ii-super .ii-job + .ii-job {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hairline);
}
.ii-super .pill { margin: 28px auto 0; }
.ii-hours-foot {
  margin: 16px 0 0; text-align: center;
  font-size: var(--size-fine); line-height: 20px; color: var(--grey-fine);
}
.ii-hours-foot a { color: var(--azure-deep); }

/* ===========================================================================
   CONTACT
   =========================================================================== */
/* phone strip card: humphries-int/10's 742x45 strip under the title banner */
.ii-strip {
  width: 742px; max-width: 100%;
  background: var(--white); box-shadow: var(--shadow-plate);
  /* block, not flex: the tel link must stay an inline run inside the sentence */
  display: block; padding: 10px 20px; min-height: 45px; text-align: center;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--body-ink);
}
.ii-strip a { color: var(--azure-deep); text-decoration: underline; }

/* NAP card interior. The micro-header register is the homepage's own .ct-micro
   treatment, reproduced here rather than reused, so no site.css rule changes. */
.ii-nap { text-align: center; }
.ii-nap-name {
  margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-practice); line-height: var(--lh-practice); color: var(--ink);
}
.ii-micro {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 26px 0 6px;
  font-size: var(--size-micro); font-weight: 700; color: var(--body-ink);
}
.ii-micro .gl { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ii-micro .gl path[stroke], .ii-micro .gl circle[stroke] { fill: none; }
.ii-lines { margin: 0; font-size: var(--size-body); line-height: 30px; color: var(--body-ink); }
.ii-lines a { color: var(--azure-deep); text-decoration: underline; }
/* standalone utility links get a real tap target (class B, a11y floor) */
.ii-link {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  color: var(--azure-deep); text-decoration: underline;
}
.ii-nap .pill { margin: 28px auto 0; }

/* map strip: humphries-int/11, 1060x400, house shadow, no radius. The box is
   reserved so the page cannot reflow when the embed paints. */
.ii-map {
  width: 100%; background: var(--white); box-shadow: var(--shadow-plate);
  line-height: 0;
}
.ii-map iframe { width: 100%; height: var(--map-h); border: 0; display: block; }

/* the appointment section heading */
.ii-form-head + .ii-prose { margin-bottom: 28px; }
.ii-form-head {
  margin: 0 0 14px; text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-h2-contact); line-height: var(--lh-h2-contact); color: var(--ink);
}

/* ===========================================================================
   REVIEWS: the band, the well, the cards and the CTA row are the homepage's own
   components (.reviews / .rv-well / .rv-grid / .rv-card / .rv-cta). Only the
   page-scale rating masthead is new.
   =========================================================================== */
.ii-mast { margin: 0 0 44px; }
.ii-mast .g-mark { width: 34px; height: 34px; margin: 0 auto 14px; display: flex; }
.ii-score {
  margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 56px; line-height: 1.15; color: var(--white);
}
.ii-score span { font-family: var(--font-body); font-size: var(--size-lede); color: var(--on-dark-soft); }
.ii-mast .stars { display: block; margin: 10px 0 0; font-size: 26px; line-height: 1.2; }
.ii-count {
  margin: 12px 0 0; font-size: var(--size-lede); line-height: var(--lh-lede);
  color: var(--on-dark-soft);
}
/* This page's band and the injected prefooter are both the ink surface, so they
   would otherwise join into one undifferentiated dark region. One hairline, the
   same `--on-dark-line` the review cards already use, keeps the seam legible.
   Scoped to this page by the adjacency; the prefooter markup is untouched. */
.ii-rev + .int-prefooter { border-top: 1px solid var(--on-dark-line); }

/* the truncation marker on the one quote Google itself shortens (R6, honesty
   floor). Its own line above the card foot, so the foot component is untouched. */
.ii-excerpt {
  margin: -8px 0 18px; font-size: var(--size-fine); line-height: 20px;
  font-style: italic; color: var(--on-dark-soft);
}
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ===========================================================================
   TABLET <= 1023 : the 2-up stacks where both recipes' own column blocks stack
   (mvendo @1119, humphries' interior paper column).
   =========================================================================== */
@media (max-width: 1023px) {
  .ii-2up { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 900px) {
  .ii-h3 { font-size: 25px; line-height: 33px; }
  .ii-score { font-size: 48px; }
}

/* ===========================================================================
   PHONE <= 600 : house mobile law. Restructure, never rescale a component; the
   pill rows stack and take the well width; media goes full bleed to the gutter.
   =========================================================================== */
@media (max-width: 600px) {
  .ii-h3 { font-size: 24px; line-height: 32px; }
  .ii-prose, .ii-note { max-width: var(--well-phone); }
  .ii-pill-wide { width: 100%; }
  /* the pair stacks; the atom keeps its authored 48px height, so the pills must
     stop flexing on the (now vertical) main axis */
  .ii-pill-pair { flex-direction: column; }
  .ii-pill-pair > .pill { flex: 0 0 auto; width: 100%; }
  .ii-2up { gap: 24px; }
  .ii-col { gap: 24px; }

  .ii-strip { width: 100%; }

  /* full bleed to the viewport edge (house mobile law: media leaves the well).
     Both margins are pulled, because .int-well centres its children and a single
     negative margin would land the strip 10px off centre. */
  .ii-map { width: calc(100% + 2 * var(--gutter-phone));
            margin-left: calc(-1 * var(--gutter-phone));
            margin-right: calc(-1 * var(--gutter-phone)); }
  .ii-map iframe { height: 300px; }

  .ii-score { font-size: 40px; }
  .ii-mast .stars { font-size: 22px; }
  .ii-mast { margin-bottom: 32px; }
}