/* ==========================================================================
   Dr Malonda Makanda — Inner pages
   Builds on styles.css (tokens, header, footer, buttons, cards, CTA band).
   ========================================================================== */

/* Page hero ------------------------------------------------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 112px);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(207, 230, 230, .6), transparent 70%),
    linear-gradient(160deg, #fff 0%, var(--tint-50) 100%);
}
.page-hero::before {
  content: ""; position: absolute; z-index: -1; left: -140px; bottom: -200px; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(58, 129, 130, .14); box-shadow: 0 0 0 60px rgba(58, 129, 130, .03), 0 0 0 120px rgba(58, 129, 130, .02);
}
.page-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.page-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.page-hero__copy { max-width: 640px; }
.page-hero__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.12; color: var(--dark-900); margin-bottom: 1.2rem; }
.page-hero__title + .rule { margin-bottom: 1.6rem; }
.page-hero__lead { color: var(--ink); margin: 0; max-width: 38em; }


.page-hero__media { position: relative; padding: 0 0 32px 32px; }
.page-hero__img { position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow); }
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__accent { position: absolute; left: 0; bottom: 0; width: 60%; height: 60%; border-radius: var(--radius-lg); background: var(--grad); }
.page-hero__accent::after {
  content: ""; position: absolute; right: -28px; top: -28px; width: 120px; height: 120px; z-index: -1;
  background-image: radial-gradient(var(--primary-300) 1.6px, transparent 1.8px); background-size: 14px 14px; opacity: .6;
}

/* Framed variant (service pages): solid accent bottom-left plus the offset outline bottom-right */
.page-hero__media--framed { padding: 0 22px 32px 32px; }
.page-hero__frame {
  position: absolute; inset: 22px 0 10px 54px; border-radius: var(--radius-lg);
  border: 1.5px solid rgba(159, 207, 207, .45);
}

/* Dark variant (About) — mirrors the homepage "Meet" band */
.page-hero--dark { background: linear-gradient(135deg, var(--dark-950) 0%, var(--dark-900) 45%, #2f5051 100%); color: rgba(255, 255, 255, .82); }
.page-hero--dark::before { border-color: rgba(255, 255, 255, .08); box-shadow: 0 0 0 60px rgba(255, 255, 255, .02), 0 0 0 120px rgba(255, 255, 255, .015); }
.page-hero--dark::after {
  content: ""; position: absolute; z-index: -1; right: -10%; top: -30%; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, rgba(99, 170, 171, .3), transparent 65%);
}
.page-hero--dark .page-hero__title { color: #fff; margin-bottom: .5rem; }
.page-hero--dark .page-hero__title + .rule { margin-bottom: 1.6rem; }
.page-hero--dark .page-hero__lead { color: rgba(255, 255, 255, .85); }
.page-hero--dark .page-hero__img { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.page-hero__role { margin: 0 0 1.4rem; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--primary-300); }
.page-hero__media--arch { max-width: 440px; justify-self: center; padding: 0; }
.page-hero__media--arch .meet__portrait img { object-position: 50% 15%; }

.credentials { display: grid; gap: .9rem; margin: 0; }
.credentials div { display: grid; gap: 2px; padding: 1rem 1.2rem; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.credentials dt { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--primary-300); }
.credentials dd { margin: 0; color: #fff; line-height: 1.5; }

/* Content layout -------------------------------------------------------- */
.page-body { background: #fff; padding-block: var(--section-y); }
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 5vw, 80px); align-items: start; }

.prose { max-width: 760px; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); color: var(--heading); line-height: 1.2;
  margin: 2.8rem 0 1.4rem; padding-bottom: 1rem; position: relative;
}
.prose h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; border-radius: 3px; background: var(--grad); }
.prose p a, .prose li a, .link {
  color: var(--primary-600); font-weight: 700;
  background: linear-gradient(90deg, var(--primary), var(--primary)) no-repeat 0 100% / 100% 1.5px;
  padding-bottom: 1px; transition: color .2s, background-size .3s var(--ease);
}
.prose p a:hover, .prose li a:hover, .link:hover { color: var(--primary-600); background-size: 100% 2.5px; }
.prose strong { color: var(--ink); }

