/* ============================================================================
   Mobility Minder — page styles for contact.php (Contact Us)
   Prefix mmp-contact-. Tokens only. Form controls (.mm-field / .mm-label /
   .mm-tag / .mm-input / .mm-hint / .mm-select / .mm-check) come from site.css;
   this sheet adds the contact tiles, the two-card layout and the navy callback card.
   ========================================================================== */

/* ---------- Hero: copy sits at the top beside the taller tile column ---------- */
.mm-hero .mm-hero__row { align-items: start; }
.mm-hero .mm-hero__copy { padding-top: 6px; }

/* ---------- Contact detail tiles (hero, right column) ---------- */
.mmp-contact-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mmp-contact-tile { position: relative; display: grid; gap: 6px; align-content: start; padding: 24px 24px 22px; border-radius: var(--r-tile); background: var(--off); color: var(--ink); min-height: 150px; }
.mmp-contact-tile--wide { grid-column: span 2; }
.mmp-contact-tile--green { background: var(--green); }
.mmp-contact-tile--sky { background: var(--sky); }
.mmp-contact-tile--ink { background: var(--ink); color: var(--paper); }
.mmp-contact-tile__ico { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; margin-bottom: 8px; }
.mmp-contact-tile--ink .mmp-contact-tile__ico { background: var(--green); color: var(--ink); }
.mmp-contact-tile__l { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.01em; color: inherit; opacity: 0.85; }
.mmp-contact-tile__v { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.05; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.mmp-contact-tile__v--sm { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.02em; min-height: 0; }
a.mmp-contact-tile__v--sm { min-height: 44px; }
a.mmp-contact-tile__v:hover { text-decoration: underline; text-underline-offset: 5px; }
.mmp-contact-tile__s { font-size: var(--text-xs); font-weight: 600; color: inherit; opacity: 0.85; }
.mmp-contact-tile--ink :focus-visible { outline-color: var(--green); }
.mmp-contact-tile--green :focus-visible { outline-color: var(--ink); }
@media (max-width: 480px) { .mmp-contact-tiles { grid-template-columns: 1fr; gap: 10px; } .mmp-contact-tile--wide { grid-column: auto; } .mmp-contact-tile { min-height: 0; padding: 20px; } }

/* ---------- Message form + callback layout ---------- */
.mmp-contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .mmp-contact-grid { grid-template-columns: minmax(0, 1fr); } }
.mmp-contact-card, .mmp-contact-side, .mmp-contact-callback, .mmp-contact-form { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.mmp-contact-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-card); display: grid; gap: 22px; align-content: start; }
.mmp-contact-card h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.05; }
.mmp-contact-side { display: grid; gap: 24px; }
.mmp-contact-callback { position: relative; padding: clamp(26px, 3vw, 34px); border-radius: var(--r-card); background: var(--navy); color: var(--paper); display: grid; gap: 18px; align-content: start; }
.mmp-contact-callback h3 { color: var(--paper); font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.05; }
.mmp-contact-callback > p { color: var(--on-navy); font-size: 17px; }
.mmp-contact-callback .mm-label { color: var(--paper); }
.mmp-contact-callback .mm-tag { background: var(--on-navy-soft); color: var(--paper); }
.mmp-contact-callback .mm-tag--req { background: var(--green); color: var(--ink); }
.mmp-contact-callback .mm-hint, .mmp-contact-callback .mm-micro { color: var(--on-navy); }
.mmp-contact-callback :focus-visible { outline-color: var(--green); }
.mmp-contact-callback .mm-input { border-color: transparent; }
.mmp-contact-callback .mm-input:focus { border-color: var(--green); outline-color: var(--green); }

/* ---------- Light link inside the ink feature card ---------- */
.mmp-contact-link--light { color: var(--paper); }
.mmp-contact-link--light:focus-visible { outline-color: var(--green); }

/* ---------- Form layout ---------- */
.mmp-contact-form { display: grid; gap: 18px; }
.mmp-contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .mmp-contact-row { grid-template-columns: minmax(0, 1fr); } }
.mmp-contact-form textarea.mm-input { min-height: 170px; }
.mmp-contact-form .mm-btn { width: 100%; }
.mmp-contact-assure { display: grid; gap: 8px; padding-top: 4px; }