/* css/page-patient-info.css : patient-info.html. Owner: wave E.
   Body composition: mvendo-int/07 patient-info cards (adapted spec: v2-specs/interiors-spec-patient-info.md).
   Loaded LAST, after tokens.css + site.css + interior.css. Page rules only: every selector is scoped
   to this page's own np-* classes inside .sheet-body; the chassis (.sheet, .sheet-title, .contact-band,
   chrome) is never restyled. The ONE touch on the atom is the E-P4 wrap rule for the long document
   labels (site.css's own <= 374 guard, applied to these pills only). mvendo's column is fixed px: every
   width below is a fixed recipe value clamped by the well; nothing responds to viewport height. */

/* screen-reader-only section head (#forms has no visible heading in the recipe) */
.np-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ 1 intro photo card */
/* recipe: reception photo 1000 x 563 (16:9), house shadow, centred in the column */
.np-photo { width: min(1000px, 100%); margin: 0 auto; box-shadow: var(--shadow-df); }
.np-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }

/* ------------------------------------------------------------------ 2 welcome line */
/* recipe: small-caps welcome line under the photo -> Gelasio 24 pale steel (E-P14) */
.np-welcome {
  max-width: 990px; margin: 40px auto 0;
  font: 400 24px/32.4px var(--font-display); color: var(--steel-pale); text-align: center; text-wrap: balance;
}

/* ------------------------------------------------------------------ 3 forms: document pills */
.np-forms { position: relative; margin-top: 30px; text-align: center; }
.np-lead { max-width: 990px; margin: 0 auto; font: 400 18px/25px var(--font-body); color: var(--body-ink); }
/* recipe pill rows: 600 x 48 atoms, rows 30 apart. One track: at least 600 (recipe), wider only if a
   label needs it, never wider than the well; both pills stretch to it and share one width */
.np-docs {
  margin-top: 52px;
  display: grid; grid-template-columns: minmax(min(600px, 100%), max-content); justify-content: center; row-gap: 30px;
}
/* E-P4: an honest document label may be longer than the well; it wraps inside the atom instead of
   overflowing (site.css <= 374 guard, same declarations). One-line labels land the atom's 48px */
.np-docs .pill, .np-super .pill {
  max-width: 100%;
  height: auto; min-height: var(--pill-h); padding-top: 10px; padding-bottom: 10px;
  white-space: normal; text-align: center; line-height: 1.25;
}
.np-docs-note { max-width: 990px; margin: 20px auto 0; font: 400 16px/27.2px var(--font-body); color: var(--grey-text); text-wrap: balance; }

/* ------------------------------------------------------------------ 4 insurance super-card (#insurance) */
/* recipe: 990 wide, radius 50, padding 30, house shadow, centred stack; icon dropped (E-P1) */
.np-super {
  width: min(990px, 100%); margin: 78px auto 0; padding: 30px 30px 31px;
  border-radius: 50px; background: #fff; box-shadow: var(--shadow-df); text-align: center;
}
.np-head { font: 400 24px/30px var(--font-display); color: var(--steel); text-wrap: balance; }
.np-super .np-head { margin-top: 10px; }
.np-super__text { max-width: 900px; margin: 24px auto 0; font: 400 18px/25px var(--font-body); color: var(--body-ink); }
.np-super__text p + p { margin-top: 17px; }
.np-tel { min-width: min(600px, 100%); margin-top: 34px; }

/* ------------------------------------------------------------------ 5 card / photo checkerboard */
/* recipe: two 500 columns in the 1000 column; cards 470 (15 inset), radius 50, shadow; photos 410 x 230
   bare; rows 66 apart; card and photo centred on each other */
.np-board { width: min(1000px, 100%); margin: 66px auto 0; display: grid; row-gap: 66px; }
.np-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.np-row--pair { align-items: stretch; }          /* E-P7: two cards, one shared height */
.np-row--pair .np-card { justify-content: flex-start; }   /* the pair's heads share one line */
.np-card {
  justify-self: center; width: calc(100% - 30px); min-height: 264px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 30px 30px; border-radius: 50px; background: #fff; box-shadow: var(--shadow-df); text-align: center;
}
.np-card p { margin-top: 20px; font: 400 18px/25px var(--font-body); color: var(--body-ink); }
.np-card p + p { margin-top: 12px; }
.np-card .np-hours { width: 100%; max-width: 320px; margin-top: 18px; }
.np-card .np-hours-note { margin-top: 10px; font: 400 15px/20px var(--font-body); color: var(--body-ink); }
.np-card .np-hours-note + p { margin-top: 14px; }
/* recipe card link: grey, underlined; hover to the brand colour (mvendo-interactive/05) */
.np-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
  font: 400 18px/1.3 var(--font-body); color: var(--grey-text);
  text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease;
}
.np-link:hover { color: var(--steel); }
.np-shot { justify-self: center; width: 82%; height: auto; aspect-ratio: 41 / 23; object-fit: cover; border-radius: 0; }
.np-shot--pay { object-position: 100% 50%; }     /* keep the phone, reader, card and receipt */

/* ------------------------------------------------------------------ tablet stack (<= 900; E-P11) */
@media (max-width: 900px) {
  .np-board { margin-top: 56px; row-gap: 48px; }
  .np-row { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .np-row--card-first .np-shot { order: -1; }    /* photo first in every row, explicitly */
  .np-card { width: 100%; max-width: 470px; }
  .np-shot { width: 100%; max-width: 410px; }
}

/* ------------------------------------------------------------------ phone (<= 600; house system x0.6) */
@media (max-width: 600px) {
  /* media to the sheet's inner edges (chassis .bleed geometry, re-declared: this sheet loads later) */
  .np-photo { width: auto; margin-inline: calc(50% - var(--sheet-inner) / 2); box-shadow: none; }
  .np-welcome { margin-top: 24px; }
  .np-forms { margin-top: 18px; }
  .np-docs { margin-top: 31px; row-gap: 18px; }
  .np-docs-note { margin-top: 12px; }
  .np-super { margin-top: 47px; padding: 24px 20px 25px; }
  .np-super .np-head { margin-top: 6px; }
  .np-super__text { margin-top: 14px; text-align: left; }   /* E-P15: 11-line paragraphs read left-aligned in 308px */
  .np-tel { margin-top: 20px; }
  .np-board { margin-top: 40px; row-gap: 40px; }
  .np-card { max-width: none; min-height: 0; padding: 28px 20px 24px; }
  .np-shot { width: var(--sheet-inner); max-width: none; margin-inline: calc(50% - var(--sheet-inner) / 2); }
}