/* ==========================================================================
   CONTACT PAGE
   Layout: message form alongside the salon's visit/contact details.
   ========================================================================== */

/* ==========================================================================
   PAGE HERO (base in core.css; page-specific overrides only)
   ========================================================================== */

.page-hero { min-height: clamp(22rem, 60vh, 34rem); }
.page-hero__media img { object-position: center 40%; }

/* ==========================================================================
   CONTACT GRID
   ========================================================================== */

.contact {
  background: var(--color-cream);
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
}
.contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 7vh, 4.5rem);
  align-items: start;
}

.contact__col-title {
  font-size: var(--step-2);
  margin-top: var(--space-2xs);
}
.contact__lead {
  margin-top: var(--space-s);
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 34rem;
}
.contact__lead a {
  color: var(--color-gold-ink);
  text-decoration: underline;
}

/* ---- Message form ------------------------------------------------------- */
.contact__form-frame {
  margin-top: var(--space-l);
  background: var(--color-cream);
  border: 1px solid rgba(19, 45, 32, 0.1);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.contact__iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: 620px;
}

/* ---- Details ------------------------------------------------------------ */
.contact__block + .contact__block {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid rgba(19, 45, 32, 0.1);
}
.contact__block-label {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--color-gold-ink);
  margin-bottom: var(--space-xs);
}
.contact__address {
  font-style: normal;
  line-height: 1.65;
  color: var(--color-ink);
}
.contact__line {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-verde);
  font-weight: 500;
  transition: color 0.25s var(--ease);
}
.contact__line svg { color: var(--color-gold-ink); flex: none; }
a.contact__line:hover { color: var(--color-gold-ink); }
.contact__lines { display: grid; gap: 0.65rem; }
.contact__directions { margin-top: var(--space-m); }

/* Opening hours */
.contact__hours { display: grid; gap: 0.4rem; max-width: 22rem; }
.contact__hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(19, 45, 32, 0.08);
}
.contact__hours div:last-child { border-bottom: 0; }
.contact__hours span:first-child { color: var(--color-ink); }
.contact__hours span:last-child { color: var(--color-muted); }
.contact__hours .is-closed span:last-child { color: var(--color-gold-ink); }

/* Socials */
.contact__socials { display: flex; gap: var(--space-s); }
.contact__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(19, 45, 32, 0.18);
  border-radius: 50%;
  color: var(--color-verde);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact__social:hover {
  color: var(--color-gold-ink);
  border-color: var(--color-gold);
}

@media (min-width: 880px) {
  .contact__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}