/* ===== Kontakt page styles ===== */

/* Hero kontaktowy */
.kontakt-hero {
  background-color: var(--color-bg-base);
  padding-block: var(--space-64) var(--space-48);
}

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

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

.kontakt-hero__lead {
  max-width: 600px;
  font-size: var(--text-body-large);
  line-height: var(--leading-body);
  margin-block-end: var(--space-24);
}

.kontakt-hero__sub {
  max-width: 600px;
  color: var(--color-text-muted);
  margin-block-end: var(--space-32);
}

.kontakt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-block-end: var(--space-24);
}

.kontakt-hero__actions .btn {
  flex: 1 1 auto;
  min-width: 160px;
}

.kontakt-hero__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  min-width: 0;
}

.kontakt-hero__card {
  background-color: var(--color-bg-surface);
  border: var(--border-default);
  padding: var(--space-24);
  min-width: 0;
}

.kontakt-hero__card-title {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-info);
  margin-block-end: var(--space-8);
}

.kontakt-hero__card-value {
  font-size: var(--text-body-large);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  word-break: break-word;
}

.kontakt-hero__card-value:hover {
  color: var(--color-accent-action);
}

/* Mapa i dojazd */
.kontakt-mapa {
  background-color: var(--color-bg-base);
  padding-block: var(--space-48);
}

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

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

.kontakt-mapa__text p {
  max-width: 600px;
}

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

.kontakt-mapa__iframe-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-surface);
  border: var(--border-default);
}

.kontakt-mapa__iframe-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Godziny otwarcia */
.kontakt-godziny {
  background-color: var(--color-bg-base);
  padding-block: var(--space-48);
}

.kontakt-godziny__lead {
  max-width: 600px;
  margin-block-end: var(--space-24);
}

.kontakt-godziny__tabela {
  max-width: 600px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-block-end: var(--space-24);
}

.kontakt-godziny__wiersz {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  background-color: var(--color-bg-surface);
  border: var(--border-default);
  min-width: 0;
}

.kontakt-godziny__wiersz--weekend {
  border-left: 2px solid var(--color-accent-action);
}

.kontakt-godziny__dzien,
.kontakt-godziny__godziny {
  min-width: 0;
}

.kontakt-godziny__dzien {
  font-weight: var(--weight-medium);
}

.kontakt-godziny__godziny {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.kontakt-godziny__notka {
  max-width: 600px;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* Formularz kontaktowy */
.kontakt-formularz {
  background-color: var(--color-bg-base);
  padding-block: var(--space-48);
}

.kontakt-formularz__wrapper {
  max-width: 600px;
  margin-inline: auto;
  background-color: var(--color-bg-raised);
  border: var(--border-default);
  padding: var(--space-24);
}

.kontakt-formularz__lead {
  margin-block-end: var(--space-24);
}

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

.kontakt-formularz__submit {
  align-self: flex-start;
  min-width: 200px;
}

.kontakt-formularz__sukces {
  color: var(--color-accent-info);
  font-weight: var(--weight-medium);
  margin-block-start: var(--space-8);
}

/* FAQ */
.kontakt-faq {
  background-color: var(--color-bg-base);
  padding-block: var(--space-48);
}

.kontakt-faq__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 800px;
}

.kontakt-faq__item {
  background-color: var(--color-bg-surface);
  border: var(--border-default);
  padding: 0;
}

.kontakt-faq__pytanie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  list-style: none;
  transition: background-color var(--transition-fast);
}

.kontakt-faq__pytanie::-webkit-details-marker {
  display: none;
}

.kontakt-faq__pytanie::after {
  content: "+";
  font-size: var(--text-h3);
  color: var(--color-accent-action);
  flex-shrink: 0;
}

.kontakt-faq__item[open] .kontakt-faq__pytanie::after {
  content: "−";
}

.kontakt-faq__pytanie:hover {
  background-color: var(--color-bg-raised);
}

.kontakt-faq__odpowiedz {
  padding: 0 var(--space-24) var(--space-24);
  max-width: 700px;
}

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

/* Sekcja rezerwacji */
.kontakt-rezerwacja {
  background-color: var(--color-bg-raised);
  padding-block: var(--space-64);
}

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

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

.kontakt-rezerwacja__sub {
  margin-block-end: var(--space-8);
}

.kontakt-rezerwacja__przycisk {
  margin-block-start: var(--space-8);
  min-width: 240px;
}

/* Tablet: od 768px */
@media (min-width: 48rem) {
  .kontakt-hero__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-48);
    align-items: start;
  }

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

  .kontakt-mapa__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
    align-items: start;
  }

  .kontakt-mapa__iframe-wrapper {
    aspect-ratio: 4 / 3;
  }

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

  .kontakt-godziny__wiersz {
    flex-wrap: nowrap;
  }
}

/* Desktop: od 1024px */
@media (min-width: 64rem) {
  .kontakt-hero__grid {
    gap: var(--space-64);
  }

  .kontakt-mapa__grid {
    gap: var(--space-64);
  }
}

/* Mobile: do 767px */
@media (max-width: 47.9375rem) {
  .kontakt-hero__actions .btn {
    width: 100%;
  }

  .kontakt-formularz__submit {
    width: 100%;
  }

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