/* =============================================
   FAQ SECTION — Used on: hero
   ============================================= */
.faq {
  background-color: #FAF9F4;
  padding: 80px 24px 100px;
}

.faq__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: start;
}

/* ---- Left Column ---- */
.faq__left {
  min-width: 0;
}

.faq__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.faq__label::before { content: "// "; }
.faq__label { text-transform: capitalize; }

.faq__heading {
  font-family: var(--font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--dark-gray);
  margin-bottom: 32px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ---- Accordion ---- */
.faq__list {
  list-style: none;
}

.faq__item {
  border-top: 1px solid #ECE8DF;
}

.faq__item:last-child {
  border-bottom: 1px solid #ECE8DF;
}

.faq__question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  color: var(--dark-gray);
  text-align: left;
  line-height: 1.4;
  gap: 16px;
  transition: color 0.3s ease;
}

.faq__question:hover {
  color: var(--orange);
}

.faq__question:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

.faq__item.active .faq__question {
  font-weight: 600;
}

.faq__icon {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--dark-gray);
  transition: transform 0.3s ease;
  width: 22px;
  text-align: center;
}

.faq__item.active .faq__icon {
  color: var(--orange);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq__answer-inner {
  padding: 0 0 20px 0;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
}

/* ---- Right Column — Sticky Card ---- */
.faq__sidebar {
  position: sticky;
  top: 200px;
}

.faq__card {
  background: #ECE8DF;
  border-radius: 10px;
  padding: 49px 60px;
  color: var(--dark-gray);
  margin-left: auto;
}

.faq__card-heading {
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 440;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
  color: #000000;
}

.faq__card-text {
  font-family: var(--font-family);
  font-size: 19px;
  font-weight: 440;
  line-height: 1.2;
  color: rgba(21, 21, 21, 0.7);
  margin-bottom: 72px;
}

.faq__card-cta {
  display: flex;
  justify-content: center;
}

/* Secondary CTA inside FAQ card — mirrors `.cta-banner--dark .ihb--secondary`:
   white bg, dark-gray text, arrow shifts on hover, and phone-reveal on click
   (label slides right, phone slides in from left). */
.faq__card .ihb--secondary {
  background: var(--white);
  background-image: none;
  border: 1.5px solid transparent;
  color: var(--dark-gray);
  font-size: 15px;
  padding: 13px 28px;
  gap: 8px;
}

.faq__card .ihb--secondary .ihb__text,
.faq__card .ihb--secondary::after {
  color: var(--dark-gray);
}

.faq__card .ihb--secondary:hover,
.faq__card .ihb--secondary.touch-hover {
  background: var(--white);
  background-image: none;
  border-color: transparent;
}

.faq__card .ihb--secondary .ihb__slot {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  z-index: 11;
}

.faq__card .ihb--secondary .ihb__text,
.faq__card .ihb--secondary .ihb__phone {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  color: var(--dark-gray);
}

.faq__card .ihb--secondary .ihb__phone {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  transform: translateX(-110%);
  opacity: 0;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.faq__card .ihb--secondary.is-revealed .ihb__text {
  transform: translateX(110%);
  opacity: 0;
}

.faq__card .ihb--secondary.is-revealed .ihb__phone {
  transform: translateX(0);
  opacity: 1;
}

/* ---- Responsive ---- */
/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .faq__heading {
    font-size: 36px;
  }
}

/* === FAQ sidebar collapse (≤900px) === */
@media (max-width: 900px) {
  .faq__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq__sidebar {
    position: static;
  }

  .faq__heading {
    text-align: left;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .faq__heading {
    font-size: 32px;
  }
}

/* === Small mobile (≤600px) === */
@media (max-width: 600px) {
  .faq {
    padding: 56px 16px 72px;
  }

  .faq__heading {
    margin-bottom: 24px;
  }

  .faq__question {
    font-size: 15px;
    padding: 16px 0;
  }

  .faq__card {
    padding: 32px 42px;
    border-radius: 9px;
  }

  .faq__card-heading {
    font-size: 20px;
  }
}

/* =============================================
   REVEAL — kaskada wejscia sekcji
   Kolejnosc (jak w pozostalych sekcjach strony glownej):
     label → naglowek → karta doradcy → pytania, jedno po drugim.
   Kierunki: label i naglowek Z LEWEJ, karta Z PRAWEJ (kazde z blizszej
   krawedzi — na desktopie kolumny stoja w gridzie 6fr/5fr), pytania Z DOLU.
   Zaden element nie startuje z ujemnym translateY (zasada klienta).

   Ruch 1:1 z wejscia hero (0.7s ease-out, 30px) — te same tokeny co
   why-us.css v63, services.css v37, showroom.css v64, realizacje.css v30.
   NIE wracaj do `--reveal-ease`: to expo-out, ktory upycha ~90% drogi w ~20%
   czasu i czyta sie jako szarpniecie.

   CO JEST NA CZASIE, A CO NA POZYCJI: `transition-delay` maja tylko label
   i naglowek (gora sekcji, w kadrze w chwili startu). Karta i 9 pytan czekaja
   na `.is-revealed` z modulu „FAQ Reveal" w common.js — lista ma ~750px
   wysokosci, a na mobile karta laduje POD nia, wiec czasowe opoznienia
   wypalilyby sie poza kadrem (why-us.css v64, services.css v35).
   ============================================= */
.faq {
  --faq-reveal-dur: 0.7s;
  --faq-ease: ease-out;
  --faq-step: 0.25s;
  --faq-shift: 30px;
  /* `clip`, a NIE `hidden` — poziomy ruch nie moze robic przewijania w bok,
     ale `overflow: hidden` zrobiloby z sekcji kontener przewijania i zabilo
     `position: sticky` na `.faq__sidebar`. `clip` przycina bez tego skutku. */
  overflow-x: clip;
}

/* `.section-fade` zostaje na sekcji WYLACZNIE jako trigger dla `.visible`
   (dodaje ja modul „FAQ Reveal", a pozniej takze wspoldzielony obserwator).
   Wlasny fade calej sekcji jest wygaszony — (0,2,0) bije `.section-fade`
   (0,1,0) z base.css niezaleznie od kolejnosci w zrodle. Nie usuwaj tej klasy
   z HTML „bo sekcja i tak sie nie fade'uje": to jedyny trigger kaskady. */
.faq.section-fade {
  opacity: 1;
  transform: none;
  transition: none;
}

.faq.section-fade .faq__label,
.faq.section-fade .faq__heading {
  opacity: 0;
  transform: translateX(calc(-1 * var(--faq-shift)));
  transition: opacity var(--faq-reveal-dur) var(--faq-ease),
              transform var(--faq-reveal-dur) var(--faq-ease);
}

.faq.section-fade.visible .faq__label,
.faq.section-fade.visible .faq__heading {
  opacity: 1;
  transform: none;
}

.faq.section-fade.visible .faq__label { transition-delay: 0s; }
.faq.section-fade.visible .faq__heading { transition-delay: var(--faq-step); }

/* ---- Karta i pytania: trigger pozycyjny ----
   Stan ukryty jest zagniezdzony pod `.faq--js-reveal`, czyli klasa dodawana
   przez modul w common.js. To bramka bezpieczenstwa, nie kosmetyka: nowy CSS
   ze starym (zbuforowanym) common.js zostawilby cala liste na `opacity: 0`
   NA ZAWSZE (zdarzylo sie realnie — patrz partners.css v32). */
.faq--js-reveal .faq__card,
.faq--js-reveal .faq__item {
  opacity: 0;
  transition: opacity var(--faq-reveal-dur) var(--faq-ease),
              transform var(--faq-reveal-dur) var(--faq-ease);
}

.faq--js-reveal .faq__card { transform: translateX(var(--faq-shift)); }
.faq--js-reveal .faq__item { transform: translateY(var(--faq-shift)); }

.faq--js-reveal .faq__card.is-revealed,
.faq--js-reveal .faq__item.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .faq.section-fade .faq__label,
  .faq.section-fade .faq__heading,
  .faq--js-reveal .faq__card,
  .faq--js-reveal .faq__item {
    transform: none;
    transition-delay: 0s;
  }

  /* Opoznienia naglowka siedza na regulach z `.visible` (0,3,0), wiec wpis
     wyzej (0,2,0) sam ich nie wyzeruje — potrzebna ta sama specyficznosc. */
  .faq.section-fade.visible .faq__label,
  .faq.section-fade.visible .faq__heading {
    transition-delay: 0s;
  }
}

/* Footer styles moved to css/footer.css */