/* pages.css — layout helpers for interior pages (What is DPC, Services, Membership,
   About, FAQ, Contact, Enroll). Builds only on existing tokens + kit classes. */

/* Centered prose / lead text */
.ph-prose { max-width: 68ch; }
.ph-prose.is-center { margin-inline: auto; text-align: center; }
.ph-prose p { font-size: var(--text-md); }

/* Two-up grid */
.ph-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* Generic bordered tile with a tick list */
.ph-tile { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-xs); }
.ph-tile.is-warm { background: var(--sand-50); border-color: var(--border-warm); box-shadow: none; }
.ph-tile.is-muted { background: var(--neutral-50); box-shadow: none; }
.ph-tile h3 { margin: 0 0 var(--space-4); }
.ph-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.ph-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-base); color: var(--fg2); }
.ph-ticks li svg { flex: none; margin-top: 3px; }
.ph-ticks.is-muted li { color: var(--fg3); }

/* "Works with your insurance" callout */
.ph-callout { display: flex; gap: var(--space-5); align-items: flex-start;
  background: var(--sand-100); border: 1px solid var(--border-warm); border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7); }
.ph-callout-ic { width: 56px; height: 56px; flex: none; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); }
.ph-callout h3 { margin: 0 0 0.4rem; }
.ph-callout p { margin: 0; }

/* Who it's for — chips */
.ph-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.ph-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--green-50);
  color: var(--green-800); font-weight: 700; font-size: var(--text-sm); padding: 9px 16px;
  border-radius: var(--radius-pill); }

/* About — long bio */
.ph-bio { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ph-bio-media { position: sticky; top: 120px; }
.ph-bio-credential { font-size: var(--text-sm); color: var(--fg3); margin: 6px 0 0; }

/* Membership — includes / extras */
.ph-member-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-5); align-items: start; }

/* Enroll */
.ph-enroll-embed { background: #fff; border: 1.5px dashed var(--border-default); border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 6vw, 4rem) var(--space-6); text-align: center; max-width: var(--container-narrow);
  margin: 0 auto; }
.ph-enroll-embed .ph-enroll-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.ph-enroll-embed h3 { margin: 0 0 0.5rem; }
.ph-enroll-embed p { margin: 0 auto var(--space-5); max-width: 44ch; }
.ph-enroll-portal { text-align: center; margin-top: var(--space-6); font-size: var(--text-base); color: var(--fg3); }

/* Atlas enrollment iframe */
.ph-enroll-frame { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.ph-enroll-frame iframe { width: 100%; border: none; display: block; }

/* Contact extras */
.ph-contact-aside { display: grid; gap: var(--space-4); margin-top: var(--space-6); }

/* Legal pages */
.ph-legal { max-width: 720px; margin: 0 auto; }
.ph-legal-meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center;
  padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--fg3); }
.ph-legal-flag { display: inline-flex; align-items: center; gap: 7px; background: var(--warning-bg);
  color: #8A6520; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); }
.ph-legal-sec { margin-bottom: var(--space-6); }
.ph-legal-sec h2 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.ph-legal-sec p { color: var(--fg2); }
.ph-legal-contact { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--fg3); }

/* Section header alignment helper (left, with top margin spacing) */
.ph-section .ph-sechead + .ph-callout,
.ph-section .ph-sechead + .ph-grid-2,
.ph-section .ph-sechead + .ph-grid-3 { margin-top: var(--space-2); }

@media (max-width: 860px) {
  .ph-grid-2, .ph-member-grid, .ph-bio { grid-template-columns: 1fr; }
  .ph-bio-media { position: static; }
  .ph-bio-media .ph-photo { max-width: 420px; }
}
@media (max-width: 560px) {
  .ph-callout { flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
}