/* ─── contacts.css — только страница контактов ───────────────────────────── */

.page-hero {
  background: var(--bg-2);
  padding: 64px 0 52px;
  border-bottom: 1px solid var(--border);
}
.page-hero__eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.page-hero__title {
  font-family: var(--font-head);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800; letter-spacing: -.5px;
  margin-bottom: 8px;
}
.page-hero__sub { font-size: 17px; color: var(--text-2); }

/* ─── Карточки контактов ─────────────────────────────────────────────────── */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.contact-card {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 4px solid transparent;
  /* барбер-бордер по умолчанию — переопределяется через модификатор */
  background-image:
    linear-gradient(var(--bg-2), var(--bg-2)),
    repeating-linear-gradient(
      45deg,
      var(--court-terracotta) 0px,  var(--court-terracotta) 5px,
      var(--court-blue)       5px,  var(--court-blue)       10px,
      var(--court-pink)       10px, var(--court-pink)       15px,
      var(--court-green)      15px, var(--court-green)      20px
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform .2s, box-shadow .2s;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Однотонные бордеры для конкретных карточек */
.contact-card--terracotta {
  background-image:
    linear-gradient(var(--bg-2), var(--bg-2)),
    linear-gradient(var(--court-terracotta), var(--court-terracotta));
}
.contact-card--blue {
  background-image:
    linear-gradient(var(--bg-2), var(--bg-2)),
    linear-gradient(var(--court-blue), var(--court-blue));
}
.contact-card--green {
  background-image:
    linear-gradient(var(--bg-2), var(--bg-2)),
    linear-gradient(var(--court-green), var(--court-green));
}

.contact-card__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.contact-card__name {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 700;
  margin-bottom: 12px;
}
.contact-card__phone {
  font-size: 18px; display: block;
  color: var(--text); margin-bottom: 20px;
  transition: color .15s;
}
.contact-card__phone:hover { color: var(--court-green); }

.contact-card__links { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-link {
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--border);
  color: var(--text-2);
  transition: background .15s, border-color .15s, color .15s;
}
.contact-link:hover {
  background: var(--bg-3);
  border-color: var(--text-3);
  color: var(--text);
}

/* ─── Расположение ───────────────────────────────────────────────────────── */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
.location-info p {
  font-size: 15px; color: var(--text-2);
  margin-bottom: 20px; line-height: 1.75;
}
.location-info a   { color: var(--court-green); }
.location-info strong { color: var(--text); }

@media (max-width: 768px) {
  .contacts-grid { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; gap: 28px; }
}