/* LAB sekcja FAQ nowej strony głównej aslandi.pl, v1 (30.09.2026), w miejscu starego bloku bloga 8eb8e7a, tuż przed
   wezwaniem z formularzem. Polecenie Igora: sekcja bardzo prosta, ale z powiązaniem z OZE i naszym stylem, plus coś
   niekonwencjonalnego; kilka pytań realnie zadawanych przez klientów, odpowiedzi z wiedzy o firmie (wpisy, blog, strona).
   Kierunek: biała sekcja (Igor 30.09: „tło FAQ białe całej sekcji”), złote gałązki marki schodzą przez nią z Poznaj nas.
   Lewa kolumna (przyklejona na komputerze): nagłówek, kategorie
   (wszystkie widoczne naraz, także na telefonie), kontakt „Nie ma tu Twojego pytania?”. Prawa: lista pytań.
   Element OZE: pytania wiszą na złotej „trasie energii” (gramatyka hero: złota linia, zielony prąd). Każde pytanie ma
   węzeł; po otwarciu prąd spływa linią do jego węzła, a węzeł się zapala. Poza tym spokój.
   Ruch (Emil): rozwinięcie odpowiedzi 240 ms krzywą ease-out marki, ikona plus/minus 200 ms, prąd po linii 420 ms;
   filtr kategorii bez animacji (częsta czynność). Ograniczony ruch: bez przejść. Bez skryptu wszystkie odpowiedzi
   są rozwinięte, bez linii prądu. */
.fq {
  --fq-sosna: #123f2d;
  --fq-atrament: #1c3428;
  --fq-szary: #58685f;
  --fq-zloto: #ceb472;
  --fq-zloto-tekst: #182e23;
  --fq-linia: #dce3da;
  --fq-tlo: #fff;
  --fq-szalwia: #eaf0e3;
  --fq-prad: #27b863;
  --fq-fokus: #a67b23;
  --fq-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --fq-r: 18px;
  position: relative;
  background: var(--fq-tlo);
  color: var(--fq-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.fq *, .fq *::before, .fq *::after { box-sizing: border-box; }
.fq h2, .fq h3, .fq p, .fq ol { margin: 0; }
.fq ol { padding: 0; list-style: none; }
.fq a, .fq button { -webkit-tap-highlight-color: transparent; }
.fq ::selection { background: #cfdcc5; color: var(--fq-atrament); }
.fq :focus-visible { outline: 3px solid var(--fq-fokus); outline-offset: 3px; }

.fq-wew { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start;
  width: min(1040px, 100% - 64px); margin-inline: auto; }
.fq-bok { position: sticky; top: 120px; }

/* Nagłówek jak w usługach (jasna sekcja): sosna, jedno słowo ze złotym podkreśleniem; tu wyrównany do lewej. */
.fq h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--fq-sosna); text-wrap: balance; }
.fq h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.fq-lead { margin-top: 18px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: var(--fq-szary); text-wrap: pretty; }

/* Kategorie: pigułki zawijane (wszystkie widoczne naraz, bez przewijania w bok). */
.fq-kategorie { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 26px; }
.fq .fq-kat-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--fq-linia); border-radius: 999px;
  background: #fff; color: var(--fq-sosna); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: normal;
  text-transform: none; box-shadow: none; cursor: pointer; touch-action: manipulation; user-select: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--fq-ease); }
