/* DoctorLens contact page. Palette tokens come from custom.css (:root --dl-*). Prefix: .dl-contact / .dl-map. */
.dl-contact { max-width: 72rem; margin: 0 auto; padding-bottom: 2rem; }
.dl-contact__hero { max-width: 44rem; margin: .5rem 0 1.75rem; }
.dl-contact__title { margin: 0 0 .6rem; padding-left: .85rem; border-left: 5px solid var(--dl-amber); font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.2; }
.dl-contact__lead { margin: 0; font-size: 1.15rem; line-height: 1.7; color: var(--dl-slate-dark); }

.dl-contact__cards { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .85rem; grid-template-columns: minmax(0, 1fr); }
.dl-contact__card { padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--dl-line); border-radius: 14px; }
.dl-contact__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin-bottom: .6rem; background: var(--dl-tint); border: 1px solid var(--dl-line); border-radius: 50%; color: var(--dl-ink); }
.dl-contact__icon .material-icons { font-size: 1.3rem; }
.dl-contact__card-title { margin: 0 0 .15rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dl-slate-dark); }
.dl-contact__card-text { margin: 0; font-size: 1.05rem; line-height: 1.5; font-style: normal; color: var(--dl-ink); overflow-wrap: anywhere; text-wrap: balance; }
.dl-contact__card-text a { color: var(--dl-ink); text-decoration-color: var(--dl-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dl-contact__card-text a:hover { color: var(--dl-slate-dark); }

.dl-contact__grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.dl-contact__panel { padding: 1.4rem; background: #fff; border: 1px solid var(--dl-line); border-radius: 18px; }
.dl-contact__h2 { margin: 0 0 1rem; font-size: 1.35rem; line-height: 1.3; }
.dl-contact__form-intro { margin: -.4rem 0 1.25rem; color: var(--dl-slate-dark); line-height: 1.6; }

/* map */
.dl-map { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 15rem; overflow: hidden; border: 1px solid var(--dl-line); border-radius: 14px; background: var(--dl-tint); }
.dl-map__placeholder { position: absolute; inset: 0; }
.dl-map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.dl-map__card { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; max-width: 24rem; padding: .9rem 1rem; background: rgba(255,255,255,.96); border: 1px solid var(--dl-line); border-radius: 12px; box-shadow: 0 6px 20px rgba(35,35,46,.1); }
.dl-map__addr { margin: 0 0 .65rem; line-height: 1.45; }
.dl-map__load { padding: .55rem 1.3rem; }
.dl-map__note { margin: .6rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--dl-slate-dark); }
.dl-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dl-map__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.dl-map__links .btn { padding: .55rem 1.1rem; }
.dl-map__links .btn-outline-primary { --bs-btn-color: var(--dl-ink); --bs-btn-border-color: var(--dl-slate); --bs-btn-hover-color: var(--dl-ink); --bs-btn-hover-bg: var(--dl-tint); --bs-btn-hover-border-color: var(--dl-slate-dark); --bs-btn-active-color: var(--dl-ink); --bs-btn-active-bg: var(--dl-tint); --bs-btn-active-border-color: var(--dl-slate-dark); }

/* form */
.dl-contact .contact-form .mb-3 { margin-bottom: 1.15rem !important; }
.dl-contact .form-label { font-weight: 600; margin-bottom: .35rem; }
.dl-contact .form-label.required::after { content: " *"; color: var(--dl-slate-dark); }
.dl-contact .form-control, .dl-contact .form-select { padding: .7rem .9rem; border: 1px solid var(--dl-slate); border-radius: 10px; background-color: #fff; }
.dl-contact .form-control:focus, .dl-contact .form-select:focus,
.dl-contact .form-check-input:focus { border-color: var(--dl-amber-hover); box-shadow: 0 0 0 .22rem rgba(255,181,81,.45); outline: 0; }
.dl-contact .form-text { display: block; margin-top: .35rem; font-size: .85rem; line-height: 1.5; color: var(--dl-slate-dark); }
.dl-contact .was-validated .form-control:invalid, .dl-contact .form-control.is-invalid { border-color: #b3261e; }
.dl-contact .dl-agree { padding: .85rem 1rem; background: var(--dl-tint); border: 1px solid var(--dl-line); border-radius: 12px; font-size: .92rem; line-height: 1.5; }
.dl-contact .form-check { margin: 0; }
.dl-contact .form-check-input { margin-top: .2rem; }
.dl-contact .buttons-wrapper { margin-top: 1.25rem; }
.dl-contact .buttons-wrapper .btn { width: 100%; padding: .8rem 1.5rem; }
.dl-contact .alert { border-radius: 12px; }

@media (min-width: 576px) {
  .dl-contact__cards { grid-template-columns: repeat(2, 1fr); }
  .dl-contact__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dl-contact__panel { padding: 1.75rem; }
  .dl-contact .buttons-wrapper .btn { width: auto; }
}
@media (min-width: 992px) {
  .dl-contact__cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .dl-contact__card:last-child:nth-child(odd) { grid-column: auto; }
  .dl-contact__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; }
  .dl-map { aspect-ratio: 4 / 3; }
}

/* full-width centre column (the left column is emptied in templates/contact.tpl) */
.page-contact #center-column { flex: 0 0 100%; width: 100%; max-width: 100%; }