/* patient-info.html page styles. Owned by wave D (interiors-plan.md); loaded after
   tokens.css, site.css and interior.css on patient-info.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.

   Recipe: humphries-int/09 stacked modules (v2-specs/interiors-spec-patient-info.md).
   Fixed-px recipe (Pass 1b: identical at 1440x900 / 1440x1160 / 1280x900), so the
   module column and its tracks are authored px / 50% exactly as measured. */

.pi-well { max-width: 1060px; margin: 0 auto; }
.pi-well > * + * { margin-top: 48px; }                       /* module gap (recipe 34-48) */

.pi-well p { font-size: 18px; line-height: 1.5; }
.pi-well p + p { margin-top: 14px; }
.pi-nowrap { white-space: nowrap; }

/* display tiers: Overlock SC 32/700 -> Domine 32/400 (family law: no bold display) */
.pi-h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 32px; line-height: 1.2; color: var(--teal-deep);
  margin: 0 0 14px;
}
.pi-h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 1.2; color: var(--teal-deep);
  margin: 0 0 10px;
}

/* ---- R1: two 530 columns on the tint (gold -> --teal-mist) ---- */
.pi-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--teal-mist);
}
.pi-duo-col { padding: 15px; min-width: 0; }
.pi-duo-col--text { padding: 15px 30px; align-self: center; }
.pi-duo-col--text .pi-h3 { text-align: center; }
.pi-card {
  height: 100%;
  background: #fff; border-radius: 4px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.13);
  padding: 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.pi-icon { width: 40px; height: 40px; color: var(--teal); margin-bottom: 12px; flex: none; }
.pi-card p { margin-bottom: 24px; }
.pi-pill { width: 350px; max-width: 100%; }

/* ---- R4 anatomy: 620 text-card group + 424 square photo, cards centred on it ---- */
.pi-cards-row {
  display: grid; grid-template-columns: 620px 424px; justify-content: space-between;
  align-items: center; column-gap: 16px;
}
.pi-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pi-tcard {
  background: #fff; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.13);
  padding: 24px 30px;
}
.pi-tcard--wide { grid-column: 1 / -1; }
.pi-tcard p { font-size: 17px; line-height: 1.5; }
.pi-more, .pi-split-r a {
  color: var(--teal); text-decoration: underline; white-space: nowrap;
  display: inline-block; padding: 11px 0; margin: -11px 0;          /* 44px hit height, no layout shift */
}
/* photo: recipe 424 square sits centred beside SHORT teaser cards; our T1 cards run
   taller (678), so the photo track stretches to the card group (delta P11) and a
   portrait crop (512x820) fills it by cover, never upscaled past its source */
.pi-photo { margin: 0; align-self: stretch; }
.pi-photo img {
  display: block; width: 424px; height: 100%; min-height: 424px; object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius-sheet);
}

/* ---- R2 anatomy: heading + list left (553 measure), centred utility right ---- */
.pi-split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; align-items: center; }
.pi-split-l { min-width: 0; }
.pi-split-l .pi-h3 { text-align: center; }
.pi-list { max-width: 553px; margin: 0 auto; padding-left: 1.25em; font-size: 18px; line-height: 1.5; }
.pi-list li + li { margin-top: 6px; }
.pi-split-r { text-align: center; padding: 0 30px; }

/* ---- tablet: stack (house <=900; humphries stacks at 1119/1023) ---- */
@media (max-width: 1180px) {
  .pi-cards-row { grid-template-columns: 1fr minmax(0, 424px); }
  .pi-photo img { width: 100%; }
}
@media (max-width: 900px) {
  .pi-well > * + * { margin-top: 40px; }
  .pi-duo, .pi-split { grid-template-columns: 1fr; }
  .pi-cards-row { grid-template-columns: 1fr; row-gap: 24px; }
  .pi-photo { max-width: 424px; margin: 0 auto; width: 100%; }
  .pi-photo img { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .pi-split { row-gap: 20px; }
}

/* ---- phone (390 recipe: text-first stack, frozen body, house display cuts) ---- */
@media (max-width: 600px) {
  .pi-well > * + * { margin-top: 32px; }
  .pi-duo { margin-left: -12px; margin-right: -12px; }      /* tint bleeds to the sheet edges */
  .pi-duo-col { padding: 12px; }
  .pi-duo-col--text { padding: 20px 20px 24px; }
  .pi-card { padding: 24px 20px; }
  .pi-h3 { font-size: 27px; }
  .pi-h4 { font-size: 24px; }
  .pi-cards { grid-template-columns: 1fr; }
  .pi-tcard { padding: 20px; }
  .pi-photo { width: auto; max-width: none; margin: 0 -12px; }            /* media bleeds to the sheet edges */
  .pi-photo img { border-radius: 0; }
  .pi-split-r { padding: 0; }
}