/* ==========================================================================
   LawFiq — Contact
   Additions on top of sections.css and forms.css. Type-led: the hero
   carries the practical details in a ruled card beside the headline;
   everything else is composed from the shared primitives.
   Logical properties only.
   ========================================================================== */

.page-hero--contact .page-hero__grid {
  align-items: start;
}

@media (max-width: 899px) {
  /* Match sections.css's mobile collapse — the override above outranks it */
  .page-hero--contact .page-hero__grid {
    grid-template-columns: 1fr;
  }
}

/* Contact card — a small ledger of the ways to reach us */
.contact-card {
  margin: 0;
  border-block-start: 2px solid var(--color-gold);
  max-inline-size: 30rem;
  justify-self: end;
  inline-size: 100%;
}

@media (max-width: 899px) {
  .contact-card {
    justify-self: start;
  }
}

.contact-card > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-end: var(--hairline) solid color-mix(in srgb, var(--color-gold) 45%, transparent);
}

.contact-card dt {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  padding-block-start: 0.35em;
}

.contact-card dd {
  margin: 0;
  color: var(--color-ink);
}

.contact-card dd a {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
}

.contact-card dd a:hover {
  color: var(--color-action);
}

.contact-card address {
  font-style: normal;
}

/* Address, phone and email stay left-to-right on the Arabic page */
html[lang="ar"] .contact-card dd a,
html[lang="ar"] .contact-card address {
  direction: ltr;
  display: inline-block;
  text-align: start;
}