/* ============================================================
   GRID Software – LP Časté otázky (faq.html)
   Hero = .sub-hero z web.css (bez fotky). Akordeon vychází
   z .lg-q na Legislativě, aby FAQ vypadalo na webu všude stejně.
============================================================ */

.fq { background: #E9EDF2; padding: 64px 0 100px; }
/* CTA pod FAQ = gradient značky (jako .contact na HP), oddělí se od šedé plochy i tmavé patičky (Vladka: líbí se víc než navy) */
.fq + .cta-band { background: var(--grad); }
.fq + .cta-band .h2 { color: #fff; }
.fq + .cta-band p { color: rgba(255,255,255,.92); }
.fq + .cta-band .btn-warm { background: #fff; color: var(--red); box-shadow: 0 6px 18px rgba(26,30,41,.18); }
.fq + .cta-band .btn-warm:hover { background: var(--cream); }

/* ── FILTRY ────────────────────────────────── */
.fq-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.fq-chip { font: inherit; font-size: .86rem; font-weight: 600; color: var(--navy); border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.fq-chip:hover { background: linear-gradient(#FFF4EC, #FFF4EC) padding-box, var(--grad) border-box; }
.fq-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.fq-chip[aria-pressed="true"] { background: var(--grad) border-box; color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgba(239,65,54,.28); }

/* ── SKUPINY ───────────────────────────────── */
.fq-list { display: flex; flex-direction: column; gap: 56px; }
.fq-group { display: grid; grid-template-columns: 1fr 2.2fr; gap: 48px; align-items: start; }
.fq-group[hidden] { display: none; }
.fq-group-head { position: sticky; top: 104px; }
.fq-group-head h2 { font-size: 1.35rem; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--navy); text-wrap: balance; }
.fq-group-head p { font-size: .9rem; color: var(--gray-600); line-height: 1.6; margin-top: 8px; }
.fq-items { display: flex; flex-direction: column; gap: 10px; }

/* ── AKORDEON ──────────────────────────────── */
.fq-q { background: #fff; border: 1px solid #D9DFE6; box-shadow: 0 2px 8px rgba(46,53,72,.06); border-radius: var(--r-sm); transition: border-color .15s, box-shadow .15s; scroll-margin-top: 110px; }
.fq-q[open] { border-color: rgba(245,121,59,.45); box-shadow: 0 4px 18px rgba(245,121,59,.1); }
.fq-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: .97rem; font-weight: 700; color: var(--navy); }
.fq-q summary::-webkit-details-marker { display: none; }
.fq-q summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--orange); font-size: 1.3rem; font-weight: 700; line-height: 1; transition: transform .2s, background .2s, color .2s; }
.fq-q[open] summary::after { transform: rotate(45deg); background: var(--orange); color: #fff; }
.fq-q summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-sm); }
.fq-q p { padding: 0 22px 20px; font-size: .92rem; color: var(--gray-600); line-height: 1.7; }
.fq-q p a { color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fq-q p a:hover { color: var(--red); }

/* ── PRÁVNÍ POZNÁMKA (jako .lg-legal) ──────── */
.fq-legal { margin-top: 56px; padding: 18px 22px; border-left: 3px solid var(--orange); background: #fff; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .84rem; color: var(--gray-600); line-height: 1.6; max-width: 860px; }
.fq-legal strong { color: var(--navy); }

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 960px) {
  .fq-group { grid-template-columns: 1fr; gap: 18px; }
  .fq-group-head { position: static; }
}
@media (max-width: 600px) {
  .fq { padding: 44px 0 72px; }
  .fq-filters { margin-bottom: 36px; }
  .fq-chip { font-size: .82rem; padding: 8px 13px; }
  .fq-list { gap: 44px; }
  .fq-q summary { padding: 16px 18px; font-size: .94rem; }
  .fq-q p { padding: 0 18px 18px; }
}