/* ============================================================
   contact.css  -  CONTACT PAGE LAYOUT

   Nikita: this loads only on contact.html. Two columns on desktop:
   "Let's talk" headline + contact details on the left, the
   enquiry form on the right. Stacks on tablet.

   The form fields themselves are styled in components.css (search
   for "FORM"). This file only handles the layout around them.
============================================================ */

/* Top padding clears the nav. Bottom padding gives space before footer. */
.contact { padding-block: clamp(120px, 18vw, 160px) clamp(60px, 12vw, 120px); }

/* Two columns on desktop. Stacks on screens 900px and narrower. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.contact-left > * + * { margin-block-start: var(--space-md); }
.contact-intro { max-width: 480px; color: var(--ash); }

/* List of "Email" and "Phone" details under the intro. */
.contact-details { margin-block-start: var(--space-xl); }
.contact-detail {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--rule);
}
.contact-detail:first-child { border-block-start: 1px solid var(--rule); }
.contact-value { font-size: var(--type-lede); }

/* Social platform pills (TikTok, Instagram, YouTube, Facebook). Each is an
   icon plus a label. Hover turns gold. Tap-friendly size on touch. */
.contact-socials {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-block-start: var(--space-lg);
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: var(--type-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 44px;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  border-radius: 100px;
}
.social-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.social-link:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--cream);
}
@media (max-width: 480px) {
  .social-link span { display: none; } /* compact icons-only on small screens */
  .social-link { padding: 10px; width: 44px; justify-content: center; }
}

/* On phones (<= 900px), columns stack and the details list reduces
   its label column width. */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}
@media (max-width: 480px) {
  .contact-detail { grid-template-columns: 60px 1fr; gap: var(--space-sm); }
  .contact-value { font-size: var(--type-body); word-break: break-word; }
}