/* ==========================================================================
   Contact page — partner list + hub/address blocks.
   WEBSITE_SPECIFICATION.md "Contact (`/contact/`)".
   ========================================================================== */

.contact-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* -- Section 1: intro row + partner grid -------------------------------- */
.contact-intro {
  display: flex;
  align-items: center;
  gap: var(--column-gutter);
}
.contact-intro__label {
  flex: 0 0 362px; /* confirmed via Figma — static copy, not a repeating template item, so no template-safety risk, but the fixed width still isn't responsive on its own: caused real horizontal overflow at mobile (390px container content is only ~358px, less than the label alone). Reset to auto below. */
}
.contact-intro__body {
  flex: 1 0 0;
  min-width: 0;
}
@media (max-width: 767px) {
  .contact-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-18);
  }
  .contact-intro__label { flex-basis: auto; }
}

/* Custom breakpoints for this grid only, per explicit client request
   2026-07-26 — not derived from the text-squeeze methodology used
   elsewhere on the site (Case Studies, etc.), so don't "correct" these to
   match that pattern without checking with the client first. Template-safe:
   no nth-child styling — .partner-grid is data-driven from
   XINSIGHT_COPY.md's Profile entries (currently 10), and a partial last
   row left-aligns naturally, CSS Grid's default behavior, with no
   special-casing needed here. */
.partner-grid {
  display: grid;
  grid-template-columns: 1fr; /* below 480px */
  gap: var(--column-gutter);
}
@media (min-width: 480px) and (max-width: 799px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 800px) and (max-width: 1399px) {
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .partner-grid { grid-template-columns: repeat(4, 1fr); }
}

.partner-card {
  display: flex;
  flex-direction: column;
}
.partner-card__photo-wrap {
  width: 100%;
  padding: var(--column-gutter);
}
.partner-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.partner-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--column-gutter);
  padding: var(--column-gutter) var(--column-gutter) var(--space-27);
}
.partner-card__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.partner-card__name,
.partner-card__title,
.partner-card__role {
  color: var(--color-text-primary);
}
/* Icon itself stays the confirmed 16×16px, but as a bare link that's well
   short of WCAG 2.5.5's 44×44px tap-target minimum — same fix already
   applied to the footer's social icons and the header's hamburger toggle
   this session. Negative margin keeps the enlarged invisible tap area
   from visually pushing the name/card padding around; 24px of card
   padding on every side comfortably absorbs it without clipping. */
.partner-card__linkedin,
.partner-card__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  margin: -14px;
  cursor: pointer;
}
.partner-card__linkedin img,
.partner-card__download img {
  width: 16px;
  height: 16px;
}
/* LinkedIn + download (or any extra action) sit together on the right.
   Negative margin lives on the group so two 44px targets don't overlap;
   8px gap keeps the tap areas apart. */
.partner-card__actions {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-8);
  margin: -14px;
}
.partner-card__actions .partner-card__linkedin,
.partner-card__actions .partner-card__download {
  margin: 0;
}
/* No LinkedIn URL for this profile — icon hidden but the 44px tap target
   stays in the layout so the name row's height/alignment matches every
   other card. */
.partner-card__linkedin--hidden {
  visibility: hidden;
}

/* Below 480px (this grid's own 1-column tier, see breakpoints above):
   row spacing widened to match the "40px between full-width stacked
   cards" pattern used elsewhere on the site (Case Studies, Insights) —
   the grid's own 24px column-gutter reads as too tight once cards are
   full-width instead of side by side. Photo capped at 70% of the card's
   own width (client request, 2026-07-26 — previously 50%) and centered;
   name/title/bio text keeps the card's full width to read normally. */
@media (max-width: 479px) {
  .partner-grid { row-gap: var(--space-40); }
  .partner-card__photo-wrap {
    width: 70%;
    margin-inline: auto;
    padding: 0;
  }
}

/* -- Section 2: hub/address blocks --------------------------------------- */
.contact-hubs__header { margin-bottom: var(--space-60); }
.contact-hubs__lead-body { margin-top: var(--space-18); }

/* Deliberately not .text-heavy-row — that class's whole identity is the
   0/135/242px column stagger, and this row has none (confirmed via
   Figma: all 3 blocks start at the same vertical position). Plain equal
   3-column grid instead. */
.hub-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--column-gutter);
}
@media (max-width: 767px) {
  .hub-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-40);
  }
}

.hub-block {
  display: flex;
  flex-direction: column;
  gap: var(--column-gutter);
}
.hub-block__title,
.hub-block__body,
.hub-block__address {
  color: var(--color-text-primary);
}
.hub-block__address-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}
.hub-block__pin {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}