/* css/page-magnified-dentistry.css : magnified-dentistry.html. Owner: wave C.
   Body composition: belladental-int/02 procedure page (adapted spec:
   v2-specs/interiors-spec-magnified-dentistry.md). Loaded LAST, after tokens.css + site.css +
   interior.css. Page rules only: every selector is one of this page's own classes inside .sheet-body.
   Pass 1b: belladental's variant row is a fixed 1/3 + 2/3 split of its 1128 container (image 345.9,
   gap 45); carried as ratios of the chassis well. Vertical spacings are the recipe's px. Prose is the
   chassis .prose (16/27.2, 70ch, the well's left edge = belladental's left-aligned text). */

/* ------------------------------------------------------------------ variant rows (title over split) */
.mag-rows { margin-top: 46px; }
.mag-row + .mag-row { margin-top: 31.7px; }
.mag-row__h {
  margin: 0 0 11.4px; font: 400 27.424px/1.25 var(--font-display);
  color: var(--steel-pale); text-align: left; text-wrap: balance;
}
.mag-row__split {
  display: grid; align-items: start;
  grid-template-columns: calc(100% * 345.9 / 1128) 1fr;
  column-gap: calc(100% * 45 / 1128);
}
.mag-row__media { margin-block: 0; }
.mag-row__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
/* a white document page on the white sheet needs an edge (delta M-C2) */
.mag-row__media--doc img { outline: 1px solid var(--rule); outline-offset: -1px; }
.mag-row__text > :last-child { margin-bottom: 0; }

/* outro text links: belladental's underlined link 21 below the paragraph, as a 44px target (class B) */
.mag-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--steel); text-decoration: underline; text-underline-offset: 2px;
}
.mag-link:hover { color: var(--ink); }
.prose p.mag-row__more { margin-top: calc(-1 * (44px - 27.2px) / 2); }
.prose p.mag-row__doc { margin: 0 0 21px; }
/* the document pill is the FLAVOR atom unchanged: .prose a would otherwise underline it */
.prose a.mag-doc-pill { text-decoration: none; }

/* research row: the bibliography runs under the split on the prose axis */
.mag-pubs-wrap { margin-top: 29px; }
.mag-pubs li + li { margin-top: 8px; }
.prose .mag-pubs a { color: var(--steel); }
.prose .mag-pubs a:hover { color: var(--ink); }

.mag-outro { margin-top: 46px; }
.mag-outro a { color: var(--steel); }
.mag-outro a[href^="tel:"] { white-space: nowrap; }

/* ------------------------------------------------------------------ stack (<= 767): image first */
@media (max-width: 767px) {
  .mag-row__split { grid-template-columns: 1fr; row-gap: 16px; }
  .mag-row__media { order: -1; }
}

/* ------------------------------------------------------------------ phone system (<= 600) */
/* the heading tier cuts 27.424 -> 24 (chassis sheet-h3 rule), images run full-bleed to the sheet's
   inner edges (.bleed), spacings x0.6 */
@media (max-width: 600px) {
  .mag-rows { margin-top: 28px; }
  .mag-row + .mag-row { margin-top: 19px; }
  .mag-row__h { margin-bottom: 7px; font-size: 24px; }
  .mag-pubs-wrap { margin-top: 18px; }
  .mag-outro { margin-top: 28px; }
}