/* Kontakt page styles — scoped to .kontakt-* components */

.kontakt-hero {
  padding-block: var(--space-4xl) var(--space-3xl);
}

.kontakt-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.kontakt-hero__heading {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.kontakt-hero__label {
  margin-block-end: 0;
}

.kontakt-hero__title {
  margin-block-end: 0;
}

.kontakt-hero__lead {
  margin-block-end: 0;
}

.kontakt-hero__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.kontakt-card {
  background-color: var(--surface-raised-bg);
  border: var(--surface-raised-border);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.kontakt-card__icon {
  font-size: 1.25rem;
  color: var(--color-kobaltowy-blekit);
  line-height: 1;
  margin-block-end: var(--space-xs);
}

.kontakt-card__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-weight: var(--text-h4-weight);
  letter-spacing: var(--text-h4-tracking);
  margin-block-end: 0;
}

.kontakt-card__value {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  font-weight: 500;
  color: var(--color-ciemny-orzech);
  margin-block-end: 0;
  overflow-wrap: break-word;
}

.kontakt-card__value a {
  color: var(--color-kobaltowy-blekit);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.kontakt-card__value a:hover {
  color: var(--color-szmaragdowa-zielen);
}

.kontakt-card--phone .kontakt-card__value a {
  color: var(--color-koralowa-czerwien);
}

.kontakt-card--phone .kontakt-card__value a:hover {
  color: var(--color-koralowa-czerwien-hover);
}

.kontakt-card__note {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--text-small-weight);
  letter-spacing: var(--text-small-tracking);
  color: var(--color-orzech-rozjasniony);
  margin-block-end: 0;
}

.kontakt-form-section {
  background-color: var(--color-szmaragdowa-zielen);
  color: var(--color-tekst-na-ciemnym);
  padding-block: var(--space-4xl) var(--space-3xl);
}

.kontakt-form-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.kontakt-form-section__intro {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.kontakt-form-section__label {
  margin-block-end: 0;
}

.kontakt-form-section__title {
  color: var(--color-tekst-na-ciemnym);
  margin-block-end: 0;
}

.kontakt-form-section__lead {
  color: rgba(255, 253, 248, 0.85);
  margin-block-end: 0;
}

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 800px;
  width: 100%;
}

.kontakt-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

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

.kontakt-form__field--half {
  grid-column: span 1;
}

.kontakt-form__field--full {
  grid-column: 1 / -1;
}

.kontakt-form__field label {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--text-small-weight);
  letter-spacing: var(--text-small-tracking);
  color: rgba(255, 253, 248, 0.9);
}

.kontakt-form__field input,
.kontakt-form__field select,
.kontakt-form__field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  background-color: transparent;
  border: 1px solid rgba(255, 253, 248, 0.18);
  border-radius: var(--radius-input);
  color: var(--color-tekst-na-ciemnym);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  transition: border-color var(--transition-fast);
}

.kontakt-form__field textarea {
  min-height: 120px;
  resize: vertical;
}

.kontakt-form__field input::placeholder,
.kontakt-form__field textarea::placeholder {
  color: rgba(255, 253, 248, 0.5);
}

.kontakt-form__field input:focus,
.kontakt-form__field select:focus,
.kontakt-form__field textarea:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--color-koralowa-czerwien);
}

.kontakt-form__field select option {
  background-color: var(--color-szmaragdowa-zielen);
  color: var(--color-tekst-na-ciemnym);
}

.kontakt-form__error {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--text-small-weight);
  letter-spacing: var(--text-small-tracking);
  color: var(--color-koralowa-czerwien);
  margin-block-end: 0;
  min-height: 0;
}

.kontakt-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.kontakt-form__submit {
  min-width: 220px;
}

.kontakt-form__status {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--text-small-weight);
  letter-spacing: var(--text-small-tracking);
  color: rgba(255, 253, 248, 0.9);
  margin-block-end: 0;
}

.kontakt-form__status--success {
  color: #A8D5BA;
}

.kontakt-form__status--error {
  color: var(--color-koralowa-czerwien);
}

.kontakt-lokalizacja {
  padding-block: var(--space-4xl) var(--space-3xl);
}

.kontakt-lokalizacja__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
  align-items: center;
}

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

.kontakt-lokalizacja__label {
  margin-block-end: 0;
}

.kontakt-lokalizacja__title {
  margin-block-end: 0;
}

.kontakt-lokalizacja__lead {
  margin-block-end: 0;
}

