/* =====================================================================
   TRUST PAGES — src/_layouts/trust.njk (#1001631): /about/, /fees/, /counselling/ hub.
   Built from the same pack pieces as the service template (components.css
   "SHARED PAGE PIECES"). Tokens only. Docs: docs/COMPONENTS.md
   ===================================================================== */

.page-trust .hero { padding-top: var(--space-l); }
.page-trust .hero__title { font-size: var(--step-4); }

/* Question H2s with their own eyebrow: label + heading stack in the left column */
.svc-q__head > * + * { margin-top: var(--space-s); }

/* About: the credentials list runs to six rows, one column reads better */
.about-split__facts--full { grid-template-columns: minmax(0, 1fr); }
.about-split__facts dd a { font-weight: var(--weight-medium); }

/* About "How I got here": Brian's own sofa photo under the heading (#1001874) */
.about-story__photo { max-width: 420px; overflow: hidden; border-radius: var(--radius-md); border: var(--border-w) solid var(--color-border); }
.about-story__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* the author byline sits under the dark booking band — give it air */
.trust-author { padding-top: var(--space-xl); }

/* Counselling hub (#1001632): the lines under the issue cards and the steps */
.hub-more { margin-top: var(--space-xl); max-width: var(--measure); color: var(--color-text-muted); }
.hub-need { margin-top: var(--space-2xl); max-width: var(--measure); }

/* Online booking (#1002569): the "Book appointment online" buttons on /book/ + the Google Calendar modal */
.btn--booking .icon { flex: none; width: 20px; height: 20px; }
.contact-band__booking { display: grid; gap: var(--space-2xs); justify-items: start; }
.contact-band__booking p { font-size: 1rem; color: var(--green-300); }
.booking-modal {
  width: min(960px, calc(100vw - 2rem)); height: min(860px, calc(100dvh - 2rem));
  max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.booking-modal[open] { display: flex; flex-direction: column; }
.booking-modal::backdrop { background: var(--color-modal-backdrop); backdrop-filter: blur(2px); }
html:has(.booking-modal[open]) { overflow: hidden; }
.booking-modal__bar {
  display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap;
  padding: 0.75rem 0.75rem 0.75rem var(--space-m); background: var(--green-700); color: var(--color-dark-text);
}
.booking-modal__title { display: flex; align-items: center; gap: var(--space-2xs); margin: 0 auto 0 0; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2; color: inherit; }
.booking-modal__title .icon { flex: none; color: var(--green-300); }
.booking-modal__newtab { font-size: 0.9375rem; color: var(--green-300); }
.booking-modal__newtab:hover, .booking-modal__newtab:focus-visible { color: var(--color-dark-text); }
.booking-modal__close {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border: var(--border-w) solid var(--green-600); border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.booking-modal__close:hover, .booking-modal__close:focus-visible { background: var(--green-800); }
.booking-modal__close:focus-visible { outline: 3px solid var(--green-300); outline-offset: 2px; }
.booking-modal__body { position: relative; flex: 1; min-height: 0; background: var(--color-modal-frame); }
.booking-modal__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.booking-modal__loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-text-muted); }
.booking-modal.is-loaded .booking-modal__loading { display: none; }
@media (max-width: 599px) {
  .booking-modal { width: 100vw; height: 100dvh; border-radius: 0; }
  .booking-modal__newtab { display: none; }
}