/* ---- Contact directory ----
   Generic, reusable "intro + grid of regional contact cards" section
   pattern. First used for "Reach out to your local BDM" on the Partner
   With Us page (Figma node 18624:17552), but knows nothing about BDMs
   specifically — reusable for any grid of named regional/team contacts.
   Cards are rendered from data by js/contact-directory.js rather than
   duplicated six times in markup — see CONTACTS there.

   Structure:
     .contact-directory > .contact-directory__inner
       > .contact-directory__intro   (eyebrow / heading / body, centred)
       > .contact-directory__grid
           > .contact-directory__card (one per contact, JS-rendered)
               > .contact-directory__region
               > .contact-directory__person
                   > .contact-directory__name
                   > .contact-directory__methods
                       > .contact-directory__method (T/E row) */

.contact-directory {
  width: 100%;
  padding: var(--space-section-l) 0; /* 144px top/bottom, matches .card-grid */
  background: var(--colour-grey-200);
  box-sizing: border-box;
}

.contact-directory__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6xl); /* 64px */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Intro ---- */

.contact-directory__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
}

.contact-directory__intro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Eyebrow chip — white, since this section sits on the grey-200
   background (opposite of .card-grid__eyebrow's reasoning). */
.contact-directory__eyebrow {
  background: var(--colour-white);
}

/* Typography comes from .text-h2 (css/typography.css). */
.contact-directory__heading {
  text-align: center;
}

.contact-directory__heading-dark {
  color: var(--colour-header-grey);
}

.contact-directory__heading-accent {
  color: var(--colour-brand-teal);
}

/* Typography comes from .text-body-xl (css/typography.css). */
.contact-directory__subcopy {
  margin: 0;
  max-width: 100%;
  color: var(--colour-body-grey);
  text-align: center;
}

/* ---- Grid ---- */

.contact-directory__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl); /* 24px */
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Card ---- */

.contact-directory__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l); /* 16px */
  padding: var(--space-3xl) var(--space-3xl) var(--space-5xl); /* 32px 32px 42px */
  background: var(--colour-grey-101);
  border: 1px solid var(--colour-light-grey);
  border-radius: 12px;
  box-sizing: border-box;
}

/* Typography comes from .text-h5 (css/typography.css). */
.contact-directory__region {
  margin: 0;
  width: 100%;
  color: var(--colour-brand-teal);
}

.contact-directory__person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs); /* 6px */
  width: 100%;
}

/* Typography comes from .text-h6 (css/typography.css). */
.contact-directory__name {
  margin: 0;
  width: 100%;
  color: var(--colour-header-grey);
}

.contact-directory__methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs); /* 2px */
  width: 100%;
}

.contact-directory__method {
  display: flex;
  align-items: center;
  gap: var(--space-s); /* 8px */
  margin: 0; /* these are <p> elements — without this, the default UA paragraph
                margin stacks on top of .contact-directory__methods' own 2px
                gap and badly over-inflates the card */
  width: 100%;
}

/* Typography comes from .text-body (css/typography.css). */
.contact-directory__method-label {
  color: var(--colour-orange);
}

.contact-directory__method-value {
  color: var(--colour-body-grey);
  text-decoration: none;
}

a.contact-directory__method-value:hover,
a.contact-directory__method-value:focus-visible {
  text-decoration: underline;
}

/* ---- Responsive ----
   Same rhythm as .card-grid: 3-up steps to 2-up at tablet landscape, then
   a single column on phones. */

@media (max-width: 1279px) {
  .contact-directory {
    padding: var(--space-section-s) 0; /* 96px, down from 144px */
  }
}

@media (max-width: 1023px) {
  .contact-directory__inner {
    gap: var(--space-5xl); /* 42px */
  }

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

@media (max-width: 767px) {
  .contact-directory {
    padding: var(--space-section-xxs) 0; /* 64px */
  }

  .contact-directory__inner {
    gap: var(--space-3xl); /* 32px */
  }

  .contact-directory__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l); /* 16px */
  }

  .contact-directory__card {
    padding: var(--space-2xl); /* 24px all round */
  }
}