/* Danbe Dental - procedure pages (wave E).
   Loaded AFTER tokens.css, site.css and interior.css, on these four pages only:
   prosthodontics.html, endodontics.html, periodontal-treatment.html,
   oral-surgery.html.

   Three recipes live here, one per page variant:
     P2  mvendo-int/01-procedure-page      -> .pr-stack .pr-media .pr-prose .pr-geo
     P1  humphries-int/02 + /06            -> .pr-callstrip .pr-thesis .pr-lede .pr-rows
     P3  hanoverendo-int/03-procedure-page -> .pr-callline .pr-centered
   Adapted values and every A/B/C delta are recorded in
   v2-specs/pages/<page>-spec.md. Nothing here restyles anything site.css or
   interior.css already owns; the well, the sheets, the title strip, the pill atom
   and the prefooter are all the chassis's. */

/* the page band: the interior sections ride the homepage's washed canvas */
.pr-page { padding: 0; }

/* =========================================================================
   P2 : mvendo-int/01. Three floated objects in a 1000px well inside the
   chassis's 1060 column, then the back pill. The well is the recipe's own
   fixed px column, so it only re-centres.
   ========================================================================= */
.pr-stack {
  width: 100%; max-width: 1000px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 40px;                      /* the recipe's object spacing = the well gap */
}

/* media card: the recipe's 16:9 box carrying the house shadow, no radius.
   1000 x 562.5 at every desktop viewport because the well is fixed. */
.pr-media {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  object-fit: cover;
  box-shadow: var(--shadow-plate);
  border-radius: 0;
}

/* prose: plain left-aligned clinical paragraphs, no headings, no lists */
.pr-prose { margin: 0; }
.pr-prose p {
  margin: 0 0 18px;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink);
}
.pr-prose p:last-child { margin-bottom: 0; }

/* geo capsule: the stadium card. radius 30 and padding 10/15 are the measured
   recipe; the 90.4px height is content, never authored. */
.pr-geo {
  margin: 0;
  background: var(--white);
  border-radius: 30px;
  padding: 10px 15px;
  box-shadow: var(--shadow-plate);
  text-align: center;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink);
}
.pr-geo a { color: var(--azure-deep); text-decoration: underline; }

/* =========================================================================
   P1 : humphries-int/02 (call strip + thesis) + /06 (leaflet rows).
   ========================================================================= */

/* the strip hugs its sentence: intrinsic width, centred by the well */
.pr-callstrip {
  margin: 0; align-self: center;
  background: var(--plate-fill);
  border-radius: var(--radius-slab);
  box-shadow: var(--shadow-plate);
  padding: 10px;
  text-align: center;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink);
}
.pr-callstrip a { color: var(--azure-deep); text-decoration: underline; font-weight: 700; }

/* the page-specific statement line: the recipe's H3-as-statement */
.pr-thesis {
  width: 100%; margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-slab-title); line-height: var(--lh-slab-title);
  color: var(--ink);
  text-align: left;
}
.pr-lede { width: 100%; margin: 0; }
.pr-lede p {
  margin: 0 0 18px;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink);
}
.pr-lede p:last-child { margin-bottom: 0; }

/* rows: photo left 520, text right 520, 20px gap inside the 1060 column.
   Rows never alternate and carry no CTA (recipe law). */
.pr-rows { width: 100%; }
.pr-row {
  display: grid; grid-template-columns: 520px minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.pr-row + .pr-row {
  margin-top: 40px; padding-top: 40px;
  border-top: 1px solid var(--hairline);      /* the recipe's thin hairline */
}
.pr-row img {
  width: 100%; height: auto;
  aspect-ratio: 520 / 293; object-fit: cover;
  box-shadow: var(--shadow-plate); border-radius: 0;
}
.pr-row h2 {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 25px; line-height: 32px;
  color: var(--ink);
}
.pr-row p {
  margin: 0 0 14px;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink);
}
.pr-row p:last-child { margin-bottom: 0; }

/* =========================================================================
   P3 : hanoverendo-int/03. Media first, centred call line, centred prose.
   ========================================================================= */
.pr-wide { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }

.pr-callline {
  width: 100%; max-width: 782px; margin: 0 auto;
  text-align: center;
  font-size: var(--size-lede); line-height: var(--lh-lede);
  color: var(--body-ink);
}
.pr-callline a { color: var(--azure-deep); text-decoration: underline; font-weight: 700; }

.pr-centered { width: 100%; text-align: center; }
.pr-centered p {
  margin: 0 0 20px;
  font-size: var(--size-lede); line-height: var(--lh-lede);
  color: var(--body-ink);
}
.pr-centered p:last-child { margin-bottom: 0; }
.pr-centered h2 {
  margin: 36px 0 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-practice); line-height: var(--lh-practice);
  color: var(--ink);
}
.pr-centered h2:first-child { margin-top: 0; }

/* =========================================================================
   TABLET (<=900) : the rows stack photo-first (the precedent stacks at 1119).
   Nothing rescales; the sections simply get taller.
   ========================================================================= */
@media (max-width: 1119px) {
  .pr-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pr-row img { aspect-ratio: 16 / 9; }
}

/* =========================================================================
   PHONE (<=600) : house mobile law. Media goes full bleed to the viewport
   edge while prose stays in the 350px well; body copy is frozen and only
   display type is cut. The well's phone padding is 20px, so a media element
   reaches the edge with a -20px inline margin.
   ========================================================================= */
@media (max-width: 600px) {
  .pr-stack { gap: 28px; }

  .pr-media,
  .pr-row img,
  .pr-bleed {
    width: calc(100% + (var(--gutter-phone) * 2));
    margin-left: calc(var(--gutter-phone) * -1);
    margin-right: calc(var(--gutter-phone) * -1);
    max-width: none;
  }

  /* the flush sheet's 15px frame is dropped so the P3 media can reach the edge */
  .pr-page .int-sheet--flush {
    padding: 0; background: none; box-shadow: none;
    width: calc(100% + (var(--gutter-phone) * 2));
    margin-left: calc(var(--gutter-phone) * -1);
    margin-right: calc(var(--gutter-phone) * -1);
  }
  .pr-page .int-sheet--flush .pr-wide { box-shadow: var(--shadow-plate); }

  .pr-callstrip { align-self: stretch; }
  .pr-row + .pr-row { margin-top: 32px; padding-top: 32px; }
  .pr-row h2 { font-size: 22px; line-height: 29px; }

  .pr-callline,
  .pr-centered p { font-size: var(--size-body); line-height: var(--lh-body); }
}