/* Contact section: "Get in Touch" reads as the site's call to action.
   Loaded from main() in tools/apply_content.py; the .pw-cta markup comes from patch_js()
   (and is pre-rendered in main()).

   The template's title was a 50px underlined button (it opened the old enquiry form) and the
   email was 15px text among the other details. Now one block in the title's place:
   a large heading at the h2 tier, the invitation line, and contact@0.studio as a large
   mailto link. The link uses the site's link hover (the underline wipes away, as on
   Read More and the old title) plus an arrow that steps right.
   Colours follow the theme ink, so "invert color" turns it light with the rest.
   The small email entry under "Enquire" is hidden (the large link replaces it); operating
   hours, collaboration, information and About Us stay as the secondary details. */

#contact .pw-cta { display: flex; flex-direction: column; align-items: flex-start; }

#contact .pw-cta .contact-title {
  margin: 0 0 0 -.045em;              /* optical: the G's side bearing lines up with the text below */
  align-self: flex-start;             /* the template centres the phone title */
  width: auto;
  white-space: nowrap;
}

#contact .pw-cta__lede { max-width: 24rem; text-wrap: pretty; }

#contact .pw-cta__mail {
  --underline-offset: 14%;
  --underline-color: var(--c-dark-primary);
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: inherit;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
  white-space: nowrap;
}
#contact .pw-cta__mail .button-inner { padding-bottom: .12em; }   /* room for the underline */
#contact .pw-cta__arrow {
  flex: none;
  width: .62em;
  height: .62em;
  transition: transform var(--transition);
}
@media (hover: hover) {
  #contact .pw-cta__mail:hover .pw-cta__arrow { transform: translateX(.18em); }
}
#contact .pw-cta__mail:focus-visible { outline: 1px solid currentColor; outline-offset: .2em; }

/* the large link replaces the small email entry under "Enquire" */
#contact .contact-item-1 .contact-item__entry:first-child { display: none; }

/* ---- desktop (>= 1024px): the lower half of the screen, left half of the grid ---- */
@media (min-width: 1024px) {
  #contact .pw-cta { grid-column: 1 / 5; margin-left: var(--padding-sm); }
  #contact .pw-cta .contact-title { font-size: 8.25rem; }            /* 132px at 1440 */
  #contact .pw-cta__lede { margin-top: 2.25rem; }
  #contact .pw-cta__mail {
    margin-top: .5rem;
    font-size: 3.125rem;                                               /* the h3 tier, 50px */
    --underline-thickness: .125rem;
  }
}

/* ---- phones / tablets (< 1024px): title, line and link across the full width,
   the details in two columns under them ---- */
@media (max-width: 1023px) {
  #contact .pw-cta { grid-column: 1 / -1; grid-row: 1; margin-bottom: 3rem; }
  #contact .pw-cta .contact-title { font-size: 4.25rem; }            /* 64px at 390 */
  #contact .pw-cta__lede { margin-top: 1.5rem; }
  #contact .pw-cta__mail {
    margin-top: .375rem;
    font-size: 2.125rem;                                               /* 32px at 390, 31px at 375 */
    --underline-thickness: .09375rem;
    position: relative;
  }
  /* invisible tap area, like the other contact links (mobile.css) */
  #contact .pw-cta__mail::after { content: ''; position: absolute; inset: -8px -6px; }

  #contact .contact-item-1 { grid-column: 1 / 3; grid-row: 2; order: 0; margin: 0; }
  #contact .contact-item-2 { grid-column: 3 / -1; grid-row: 2; order: 0; }
  #contact .contact-item-3 { grid-column: 3 / -1; grid-row: 3; order: 0; margin-top: 2rem; }
  #contact .contact-item-1 .contact-item__links { margin-top: 0; }
  /* "Information" sits beside "Operating Hours": its value lines up with the hours */
  #contact .contact-item-2 .contact-item__links { margin-top: 0; }
}

/* the "Enquire" column (operating hours, collaboration) is removed at the user's request;
   the big contact@0.studio link above is the one way to get in touch */
#contact .contact-item-1 { display: none !important; }