/* ============================================================
   Miró — Contact page styles (mobile-first)
   Client feedback 2026-07: the page reads like a postcard —
   message on the left, sender details on the right, a rule
   between the two. Atelier card + map live at the bottom.
   ============================================================ */

/* ---------- Postcard ---------- */
.contact-main { padding-block: clamp(40px, 6vw, 80px); }
.contact-postcard-wrap { max-width: 1080px; }
.postcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 4.5vw, 56px);
}
.postcard__title {
  font-size: clamp(26px, 3.6vw, 38px); font-weight: 400;
  margin-bottom: clamp(22px, 3.5vw, 36px);
}
.postcard__title + .postcard__lede {
  margin-top: calc(-1 * clamp(14px, 2.2vw, 22px));
  margin-bottom: clamp(22px, 3.5vw, 36px);
  max-width: 60ch; font-size: 15.5px;
}
/* Cross-link between the two enquiry pages */
.postcard__aside {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: 26px; font-size: 15px;
}
.postcard__grid { display: grid; gap: 28px; }
.postcard__divider { border-top: 1px solid var(--line); }
.postcard__left, .postcard__right { display: grid; gap: 22px; align-content: start; }
.postcard__message .textarea { min-height: 180px; }
.postcard__foot {
  display: grid; gap: 20px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 900px) {
  .postcard__grid {
    grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, 0.85fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: stretch;
  }
  .postcard__divider { border-top: 0; border-left: 1px solid var(--line); }
  .postcard__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .postcard__foot .btn--block { width: auto; padding-inline: 42px; }
}

.contact-form__row { display: grid; gap: 22px; }
@media (min-width: 600px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Conditional appointment fieldset */
.contact-appt {
  display: grid; gap: 18px;
  margin: 0; padding: 20px 18px 22px;
  background: var(--cream-soft);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.contact-appt[hidden] { display: none; }
.contact-appt legend {
  padding: 0 8px; margin-left: -8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--navy);
}
.contact-appt__note { font-size: 13.5px; color: var(--ink-soft); }
@media (min-width: 600px) {
  .contact-appt { padding: 24px 22px 26px; }
}

/* Consent row */
.contact-consent span { font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.contact-consent small {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--ink-soft);
}

/* ---------- Success panel ---------- */
.contact-success {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 46px);
}
.contact-success:focus { outline: none; }
.contact-success__title {
  margin-top: 14px;
  font-size: clamp(24px, 4vw, 33px);
  line-height: 1.3; color: var(--navy);
}
.contact-success__copy { margin-top: 14px; max-width: 46ch; }
.contact-success__ref {
  margin-top: 24px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.contact-success__ref strong { color: var(--raspberry); letter-spacing: 0.08em; }
.contact-success__hint { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.contact-success__again { margin-top: 26px; }

/* ---------- Atelier section — bottom of the page (client feedback) ---------- */
.contact-atelier__grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .contact-atelier__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 64px; align-items: start;
  }
}

/* ---------- Atelier card ---------- */
.atelier-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.atelier-card__media { aspect-ratio: 4 / 3; background: var(--cream-soft); }
.atelier-card__media img { width: 100%; height: 100%; object-fit: cover; }
.atelier-card__body { padding: 26px 22px 30px; }
.atelier-card__name { margin-top: 10px; font-size: clamp(24px, 3vw, 30px); }
.atelier-card__blurb { margin-top: 12px; font-size: 15px; max-width: 44ch; }
.atelier-card__dl {
  display: grid; gap: 18px;
  margin: 22px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.atelier-card__dl dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
}
.atelier-card__dl dd { margin: 4px 0 0; font-size: 15px; color: var(--navy); line-height: 1.6; }
.atelier-card__dl address { font-style: normal; }
.atelier-card__dl dd a {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--navy); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line);
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.atelier-card__dl dd a:hover { color: var(--raspberry); text-decoration-color: var(--raspberry); }
.atelier-card__wa { margin-top: 22px; }
.atelier-card__wa-icon { display: inline-flex; }
.atelier-card__wa-icon svg { width: 20px; height: 20px; }
.atelier-card__ig { margin-top: 14px; text-align: center; }
@media (min-width: 600px) {
  .atelier-card__body { padding: 32px 30px 36px; }
  .atelier-card__dl { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
}

/* ---------- Stylised map (decorative placeholder, not a real map) ---------- */
.map-art {
  position: relative;
  margin-top: 20px;
  aspect-ratio: 4 / 3;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.map-art__scene { position: absolute; inset: 0; }
.map-art__water {
  position: absolute; top: -15%; right: -20%;
  width: 52%; height: 130%;
  background: var(--teal-tint);
  border-left: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 48% 0 0 52% / 55% 0 0 45%;
}
.map-art__park {
  position: absolute; left: 7%; bottom: 12%;
  width: 26%; height: 24%;
  background: rgba(0, 0, 0, 0.10);
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
}
.map-art__streets {
  position: absolute; inset: 0;
  background:
    linear-gradient(112deg, transparent calc(34% - 1px), var(--line) calc(34% - 1px), var(--line) calc(34% + 1px), transparent calc(34% + 1px)),
    linear-gradient(112deg, transparent calc(60% - 1px), var(--line) calc(60% - 1px), var(--line) calc(60% + 1px), transparent calc(60% + 1px)),
    linear-gradient(22deg, transparent calc(48% - 1px), var(--line) calc(48% - 1px), var(--line) calc(48% + 1px), transparent calc(48% + 1px)),
    linear-gradient(22deg, transparent calc(76% - 1px), var(--line) calc(76% - 1px), var(--line) calc(76% + 1px), transparent calc(76% + 1px));
}
.map-art__block {
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  transform: rotate(22deg);
}
.map-art__block--a { width: 18%; height: 14%; left: 17%; top: 21%; }
.map-art__block--b { width: 14%; height: 18%; left: 53%; top: 54%; }
.map-art__block--c { width: 10%; height: 9%;  left: 40%; top: 12%; transform: rotate(112deg); }
.map-art__north {
  position: absolute; top: 10px; right: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.map-art__pin {
  position: absolute; left: 42%; top: 46%;
  transform: translate(-50%, -85%);
  color: var(--raspberry);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}
.map-art__pin svg { width: 38px; height: 38px; }
.map-art__pin::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 26px; height: 8px; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.12); border-radius: 50%;
}
.map-art__caption {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--navy);
}
.contact-map-note { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Bespoke page: how a commission runs ---------- */
.bespoke-steps__list {
  display: grid; gap: 28px;
  margin: clamp(28px, 5vw, 44px) 0 0; padding: 0;
  list-style: none;
  counter-reset: none;
}
.bespoke-steps__list li {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.bespoke-steps__n {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--ink-soft);
}
.bespoke-steps__list h3 { font-size: clamp(19px, 2.2vw, 22px); }
.bespoke-steps__list p { margin-top: 8px; font-size: 15px; max-width: 46ch; }
@media (min-width: 700px) {
  .bespoke-steps__list { grid-template-columns: 1fr 1fr; gap: 34px 44px; }
}