/* Bulleted list */
.ticks { display: grid; gap: .7rem; margin: 0 0 1.6rem; }
.ticks li { position: relative; padding-left: 2rem; font-size: var(--p-size); line-height: 1.65; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tint-100) radial-gradient(circle, var(--primary-600) 0 3.5px, transparent 4px);
}

/* Term list: bold-led items as soft cards */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.8rem; }
.terms li {
  position: relative; padding: 1.25rem 1.3rem 1.3rem; border-radius: var(--radius); background: var(--tint-50); border: 1px solid var(--line);
  font-size: .975rem; line-height: 1.6; color: var(--ink-soft); overflow: hidden; transition: border-color .3s, box-shadow .3s, background .3s;
}
.terms li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); }
.terms li:hover { background: #fff; border-color: transparent; box-shadow: var(--shadow); }
.terms strong { display: inline; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--heading); }
.terms--wide { grid-template-columns: minmax(0, 1fr); }

/* Timeline (antenatal visit pattern) */
.timeline { position: relative; display: grid; gap: 0; margin: 0 0 1.8rem; padding-left: 8px; }
.timeline::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--primary-600), var(--primary)); opacity: .35; }
.timeline li { position: relative; padding: .7rem 0 .7rem 2.6rem; font-size: var(--p-size); color: var(--ink-soft); }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary-600); box-shadow: 0 0 0 5px #fff;
}
.timeline li:last-child::before { background: var(--grad); border-color: transparent; }
.timeline strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--heading); line-height: 1.35; }

/* Callout (urgent / safety notes) */
.callout {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  margin: 2.4rem 0; padding: 1.6rem 1.7rem; border-radius: var(--radius-lg);
  background: var(--tint-100); border: 1px solid var(--tint-200);
}
.callout__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(58, 129, 130, .55); }
.callout__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.callout h2 { margin: .35rem 0 .6rem; padding: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.callout h2::after { display: none; }
.callout p { color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }

/* Closing paragraph after the article */
.prose__close { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.prose__close p { color: var(--ink); }

/* Sidebar --------------------------------------------------------------- */
/* Sticky on desktop. --aside-h is set by pages.js; when the card is taller than
   the viewport the negative top lets it scroll until its bottom is in view, then stick. */
.aside {
  --aside-top: calc(70px + 24px);
  position: sticky; top: min(var(--aside-top), calc(100vh - var(--aside-h, 0px) - 24px));
  display: grid; gap: 1.25rem;
}

.form-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 1.8rem 1.6rem; border-radius: var(--radius-lg); color: rgba(255, 255, 255, .82);
  background: linear-gradient(135deg, var(--dark-950) 0%, var(--dark-900) 50%, #2f5051 100%);
  box-shadow: 0 30px 60px -30px rgba(28, 52, 53, .55);
}
.form-card::before {
  content: ""; position: absolute; z-index: -1; right: -90px; top: -110px; width: 240px; height: 240px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 0 0 36px rgba(255, 255, 255, .04), 0 0 0 72px rgba(255, 255, 255, .03);
}
.form-card .footer__contact { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .925rem; }
.form-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 .5rem; }
.form-card__title + .rule { width: 40px; margin-bottom: 1.3rem; }

/* Sidebar contact form — floating labels: the label sits inside the field
   as a placeholder, then shrinks to the top-left on focus or once filled. */
.contact-form { display: grid; gap: .8rem; }
.contact-form__field { position: relative; }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; padding: 1.45rem .95rem .5rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 1rem; line-height: 1.4; /* >=16px: stops iOS zoom-on-focus */
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form label {
  position: absolute; left: .95rem; right: .95rem; top: 50%; transform: translateY(-50%);
  font-size: 1rem; line-height: 1.2; color: rgba(255, 255, 255, .6); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: top .2s var(--ease), transform .2s var(--ease), font-size .2s var(--ease), color .2s;
}
.contact-form textarea + label { top: 1.05rem; transform: none; }
.contact-form input:focus + label, .contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:focus + label, .contact-form textarea:not(:placeholder-shown) + label {
  top: .5rem; transform: none; font-size: .72rem; color: var(--primary-300);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary-300); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(99, 170, 171, .25); }