.kontakt-lokalizacja__detail {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--text-small-weight);
  letter-spacing: var(--text-small-tracking);
  color: var(--color-orzech-rozjasniony);
  margin-block-end: 0;
}

.kontakt-lokalizacja__map-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-linia-perlowa);
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  min-width: 0;
}

.kontakt-lokalizacja__map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.kontakt-godziny {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.kontakt-godziny__inner {
  display: flex;
  justify-content: center;
}

.kontakt-godziny__card {
  max-width: 400px;
  width: 100%;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.kontakt-godziny__label {
  margin-block-end: 0;
}

.kontakt-godziny__title {
  margin-block-end: 0;
}

.kontakt-godziny__lead {
  margin-block-end: 0;
}

.kontakt-godziny__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.kontakt-godziny__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--color-linia-perlowa);
}

.kontakt-godziny__day {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  color: var(--color-ciemny-orzech);
}

.kontakt-godziny__hours {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  font-weight: 600;
  color: var(--color-kobaltowy-blekit);
  white-space: nowrap;
}

.kontakt-godziny__note {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--text-small-weight);
  letter-spacing: var(--text-small-tracking);
  color: var(--color-orzech-rozjasniony);
  margin-block-end: 0;
}

.kontakt-wydarzenia {
  padding-block: var(--space-3xl) var(--space-4xl);
}

.kontakt-wydarzenia__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-2xl);
  align-items: start;
}

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

.kontakt-wydarzenia__label {
  margin-block-end: 0;
}

.kontakt-wydarzenia__title {
  margin-block-end: 0;
}

.kontakt-wydarzenia__lead {
  margin-block-end: 0;
}

.kontakt-wydarzenia__detail {
  margin-block-end: 0;
}

.kontakt-wydarzenia__kontakt {
  background-color: var(--surface-raised-bg);
  border: var(--surface-raised-border);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.kontakt-wydarzenia__subtitle {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-weight: var(--text-h4-weight);
  letter-spacing: var(--text-h4-tracking);
  margin-block-end: 0;
}

.kontakt-wydarzenia__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kontakt-wydarzenia__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.kontakt-wydarzenia__item-label {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line-height);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--color-orzech-rozjasniony);
}

.kontakt-wydarzenia__item-value {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  font-weight: 500;
  color: var(--color-szmaragdowa-zielen);
  text-decoration: none;
  transition: color var(--transition-fast);
  overflow-wrap: break-word;
}

.kontakt-wydarzenia__item-value:hover {
  color: var(--color-kobaltowy-blekit);
}

.kontakt-zaproszenie {
  padding-block: var(--space-4xl) var(--space-5xl);
  text-align: center;
}

.kontakt-zaproszenie__inner {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.kontakt-zaproszenie__label {
  margin-block-end: 0;
}

.kontakt-zaproszenie__title {
  margin-block-end: 0;
}

.kontakt-zaproszenie__lead {
  margin-block-end: 0;
}

.kontakt-zaproszenie__cta {
  margin-block-start: var(--space-lg);
}

@media (max-width: 64rem) {
  .kontakt-hero__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kontakt-lokalizacja__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .kontakt-lokalizacja__map-wrapper {
    aspect-ratio: 16 / 9;
  }

  .kontakt-wydarzenia__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 48rem) {
  .kontakt-hero {
    padding-block: var(--space-3xl) var(--space-2xl);
  }

  .kontakt-hero__heading {
    max-width: 100%;
    text-align: left;
    align-items: flex-start;
  }

  .kontakt-hero__cards {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .kontakt-form-section {
    padding-block: var(--space-3xl) var(--space-2xl);
  }

  .kontakt-form-section__intro {
    max-width: 100%;
  }

  .kontakt-form__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .kontakt-form__field--half,
  .kontakt-form__field--full {
    grid-column: 1;
  }

  .kontakt-form__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .kontakt-form__submit {
    width: 100%;
  }

  .kontakt-lokalizacja {
    padding-block: var(--space-3xl) var(--space-2xl);
  }

  .kontakt-godziny {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .kontakt-godziny__card {
    max-width: 100%;
  }

  .kontakt-wydarzenia {
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .kontakt-zaproszenie {
    padding-block: var(--space-3xl) var(--space-4xl);
    text-align: left;
  }

  .kontakt-zaproszenie__inner {
    max-width: 100%;
    align-items: flex-start;
  }

  .kontakt-zaproszenie__cta {
    width: 100%;
  }
}