/* Kontakt page styles */

.kontakt-hero {
  background-color: var(--color-walnut);
  color: var(--color-cream);
  padding: var(--space-xxxl) var(--container-padding);
}

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

.kontakt-hero__title {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  margin-block-end: 0;
}

.kontakt-hero__text {
  max-width: 600px;
  margin-block-end: 0;
}

.kontakt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  width: 100%;
}

.kontakt-hero__link {
  color: var(--color-burgundy);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-duration) var(--transition-ease),
    text-decoration-color var(--transition-duration) var(--transition-ease);
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

.kontakt-hero__link:hover,
.kontakt-hero__link:focus-visible {
  color: var(--color-burgundy);
  text-decoration: underline;
  text-decoration-color: var(--color-burgundy);
}

.kontakt-hero__link--static {
  cursor: default;
}

.kontakt-karty {
  background-color: var(--color-cream);
  color: var(--color-text-on-light);
  padding: var(--space-xxxl) var(--container-padding);
}

.kontakt-karty__title {
  text-align: center;
  margin-block-end: var(--space-xl);
}

.kontakt-karty__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.kontakt-karta {
  background-color: var(--color-cream);
  color: var(--color-text-on-light);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--transition-duration) var(--transition-ease),
    border-color var(--transition-duration) var(--transition-ease),
    transform var(--transition-duration) var(--transition-ease);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kontakt-karta:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-burgundy);
  transform: translateY(-2px);
}

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

.kontakt-karta__text {
  margin-block-end: 0;
  max-width: 300px;
}

.kontakt-karta__value {
  color: var(--color-burgundy);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-duration) var(--transition-ease),
    text-decoration-color var(--transition-duration) var(--transition-ease);
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

.kontakt-karta__value:hover,
.kontakt-karta__value:focus-visible {
  color: var(--color-burgundy);
  text-decoration: underline;
  text-decoration-color: var(--color-burgundy);
}

.kontakt-karta__value--static {
  cursor: default;
}

.kontakt-oteviraci {
  background-color: var(--color-forest);
  color: var(--color-cream);
  padding: var(--space-xxxl) var(--container-padding);
}

.kontakt-oteviraci__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.kontakt-oteviraci__title {
  margin-block-end: var(--space-xl);
}

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

.kontakt-oteviraci__blok {
  min-width: 0;
}

.kontakt-oteviraci__blok-title {
  margin-block-end: var(--space-md);
}

.kontakt-oteviraci__text {
  max-width: 500px;
  margin-block-end: var(--space-md);
}

.kontakt-oteviraci__list {
  margin-block-end: 0;
  padding-inline-start: 1.5rem;
  max-width: 500px;
}

.kontakt-mapa {
  background-color: var(--color-cream);
  color: var(--color-text-on-light);
  padding: var(--space-xxxl) var(--container-padding);
}

.kontakt-mapa__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.kontakt-mapa__title {
  margin-block-end: var(--space-xl);
}

.kontakt-mapa__grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: var(--space-xl);
}

.kontakt-mapa__text {
  min-width: 0;
}

.kontakt-mapa__text-title {
  margin-block-end: var(--space-md);
}

.kontakt-mapa__paragraph {
  max-width: 400px;
  margin-block-end: var(--space-md);
}

.kontakt-mapa__list {
  margin-block-end: 0;
  padding-inline-start: 1.5rem;
  max-width: 400px;
}

.kontakt-mapa__frame-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-width: 0;
}

.kontakt-mapa__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-walnut-light);
  border-radius: var(--radius-md);
}

.kontakt-formular {
  background-color: var(--color-cream);
  color: var(--color-text-on-light);
  padding: var(--space-xxxl) var(--container-padding);
}

.kontakt-formular__inner {
  max-width: 600px;
  margin-inline: auto;
}

.kontakt-formular__title {
  margin-block-end: var(--space-md);
}

.kontakt-formular__text {
  margin-block-end: var(--space-xl);
}

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

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

.kontakt-formular__label {
  font-weight: 600;
}

.kontakt-formular__input,
.kontakt-formular__textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-walnut-light);
  border-radius: 0;
  padding: var(--space-sm) 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  color: var(--color-text-on-light);
  transition: border-color var(--transition-duration) var(--transition-ease);
  min-height: 44px;
}

.kontakt-formular__input:focus,
.kontakt-formular__textarea:focus {
  outline: none;
  border-bottom-color: var(--color-burgundy);
  box-shadow: 0 1px 0 0 var(--color-burgundy);
}

.kontakt-formular__input:focus-visible,
.kontakt-formular__textarea:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.kontakt-formular__textarea {
  resize: vertical;
  min-height: 100px;
}

.kontakt-formular__pole--checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.kontakt-formular__checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-burgundy);
  flex-shrink: 0;
}

.kontakt-formular__checkbox-label {
  font-weight: 400;
}

.kontakt-formular__submit {
  align-self: flex-start;
  background-color: var(--color-burgundy);
  color: var(--color-cream);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--transition-duration) var(--transition-ease),
    box-shadow var(--transition-duration) var(--transition-ease);
  min-height: 44px;
}

.kontakt-formular__submit:hover,
.kontakt-formular__submit:focus-visible {
  background-color: color-mix(in srgb, var(--color-burgundy) 85%, black);
  box-shadow: var(--shadow-hover);
}

.kontakt-formular__submit:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 2px;
}

.kontakt-formular__chyba {
  color: var(--color-burgundy);
  font-size: var(--text-small-size);
}

.kontakt-formular__uspech {
  color: var(--color-forest);
  font-weight: 600;
  margin-block-end: 0;
}

.kontakt-vyzva {
  background-color: var(--color-walnut);
  color: var(--color-cream);
  padding: var(--space-xxxl) var(--container-padding);
}

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

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

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

.kontakt-vyzva__list {
  margin-block-end: 0;
  padding-inline-start: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
}

.kontakt-vyzva__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-burgundy);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 600;
  line-height: 1.4;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-duration) var(--transition-ease),
    box-shadow var(--transition-duration) var(--transition-ease);
  min-height: 44px;
}

.kontakt-vyzva__button:hover,
.kontakt-vyzva__button:focus-visible {
  background-color: color-mix(in srgb, var(--color-burgundy) 85%, black);
  box-shadow: var(--shadow-hover);
  color: var(--color-cream);
  text-decoration: none;
}

.kontakt-vyzva__button:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .kontakt-karty__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kontakt-mapa__grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  .kontakt-oteviraci__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .kontakt-karty__grid {
    grid-template-columns: 1fr;
  }

  .kontakt-hero {
    padding: var(--space-xxl) var(--container-padding);
  }

  .kontakt-karty,
  .kontakt-oteviraci,
  .kontakt-mapa,
  .kontakt-formular,
  .kontakt-vyzva {
    padding: var(--space-xxl) var(--container-padding);
  }
}

@media (max-width: 480px) {
  .kontakt-hero__title {
    font-size: 1.75rem;
  }

  .kontakt-hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .kontakt-formular__submit {
    align-self: stretch;
  }

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