.contact-form input:user-invalid, .contact-form textarea:user-invalid { border-color: #e7a19a; }
.contact-form .btn { margin-top: .3rem; }
.contact-form__status { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--primary-300); }
.contact-form__status:empty { display: none; }
.form-card .footer__contact a:hover { color: #fff; }
.form-card .btn { width: 100%; white-space: normal; text-align: center; }

/* Service pages: closing banner sits on the page, no tinted band */
.page-body--service { padding-bottom: clamp(48px, 6vw, 80px); }
.cta-band--flush { padding-top: 0; }
.cta-band--plain { background: none; padding-block: 0 clamp(48px, 6vw, 80px); }

/* About ------------------------------------------------------------------ */
.about-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.about-intro__media { position: sticky; top: calc(var(--header-h) + 24px); padding: 0 32px 32px 0; }
.about-intro__media .page-hero__img { aspect-ratio: 4 / 3; }
.about-intro__media .page-hero__img img { object-position: 50% 20%; }
.about-intro__media .page-hero__accent { left: auto; right: 0; }
.about-intro__media .page-hero__accent::after { right: auto; left: -28px; }

.interests { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-y) clamp(40px, 5vw, 64px); }
.interests__lead { font-family: var(--font-display); font-weight: 600; font-size: var(--h2-size); line-height: 1.15; color: var(--heading); margin-bottom: 1.1rem; }
.interests__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; counter-reset: interest; }
.interests__grid li {
  grid-column: span 2; position: relative; display: flex; flex-direction: column; gap: 1rem; min-height: 180px;
  padding: 1.6rem 1.5rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
  font-family: var(--font-display); font-weight: 600; font-size: var(--h3-size); line-height: 1.3; color: var(--heading);
  transition: background .4s, box-shadow .4s var(--ease), translate .4s var(--ease);
}
.interests__grid li:nth-child(n+4) { grid-column: span 3; }
.interests__grid li::before {
  counter-increment: interest; content: "0" counter(interest);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; box-shadow: var(--shadow);
  font-family: var(--font-body); font-size: .85rem; font-weight: 700; letter-spacing: .1em; color: var(--primary-600);
  transition: background .3s, color .3s;
}
.interests__grid li:hover { background: #fff; box-shadow: var(--shadow); translate: 0 -6px; }
.interests__grid li:hover::before { background: var(--grad); color: #fff; }
.interests__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; margin-top: clamp(32px, 4vw, 48px); }
.interests__close p { margin: 0; max-width: 40em; color: var(--ink); }

/* Contact ---------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: stretch; margin-top: clamp(40px, 5vw, 72px); }
.contact-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: stretch; }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.contact-top .contact-card { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.1rem; padding: 1.6rem 1.5rem 1.7rem; }
.contact-top .contact-card span span { font-size: 1rem; }
.contact-top .emergency { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 56px); }
.contact-top .emergency .h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 1rem; }
.contact-card {
  display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; padding: 1.3rem 1.25rem;
  border-radius: var(--radius); background: var(--tint-50); border: 1px solid var(--line); line-height: 1.5;
  transition: background .3s, box-shadow .3s, border-color .3s, transform .3s var(--ease);
}
a.contact-card:hover { background: #fff; border-color: transparent; box-shadow: var(--shadow); transform: translateY(-4px); }
a.contact-card:hover small { color: var(--primary-700); }
.contact-card svg { width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--tint-100); fill: none; stroke: var(--primary-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background .3s, stroke .3s; }
a.contact-card:hover svg { background: var(--grad); stroke: #fff; }
.contact-card .icon-wa { fill: var(--primary-600); stroke: none; }
a.contact-card:hover .icon-wa { fill: #fff; stroke: none; }
.contact-card small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--primary-600); margin-bottom: 3px; }
.contact-card span span { color: var(--ink); overflow-wrap: anywhere; }

.emergency {
  position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, .88); background: linear-gradient(135deg, var(--dark-950) 0%, var(--dark-900) 50%, #2f5051 100%);
  box-shadow: 0 30px 60px -30px rgba(28, 52, 53, .55);
}
.emergency::before {
  content: ""; position: absolute; z-index: -1; right: -80px; top: -100px; width: 260px; height: 260px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 0 0 40px rgba(255, 255, 255, .04), 0 0 0 80px rgba(255, 255, 255, .03);
}
.emergency .callout__icon { margin-bottom: 1.2rem; }
.emergency .h2 { color: #fff; }
.emergency p { color: rgba(255, 255, 255, .88); margin: 0; }

/* First visit checklist */
.prep { background: var(--tint-50); padding-block: var(--section-y); }
.prep__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.prep__head .h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.prep__head p { margin: 0; }
.prep__list { display: grid; gap: .75rem; }
.prep__list li {
  display: grid; grid-template-columns: 36px 1fr; gap: 1rem; align-items: center; padding: 1rem 1.2rem;
  border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink); line-height: 1.5;
  transition: box-shadow .3s, transform .3s var(--ease);
}
.prep__list li:hover { box-shadow: var(--shadow); transform: translateX(4px); }
.prep__list svg { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--grad); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Contact map */
.contact-map { min-height: 420px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--tint-50); }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(.2) contrast(1.05); }

