/* templates/pages/contact.html — page shell. Colors from skins/*.css */

.contact-page {
  padding: 1.5rem 2rem 0;
}

.contact-body,
.contact-social__links {
  max-width: var(--content-max);
  margin-right: auto;
  margin-left: auto;
}

.contact-body > *:first-child {
  margin-top: 0;
}

.contact-body > *:last-child {
  margin-bottom: 0;
}


/* Social links injected at <!-- social: follow --> */

.contact-social__links {
  display: grid;
  grid-template-columns: calc(15rem - 1cm);
  gap: 0.6rem;
  margin-top: 1rem;
}

.contact-social__link {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;

  min-height: 3.5rem;
  padding: 0.6rem 0.9rem;

  border: 1px solid var(--color-cta);
  border-radius: var(--radius-md);

  background: var(--color-surface);
  color: var(--color-text);

  font-weight: 600;
  text-decoration: none;

  transition: transform var(--motion-fast);
}

.contact-social__link:hover {
  transform: translateX(2px);
}


/* Social icons */

.contact-social__icon {
  width: 1.5rem;
  height: 1.5rem;

  display: grid;
  place-items: center;
}

.contact-social__icon::before {
  content: "";

  width: 1.15rem;
  height: 1.15rem;

  background: var(--color-text);

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.contact-social__link--x .contact-social__icon::before {
  mask-image: url("/images/icons/x.svg");
  -webkit-mask-image: url("/images/icons/x.svg");
}

.contact-social__link--youtube .contact-social__icon::before {
  mask-image: url("/images/icons/youtube.svg");
  -webkit-mask-image: url("/images/icons/youtube.svg");
}

.contact-social__link--instagram .contact-social__icon::before {
  mask-image: url("/images/icons/instagram.svg");
  -webkit-mask-image: url("/images/icons/instagram.svg");
}


/* Social label + external-link arrow */

.contact-social__label {
  min-width: 0;
}

.contact-social__arrow {
  color: var(--color-cta);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1;
}


/* Mobile */

@media (max-width: 768px) {
  .contact-page {
    padding: 1.5rem 1.25rem 0;
  }

  .contact-social__links {
    grid-template-columns: minmax(0, 1fr);
  }
}