/* ==========================================================================
   DMT - page level layouts. Home (1b / 1c) plus the shared hero and CTA bands
   every inner page reuses.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared page hero band. Olive eyebrow, h1, lead paragraph, on navy.
   -------------------------------------------------------------------------- */
.dmt-page-hero { background: var(--dmt-navy); padding: var(--dmt-space-7) var(--dmt-gutter) var(--dmt-space-6); }
.dmt-page-hero__inner { max-width: var(--dmt-max); margin-inline: auto; }
.dmt-page-hero h1 { color: var(--dmt-on-navy); max-width: 16ch; }
.dmt-page-hero .dmt-lead { color: var(--dmt-on-navy-body); }

/* --------------------------------------------------------------------------
   Home hero, 1b. Split at 1.15fr .85fr, copy left on navy, image full bleed
   to the right edge.
   -------------------------------------------------------------------------- */
.dmt-hero { background: var(--dmt-navy); }
.dmt-hero__inner {
  max-width: var(--dmt-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  gap: 0;
}
.dmt-hero__copy { padding: var(--dmt-space-7) var(--dmt-space-5) var(--dmt-space-6) var(--dmt-gutter); align-self: center; }
.dmt-hero__copy h1 { font-size: var(--dmt-h1-hero); color: var(--dmt-on-navy); max-width: 14ch; }
.dmt-hero__copy .dmt-lead { color: var(--dmt-on-navy-body); margin-bottom: var(--dmt-space-4); }
.dmt-hero__copy .dmt-btn-row { margin-bottom: var(--dmt-space-6); }

.dmt-hero-media { position: relative; min-height: 560px; }
.dmt-hero-media .dmt-image,
.dmt-hero-media .dmt-image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1023px) {
  .dmt-hero__inner { grid-template-columns: 1fr; }
  .dmt-hero__copy { padding: var(--dmt-space-6) var(--dmt-gutter); }
  .dmt-hero-media { min-height: 320px; }
}
@media (max-width: 767px) {
  .dmt-hero-media { min-height: 210px; }
  .dmt-hero__copy .dmt-btn-row { margin-bottom: var(--dmt-space-4); }
  /* Mobile order: copy, image, credential strip. */
  .dmt-hero__credentials { order: 3; }
}

/* --------------------------------------------------------------------------
   Heading column plus content column, used by How I treat teaser and others.
   -------------------------------------------------------------------------- */
.dmt-teaser { display: grid; grid-template-columns: .8fr 1.6fr; gap: var(--dmt-gap-column); align-items: start; }
.dmt-teaser__head h2 { margin-bottom: var(--dmt-space-3); }
.dmt-teaser__head p { font-size: var(--dmt-small); margin-bottom: var(--dmt-space-3); }
@media (max-width: 1023px) { .dmt-teaser { grid-template-columns: 1fr; gap: var(--dmt-space-5); } }

/* --------------------------------------------------------------------------
   Meet Dan teaser, portrait left at .9fr 1.1fr, on white.
   -------------------------------------------------------------------------- */
.dmt-meet { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--dmt-gap-column); align-items: center; }
.dmt-meet__media { min-height: 460px; position: relative; }
.dmt-meet__media .dmt-image,
.dmt-meet__media .dmt-image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .dmt-meet { grid-template-columns: 1fr; gap: var(--dmt-space-5); }
  .dmt-meet__media { min-height: 320px; order: -1; }
}

/* --------------------------------------------------------------------------
   Booking block. Copy left, Cliniko embed right.
   -------------------------------------------------------------------------- */
.dmt-booking { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--dmt-gap-column); align-items: start; }
.dmt-booking__note { font-size: var(--dmt-small); color: var(--dmt-text-meta); margin-top: var(--dmt-space-3); }
@media (max-width: 1023px) { .dmt-booking { grid-template-columns: 1fr; gap: var(--dmt-space-5); } }

/* --------------------------------------------------------------------------
   Navy CTA band. Every page ends on one of these before the footer.
   -------------------------------------------------------------------------- */
.dmt-cta-band { background: var(--dmt-navy); padding: var(--dmt-section-y) var(--dmt-gutter); }
.dmt-cta-band__inner {
  max-width: var(--dmt-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: var(--dmt-gap-column);
  align-items: center;
}
.dmt-cta-band h2 { color: var(--dmt-on-navy); margin-bottom: var(--dmt-space-2); }
.dmt-cta-band p { color: var(--dmt-on-navy-body); }
@media (max-width: 1023px) { .dmt-cta-band__inner { grid-template-columns: 1fr; gap: var(--dmt-space-4); } }