/* Legal ------------------------------------------------------------------ */
.legal { max-width: 820px; margin-inline: auto; }
.legal h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.legal__meta { display: inline-flex; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; background: var(--tint-50); border: 1px solid var(--line); font-size: .875rem; color: var(--ink-soft); margin-bottom: 1.8rem; }
.legal__meta strong { color: var(--heading); }
.legal address { font-style: normal; padding: 1.3rem 1.5rem; border-radius: var(--radius); background: var(--tint-50); border: 1px solid var(--line); font-size: var(--p-size); line-height: 1.7; color: var(--ink-soft); margin-bottom: 1.4rem; }
.legal address strong { color: var(--heading); }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; max-width: 560px; }
  .prose { max-width: none; }
  .interests__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interests__grid li, .interests__grid li:nth-child(n+4) { grid-column: auto; }
  .interests__grid li:last-child { grid-column: 1 / -1; }
  .contact-grid, .contact-top, .prep__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-map, .contact-map iframe { min-height: 320px; }
}

@media (max-width: 820px) {
  .page-hero__grid, .about-intro { grid-template-columns: minmax(0, 1fr); }
  .page-hero__media { max-width: 560px; }
  .page-hero__media--arch { width: min(100%, 380px); order: -1; }
  .about-intro__media { position: relative; top: auto; max-width: 560px; }
}

@media (max-width: 640px) {
  .page-hero__media { padding: 0 0 22px 22px; }
  .page-hero__media--framed { padding: 0 14px 22px 22px; }
  .page-hero__frame { inset: 14px 0 8px 36px; }
  .about-intro__media { padding: 0 22px 22px 0; }
  .page-hero__accent::after { display: none; }
  .terms { grid-template-columns: minmax(0, 1fr); }
  .callout { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.3rem; }
  .interests__grid { grid-template-columns: minmax(0, 1fr); }
  .interests__grid li { min-height: 0; }
  .interests__close .btn { width: 100%; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet refinements (641px–1024px) ------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Sidebar card spans the full width: form on the left, details on the right */
  .aside { max-width: none; }
  .aside .form-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); align-items: start; }
  .aside .form-card > * { grid-column: 1; }
  .aside .form-card > .footer__contact {
    grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; padding: 0 0 0 clamp(28px, 4vw, 48px);
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, .12);
  }
  /* Contact page: keep map and form side by side */
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 641px) and (max-width: 820px) {
  /* Stacked heroes: let the photo use the full width in a wider crop */
  .page-hero__media:not(.page-hero__media--arch), .about-intro__media { max-width: none; }
  .page-hero__media:not(.page-hero__media--arch) .page-hero__img,
  .about-intro__media .page-hero__img { aspect-ratio: 16 / 9; }
}

/* Phone refinements (≤640px) -------------------------------------------- */
@media (max-width: 640px) {
  .contact-top .contact-card { grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; }
  .contact-top .emergency { padding: 28px 24px; }
  .form-card { padding: 1.6rem 1.3rem; }
}