/* ==========================================================================
   Contacts page — intro line, then a two-column layout: studio contact
   details (email/phone/address/hours + social) on the left, a full
   project-brief form on the right. The form fields/select/submit-states
   are the same recipe as the site-wide quote modal (css/quote-modal.css)
   under this page's own class names, since the two never load together
   and each stays free to drift independently later. Same per-section
   background recipe as about.css / pitch.css / blog.css.
   ========================================================================== */

.contacts {
  position: relative;
  background-color: #0b0b0e;
  background-image: radial-gradient(circle at 10% 8%, rgba(91, 42, 134, 0.14), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(255, 122, 26, 0.08), transparent 30%);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  /* Nothing in this section is selectable except the three things worth
     copying: the email, the phone number, and whatever the user types into
     the form — each re-enables selection explicitly below. */
  -webkit-user-select: none;
  user-select: none;
}

.contacts__form input,
.contacts__form textarea,
.contacts__info-value--copyable {
  -webkit-user-select: text;
  user-select: text;
}

.contacts__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.contacts__intro {
  max-width: 640px;
}

.contacts__title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.contacts__text {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.contacts__layout {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8);
  align-items: stretch;
}

/* --- Info column ---
   align-items: stretch on .contacts__layout above makes this column match
   the form's own height; any leftover space just sits as slack below the
   social row (not distributed via margin-top: auto) so the divider stays
   immediately under Hours regardless of how much taller the form is. */
.contacts__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
}

.contacts__info-intro {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.contacts__info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Bare icons at the same size/color as the social row below (no circular
   badge). Email/phone/hours are plain reference text — not links — so
   neither the icons nor the text carry a hover color change. */
.contacts__info-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
}

.contacts__info-icon svg {
  width: 22px;
  height: 22px;
}

.contacts__info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.contacts__info-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.contacts__info-value {
  font-size: var(--fs-small);
  color: var(--color-text);
}

/* Email/phone are now real tel:/mailto: links (tap-to-call, tap-to-mail on
   phones) but should look like the plain value, not a default blue link. */
a.contacts__info-value {
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a.contacts__info-value:hover {
  color: var(--color-hover-accent);
}

.contacts__social {
  padding-top: var(--space-1);
}

.contacts__social-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Plain icons at the footer's own resting/hover colors — the same bare
   icon treatment as .contacts__info-icon above, so the whole card reads
   as one consistent icon language. 3 columns x 2 rows. */
.contacts__social-grid {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: var(--space-4) var(--space-6);
}

.contacts__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-faint);
  transition: color var(--duration-fast) var(--ease-standard);
}

.contacts__social-link svg {
  width: 22px;
  height: 22px;
}

.contacts__social-link:hover {
  color: var(--color-text);
}

/* Mobile: hide the whole "Follow the studio" social block (the socials are
   still reachable in the footer). */
@media (max-width: 767px) {
  .contacts__social {
    display: none;
  }
}

/* --- Form column ---
   Same box-shadow-ring recipe as css/quote-modal.css's .quote-modal__field
   — border-style can't transition smoothly, box-shadow can (same
   reasoning as .filter-pill/.pagination__btn). */

.contacts__form-wrap {
  padding: var(--space-8);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.contacts__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contacts__row {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr — a bare 1fr track still won't shrink
     past its content's min-content width, so at narrow widths the input
     inside would push the column (and the row) wider than the form,
     overflowing past the select field below it. minmax(0, ...) lets the
     track (and the input's own width:100% below) actually shrink with
     it. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.contacts__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.contacts__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.contacts__field input,
.contacts__field textarea {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.contacts__field textarea {
  height: auto;
  min-height: 128px;
  padding: var(--space-3) var(--space-4);
  line-height: 1.5;
  resize: vertical;
}

.contacts__field input::placeholder,
.contacts__field textarea::placeholder {
  color: var(--color-text-faint);
}

.contacts__field input:focus,
.contacts__field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.contacts__form.was-validated .contacts__field input:invalid,
.contacts__form.was-validated .contacts__field textarea:invalid {
  box-shadow: inset 0 0 0 1px #ff5a5a;
}

/* --- Custom "select" (service picker) — same shape as
   .quote-modal__select (a real <select>'s own box restyles fine, but its
   dropdown popup is drawn by the browser/OS and stays a plain white list
   regardless of page CSS, so this is a button + listbox instead, same as
   .nav__dropdown). --- */

.contacts__select-wrap {
  position: relative;
}

.contacts__select {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.contacts__select[data-placeholder="true"] {
  color: var(--color-text-faint);
}

.contacts__select:focus-visible,
.contacts__select.is-open {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.contacts__select.is-invalid {
  box-shadow: inset 0 0 0 1px #ff5a5a;
}

.contacts__select-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--color-text-faint);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.contacts__select.is-open .contacts__select-chevron {
  transform: rotate(180deg);
}

.contacts__select-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  max-height: 230px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: #101014;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.contacts__select-menu[hidden] {
  display: none;
}

.contacts__select-option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.contacts__select-option:hover,
.contacts__select-option.is-active {
  background: var(--color-bg-elevated-hover);
  color: var(--color-text);
}

.contacts__select-option[aria-selected="true"] {
  color: var(--color-text);
  font-weight: 600;
}

.contacts__submit {
  margin-top: var(--space-2);
  width: 100%;
  height: 52px;
  font-size: 15px;
  gap: var(--space-2);
}

.contacts__submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: contacts-spin 700ms linear infinite;
}

.contacts__submit.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.contacts__submit.is-loading .contacts__submit-spinner {
  display: inline-block;
}

.contacts__submit.is-loading .contacts__submit-label {
  opacity: 0.85;
}

@keyframes contacts-spin {
  to {
    transform: rotate(360deg);
  }
}

.contacts__note {
  margin-top: var(--space-1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-faint);
  text-align: center;
}

/* Submitting shows the same overlay as the site-wide quote modal
   (#contacts-success-modal in contacts.html reuses .quote-modal /
   .quote-modal__panel / .quote-modal__success from css/quote-modal.css
   directly) instead of swapping this card's own content — the page
   itself never changes underneath it. */

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

@media (max-width: 560px) {
  .contacts__info,
  .contacts__form-wrap {
    padding: var(--space-6) var(--space-5);
  }

  .contacts__row {
    grid-template-columns: 1fr;
  }
}