/* =============================================================
   pages/contact.css — Contact page (Figma: 675-3501 / 679-3804)
   ============================================================= */

/* ── Page wrapper ────────────────────────────────────────────*/
.contact-page {
  position:        relative;
  min-height:      calc(100vh - var(--topbar-h));
  padding:         74px 118px 60px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             60px;
  overflow:        hidden;
  /* Same hero gradient — sits behind the pixel grid */
  background:      linear-gradient(180deg, #0A014C 0%, #080C1D 23.56%, #080C1D 73.56%, #0A014C 100%);
}

/* Lift every direct child above the pixel grid */
.contact-page > *:not(#pixeled-bg) {
  position: relative;
  z-index:  1;
}

/* ── Page header ─────────────────────────────────────────────*/
.contact-page__header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  text-align:     center;
  max-width:      526px;
}

.contact-page__title {
  font-family:   var(--font-headings);
  font-size:     var(--fs-40);
  font-weight:   600;
  line-height:   48px;
  color:         var(--white);
}

.contact-page__sub {
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color:       #eaeaea;
}

/* ── Two-column content ──────────────────────────────────────*/
.contact-page__content {
  display:     flex;
  gap:         48px;
  align-items: flex-start;
  justify-content: center;
  width:       100%;
  max-width:   960px;
}

/* ── Left: direct contact options ───────────────────────────*/
.contact-page__direct {
  display:        flex;
  flex-direction: column;
  gap:            48px;
  flex-shrink:    0;
}

/* Each contact method group */
.contact-group {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.contact-group__label {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.contact-group__desc {
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color:       #eaeaea;
}

.contact-group__number {
  font-family: var(--font-mono);
  font-size:   var(--fs-16);
  font-weight: 400;
  line-height: 24px;
  color:       #c97fff;
  /* mono tokens: 16px <= 20px */
  letter-spacing: var(--mono-ls-lte20);
}

/* Glass action buttons */
.contact-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             16px;
  height:          48px;
  width:           282px;
  padding:         0 12px;
  background:      rgba(176, 91, 189, 0.24);
  border:          1px solid rgba(171, 14, 250, 0.19);
  border-radius:   8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family:     var(--font-text);
  font-size:       var(--fs-16);
  font-weight:     400;
  line-height:     24px;
  color:           var(--white);
  text-decoration: none;
  text-align:      left;
  cursor:          pointer;
  transition:      background 0.2s, border-color 0.2s;
  flex-shrink:     0;
  overflow:        hidden;
}
.contact-btn:hover {
  background:    rgba(176, 91, 189, 0.34);
  border-color:  rgba(171, 14, 250, 0.45);
}
.contact-btn svg {
  flex-shrink: 0;
  opacity:     0.9;
}

/* ── Vertical divider ────────────────────────────────────────*/
.contact-page__divider {
  align-self:  stretch;
  width:       1px;
  background:  rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ── Right: form column ──────────────────────────────────────*/
.contact-page__form-col {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  flex:           1;
  min-width:      0;
  max-width:      400px;
}

.contact-page__form-title {
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color:       #eaeaea;
}

/* ── Form fields ─────────────────────────────────────────────*/
.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.form-field label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-14);
  font-weight:    400;
  line-height:    20px;
  color:          var(--purple-900);   /* #e8c6fd */
  letter-spacing: var(--mono-ls-lte20);
}

.form-field__optional {
  font-family: var(--font-mono);
  font-size:   var(--fs-14);
  color:       rgba(232, 198, 253, 0.55);
  font-weight: 400;
}

.form-field__required {
  color: #c97fff;
}

.form-field input,
.form-field textarea {
  background:    rgba(170, 172, 241, 0.07);
  border:        1px solid rgba(170, 172, 241, 0.3);
  border-radius: 8px;
  padding:       12px;
  height:        48px;
  font-family:   var(--font-text);
  font-size:     var(--fs-14);
  font-weight:   400;
  line-height:   20px;
  color:         var(--white);
  outline:       none;
  transition:    border-color 0.2s, background 0.2s;
  width:         100%;
}

