/* Contact page styles: intro statement, location cards and the contact
   form. Loaded after fonts.css, base.css and motion.css.

   Sections (original Framer layer names in brackets):
   1. .contact-intro   [Advantages]    intro statement + location cards
   2. .get-involved    [Let's Connect] "Get Involved" copy + contact form   */

/* --------------------------------------------------------------------------
   1. Intro statement and location cards
   -------------------------------------------------------------------------- */
.contact-intro,
.get-involved { text-align: left; }
.globe-card .btn-dark__text { text-align: center; }

.contact-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 89px;
  width: 100%;
  padding: 120px 72px 40px;
  background-color: var(--c-navy-950);
  overflow: hidden;
}

/* "Text Scroll Reveal": h3 in the original, 48px / 1.2em, words fade 0.2 to 1 */
.contact-intro__text {
  width: 100%;
  font: 400 48px/1.2em var(--font-sans);
  letter-spacing: 0;
  text-align: left;
  color: var(--c-white);
}

.locations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  padding-bottom: 40px;
  overflow: hidden;
}
.locations__item {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  width: 100%;
}

/* Office cards reuse the shared .member-card frame (radius 16, padding 10,
   gap 36, 390px photo, italic name and role). Only the gradient, the photo
   crop and the address wrapping differ. */
.location-card {
  align-self: start;
  width: 100%;
  will-change: transform;
}
.location-card--lausanne {
  background: linear-gradient(180deg, var(--c-navy-950) 0%, var(--c-green) 35%, var(--c-navy-950) 65%, var(--c-navy-900) 100%);
}
.location-card--melbourne {
  background: linear-gradient(180deg, var(--c-navy-900) 0%, var(--c-green) 35%, var(--c-navy-950) 65%, var(--c-navy-900) 100%);
}
.location-card__photo { background-color: transparent; }
.location-card__photo img { object-position: center; }
.location-card__city,
.location-card__address {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* "We work across the globe" card [Apply CV] */
.globe-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
  height: 519px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--c-black) 0%, var(--c-black) 35%, var(--c-navy-900) 65%, var(--c-navy-950) 100%);
  overflow: hidden;
  will-change: transform;
}
.globe-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.globe-card__text,
.globe-card__action {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 0 0px;
  width: 100%;
  min-height: 0;
  height: 1px;
  overflow: hidden;
}
.globe-card__text {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  padding: 18px;
}
.globe-card__title {
  width: 100%;
  font: 400 48px/60px var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--c-white);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.globe-card__lead {
  width: 100%;
  font: 500 16px/28px var(--font-sans);
  letter-spacing: 0;
  color: var(--c-grey-999);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.globe-card__action {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 18px 18px 40px;
}

/* --------------------------------------------------------------------------
   2. Get Involved + contact form
   -------------------------------------------------------------------------- */
.get-involved {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 80px;
  width: 100%;
  padding: 90px 72px;
  background: linear-gradient(180deg, var(--c-navy-950) 0%, var(--c-navy-900) 100%);
  overflow: hidden;
  /* Links to #contact land on the section top: unlike the home and course
     sections, the original gives this one no scroll margin (motion.css
     sets 50px on every [id]). */
  scroll-margin-top: 0;
}
.get-involved__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0px;
  width: 1px;
  overflow: hidden;
}
.get-involved__wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  width: 100%;
  overflow: hidden;
}
.get-involved__title {
  position: relative;
  width: auto;
  font: italic 400 96px/96px var(--font-serif);
  letter-spacing: -0.04em;
  color: var(--c-white);
  white-space: pre;
}
.get-involved__sans { font-family: var(--font-sans); font-style: normal; font-weight: 400; }
.get-involved__gap { font-family: var(--font-sans); font-style: italic; }
.get-involved__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 65%;
  overflow: hidden;
}
.get-involved__list .label {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.get-involved__list strong { font-weight: 700; }

.get-involved__form-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  flex: 1 0 0px;
  width: 1px;
}
.contact-form {
  --field-border: rgba(136, 136, 136, 0.1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding-top: 28px;
  overflow: hidden;
}
.contact-form__field { width: 100%; }
.contact-form__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  overflow: hidden;
}
.contact-form__row .contact-form__field { flex: 1 0 0px; width: 1px; }
.contact-form__message { height: 140px; }
.contact-form__message .field__input {
  display: flex;
  height: 100%;
  min-height: inherit;
  overflow-y: auto;
}
/* Framer's custom resize grip (only drawn when the scrollbar is styled) */
.contact-form textarea::-webkit-scrollbar { background: transparent; }
.contact-form textarea::-webkit-scrollbar-thumb:window-inactive { opacity: 0; }
.contact-form textarea::-webkit-scrollbar-corner { background: transparent; outline: none; }
.contact-form textarea::-webkit-resizer {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='m1.5 8 7-7M9 5.5l-3 3' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}

/* Success state: main.js switches the submit button to the original
   "Form Success Message" variant (see motion.css .btn-dark.is-success). */

/* --------------------------------------------------------------------------
   Tablet (810 to 1439.98)
   -------------------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .get-involved { flex-direction: column; }
  .get-involved__info,
  .get-involved__form-col { flex: none; width: 100%; }
}

/* --------------------------------------------------------------------------
   Phone (below 810)
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .contact-intro { padding: 40px 22px; }
  .locations { grid-template-columns: repeat(1, 1fr); }
  .get-involved { flex-direction: column; padding: 40px 22px 90px; }
  .get-involved__info,
  .get-involved__form-col { flex: none; width: 100%; }
  .get-involved__title {
    width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .get-involved__list { width: 90%; }
  /* shared .member-card sets white-space: pre on phone; addresses must wrap */
  .location-card__city,
  .location-card__address { width: 100%; white-space: pre-wrap; }
}