/* FAQ: wyśrodkowana lista rozwijana (natywne <details>, działa bez JS). */
.faq { max-width: 1920px; margin: 0 auto; padding: clamp(1rem, 3vw, 3rem) clamp(.75rem, 1.5vw, 1.5rem) clamp(4rem, 7vw, 7rem); }
.faq__uklad { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 5rem); align-items: start; padding: 0 clamp(.5rem, 3vw, 3rem); }
/* Zdjęcie po lewej trzyma się ekranu podczas przewijania pytań.
   Do czasu wgrania img/faq.webp — kolorowe tło ze znakiem zapytania. */
.faq__foto { position: sticky; top: 110px; aspect-ratio: 4 / 5; max-height: calc(100svh - 140px); width: 100%;
  border-radius: var(--r-xl); background: #E6F7FB center / cover no-repeat; overflow: hidden; display: grid; place-items: center; }
.faq__foto::before { content: ''; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; background: var(--tur); opacity: .22; }
.faq__znak { position: relative; font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(8rem, 14vw, 14rem); line-height: 1; color: var(--tur); transform: rotate(-8deg); }
.faq__foto.ma-foto::before, .faq__foto.ma-foto .faq__znak { display: none; }
.faq__glowa { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.faq h2 { font-size: clamp(2.4rem, 5vw, 5.2rem); font-weight: 800; line-height: .95; margin-top: 1rem; }
.faq h2 span { color: var(--tur); }
.faq__lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--tusz-2); margin-top: 1.2rem; }
.faq__lista { display: grid; gap: .8rem; }
.faq__p { border-radius: var(--r); background: #F4F6FA; transition: background .3s, box-shadow .3s; }
.faq__p[open] { background: #fff; box-shadow: 0 12px 36px rgba(30,35,64,.1); }
.faq__p summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; font-family: var(--font-naglowek); font-weight: 700; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.25;
}
.faq__p summary::-webkit-details-marker { display: none; }
.faq__p summary i { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--pom); transition: transform .4s var(--ease), background .3s; }
.faq__p summary i::before, .faq__p summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%); }
.faq__p summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.faq__p[open] summary i { background: var(--tur); transform: rotate(180deg); }
.faq__p[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq__p summary:hover i { transform: scale(1.08); }
.faq__p[open] summary:hover i { transform: rotate(180deg) scale(1.08); }
.faq__p p { padding: 0 1.5rem 1.4rem; color: var(--tusz-2); font-weight: 600; max-width: 46rem; animation: faq-otworz .35s ease; }
@keyframes faq-otworz { from { opacity: 0; transform: translateY(-6px); } }
.faq__kontakt { display: flex; align-items: center; justify-content: flex-start; gap: 1rem 1.4rem; flex-wrap: wrap; margin-top: 2rem; font-family: var(--font-naglowek); font-weight: 700; font-size: 1.2rem; }
@media (max-width: 960px) {
  .faq__uklad { grid-template-columns: 1fr; }
  .faq__foto { position: relative; top: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .faq__uklad { padding: 0 .3rem; }
  .faq { padding-left: .5rem; padding-right: .5rem; }
  .faq h2 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .faq__p summary { padding: 1.1rem 1.1rem; }
  .faq__p p { padding: 0 1.1rem 1.2rem; }
}