/*
 * Strona kontaktu — pełna szerokość treści, karty działów i ikony przy danych kontaktowych.
 */

.page-contact .entry-content {
  max-width: none;
  font-size: var(--font-size-sm);
}

.page-contact__title {
  margin: 0 0 var(--content-flow);
  font-weight: 400;
  font-size: var(--font-size-h1);
}

/*
 * Znacznik leży poza tokiem tekstu — przy układzie flex nagłówek rozpadłby się na
 * osobne elementy i wyróżniony fragment dostałby przerwy z obu stron.
 */
.page-contact .entry-content h2 {
  position: relative;
  padding-left: calc(0.75rem + var(--space-sm));
  font-weight: 400;
}

.page-contact .entry-content h2::before {
  content: "";
  position: absolute;
  top: calc((var(--font-size-h2) * var(--line-height) - 1rem) / 2);
  left: 0;
  width: 0.75rem;
  height: 1rem;
  background-color: var(--color-accent);
  mask: url("../img/section-marker.svg") no-repeat center / contain;
}

/* Karta działu — obramowanie zamiast tła, które grupa dostaje w treści wpisów. */
.page-contact .entry-content .wp-block-group {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  background: none;
}

/* Karty w rzędzie równają wysokość do najwyższej. */
.page-contact .entry-content .wp-block-column {
  display: flex;
}

.page-contact .entry-content .wp-block-column > .wp-block-group {
  flex: 1;
}

/* Wewnątrz karty rytm jest ciaśniejszy niż między blokami treści. */
.page-contact .entry-content .wp-block-group__inner-container > * + * {
  margin-block-start: var(--space-sm);
}

.page-contact .entry-content .contact-note {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-small);
}

/*
 * Ikona przy pierwszym numerze i adresie w wierszu — redakcja wstawia zwykły link,
 * a maska maluje kształt kolorem z tokenu, więc ikona zmienia się razem z kontrastem.
 */
.page-contact .entry-content p > a[href^="tel:"]:first-child::before,
.page-contact .entry-content p > a[href^="mailto:"]:first-child::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: var(--space-2xs);
  vertical-align: middle;
  background-color: var(--color-accent);
}

.page-contact .entry-content p > a[href^="tel:"]:first-child::before {
  mask: url("../img/icon-phone.svg") no-repeat center / contain;
}

.page-contact .entry-content p > a[href^="mailto:"]:first-child::before {
  mask: url("../img/icon-mail.svg") no-repeat center / contain;
}

.page-contact .entry-content .wp-block-image img {
  border-radius: var(--radius);
}