/* ==========================================================
   Nalapad Group – Contact page
   Needs base.css. The form itself is styled by components/forms.css.
   ========================================================== */

.ct { background: var(--color-soft); padding-block: clamp(64px, 8vw, 120px); }

/* ---- Map ---- */
.ct__map {
  height: clamp(320px, 36vw, 460px);
  margin-bottom: clamp(56px, 7vw, 96px);
  background: var(--color-tint);
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 24px 48px -32px rgba(14, 34, 56, .35);
}
.ct__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Form + address, side by side ---- */
.ct__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.ct__title { margin-bottom: 28px; font-size: clamp(32px, 3.2vw, 46px); }

/* ---- Address list ---- */
.ct__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.ct__list li { display: flex; gap: 18px; padding-block: 24px; border-bottom: 1px solid var(--color-line); }
.ct__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
}
.ct__list h3 { margin: 2px 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); }
.ct__list p,
.ct__list address { margin: 0; font-size: 16px; font-style: normal; line-height: 1.7; color: var(--color-text); }
.ct__list a { transition: color .2s ease; }
.ct__list a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .ct__grid { grid-template-columns: 1fr; }
}