/**
 * HECmania — FAQ: černý panel s glassmorph dlaždicemi.
 *
 * PROČ (Lucky 2026-09-09: „to v tom faq je hroznej bastl... dej tam
 * cerny pozadí a oranzovo zelený glassmorph dlazdice s textem"):
 * obsah stránky má vlastní inline `<style>` — neonová zelená #a3cf21
 * na otázky, oranžová #f39200 na odpovědi, Arial, holé linky. Na světlém
 * podkladu šablony je to nečitelné.
 *
 * Tenhle soubor ten inline styl PŘEBÍJÍ (proto `!important` u vlastností,
 * které jsou v něm napsané) a staví z FAQ jeden tmavý panel: dlaždice
 * s rozostřeným sklem, oranžová a zelená jen jako akcenty, ne jako barva
 * celého textu.
 *
 * Barvy jsou tokeny hecmania palety — stejné jako widget a klubová karta.
 */

/**
 * ČERNÁ PŘES CELOU PLOCHU (Lucky 2026-09-09: „dej cernou pres celou
 * plochu"). Panel byl uprostřed a kolem svítila bílá plocha šablony —
 * tmavá sekce v ní visela jako ostrov.
 *
 * Podklad se roztahuje na celou šířku okna trikem s `100vw` a zápornými
 * okraji: `.faq-container` zůstává v proudu obsahu (nesahá se na
 * strukturu šablony), ale jeho pozadí přeteče až k hranám. `calc` řeší
 * i případ, kdy je stránka odsazená od kraje.
 */
.faq-container {
  --hec-o: #fd7e14;
  --hec-o-svetla: #ffa14d;
  --hec-z: #94cb44;
  --hec-z-svetla: #b6e06a;

  position: relative;
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 42px max(24px, calc(50vw - 620px)) 54px;
  border-radius: 0;
  /* Černý podklad s nasvícením v rozích — ať to není plochá plocha. */
  background:
    radial-gradient(70% 60% at 6% -6%, rgba(253, 126, 20, 0.16) 0%, rgba(253, 126, 20, 0) 60%),
    radial-gradient(65% 55% at 100% 104%, rgba(148, 203, 68, 0.14) 0%, rgba(148, 203, 68, 0) 60%),
    linear-gradient(165deg, #131417 0%, #0b0c0e 100%);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif !important;
  color: #e9eaec;
}

/* ---------- titulek stránky (přesunutý do panelu) ---------- */

.hec-faq-titulek {
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.hec-faq-titulek h1 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(1.5em, 4vw, 2em) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
}
/* Oranžovo-zelený podtitulek — drží barevný jazyk celé sekce. */
.hec-faq-titulek::after {
  content: "Ceny, slevy a jak to celé funguje";
  display: block;
  margin-top: 7px;
  background: linear-gradient(90deg, var(--hec-o-svetla) 0%, var(--hec-z-svetla) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--hec-o-svetla);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- dvousloupcová sazba ---------- */

/**
 * DVA SLOUPCE VEDLE SEBE (Lucky 2026-09-09: „udelej dva sloupecky vedle
 * sebe"). Otázek je jedenáct, na širokém monitoru byl jeden sloupec
 * dlouhý pruh s prázdnem po stranách.
 *
 * `columns` místo gridu záměrně: `<details>` mění výšku při
 * rozklikávání a v gridu by přeskládání posunulo i ostatní dlaždice
 * (zákazník by ztratil místo, kde právě čte). Ve sloupcích se přeteče
 * jen zbytek pod ní. `break-inside: avoid` drží dlaždici pohromadě,
 * aby se nerozpůlila mezi sloupce.
 */
.faq-container .hec-faq-mrizka {
  columns: 2;
  column-gap: 16px;
}
.faq-container .hec-faq-mrizka > .faq-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Nadpis sekce jde přes oba sloupce, ne do jednoho. */
.faq-container .hec-faq-nadpis {
  column-span: all;
  -webkit-column-span: all;
}

@media (max-width: 860px) {
  .faq-container .hec-faq-mrizka { columns: 1; }
}

/* ---------- dlaždice ---------- */

.faq-container .faq-item {
  position: relative;
  margin: 0 0 12px !important;
  padding: 4px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.faq-container .faq-item:last-child { margin-bottom: 0 !important; }

.faq-container .faq-item:hover {
  background: rgba(255, 255, 255, 0.085) !important;
  border-color: rgba(253, 126, 20, 0.45) !important;
  transform: translateY(-1px);
}

/* Barevný pásek u levého okraje — oranžový, po otevření zelený. */
.faq-container .faq-item::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--hec-o) 0%, var(--hec-z) 100%);
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.faq-container .faq-item[open]::before { opacity: 1; }

.faq-container .faq-item[open] {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(148, 203, 68, 0.38) !important;
}

/* ---------- otázka ---------- */

.faq-container .faq-item summary {
  padding: 17px 46px 17px 8px !important;
  color: #f4f5f6 !important;
  font-size: 1.02em !important;
  font-weight: 700 !important;
  line-height: 1.45;
  letter-spacing: -0.005em;
  transition: color 0.2s ease !important;
}
.faq-container .faq-item summary:hover { color: var(--hec-o-svetla) !important; }
.faq-container .faq-item[open] summary { color: #fff !important; }

/* Kolečko s +/− vpravo místo holého znaku. */
.faq-container .faq-item summary::after {
  content: "+" !important;
  position: absolute !important;
  top: 50%;
  right: 14px !important;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(253, 126, 20, 0.5);
  background: rgba(253, 126, 20, 0.14);
  color: var(--hec-o-svetla) !important;
  font-size: 1.05em !important;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.faq-container .faq-item[open] summary::after {
  content: "−" !important;
  border-color: rgba(148, 203, 68, 0.55);
  background: rgba(148, 203, 68, 0.16);
  color: var(--hec-z-svetla) !important;
  transform: translateY(-50%) rotate(180deg);
}

/* ---------- odpověď ---------- */

.faq-container .faq-item p {
  margin: 0 !important;
  padding: 2px 46px 20px 8px !important;
  color: #c9cccf !important;      /* čitelná, ne oranžová jako dřív */
  font-size: 0.97em !important;
  line-height: 1.68 !important;
  font-variant-numeric: tabular-nums;
}

/* Zdůrazněné části — sazby, částky, klíčová slova. */
.faq-container .faq-item p strong {
  color: var(--hec-z-svetla);
  font-weight: 700;
}

/* ---------- nadpis doplněné sekce ---------- */

.hec-faq-nadpis {
  display: flex;
  align-items: center;
  gap: 11px;
  /* Uvnitř sloupců potřebuje odsazení shora i mezeru pod sebou. */
  margin: 22px 0 14px !important;
  padding: 0 0 0 2px !important;
  border: none !important;
  color: #fff !important;
  font-size: 1.12em !important;
  font-weight: 800 !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hec-faq-nadpis::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 21px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--hec-o) 0%, var(--hec-z) 100%);
}
/* Jemná linka doprava, ať nadpis oddělí sekci bez těžkého borderu. */
.hec-faq-nadpis::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}

@media (max-width: 620px) {
  .faq-container { padding: 26px 14px 32px; }
  .faq-container .faq-item { padding: 2px 14px !important; }
  .faq-container .faq-item summary { padding: 15px 40px 15px 6px !important; }
  .faq-container .faq-item p { padding: 2px 16px 17px 6px !important; }
}