/* ==========================================================================
   Takszu — contacto (Figma node 22:4, "takszu-contact")

   TYPOGRAPHY: like the atelier page, this frame was drawn with its own
   typefaces — Cormorant Garamond for display, Instrument Sans for the rest.
   Bound to page-scoped variables so unifying later is a two-line edit.
   ========================================================================== */

.page--contacto {
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", var(--font-sans);
  --color-muted-page: #7a7672;
}

.contact {
  background-color: var(--color-surface);
  padding-block: calc(var(--navbar-height) + var(--space-110)) var(--space-120);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-80);
  text-align: center;
}

.contact__rule {
  width: 120px;
  height: var(--hairline);
  background-color: var(--color-rule-soft);
}

/* --------------------------------------------------------------------------
   Statement (22:13)
   -------------------------------------------------------------------------- */

.contact__statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
}

.contact__kicker {
  color: var(--color-muted-page);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.3333em;        /* 4px at 12px */
  line-height: normal;
  text-transform: uppercase;
}

.contact__title {
  max-width: 720px;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);   /* 36 -> 56 */
  font-weight: var(--weight-regular);
  line-height: 1.15;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Details (22:17)
   -------------------------------------------------------------------------- */

.contact__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  width: 100%;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}

.contact-detail__label {
  color: var(--color-muted-page);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: normal;
  text-transform: uppercase;
}

.contact-detail__values {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.contact-detail__primary {
  font-family: var(--font-heading);
  font-size: var(--fs-logo);       /* 24 */
  font-weight: var(--weight-regular);
  line-height: normal;
}

.contact-detail__primary:hover,
.contact-detail__primary:focus-visible { opacity: var(--opacity-body); }

.contact-detail__secondary {
  color: var(--color-muted-page);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: normal;
}

a.contact-detail__secondary:hover,
a.contact-detail__secondary:focus-visible { color: var(--color-text); }

/* --------------------------------------------------------------------------
   Call to action (22:33)
   -------------------------------------------------------------------------- */

.contact__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
}

.contact__cta-text {
  max-width: 560px;
  font-family: var(--font-body);
  font-size: 0.9375rem;            /* 15 */
  line-height: var(--lh-relaxed);
}

.contact__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-36);
  border: var(--hairline) solid var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}

.contact__button:hover,
.contact__button:focus-visible {
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
}

@media (max-width: 1024px) {
  .contact { padding-block: calc(var(--navbar-height) + var(--space-64)) var(--space-80); }
  .contact__inner { gap: var(--space-48); }
  .contact__details { gap: var(--space-32); }
}