.form-field textarea {
  height:     120px;
  resize:     vertical;
  min-height: 80px;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(170, 172, 241, 0.7);
  background:   rgba(170, 172, 241, 0.11);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #8e8394;
}

/* Status messages */
.contact-form__status {
  font-family:  var(--font-text);
  font-size:    var(--fs-14);
  padding:      10px 12px;
  border-radius: 8px;
  display:      none;
  line-height:  20px;
}
.contact-form__status.is-success {
  display:    block;
  background: rgba(0, 200, 100, 0.1);
  border:     1px solid rgba(0, 200, 100, 0.3);
  color:      #6effa5;
}
.contact-form__status.is-error {
  display:    block;
  background: rgba(216, 0, 60, 0.1);
  border:     1px solid rgba(216, 0, 60, 0.3);
  color:      #ff7a9a;
}

/* Submit button — same glass style */
.contact-form__submit {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  height:          48px;
  width:           100%;
  padding:         0 12px;
  background:      rgba(176, 91, 189, 0.24);
  border:          1px solid rgba(171, 14, 250, 0.19);
  border-radius:   8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family:     var(--font-text);
  font-size:       var(--fs-16);
  font-weight:     400;
  line-height:     24px;
  color:           var(--white);
  text-align:      center;
  cursor:          pointer;
  transition:      background 0.2s, border-color 0.2s, opacity 0.2s;
  overflow:        hidden;
}
.contact-form__submit:hover    { background: rgba(176, 91, 189, 0.34); border-color: rgba(171, 14, 250, 0.45); }
.contact-form__submit:disabled { opacity: 0.4; pointer-events: none; }

/* ── Social icons ────────────────────────────────────────────*/
.contact-page__social {
  display:     flex;
  gap:         16px;
  align-items: center;
  align-self:  flex-end;
}

.contact-social-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   6px;
  background:      rgba(255,255,255,0.08);
  border:          1px solid rgba(255,255,255,0.18);
  font-size:       18px;
  color:           #E8C6FD;
  transition:      opacity 0.2s, transform 0.2s;
  text-decoration: none;
}
.contact-social-btn:hover {
  opacity:   0.8;
  transform: translateY(-2px);
}

/* ── Responsive: 900px ───────────────────────────────────────*/
@media (max-width: 900px) {
  .contact-page {
    padding:     60px 48px 48px;
    gap:         48px;
  }
  .contact-page__content {
    gap: 32px;
  }
  .contact-page__form-col {
    max-width: none;
  }
}

/* ── Responsive: 768px — stack to single column ─────────────*/
@media (max-width: 768px) {
  .contact-page {
    padding:    48px 32px 48px;
    align-items: flex-start;
    gap:         40px;
  }
  .contact-page__header {
    align-items: flex-start;
    text-align:  left;
    max-width:   none;
  }
  .contact-page__sub-br { display: none; }
  .contact-page__title {
    font-size:   32px;
    line-height: 40px;
  }
  .contact-page__content {
    flex-direction: column;
    gap:            0;
    width:          100%;
  }
  /* Horizontal divider on mobile */
  .contact-page__divider {
    width:        100%;
    height:       1px;
    align-self:   auto;
    margin:       32px 0;
  }
  .contact-page__form-col {
    width: 100%;
  }
  .contact-page__form-title::before {
    content: 'Or ';
  }
  .contact-btn {
    width: 100%;
  }
  .contact-page__social {
    align-self: flex-start;
  }
}

/* ── Responsive: 640px ───────────────────────────────────────*/
@media (max-width: 640px) {
  .contact-page {
    padding: 28px 20px 48px;
    gap:     32px;
    /* Phone only: solid background matching the rest of the site */
    background: var(--bg-main);
  }
  .contact-page__direct {
    gap: 32px;
    width: 100%;
  }
}