/* ==========================================================================
   Page: Contact (Figma 1841:7729) — token-based
   ========================================================================== */

/* Text-widget padding modifiers (reuse .about-text heading-left/body-right).
   Top-only — the widget owns the bottom padding (text-widget.css). */
.about-text.contact-text--100    { padding-top: 100px; padding-bottom: 0; }
.about-text.contact-text--100-80 { padding: 100px 0 0; }

/* ── Office cards ────────────────────────────────────────────────────────── */
.contact-offices { padding-block: 0; }
.contact-offices__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.office-card__img {
  border-radius: var(--radius-image);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.office-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.office-card__info { padding-top: 20px; }
.office-card__city {
  margin: 0 0 8px;
  font-size: var(--body-lg);
  font-weight: 400;
  color: var(--text-title);
}
.office-card__addr {
  margin: 0;
  font-size: var(--body-sm);
  line-height: 24px;
  color: var(--text-body);
}

/* ── Team grid ───────────────────────────────────────────────────────────── */
.contact-team { padding-block: 0 100px; }
.team-grid {
  display: grid;
  /* minmax(0,1fr) — plain 1fr lets long nowrap emails inflate their column,
     making cards unequal. This forces all tracks equal. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 20px;                   /* Figma 2118:5592: 40 row / 20 column */
}
/* Fewer columns as the viewport shrinks — keeps cards near Figma's 320px
   reference width so contact info 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)); }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Card is a container so the contact button can adapt to the card's own
   width (grid tracks vary more than the viewport). */
.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 */
.team-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.36) 0%, transparent 15%, transparent 82%, rgba(0,0,0,0.36) 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.00) 14.9%, rgba(0, 0, 0, 0.00) 81.73%, rgba(0, 0, 0, 0.36) 100%), url(<path-to-image>) lightgray -110.724px -178.359px / 169.285% 193.444% no-repeat, #FFF;


}
/* bottom glass bar with phone + contact button (Figma 2118:5592).
   The blur lives on a ::before that extends 40px above the bar and is masked
   so it fades in — no hard top edge on the frosted area. */
.team-card__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;                    
  width: 100%;
  padding: 24px;

}
.team-card__bar::before {
  content: '';
  position: absolute;
  inset: -40px 0 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
}
.team-card__bar::after {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, transparent 70%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 70%, black 100%);
}

.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 */
}
/* Phone/email are tel:/mailto: links styled as plain text (underline on
   hover only). Long emails break at the <wbr> the template inserts before @
   (name / @domain); overflow-wrap is only the fallback if one part is still
   too wide. Phone numbers stay on one line. */
.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 "● Contact"; blue mail panel slides in on hover
   (slide mechanics come from the btn--contact variant). */
.team-card__btn { flex-shrink: 0; }
.team-card__btn.btn--contact {
  justify-content: center;
  gap: 10px;
  padding: 12px 21px;               /* Figma: 113×46, symmetric 21px centers */
  background: #fff;
  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: 14px; }
.team-card__btn .btn__mail-icon { width: 24px; height: 24px; }

/* Below Figma's 320px reference width the full pill starves the email of
   space — collapse to a round icon-only mail button (46×46). The .btn__fill
   panel becomes the static face; hover just recolors it blue. */
@container (max-width: 300px) {
  .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); }
  .team-card__btn.btn--contact:hover { background: var(--dragster-blue); }
  .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: 24px; color: var(--text-body); }
.team-card__name { margin: 0; font-size: var(--body-lg); line-height: var(--body-lg-lh); color: var(--text-title); }
.team-grid__empty { color: var(--text-body); }

/* ── Work With Us — dark/purple section, light text ──────────────────────── */
.about-text.contact-workwithus {
  position: relative;
  overflow: hidden;              /* clips the curve at the section edges */
  background: var(--bg-secondary);
  padding-block: 100px;          /* 100px above/below the stage */
}
/* Stage = the Figma wrapper box. Fixed 595px on desktop gives the curve a
   deterministic reference so its offsets match Figma regardless of how tall
   the text runs. min-height (not height) so long copy can't overflow it. */
.contact-workwithus__stage {
  position: relative;
  min-height: 595px;
}
/* Curve is the shared .work-with-us__curve (sections/section-work-with-us.css). */
/* White heading + body now comes from the general [data-theme="dark"] .text-grid
   rule in text-widget.css (this section carries data-theme="dark"). */
/* Match the text-widget grid so the button lines up under the right-column text */
.contact-workwithus .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 0;
}
.contact-workwithus .text-grid { grid-column: 1 / -1; }
.contact-workwithus .btn {
  grid-column: 3 / span 2;
  justify-self: start;
  margin-top: 32px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Tablet (768–1024px) */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-text.contact-text--100    { padding-top: 80px; padding-bottom: 0; }
  .about-text.contact-text--100-80 { padding: 80px 0 0; }
  .about-text.contact-workwithus   { padding-block: 80px; }
  /* 595px is the desktop wrapper height — let content set it below that */
  .contact-workwithus__stage       { min-height: 0; }
}

/* Mobile (≤767px) — single column throughout (matches Figma 3213:5042) */
@media (max-width: 767px) {
  .contact-offices__grid { grid-template-columns: 1fr; gap: 32px; }
  .team-grid             { grid-template-columns: 1fr; gap: 32px; }

  .about-text.contact-text--100    { padding-top: 60px; padding-bottom: 0; }
  .about-text.contact-text--100-80 { padding: 60px 0 0; }

  .contact-workwithus            { padding-block: 60px; }
  .contact-workwithus .container { display: block; }
  .contact-workwithus .btn       { grid-column: auto; margin-top: 32px; }

  /* Team card portrait gets a touch shorter so cards aren't overly tall stacked */
  .team-card__photo { aspect-ratio: 4 / 5; }
}

/* Mobile: cap oversized section padding to the 60px base rhythm. */
@media (max-width: 767px) {
  .contact-team { padding-block: 0 60px; }
}