/* Przyciski (core/buttons) --------------------------------------------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--odstep-2); }
.wp-block-button__link {
  display: inline-block;
  background: var(--kolor-akcent);
  color: var(--kolor-tlo);
  font-family: var(--font-naglowek);
  font-weight: 700;
  text-decoration: none;
  padding: 0.75em 1.75em;
  border-radius: var(--promien);
  border: 2px solid var(--kolor-akcent);
  transition: background 0.15s ease, color 0.15s ease;
}
.wp-block-button__link:hover { background: var(--kolor-akcent-ciemny); border-color: var(--kolor-akcent-ciemny); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--kolor-akcent-ciemny);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--kolor-akcent); color: var(--kolor-tlo); }

/* Akordeon (core/details) - zastepuje zakladki WPBakery ----------------- */
.wp-block-details {
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien);
  margin-block-end: var(--odstep-2);
  background: var(--kolor-tlo);
}
.wp-block-details > summary {
  cursor: pointer;
  padding: var(--odstep-2) var(--odstep-3);
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-2);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--kolor-akcent);
  border-bottom: 2px solid var(--kolor-akcent);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex: none;
}
.wp-block-details[open] > summary::after { transform: rotate(-135deg); }
.wp-block-details > *:not(summary) { padding-inline: var(--odstep-3); }
.wp-block-details > *:last-child { padding-block-end: var(--odstep-3); }

/* Kolumny i siatka powierzchni ----------------------------------------- */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--odstep-3); align-items: stretch; }
.wp-block-column { flex: 1 1 260px; min-width: 0; }

@media (max-width: 900px) {
  .wp-block-columns { gap: var(--odstep-2); }
  .wp-block-column { flex: 1 1 calc(50% - var(--odstep-2)); }
}
@media (max-width: 600px) {
  .wp-block-column { flex: 1 1 100%; }
}

/* Obrazy --------------------------------------------------------------- */
.wp-block-image img { border-radius: var(--promien); }
.wp-block-image figcaption {
  color: var(--kolor-tekst-pomocniczy);
  font-size: 0.9rem;
  margin-block-start: var(--odstep-1);
}

/* Karta powierzchni ---------------------------------------------------- */
.karta {
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien);
  padding: var(--odstep-3);
  height: 100%;
  background: var(--kolor-tlo);
}
.karta h3 { margin-block-end: var(--odstep-1); }

/* Hero ----------------------------------------------------------------- */
.hero { padding-block: var(--odstep-5); background: var(--kolor-tlo-alt); }
.hero__wnetrze {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--odstep-4);
  align-items: center;
}
.hero__tresc h1 { margin-block-end: var(--odstep-2); }
.hero__lead { font-size: 1.15rem; color: var(--kolor-tekst-pomocniczy); }
.hero__grafika img { margin-inline: auto; }

@media (max-width: 900px) {
  .hero__wnetrze { grid-template-columns: 1fr; }
  .hero__grafika { order: -1; }
}

/* Podglad filmu zamiast iframe (facade) -------------------------------- */
.facade-youtube {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #000 center / cover no-repeat;
  border-radius: var(--promien);
  overflow: hidden;
}
.facade-youtube::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 68px;
  height: 48px;
  background: var(--kolor-akcent);
  border-radius: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.facade-youtube::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -40% -50%;
  z-index: 1;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--kolor-tlo);
}
.facade-youtube:hover::after { background: var(--kolor-akcent-ciemny); }
.wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Link zapasowy, gdy adresu filmu nie da sie sparsowac ------------------ */
.facade-youtube__link {
  padding: var(--odstep-2) var(--odstep-3);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien);
  background: var(--kolor-tlo-alt);
}

/* Formularz (style tu, logika w inc/formularz.php) ---------------------- */
.formularz { max-width: var(--szerokosc-tekstu); }
.formularz__pole { margin-block-end: var(--odstep-3); }
.formularz__pole label { display: block; font-weight: 700; margin-block-end: var(--odstep-1); }
.formularz__pole input[type="text"],
.formularz__pole input[type="email"],
.formularz__pole input[type="tel"],
.formularz__pole textarea {
  width: 100%;
  font: inherit;
  padding: 0.7em 0.9em;
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien);
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
}
.formularz__pole textarea { min-height: 160px; resize: vertical; }
.formularz__zgoda { display: flex; gap: var(--odstep-2); align-items: flex-start; }
.formularz__zgoda label { font-weight: 400; font-size: 0.95rem; }
.formularz__blad { color: var(--kolor-akcent-ciemny); font-size: 0.9rem; margin-block-start: var(--odstep-1); }
.formularz__komunikat {
  padding: var(--odstep-2) var(--odstep-3);
  border-radius: var(--promien);
  margin-block-end: var(--odstep-3);
  border: 1px solid var(--kolor-obramowanie);
  background: var(--kolor-tlo-alt);
}
.formularz__komunikat--sukces { border-color: var(--kolor-sukces); }
.formularz__komunikat--blad { border-color: var(--kolor-akcent); }
.formularz__pulapka { position: absolute; left: -9999px; }

/* Rytm pionowy naglowkow w tresci strony - zastepuje CSS per-strony
   wstrzykiwane wczesniej przez WPBakery (zadanie 11) ------------------- */
.strona__tresc h2 {
  margin-block-start: var(--odstep-4);
  margin-block-end: var(--odstep-4);
}
.strona__tresc h4 {
  margin-block-start: var(--odstep-4);
  margin-block-end: var(--odstep-2);
}
.strona__tresc > :first-child { margin-block-start: 0; }