/* "Your Information" step: 2-column layout (form + summary sidebar), matching the hub design's
   details/summary layout. Kept separate from meeting-hub.css - loaded alongside it, doesn't touch
   it. Only presentational; no ids/classes here are read by meeting.js. All classes stay mh-. */

/* meeting-hub.css sets .mh-page to 800px wide; the hub design page is 760px. Loaded after
   meeting-hub.css, so this override wins in the cascade without editing that file. */
.mh-page {
  max-width: 760px;
}

/* Header tagline (meeting-hub.css doesn't define this - hub.php always shows brand + tagline
   together, even when a logo is also present). */
.mh-tagline {
  margin-top: 8px;
  font-size: 0.95rem;
  color: #6b7a8d;
}

/* Small "selected service" reminder bar shown atop the Time step (service-menu links only),
   matching the hub design's service-summary bar. */
.mh-service-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0ebe5;
}
.mh-summary-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a2332;
}
.mh-summary-duration {
  font-size: 0.85rem;
  color: #8a8f97;
}

.mh-details-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  margin-top: 8px;
}

.mh-summary-box {
  background: #f9f6f2;
  border-radius: 12px;
  padding: 20px;
}
.mh-summary-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a2332;
  margin-bottom: 16px;
}
.mh-summary-row { margin-bottom: 4px; }
.mh-summary-key {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #8a8f97;
  margin-bottom: 2px;
}
.mh-summary-val {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a2332;
}
.mh-summary-divider {
  height: 1px;
  background: #e8e3dd;
  margin: 14px 0;
}

@media (max-width: 640px) {
  .mh-details-layout { grid-template-columns: 1fr; }
}