/* ==========================================================================
   about.css — About & Contact page sections: mission, values grid, team band,
   contact form. Reuses global tokens/components.
   ========================================================================== */

/* ---- Simple page hero (shared by About & Contact) ------------------------- */
.page-hero {
  text-align: center;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--space-8);
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(91,52,240,0.10), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--color-bg-alt) 100%);
}
.page-hero h1 { font-size: var(--fs-hero); margin-top: var(--space-3); }
.page-hero .lead { margin-top: var(--space-4); }

/* ---- Mission split -------------------------------------------------------- */
.mission { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.mission__stat {
  display: grid; place-content: center; text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700)); color: #fff;
}
.mission__stat .num { font-size: clamp(3rem, 8vw, 5rem); font-weight: var(--fw-bold); line-height: 1; }
.mission__stat .cap { margin-top: var(--space-3); color: rgba(255,255,255,0.85); max-width: 24ch; margin-inline: auto; }
@media (max-width: 800px) { .mission { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---- Core values grid ----------------------------------------------------- */
.values-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-top: var(--space-8);
}
.value-card { text-align: left; }
.value-card__icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; margin-bottom: var(--space-3);
}
.value-card__icon svg { width: 22px; height: 22px; }
.value-card h3 { font-size: 1.05rem; }
.value-card p { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--space-2); }
@media (max-width: 1000px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .values-grid { grid-template-columns: 1fr; } }

/* ---- Team band ------------------------------------------------------------ */
.team-band { text-align: center; padding: clamp(2.5rem, 6vw, 4rem); }
.team-band .pill {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4);
  padding: 6px 16px; border-radius: var(--radius-pill); background: var(--color-bg-alt);
  color: var(--color-primary); font-weight: var(--fw-semibold); font-size: var(--fs-small);
}
.team-band .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #28c840; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

.contact-form { padding: clamp(1.5rem, 4vw, 2.5rem); }
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-weight: var(--fw-medium); margin-bottom: var(--space-2); }
.form-field input,
.form-field textarea {
  width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field input:focus,
.form-field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(91,52,240,0.15); }
.form-field textarea { resize: vertical; min-height: 140px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-status { margin-top: var(--space-3); font-size: var(--fs-small); min-height: 1.2em; }
.form-status.is-error { color: #d64545; }
.form-status.is-success { color: #28994a; }

.contact-info { display: grid; gap: var(--space-5); }
.contact-info__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info__icon {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md);
  background: var(--color-bg-alt); color: var(--color-primary);
}
.contact-info__icon svg { width: 22px; height: 22px; }
.contact-info__item strong { display: block; color: var(--color-primary); }
.contact-info__item a, .contact-info__item span { color: var(--color-text-muted); }

/* ---- Contact page: social row (reuses the footer .social component) --------
   The footer sits on navy, so .social__link is styled for a dark background.
   On the white contact page it needs the inverse treatment. */
.contact-social { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.contact-social__title {
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.contact-social .social { margin-top: 0; }
.contact-social .social__link {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-primary);
}
.contact-social .social__link:hover {
  background: #fff;
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Contact info block — three bugs, one cause.

   `.contact-info__item strong { display: block }` was turning EVERY <strong>
   into a block, not just the item's heading. So:
     - "Our chat team speaks <strong>English and French</strong>." broke, and the
       trailing full stop was pushed onto a line of its own — that is the stray
       "dot" under the text;
     - the email link ran straight into the sentence after it.
   And `.contact-info__item a { color: var(--color-text-muted) }` painted the FAQ
   and Privacy Policy links grey, so they read as dead text rather than links.
   ========================================================================== */

/* Only the item's OWN heading is a block. Emphasis inside a sentence stays inline. */
.contact-info__item > div > strong { display: block; margin-bottom: 0.15rem; }
.contact-info__item span strong,
.contact-info__item p strong { display: inline; color: inherit; font-weight: var(--fw-semibold); }

/* A direct email link (support@, legal@) gets its own line; links inside a
   sentence stay where they are. */
.contact-info__item > div > a { display: block; margin-bottom: 0.15rem; }

/* Links must look like links. */
.contact-info__item a {
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.contact-info__item a:hover { color: var(--color-primary); }
.contact-info__item span { color: var(--color-text-muted); }