/* Kontakt page styles */
.kontakt-main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap-mobile);
  padding-block: var(--space-2xl) var(--space-4xl);
}

.kontakt-hero,
.kontakt-kategorie,
.kontakt-dane,
.kontakt-formularz,
.kontakt-czas,
.kontakt-faq {
  padding-inline: var(--container-padding-mobile);
}

.kontakt-hero__inner,
.kontakt-kategorie__inner,
.kontakt-dane__inner,
.kontakt-formularz__inner,
.kontakt-czas__inner,
.kontakt-faq__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.kontakt-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}

.kontakt-hero__lead {
  font-size: var(--text-h4-size);
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-muted-ink);
  margin-block-end: var(--space-md);
}

.kontakt-kategorie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.kontakt-kategoria {
  background-color: var(--color-canvas);
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.kontakt-kategoria__icon,
.kontakt-dana__icon,
.kontakt-czas__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: var(--color-secondary-surface);
  flex-shrink: 0;
}

.kontakt-kategoria__icon--redakcja {
  background-color: var(--color-accent-tint);
  border-left: 4px solid var(--color-accent);
}

.kontakt-kategoria__icon--korekty {
  background-color: var(--color-alert);
  opacity: 0.85;
}

.kontakt-kategoria__icon--sugestie {
  background-color: var(--color-guide-tint);
  border-left: 4px solid var(--color-guide);
}

.kontakt-kategoria__icon--wspolpraca {
  background-color: var(--color-review-tint);
  border-left: 4px solid var(--color-review);
}

.kontakt-kategoria__icon--materialy {
  background-color: var(--color-secondary-surface);
  border-left: 4px solid var(--color-muted-ink);
}

.kontakt-kategoria h3,
.kontakt-dana h3 {
  margin-block-end: 0;
}

.kontakt-kategoria p,
.kontakt-dana p {
  margin-block-end: 0;
}

.kontakt-kategoria ul,
.kontakt-dana ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.kontakt-dane__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.kontakt-dana {
  background-color: var(--color-canvas);
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.kontakt-dana__icon--telefon {
  background-color: var(--color-accent-tint);
}

.kontakt-dana__icon--email {
  background-color: var(--color-guide-tint);
}

.kontakt-dana__icon--adres {
  background-color: var(--color-review-tint);
}

.kontakt-formularz__inner {
  max-width: 720px;
  margin: 0 auto;
}

.kontakt-formularz__lead {
  font-size: var(--text-body-size);
  color: var(--color-muted-ink);
  margin-block-end: var(--space-sm);
}

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.kontakt-form__pole {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.kontakt-form label {
  font-size: var(--text-body-small-size);
  font-weight: 600;
  color: var(--color-ink);
}

.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-ink);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kontakt-form input:hover,
.kontakt-form select:hover,
.kontakt-form textarea:hover {
  border-color: var(--color-accent);
}

.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-tint);
}

.kontakt-form input[aria-invalid="true"],
.kontakt-form select[aria-invalid="true"],
.kontakt-form textarea[aria-invalid="true"] {
  border-color: var(--color-alert);
  box-shadow: 0 0 0 2px rgba(228, 87, 46, 0.15);
}

.kontakt-form textarea {
  resize: vertical;
  min-height: 160px;
}

.kontakt-form__error {
  font-size: var(--text-body-small-size);
  color: var(--color-alert);
  margin-block-end: 0;
}

.kontakt-form__akcje {
  display: flex;
  justify-content: flex-start;
}

.kontakt-form__submit {
  width: 100%;
}

.kontakt-form__status {
  font-size: var(--text-body-size);
  font-weight: 600;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-block-end: 0;
}

.kontakt-form__status--success {
  background-color: var(--color-guide-tint);
  color: var(--color-guide);
  border: 1px solid var(--color-guide);
}

.kontakt-form__status--error {
  background-color: rgba(228, 87, 46, 0.1);
  color: var(--color-alert);
  border: 1px solid var(--color-alert);
}

.kontakt-czas {
  background-color: var(--color-secondary-surface);
  padding-block: var(--space-2xl);
}

.kontakt-czas__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kontakt-czas__icon {
  background-color: var(--color-accent-tint);
  border-left: 4px solid var(--color-accent);
}

.kontakt-czas p {
  margin-block-end: 0;
}

.kontakt-faq__inner {
  max-width: 720px;
  margin: 0 auto;
}

.kontakt-faq__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.kontakt-faq__pozycja {
  border-block-start: var(--border-default);
  padding-block-start: var(--space-lg);
}

.kontakt-faq__pozycja h3 {
  margin-block-end: var(--space-sm);
}

.kontakt-faq__pozycja p {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .kontakt-main {
    gap: var(--section-gap-tablet);
    padding-block: var(--space-3xl) var(--space-5xl);
  }

  .kontakt-hero,
  .kontakt-kategorie,
  .kontakt-dane,
  .kontakt-formularz,
  .kontakt-czas,
  .kontakt-faq {
    padding-inline: var(--container-padding-desktop);
  }

  .kontakt-kategorie__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gutter-tablet);
  }

  .kontakt-kategoria--wide {
    grid-column: span 2;
  }

  .kontakt-dane__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gutter-tablet);
  }

  .kontakt-form__submit {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .kontakt-main {
    gap: var(--section-gap-desktop);
  }

  .kontakt-kategorie__grid {
    gap: var(--grid-gutter-desktop);
  }

  .kontakt-dane__grid {
    gap: var(--grid-gutter-desktop);
  }
}

@media (max-width: 767px) {
  .kontakt-kategoria--wide {
    grid-column: auto;
  }
}