/* treatments.html page styles. Owned by wave C (interiors-plan.md); loaded after
   tokens.css, site.css and interior.css on treatments.html only. Shared selectors
   (chrome, .sheet, .canvas-wrap, .int-*, .contact) are wave A's: never restyle
   them here; file a request to the main session instead.

   mvendo-int/02 textbook index (v2-specs/interiors-spec-treatments.md): proof photo,
   phone capsule, divider + centred heading, hairline rows 340 thumb / 20 / 640 text.
   Every recipe width is authored px (Pass 1b: fixed at 1440x900 / 1440x1160 / 1280x900). */

.tx-well { max-width: 1000px; margin: 0 auto; }

/* proof photo card: 1000x562.5, house shadow, square corners */
.tx-proof { margin: 0; aspect-ratio: 16 / 9; box-shadow: var(--shadow-card); overflow: hidden; }
.tx-proof img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
/* opener = sourced consultation photo, pre-cropped to the slot's 16:9. */

/* phone capsule: stadium card, radius 30, 18/25.2 centred. Landed height 65.2 = 20 + 25.2 + 20
   (recipe's 10/15 padding + its inner block margins, collapsed into one padding here).
   Block flow, not flex: the tel link stays an inline text link (WCAG 2.5.8 inline exemption). */
.tx-capsule {
  margin: 36px 0 0; padding: 20px 15px;
  background: #fff; border-radius: 30px; box-shadow: var(--shadow-card);
  font-size: 18px; line-height: 25.2px; text-align: center; color: var(--body-ink);
}
.tx-capsule a { color: var(--teal); text-decoration: underline; }

/* ornamental divider: hairline / tooth glyph / hairline */
.tx-divider { display: flex; align-items: center; gap: 20px; margin-top: 48px; color: var(--teal); }
.tx-rule { flex: 1 1 0; height: 1px; background: var(--body-ink); }
.tx-glyph { width: 32px; height: 32px; flex: none; }

.tx-heading {
  margin: 24px 0 0; text-align: center;
  font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px;
  color: var(--teal-deep);
}

/* hairline rows */
.tx-rows { margin-top: 30px; }
.tx-row {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 20px;
  align-items: start; padding: 45px 0;
}
.tx-row + .tx-row { border-top: 1px solid var(--body-ink); }
.tx-row:first-child { padding-top: 15px; }
.tx-row:last-child { padding-bottom: 0; }

/* thumb: 340x191.25 house-shadow card; each category shows its own subject image, uncropped */
.tx-thumb { aspect-ratio: 16 / 9; overflow: hidden; box-shadow: var(--shadow-card); }
.tx-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%);
}
.tx-thumb--restorative, .tx-thumb--endo,
.tx-thumb--dentures, .tx-thumb--whitening { --z: 1; --o: 50% 50%; }

.tx-h4 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 24px; color: var(--teal);
}
.tx-list {
  margin: 20px 0 0; padding-left: 1.2em;
  font-size: 18px; line-height: 25.2px; color: var(--body-ink);
}
.tx-list li::marker { color: var(--teal); }
.tx-list a { color: var(--teal); text-decoration: underline; }

/* ---- phone tier: rows restructure (thumb over text); type frozen per mvendo-mobile/11 ---- */
@media (max-width: 600px) {
  .tx-proof { margin: 0 -12px; }                /* media bleeds to the sheet edges */
  .tx-capsule { margin-top: 28px; padding: 20px 20px; }   /* multi-line text clears the r30 corners */
  .tx-divider { margin-top: 36px; gap: 16px; }
  .tx-glyph { width: 28px; height: 28px; }
  .tx-rows { margin-top: 24px; }
  .tx-row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 32px 0; }
  .tx-row:first-child { padding-top: 8px; }
  .tx-row:last-child { padding-bottom: 0; }
}