/* ============================================================
   contact.css — Flex Europa · finaldesign
   Contact page (§3.3).

   REUSE: .page-head, .breadcrumb, .field / .fieldset / .consent /
   .form-status, .btn, .spec-row, .container. This file adds only the
   form-plus-details two-column layout and the contact detail list.
   ============================================================ */

.contact { padding-block: var(--space-2xl) var(--space-3xl); }
.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* ---------------------------------------------------------------- Form */
.contact__form { display: flex; flex-direction: column; gap: var(--space-lg); }
.contact__form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.contact__required-note { font-size: var(--fs-tiny); color: var(--color-text-muted); }

/* ---------------------------------------------------------------- Details rail */
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: var(--hairline);
}
.contact__aside-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
}

.contact-detail { display: flex; align-items: flex-start; gap: var(--space-md); }
.contact-detail__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border: var(--hairline-strong);
  color: var(--color-accent-strong);
}
.contact-detail__icon .icon { inline-size: 16px; block-size: 16px; }
.contact-detail__body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.contact-detail__label {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Tel and mailto links get a full 44px target without stretching the row. */
.contact-detail__value {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--step-size);
  margin-block: calc((var(--step-size) - 1.5em) / -2);
  line-height: 1.5;
  font-size: var(--fs-md);
  color: var(--color-text);
}
.contact-detail__value[href]:hover { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.contact-detail__note { font-size: var(--fs-tiny); color: var(--color-text-muted); }

.contact__hours { display: flex; flex-direction: column; gap: var(--space-xs); }

/* ---------------------------------------------------------------- Success panel */
.contact__sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-accent-tint);
  border: var(--hairline);
}
.contact__sent-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent-deep);
}
.contact__sent-mark .icon { inline-size: 22px; block-size: 22px; }
.contact__sent-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.contact__sent-text { font-size: var(--fs-sm); color: var(--color-text-muted); max-inline-size: var(--measure); }
.contact__sent-ref { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-text); }

/* ---------------------------------------------------------------- Breakpoints */
@media (max-width: 991px) {
  .contact__layout { grid-template-columns: minmax(0, 1fr); }
}