/* ═══════════════════════════════════════════════════
   zadaszto.pl — formularz kontaktowy pod artykułem
   Osobny arkusz zamiast całego style.css: artykuły mają własne
   klasy i pełny arkusz by je nadpisał.
   Zmienne (--accent, --anthracite, …) są już zdefiniowane w :root
   każdego artykułu, więc styl jest spójny z resztą serwisu.
   ═══════════════════════════════════════════════════ */

.art-lead {
  margin: 3rem 0 0;
  background: var(--anthracite, #2B2F33);
  border-radius: var(--radius, 12px);
  padding: 2rem 1.75rem;
  color: #fff;
}
.art-lead-head { max-width: 46rem; }
.art-lead h2 {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  color: #fff;
  margin: 0 0 .6rem;
  line-height: 1.25;
}
.art-lead h2 span { color: var(--accent, #C4A76A); }
.art-lead-sub {
  color: rgba(255, 255, 255, .72);
  font-size: .95rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.art-lead-atuty {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: .84rem;
  color: rgba(255, 255, 255, .62);
}
.art-lead-atuty li { display: flex; align-items: center; gap: .4rem; }
.art-lead-atuty svg { width: 15px; height: 15px; color: var(--accent, #C4A76A); flex-shrink: 0; }

.art-lead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.art-lead-pole { display: flex; flex-direction: column; min-width: 0; }
.art-lead-pole.pelna { grid-column: 1 / -1; }
.art-lead label {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  margin-bottom: .3rem;
}
.art-lead label .opc { font-weight: 400; color: rgba(255, 255, 255, .5); }
.art-lead input[type="text"],
.art-lead input[type="tel"],
.art-lead input[type="email"] {
  width: 100%;
  padding: .72rem .9rem;
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm, 8px);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: .95rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.art-lead input::placeholder { color: rgba(255, 255, 255, .38); }
.art-lead input:focus {
  outline: none;
  border-color: var(--accent, #C4A76A);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 3px rgba(196, 167, 106, .2);
}
.art-lead-err {
  display: none;
  font-size: .74rem;
  color: #F5A9A0;
  margin-top: .3rem;
}
.art-lead-err.show { display: block; }

.art-lead-rodo {
  grid-column: 1 / -1;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .35rem 0 .25rem;
}
.art-lead-rodo input { margin-top: .2rem; accent-color: var(--accent, #C4A76A); flex-shrink: 0; width: 17px; height: 17px; }
.art-lead-rodo label {
  font-size: .76rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .6);
  line-height: 1.5;
  margin: 0;
}
.art-lead-rodo a { color: rgba(255, 255, 255, .82); }

.art-lead-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 50px;
  background: var(--accent, #C4A76A);
  color: var(--anthracite, #2B2F33);
  font-family: var(--font-body, sans-serif);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.art-lead-btn:hover:not(:disabled) { background: var(--accent-light, #D4BC8A); transform: translateY(-1px); }
.art-lead-btn:disabled { opacity: .6; cursor: progress; }

.art-lead-alert {
  display: none;
  grid-column: 1 / -1;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm, 8px);
  background: rgba(192, 57, 43, .16);
  border: 1px solid rgba(245, 169, 160, .4);
  color: #F5A9A0;
  font-size: .84rem;
}
.art-lead-alert.show { display: block; }

.art-lead-stopka {
  margin: 1.1rem 0 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.6;
}
.art-lead-stopka a { color: var(--accent, #C4A76A); font-weight: 600; white-space: nowrap; }

.art-lead-ok { display: none; text-align: center; padding: 1.5rem .5rem; }
.art-lead-ok.show { display: block; }
.art-lead-ok h3 { color: #fff; font-family: var(--font-heading, Georgia, serif); font-size: 1.5rem; margin: 0 0 .5rem; }
.art-lead-ok p { color: rgba(255, 255, 255, .7); font-size: .92rem; margin: 0; line-height: 1.65; }
.art-lead-ok .ptel { display: inline-block; margin-top: .9rem; color: var(--accent, #C4A76A); font-weight: 600; }

/* pułapka na boty — niewidoczna dla ludzi, wypełniana przez skrypty */
.art-lead-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* wariant zwinięty — dla artykułów inspiracyjnych, gdzie formularz
   na widoku byłby nachalny */
details.art-lead-zwin { margin: 3rem 0 0; }
details.art-lead-zwin > summary {
  cursor: pointer;
  list-style: none;
  background: var(--light, #F2F3F5);
  border: 1.5px solid var(--border, #E2E4E8);
  border-radius: var(--radius, 12px);
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  color: var(--anthracite, #2B2F33);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color .25s;
}
details.art-lead-zwin > summary::-webkit-details-marker { display: none; }
details.art-lead-zwin > summary:hover { border-color: var(--accent, #C4A76A); }
details.art-lead-zwin > summary::after { content: '+'; font-size: 1.4rem; color: var(--accent, #C4A76A); line-height: 1; }
details.art-lead-zwin[open] > summary::after { content: '–'; }
details.art-lead-zwin[open] > summary { border-radius: var(--radius, 12px) var(--radius, 12px) 0 0; border-bottom-color: transparent; }
details.art-lead-zwin .art-lead { margin-top: 0; border-radius: 0 0 var(--radius, 12px) var(--radius, 12px); }

@media (max-width: 640px) {
  .art-lead { padding: 1.6rem 1.15rem; }
  .art-lead-grid { grid-template-columns: minmax(0, 1fr); }
  /* iOS przybliża stronę przy polu mniejszym niż 16 px */
  .art-lead input[type="text"],
  .art-lead input[type="tel"],
  .art-lead input[type="email"] { font-size: 16px; }
}