/* ==========================================================================
   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);
}

.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);
}