/* ==========================================================================
   AstroPanda, contact.css
   /contact/ and /es/contacto/. Two columns: the pitch on the left, the form
   in a panel on the right.
   ========================================================================== */

.ap-contact{padding:clamp(120px,16vh,180px) 0 clamp(60px,9vh,110px); overflow-x:clip}
.ap-contact-grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,5vw,84px); align-items:start;
}

/* ---------- left: the pitch ---------- */
/* The form is long and the pitch is short, so the left column used to end
   a third of the way down and leave the rest of the scroll unanswered. It
   sticks instead: the headline, the lead and the address stay with whoever
   is filling the fields. Capped at the viewport so a short screen can still
   reach the bottom of it, and released with the single column below. */
.ap-contact-aside{
  position:sticky; top:120px;   /* the fixed header is ~92px tall */
  align-self:start; max-height:calc(100vh - 150px);
  overflow:auto; scrollbar-width:none;
  padding-bottom:clamp(20px,4vh,40px);
}
.ap-contact-aside::-webkit-scrollbar{display:none}
.ap-contact-title{
  font-size:clamp(40px,5.2vw,80px); line-height:.95; margin:16px 0 0;
  text-transform:uppercase;
}
/* the second line carries the colour, the way every other display pair on
   the site does */
.ap-contact-title span{color:var(--orange)}
.ap-contact-lead{
  margin:26px 0 0; font-size:18px; font-weight:300; line-height:1.55;
  color:rgba(238,240,246,.86); text-wrap:pretty;
}
.ap-contact-email{
  display:inline-flex; align-items:center; gap:9px; margin-top:28px;
  font-size:20px; font-weight:400; color:var(--orange);
  padding-bottom:7px; border-bottom:1px solid rgba(255,90,20,.45);
  transition:color .25s ease, border-color .25s ease;
}
.ap-contact-email i{display:inline-flex; font-size:13px}
.ap-contact-email:hover{color:var(--orange-soft); border-bottom-color:var(--orange)}
/* a hairline, then the softer aside under it */
.ap-contact-note{
  margin:clamp(34px,5vh,52px) 0 0; padding-top:clamp(30px,4vh,44px);
  border-top:1px solid var(--line);
  font-size:15.5px; font-weight:300; line-height:1.6; color:var(--muted); text-wrap:pretty;
}
/* the orbit sits under the copy and runs off the left edge of the shell,
   the way the planets do elsewhere */

/* ---------- right: the form panel ----------
   The form's own styles live in global.css: the Hablemos modal uses the
   same form on every page. */


@media (max-width:1040px){
  .ap-contact-grid{grid-template-columns:minmax(0,1fr); gap:40px}
  /* one column: the pitch is above the form, not beside it, and a
     sticky block there would sit on top of the fields */
  .ap-contact-aside{position:static; max-height:none; overflow:visible}
}