/* Contact page component. The generated page links this after the shared shell so layout and
   typography are owned here instead of by serialized inline styles and brittle attribute rules. */
#contact.contact-page {
  padding-block: 5rem;
  background: #fff;
}

#contact .contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
  gap: 3rem;
  align-items: stretch;
  container-type: inline-size;
}

#contact :where(.contact-left, .contact-right) {
  min-inline-size: 0;
}

#contact .contact-breadcrumb {
  margin-block-end: 1.5rem;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

#contact .contact-breadcrumb a {
  color: var(--body);
  text-decoration: none;
}

#contact .contact-breadcrumb [aria-current="page"] {
  color: var(--red);
}

/* The two-column Contact layout is left-led. Keep its breadcrumb directly above and aligned
   with the H1 without changing the centered breadcrumb treatment on the stacked layout. */
@media (min-width: 56.3125rem) {
  #contact .contact-breadcrumb ol {
    justify-content: flex-start;
    text-align: start;
  }
}

#contact .contact-title {
  margin-block-end: 2rem;
  color: #111;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(3rem, 1.75rem + 4vw, 4.75rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

#contact .contact-intro {
  max-inline-size: 70ch;
  margin-block-end: 1.5rem;
  color: #444;
  font-size: 1.125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

#contact .contact-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-inline-size: 27.5rem;
  margin-block-start: 1.5rem;
}

#contact .contact-action {
  inline-size: 100%;
  justify-content: center;
  padding: 1.5rem 2rem;
  font-size: 1.5rem;
  letter-spacing: .1em;
  text-align: center;
}

#contact .contact-right {
  display: flex;
  min-block-size: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem;
  background: #000;
  color: #fff;
}

#contact .contact-panel-title {
  margin-block-end: 1rem;
  color: inherit;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
}

#contact .contact-panel-rule {
  inline-size: 2.5rem;
  block-size: .1875rem;
  margin-block-end: 2rem;
  background: var(--red);
}

#contact .contact-trip-copy {
  margin-block-end: 2.5rem;
}

#contact .contact-trip-copy h3 {
  margin-block-end: .75rem;
  color: inherit;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

#contact .contact-trip-copy p {
  margin: 0;
  color: inherit;
  font-size: 1.125rem;
  line-height: 1.6;
}

#contact .contact-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#contact .contact-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

#contact .contact-icon {
  flex: 0 0 auto;
  padding-block-start: .25rem;
  color: var(--red);
  line-height: 1;
}

#contact .contact-icon svg {
  display: block;
}

#contact .contact-label {
  margin-block-end: .25rem;
  color: #aaa;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .0625rem;
}

#contact .contact-value {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
}

@container (max-width: 52rem) {
  #contact .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  #contact .contact-right {
    min-block-size: auto;
    padding: 3rem 2rem;
  }
}

@media (max-width: 56.25rem) {
  #contact.contact-page {
    padding-block: 3.5rem;
  }

  #contact .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-inline: 1.5rem;
  }
}

@media (max-width: 37.5rem) {
  #contact.contact-page {
    padding-block: 3rem 2.75rem;
  }

  #contact .contact-layout {
    gap: 1.75rem;
    padding-inline: 1rem;
  }

  #contact .contact-breadcrumb {
    margin-block-end: .875rem;
    font-size: .75rem;
    letter-spacing: .12em;
  }

  #contact .contact-title {
    margin-block-end: 1.5rem;
    font-size: clamp(2rem, 10vw, 2.5rem);
    line-height: 1.02;
  }

  #contact .contact-intro,
  #contact .contact-trip-copy p {
    font-size: 1.0625rem;
  }

  #contact .contact-actions {
    max-inline-size: none;
  }

  #contact .contact-right {
    padding: 2rem 1.25rem;
  }

  #contact .contact-panel-title {
    margin-block-end: .75rem;
    font-size: 1.875rem;
  }

  #contact .contact-panel-rule {
    margin-block-end: 1.75rem;
  }

  #contact .contact-trip-copy h3 {
    font-size: 1.375rem;
  }

  #contact .contact-list {
    gap: 1.5rem;
  }

  #contact .contact-value {
    font-size: 1.0625rem;
  }
}

@media (forced-colors: active) {
  #contact .contact-right {
    border: 1px solid CanvasText;
  }

  #contact .contact-panel-rule {
    background: Highlight;
  }
}