/* ==========================================================================
   Page: Contact (/contact/) — Figma 6571:10940 "Contact_new"
   ==========================================================================
   Hero (the same construction as /service/ and /about-us/), then "Our
   locations" with two office cards, then the team grid. The "Work With Us"
   band is gone from this page; its rules moved to
   sections/section-work-with-us.css because page-career.php still renders
   that shared partial.

   This file owns GEOMETRY ONLY — where things sit, not how they look:
     · vertical rhythm → .section     (tokens.css, --section-py 120/80/60)
     · heading + intro → the text widget, via its --tw-* knobs
     · city / address  → .title-xs / .text-lg in the markup (tokens.css)
   The only typography declared here is on the team card, where the component
   has no utility class of its own. */

/* ── Hero ────────────────────────────────────────────────────────────────
   Same construction as .services-hero / .about-hero. The header is fixed and
   overlays the page, so clear it and add Figma's own 100px.

   The grid is the widget's own 4-column grid repeated on the outside, with the
   same 20px column gap in the same container — that is what makes the CTA in
   columns 3–4 land exactly under the intro text. */
.contact-hero {
  --contact-hero-gap: var(--space-100);
  padding-top: calc(var(--header-h) + var(--space-100));
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 0;
  padding-bottom: 0;   /* .container's own bottom padding would double the gap */
}

/* Only the widget's knobs. Figma 6571:11028 — heading Title/XL, intro
   Body/Medium (that size comes from body_size => 'md' at the call site, never
   from a variable pair here). */
.contact-hero__grid > .text-grid {
  grid-column: 1 / -1;
  --tw-heading-size: var(--title-xl);
  --tw-heading-lh: var(--title-xl-lh);
  --tw-row-gap: var(--space-60);
  --tw-pad-bottom: 0;
}

.contact-hero__cta {
  grid-column: 3 / span 2;
  justify-self: start;
  margin-top: 32px;
}

/* Figma 6571:10942: 1340×704 at content width, 20px corners. */
.contact-hero__media {
  grid-column: 1 / -1;
  margin-top: var(--contact-hero-gap);
  aspect-ratio: 1340 / 704;
  border-radius: var(--radius-image);
  overflow: hidden;
}
.contact-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Our locations ───────────────────────────────────────────────────── */
.contact-locations__text { padding-bottom: 0; }
.contact-locations__text .text-grid {
  --tw-row-gap: var(--space-60);
  --tw-pad-bottom: 0;
}
.contact-locations__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--space-60);
}
/* Figma 6571:11633 — 647×495 inside a half-width column. */
.office-card__img {
  aspect-ratio: 647 / 495;
  border-radius: var(--radius-image);
  overflow: hidden;
}
.office-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.office-card__info { padding-top: 30px; }   /* Figma: 30px between image and city */
/* Placement only — the look is .title-xs / .text-lg in the markup. */
.office-card__city { margin: 0 0 4px; font-weight: 400; }
.office-card__addr { margin: 0; }

/* ── Team ──────────────────────────────────────────────────────────────── */
.contact-team__text { padding-bottom: 0; }
.contact-team__text .text-grid {
  --tw-row-gap: var(--space-60);
  --tw-pad-bottom: 0;
}
.team-grid {
  display: grid;
  /* minmax(0,1fr) — a plain 1fr lets a long nowrap e-mail inflate its column
     and the cards come out unequal. This forces every track equal, at EVERY
     tier (the old file repeated the breakpoints further down with plain 1fr,
     which quietly undid this). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 20px;                   /* Figma 2118:5592: 40 row / 20 column */
  margin-top: var(--space-60);
}
/* Fewer columns as the viewport shrinks — keeps cards near Figma's 320px
   reference width so the contact bar fits without excessive wrapping. */
@media (max-width: 1366px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The card is a container so the contact button can adapt to the CARD's width
   — grid tracks vary more than the viewport does. */
.team-card { container-type: inline-size; }
.team-card__photo {
  position: relative;
  aspect-ratio: 318 / 460;          /* portrait, matches Figma */
  border-radius: var(--radius-image);
  overflow: hidden;
  background: #e6e6ea;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.team-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Top + bottom dark gradient for legibility over the portrait. */
.team-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 14.9%, rgba(0, 0, 0, 0) 81.73%, rgba(0, 0, 0, 0.36) 100%);
}
/* Bottom glass bar with phone + contact button.

   Figma 6571:11654 states the surface exactly: background
   rgba(255, 255, 255, 0.02) with backdrop-filter: blur(50px), on a plain
   rectangle with 24px padding. It is therefore declared on the BAR itself.

   It used to sit on a ::before that reached 40px above the bar and was masked
   so the frost faded in instead of having a hard top edge. That reads softer
   than the design — the blur never reaches full strength anywhere — so the
   mask is gone (Kajsa 2026-10-05). The straight top edge is the design. */
