/* =============================================================================
   Contact page (pages/contact.html) — the two-column contact block, the form
   panel that holds it, and the FAQ list. Layout glue only:
   the controls inside the form are css/components/form.css, the three person
   cards are css/components/contact-card.css, and nothing here restyles either.
   Sources: docs/components/form-controls.md, contact-section.md,
   docs/design-system/page-guidelines.md, spacing-and-layout.md, motion.md.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   CONTACT BLOCK — intro + person cards beside the form panel.
   The old `padding-top: calc(80px + …)` compensated for the fixed nav; the nav
   is sticky since W2, so `.section` alone carries the rhythm and the rule is
   gone. Stacks at 1200: below that the info column is too narrow to hold the
   compact contact card (64px avatar + email) beside the form.
   --------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--gap-two-column);
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-content-block);
}

.contact-info__text {
  color: var(--section-fg-muted);
  margin-bottom: 0;
}

/* "Get in touch directly" and the cards below it travel as one block. */
.contact-info__direct {
  display: flex;
  flex-direction: column;
  gap: var(--gap-title-description);
}

/* One column beside the form, widening as the grid stacks. */
.contact-cards {
  display: grid;
  gap: var(--card-grid-gap);
}

/* ---------------------------------------------------------------------------
   FORM PANEL — a white card on the near-white ground, sharing the person
   cards' padding and elevation. Radius is the 16px card radius (was
   `--radius-2xl`, 24px): one step above the 12px person cards inside the same
   block, which keeps the panel reading as the larger surface.
   --------------------------------------------------------------------------- */
.contact-form-wrapper {
  padding: var(--card-padding);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
}

.contact-form-wrapper h2 {
  margin-bottom: var(--gap-title-description);
}

/* Consent row — replaces three inline styles (on the div, the input and the
   label). The checkbox itself belongs to form.css. */
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Optically centres the 20px box on the first line of the label text. */
.contact-consent input[type='checkbox'] {
  margin-top: var(--space-1);
}

/* globals.css sets `a { color: currentColor }`, so the privacy-policy link
   needs a treatment of its own to stay recognisable inside the label.
   The division brand reads 4.61:1 on white; the EdTech accent would not. */
.contact-consent a {
  color: var(--color-division-brand);
  text-decoration: underline;
  transition: color var(--duration-fast) var(--ease-standard);
}

.contact-consent a:hover {
  color: var(--color-division-brand-hover);
}

.contact-form__submit {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   SUCCESS PANEL — js/main.js hides the form and shows this one (both through
   an inline `display`, so nothing here may set `display` on either).
   --------------------------------------------------------------------------- */
.form-success {
  padding-block: var(--space-8);
  text-align: center;
}

.form-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-16);
  height: var(--space-16);
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color: var(--color-division-brand);
  background-color: var(--color-division-card-bg);
  border-radius: var(--border-radius-pill);
}

.form-success h3 {
  margin-bottom: var(--space-2);
}

/* globals.css already paints a bare <p> in --color-text-gray and section.css
   re-colours it on a dark ground, so only the rhythm is set here. */
.form-success p {
  margin-bottom: var(--space-6);
}

/* ---------------------------------------------------------------------------
   FAQ — a plain question/answer list. There is no trigger in the markup, so
   the answers stay open.
   --------------------------------------------------------------------------- */
.faq {
  max-width: 800px;
  margin-inline: auto;
}

.faq__item {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.faq__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.faq__item h4 {
  margin-bottom: var(--space-3);
}

.faq__item p {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Breakpoints — desktop-first, 1200 / 900 / 600. The spacing tokens above are
   already redefined per breakpoint in variables.css, so only column counts
   change here.
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}