/* =============================================================================
   PAGE — Contact
   ============================================================================= */

/* --- Info cards (address / phone / hours) --------------------------------- */
.contact-cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .contact-cards {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.contact-card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  color: var(--gold);
}

.contact-card__label {
  font-size: var(--step-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.contact-card__address {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  line-height: 1.1;
}

/* Pending state — honest, on-brand, never fabricated */
.contact-card--pending {
  text-align: center;
  justify-items: center;
  background: var(--surface-alt);
}

.contact-card--pending .contact-card__value {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  color: var(--fg);
}

.contact-card--pending .contact-card__note {
  font-size: var(--step-small);
  color: var(--fg-soft);
}

.contact-card--pending .rule--short {
  margin-block: 0.25rem;
}

/* --- Lower row: map + Booksy ---------------------------------------------- */
.contact-lower {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 820px) {
  .contact-lower {
    grid-template-columns: 1fr 1fr;
  }
}

/* Clean, honest location panel — no fake interactive map. */
.locator {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: var(--surface-alt);
}

.locator__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  flex: none;
}

.locator__body { display: grid; gap: 0.5rem; }

.locator__addr {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  line-height: 1.1;
}

.locator__body .btn { justify-self: start; margin-top: 0.25rem; }

/* --- Closing signature ---------------------------------------------------- */
.contact-close {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  border-top: 1px solid var(--line-gold);
}

@media (min-width: 760px) {
  .contact-close {
    grid-template-columns: auto 1fr;
    text-align: left;
  }
}

.contact-close__mark {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 6rem);
  line-height: 0.8;
  background: linear-gradient(160deg, var(--gold-soft), var(--gold) 55%, #5f5031);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  justify-self: center;
}

.contact-close__motto span {
  display: block;
  font-size: var(--step-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.contact-close__motto p {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  color: var(--fg);
}