.team-card__bar {
  position: relative;
  z-index: 1;                   /* above the photo and its gradient, so the blur has them to work on */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
/* A card with no phone and no e-mail renders no bar at all, so the bar never
   collapses to an empty frosted strip. When only one of the two exists the
   remaining item keeps its side (phone left, button right). */
.team-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--text-light);
  min-width: 0;                     /* allow shrinking inside the bar */
}
.team-card__contacts a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.team-card__contacts a:hover { text-decoration: underline; }
.team-card__phone { white-space: nowrap; }

/* Team-card contact button — Figma 1705:6675 (ContactMail): compact white pill
   "● E-mail"; a blue mail panel slides in on hover. The slide mechanics come
   from the shared btn--contact variant (components/btn.css) — never edited
   from here, only recoloured. */
.team-card__btn { flex-shrink: 0; }
.team-card__btn.btn--contact {
  justify-content: center;
  gap: 10px;
  padding: 12px 21px;               /* Figma: 113×46, symmetric 21px centres */
  /* No background here on purpose. --btn-light IS #FFFFFF, so this only ever
     restated the component's own resting colour — but page-contact.css is
     enqueued after btn.css, so at equal specificity it ALSO beat the
     component's :hover rule and held the ground white under the blue panel,
     which is what produced the pale rim (2026-10-05). Recolour through the
     --btn-* variables if this ever needs another resting colour. */
  color: var(--text-title);
}
.team-card__btn .btn__dot-icon { color: var(--text-title); }
.team-card__btn .btn__label { color: var(--text-title); font-size: var(--body-xs); }
.team-card__btn .btn__mail-icon { width: 24px; height: 24px; }

/* Below this CARD width the full pill starves the phone number of space, so it
   collapses to a round icon-only mail button (46×46).

   260px, not Figma's 320: at 1440 the real card measures ~290px (1340 content
   minus three 20px gaps, over four columns), so a 300px threshold fired on
   DESKTOP and the pill was permanently collapsed — measured 2026-10-05. The
   threshold has to come from the measured card, not from Figma's reference. */
@container (max-width: 260px) {
  .team-card__btn.btn--contact { width: 46px; padding: 0; }
  .team-card__btn .btn__dot-icon,
  .team-card__btn .btn__label { display: none; }
  .team-card__btn .btn__fill {
    position: static;
    transform: none;
    transition: none;
    background: transparent;
  }
  .team-card__btn .btn__mail-icon { color: var(--text-title); }
  /* Nothing slides in this state, so nothing to wait for: the component's
     0.35s delay is overridden or the collapsed icon would lag the pointer. */
  .team-card__btn.btn--contact:hover { background: var(--dragster-blue); transition: background-color 0s; }
  .team-card__btn.btn--contact:hover .btn__mail-icon { color: #fff; }
}

.team-card__info { padding-top: 16px; }
.team-card__role { margin: 0; font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--text-body); }
.team-card__name { margin: 0; font-size: var(--body-lg); line-height: var(--body-lg-lh); letter-spacing: var(--body-lg-ls); color: var(--text-title); }
.team-grid__empty { color: var(--text-body); }

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-hero { --contact-hero-gap: 60px; }
  .contact-hero__grid > .text-grid { --tw-row-gap: 40px; }
  .contact-locations__text .text-grid,
  .contact-team__text .text-grid { --tw-row-gap: 40px; }
  .contact-locations__grid { margin-top: 40px; }
  .team-grid { margin-top: 40px; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────
   Single column throughout (Figma 3213:5042). The text widget already stacks
   at this breakpoint, so the CTA follows it to full width. */
@media (max-width: 767px) {
  .contact-hero {
    --contact-hero-gap: 40px;
    padding-top: calc(var(--header-h) + 40px);
  }
  .contact-hero__cta { grid-column: 1 / -1; }
  .contact-hero__media {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }
  .contact-locations__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Portrait gets a touch shorter so stacked cards aren't overly tall. */
  .team-card__photo { aspect-ratio: 4 / 5; }
}