/* ==========================================================================
   Tech4TIME — pages/contact.css
   The NextJS route pairs the form with an information card side by side; the
   live page leads with the form and lists the three offices underneath. This
   keeps the NextJS pairing for layout and the live page's content within it,
   with the offices as their own band below.
   ========================================================================== */

.contact__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

/* The form is the point of the page, so it takes the wider column once there
   is room for two. */
@media (min-width: 60em) {
  .contact__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }
}

.contact__form-panel {
  padding: var(--space-xl);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.contact__title {
  margin-block-end: var(--space-2xs);
  font-size: var(--text-xl);
}

.contact__lead {
  margin-block-end: var(--space-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   The two edited leads

   Both are written in /admin/ and stored as sanitised HTML, so each is a
   wrapper holding one or more <p> rather than being a paragraph itself. The
   reset zeroes every margin — right everywhere else, and here it would run two
   paragraphs into one. These give the elements inside their spacing back.

   Kept in step with the same rules for .job__body in careers.css and for
   .rte__surface in admin.css: all three render what the same editor writes, so
   what the admin shows is what the page shows.
   -------------------------------------------------------------------------- */

.contact__lead > :first-child,
.section__lead > :first-child { margin-block-start: 0; }

.contact__lead > :last-child,
.section__lead > :last-child { margin-block-end: 0; }

.contact__lead p,
.section__lead p {
  margin-block: var(--space-2xs);
  font-size: inherit;
  color: inherit;
}

.contact__lead ul,
.contact__lead ol,
.section__lead ul,
.section__lead ol {
  display: grid;
  gap: var(--space-2xs);
  padding-inline-start: var(--space-md);
  margin-block: var(--space-2xs);
  text-align: start;
}

.contact__lead li::marker,
.section__lead li::marker { color: var(--silver-accent-mid); }

.contact__lead strong,
.section__lead strong {
  font-weight: 700;
  color: var(--text-primary);
}

.contact__lead em,
.section__lead em { font-style: italic; }

.contact__lead u,
.section__lead u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.form {
  display: grid;
  gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   Reach us directly
   -------------------------------------------------------------------------- */

.contact__aside {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}

.reach {
  display: grid;
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}

.reach__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  transition:
    border-color var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

.reach__item:hover {
  transform: translateY(-2px);
  border-color: var(--silver-accent-mid);
}

.reach__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.125rem;
  color: var(--accent-text);
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.reach__label {
  margin-block-end: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.reach__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* A row may carry several values — three numbers under one "Phone" heading.
   Stacked rather than run together, so each is its own tap target on a phone,
   and laid out the same way .office__phones lays out the same numbers on the
   office card below: the two are the same fact and should not look like two. */
.reach__value--many {
  display: grid;
  gap: var(--space-3xs);
}

/* --------------------------------------------------------------------------
   Offices
   -------------------------------------------------------------------------- */

.offices__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.office {
  padding: var(--space-lg);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition:
    transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.office:hover {
  transform: translateY(-4px);
  border-color: var(--silver-accent-mid);
  box-shadow: var(--shadow);
}

/* National flags are not ours to restyle, so they keep their own colours and
   sit on a plain plate with a hairline to separate white fields from the card. */
.office__flag-wrap {
  display: block;
  width: 3.5rem;
  margin-block-end: var(--space-sm);
  overflow: hidden;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.office__flag {
  display: block;
  width: 100%;
  height: auto;
}

.office__name {
  margin-block-end: var(--space-xs);
  font-size: var(--text-lg);
}

.office__body {
  font-style: normal;
}

.office__line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.office__line + .office__line {
  margin-block-start: var(--space-xs);
}

.office__icon {
  flex-shrink: 0;
  margin-block-start: 0.3em;
  color: var(--accent-text);
}

.office__phones {
  display: grid;
  gap: var(--space-3xs);
}