/* Office cards (_src/shared/office-cards.html): city photo cards with email and
   phone pills. Used in the Contact page's offices section (_src/shared/offices.html,
   dotted night background) and under the form in _src/shared/lets-talk.html. */

.offices {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 600px at 20% 30%, rgb(76 134 240 / 18%), transparent 58%), #0f141e;
}
.offices__dots { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .08; pointer-events: none; }
.offices__inner { position: relative; }
.offices .head-center { margin-bottom: 48px; }
.offices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.office {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 24px;
  background: rgb(255 255 255 / 4%);
}
.office__photo { position: relative; margin: 0; aspect-ratio: 16 / 10; background: var(--night-2); }
.office__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.office__photo--dubai img { object-position: center 60%; }
.office__photo--mohali img { object-position: center 40%; }
.office__body { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 28px; }
.office__city { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-weight: 600; font-size: 22px; }
.office__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.office__country { font-weight: 400; font-size: 13px; white-space: nowrap; color: #9aa3b8; }
.office__addr { font-size: 15px; line-height: 1.6; color: #cfd4df; }
.office__phone { align-self: flex-start; margin-top: 4px; font-weight: 500; font-size: 15px; color: var(--night-ink); transition: color .2s ease; }
.office__phone:hover { color: var(--gold); }

@media (max-width: 720px) {
  .office__phone { padding: 10px 0; margin: -6px 0; }
}
.offices__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 48px; }

.office-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  font-weight: 500;
  font-size: 16px;
  color: var(--night-ink);
  transition: color .2s ease;
}
.office-pill__icon { display: flex; color: var(--gold); }
.office-pill__icon svg { width: 16px; height: 16px; }
.office-pill:hover { color: var(--blue-soft); }

@media (max-width: 1100px) {
  .offices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .offices__grid { grid-template-columns: 1fr; }
}