.fq .fq-kat-btn:hover, .fq .fq-kat-btn:focus { background: #fff; color: var(--fq-sosna); }
.fq .fq-kat-btn[aria-pressed="true"] { border-color: var(--fq-sosna); background: var(--fq-sosna); color: #fff; }
.fq .fq-kat-btn:active { transform: scale(0.97); }
.fq-kategorie[hidden] { display: none; }

/* Kontakt pod kategoriami: gdy pytania nie ma na liście. Link telefonu jak w innych sekcjach. */
.fq-kontakt { margin-top: 28px; padding: 20px 22px; border-radius: 14px; background: #f6f8f3; border: 1px solid var(--fq-linia); }
.fq-kontakt-tytul { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--fq-sosna); }
.fq-kontakt .fq-kontakt-tekst { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--fq-szary); }
.fq a.fq-do-formularza, .fq a.fq-do-formularza:hover, .fq a.fq-do-formularza:focus, .fq a.fq-do-formularza:visited { color: var(--fq-sosna);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fq-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; border-radius: 6px; color: var(--fq-sosna);
  font-size: 19px; font-weight: 700; text-decoration: none; touch-action: manipulation; }
.fq-tel svg { width: 20px; height: 20px; fill: none; stroke: var(--fq-zloto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Lista na trasie energii: złota linia po lewej od pierwszego do ostatniego węzła; zielony prąd (skrypt ustawia jego
   długość zmienną --fq-prad-dl) spływa do węzła otwartego pytania. */
.fq-lista { position: relative; --fq-x: 11px; }
.fq-lista::before { content: ""; position: absolute; left: var(--fq-x); top: var(--fq-od, 34px); bottom: var(--fq-do, 34px); width: 2px;
  margin-left: -1px; border-radius: 2px; background: var(--fq-zloto); opacity: 0.55; }
.fq-prad { position: absolute; list-style: none; left: var(--fq-x); top: var(--fq-od, 34px); width: 2px; height: var(--fq-prad-dl, 0px); margin-left: -1px;
  border-radius: 2px; background: linear-gradient(180deg, rgba(39, 184, 99, 0.25), var(--fq-prad)); box-shadow: 0 0 8px rgba(39, 184, 99, 0.45);
  transition: height 420ms var(--fq-ease); pointer-events: none; }
.fq-pozycja { position: relative; border-bottom: 1px solid var(--fq-linia); }
.fq-prad + .fq-pozycja { border-top: 1px solid var(--fq-linia); }
.fq-pozycja[hidden] { display: none; }
.fq .fq-pyt-btn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%;
  min-height: 68px; padding: 18px 4px 18px 40px; border: 0; border-radius: 0; background: transparent; color: var(--fq-sosna);
  font: inherit; font-size: clamp(16.5px, 0.35vw + 14.5px, 18.5px); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em;
  text-align: left; text-transform: none; box-shadow: none; cursor: pointer; touch-action: manipulation; }
.fq .fq-pyt-btn:hover, .fq .fq-pyt-btn:focus { background: transparent; color: var(--fq-sosna); }
.fq .fq-pyt-btn:focus-visible { outline-offset: -3px; border-radius: 8px; }
/* węzeł na trasie: złoty pierścień, po otwarciu zielony z poświatą */
.fq-wezel { position: absolute; left: var(--fq-x, 11px); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid var(--fq-zloto); background: var(--fq-tlo); transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.fq-pozycja.otwarta .fq-wezel { border-color: var(--fq-prad); background: var(--fq-prad); box-shadow: 0 0 0 5px rgba(39, 184, 99, 0.16); }
.fq-pyt-tekst { text-wrap: pretty; }
.fq-pyt-kat { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--fq-szary); }
/* ikona plus/minus: pionowa kreska znika przy otwarciu */
.fq-ikona { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--fq-szalwia); transition: background-color 200ms ease; }
.fq-ikona::before, .fq-ikona::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  border-radius: 2px; background: var(--fq-sosna); transition: transform 200ms var(--fq-ease); }
.fq-ikona::after { transform: rotate(90deg); }
.fq-pozycja.otwarta .fq-ikona { background: var(--fq-sosna); }
.fq-pozycja.otwarta .fq-ikona::before, .fq-pozycja.otwarta .fq-ikona::after { background: #fff; }
.fq-pozycja.otwarta .fq-ikona::after { transform: rotate(90deg) scaleX(0); }

/* Odpowiedź: rozwinięcie przez wysokość wiersza siatki (0fr → 1fr), zwinięta niewidoczna także dla czytnika i fokusu. */
.fq-odp { display: grid; grid-template-rows: 1fr; }
.fq-odp-wew { min-height: 0; overflow: hidden; }
.fq-odp-tresc { padding: 0 52px 22px 40px; }
.fq-odp p { font-size: 16px; line-height: 1.65; color: var(--fq-atrament); max-width: 62ch; text-wrap: pretty; }
.fq-odp p + p { margin-top: 10px; }
/* zwykły tekst (nie flex), żeby przy zawinięciu strzałka została przy ostatnim słowie; wysokość celu 44 px z odstępów */
.fq-wiecej { display: inline-block; padding-block: 11px; line-height: 22px; margin-top: 0; border-radius: 6px; color: var(--fq-sosna);
  font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fq-bez-lamania { white-space: nowrap; }
.fq-wiecej svg { margin-left: 6px; vertical-align: -3px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms var(--fq-ease); }
html.fq-js .fq-odp { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms var(--fq-ease), visibility 0s linear 240ms; }
html.fq-js .fq-odp-tresc { opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 240ms var(--fq-ease); }
html.fq-js .fq-pozycja.otwarta .fq-odp { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 240ms var(--fq-ease), visibility 0s; }
html.fq-js .fq-pozycja.otwarta .fq-odp-tresc { opacity: 1; transform: none; }
/* zamknięcie innego pytania przy otwieraniu: od razu, żeby kliknięte nie uciekało spod palca (skrypt, punkt 6) */
html.fq-js .fq-pozycja.fq-od-razu .fq-odp, html.fq-js .fq-pozycja.fq-od-razu .fq-odp-tresc { transition: none; }
/* bez skryptu nie ma prądu ani węzłów zapalanych; linia i węzły zostają jako ozdoba */
html:not(.fq-js) .fq-prad, html:not(.fq-js) .fq-ikona, html:not(.fq-js) .fq-kategorie { display: none; }

/* motyw (Astra) zmienia linkom kolor przy najechaniu i fokusie; linki sekcji trzymają swoje barwy */
.fq a.fq-tel, .fq a.fq-tel:hover, .fq a.fq-tel:focus, .fq a.fq-tel:active, .fq a.fq-tel:visited,
.fq a.fq-wiecej, .fq a.fq-wiecej:focus, .fq a.fq-wiecej:active, .fq a.fq-wiecej:visited { color: var(--fq-sosna); }

@media (hover: hover) and (pointer: fine) {
  .fq .fq-kat-btn:not([aria-pressed="true"]):hover { border-color: var(--fq-sosna); }
  .fq-pyt-btn:hover .fq-ikona { background: #dfe8d6; }
  .fq-pozycja.otwarta .fq-pyt-btn:hover .fq-ikona { background: #19583f; }
  .fq-pyt-btn:hover .fq-wezel { border-color: var(--fq-sosna); }
  .fq a.fq-wiecej:hover { color: #19583f; }
  .fq-wiecej:hover svg { transform: translateX(3px); }
}

/* Tablet i telefon: jedna kolumna (nagłówek, kategorie, lista, kontakt pod listą). */
@media (max-width: 899px) {
  .fq-wew { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fq-bok { position: static; display: contents; }
  .fq-naglowek { order: 1; }
  .fq-kategorie { order: 2; margin-top: 0; }
  .fq-lista { order: 3; }
  .fq-kontakt { order: 4; margin-top: 0; }
}
@media (max-width: 599px) {
  .fq-wew { width: min(1040px, 100% - 32px); }
  .fq .fq-kat-btn { padding: 0 13px; font-size: 14px; }
  .fq .fq-pyt-btn { gap: 12px; min-height: 64px; padding: 16px 0 16px 34px; }
  .fq-lista { --fq-x: 9px; }
  .fq-ikona { width: 32px; height: 32px; }
  .fq-odp-tresc { padding: 0 8px 20px 34px; }
  .fq-odp p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fq-prad, .fq-wezel, .fq-ikona, .fq-ikona::before, .fq-ikona::after, .fq-wiecej svg, .fq .fq-kat-btn { transition: none; }
  html.fq-js .fq-odp, html.fq-js .fq-pozycja.otwarta .fq-odp, html.fq-js .fq-odp-tresc { transition: none; }
}