/**
 * pq-wa-skupiny.css — WhatsApp skupiny (přehled, detail, QR karta, utility lišta).
 *
 * Všechny hodnoty pocházejí z tokens.css child theme. Vizuální jazyk převzatý
 * z existujících komponent webu: karta = .pq-community__card (bílé pozadí,
 * radius-lg, shadow-lg), hover posun z .pq-tour__card, štítek z .pq-tour__tag.
 *
 * @since 1.1.0
 */

/* =========================================================================
 * 1) PŘEHLED SKUPIN
 * ===================================================================== */

.pq-wa-prehled {
  padding-block: var(--space-16);
  background: var(--color-bg-alt);
}

/* Téma má .pq-eyebrow natvrdo `color: #fff` (styles.css) — na světlém
   podkladu téhle sekce by byl neviditelný. Dvojitá třída kvůli specificitě. */
.pq-wa-prehled .pq-eyebrow.pq-eyebrow { color: var(--color-secondary); }

.pq-wa-doporuceni {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .pq-wa-doporuceni { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.pq-wa-doporuceni__krok {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  line-height: var(--line-height-base);
}

.pq-wa-doporuceni__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-black);
  font-size: var(--text-sm);
}

.pq-wa-prehled__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 700px) {
  .pq-wa-prehled__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .pq-wa-prehled__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
 * 2) KARTA SKUPINY
 * ===================================================================== */

.pq-wa-karta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pq-wa-karta:hover,
.pq-wa-karta:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Hlavní skupina — zvýrazněná, přes celou šířku mřížky. */
.pq-wa-karta--hlavni {
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-text-invert);
}

@media (min-width: 700px) {
  .pq-wa-karta--hlavni { grid-column: 1 / -1; }
}

.pq-wa-karta__stitek {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pq-wa-karta--hlavni .pq-wa-karta__stitek {
  background: var(--color-primary);
  color: var(--color-text-invert);
}

.pq-wa-karta__nazev {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

.pq-wa-karta__nazev a { color: inherit; text-decoration: none; }
.pq-wa-karta__nazev a:hover { text-decoration: underline; }

.pq-wa-karta__termin {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* Odkaz v nadpisu dědí tyrkys z tématu — na tmavě modrém pozadí hlavní
   karty nesplňuje kontrast. Barvu proto přebíjíme na světlou. */
.pq-wa-karta--hlavni .pq-wa-karta__nazev a,
.pq-wa-karta--hlavni .pq-wa-karta__nazev a:hover,
.pq-wa-karta--hlavni .pq-wa-karta__nazev a:focus {
  color: var(--color-text-invert);
}

.pq-wa-karta--hlavni .pq-wa-karta__termin { color: var(--color-text-invert-muted); }

.pq-wa-karta__perex {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.pq-wa-karta--hlavni .pq-wa-karta__perex { color: var(--color-text-invert-muted); }

.pq-wa-karta__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

.pq-wa-karta__detail {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.pq-wa-karta--hlavni .pq-wa-karta__detail { color: var(--color-text-invert); }

/* =========================================================================
 * 3) DETAIL SKUPINY
 * ===================================================================== */

.pq-wa-detail__upozorneni {
  margin-block: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border-inline-start: 4px var(--border-style) var(--color-accent);
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* Hlavička stránky má tmavý gradient — tyrkys z --color-primary na něm
   nesplňuje AA, proto světlý text a tyrkys jen na ikoně. */
.pq-wa-detail__termin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-invert);
}

.pq-wa-detail__termin .pq-icon { flex: none; color: var(--color-text-invert); opacity: .8; }

.pq-wa-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
  padding-block: var(--space-12);
}

@media (min-width: 900px) {
  .pq-wa-detail__grid { grid-template-columns: 1.15fr .85fr; }
}

.pq-wa-detail__editor { margin-block-end: var(--space-8); }
.pq-wa-detail__editor p { line-height: var(--line-height-base); }

.pq-wa-detail__nadpis {
  margin: var(--space-10) 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
}

.pq-wa-detail__text > .pq-wa-detail__nadpis:first-child { margin-block-start: 0; }

.pq-wa-detail__vyhody {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.pq-wa-detail__vyhody li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text);
  line-height: var(--line-height-base);
}

.pq-wa-detail__vyhody .pq-icon { flex: none; color: var(--color-primary); }

.pq-wa-detail__poznamka,
.pq-wa-detail__tip {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.pq-wa-detail__cta { margin: var(--space-6) 0 0; }

.pq-wa-detail__chyba {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border-inline-start: 4px var(--border-style) var(--color-error);
  color: var(--color-text);
}

@media (min-width: 900px) {
  /* inset-block-start musí přesahovat sticky #pq-header (naměřeno 77–91 px
     podle šířky, viz #pq-header) — jinak horní okraj panelu po scrollu
     zajíždí pod hlavičku. 6.5rem (104 px) dává i na užší straně rezervu. */
  .pq-wa-detail__panel { position: sticky; inset-block-start: 6.5rem; }
}

/* =========================================================================
 * 4) QR KARTA
 *
 * Karta má vyzývat ke vstupu, ne jen zobrazit kód: zelený rám ve barvě
 * WhatsAppu, ikona přes střed kódu (proto korekce H) a tlačítko pod ním.
 * ===================================================================== */

.pq-wa-qr {
  margin: 0;
  text-align: center;
}

.pq-wa-qr__karta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 2px var(--border-style) var(--color-whatsapp);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.pq-wa-qr__stitek {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.pq-wa-qr__stitek .pq-icon { flex: none; color: var(--color-primary); }

.pq-wa-qr__kod {
  position: relative;
  width: 100%;
  /* Větší kód — u řidší mřížky je každý modul ostřejší. */
  max-width: 260px;
  line-height: 0;
}

.pq-wa-qr__kod svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Ikona přes střed kódu. Bílý prstenec ji odděluje od modulů — bez něj
   splývala s mřížkou. Velikost drží pod rezervou korekce Q (viz helpers.php). */
.pq-wa-qr__logo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  /* Čtverec přes aspect-ratio, ne height: 26% — procentní výška se u prvku
     bez pevné výšky rodiče dopočítá jinak než šířka a z prstence byla elipsa
     (bublina se pak roztáhla do stran). */
  box-sizing: border-box;
  width: 26%;
  aspect-ratio: 1;
  padding: 5%;
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  color: var(--color-whatsapp);
}

.pq-wa-qr__logo-svg { width: 100%; height: auto; }

.pq-wa-qr__cta { width: 100%; justify-content: center; }

.pq-wa-qr__popis {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

/* =========================================================================
 * 5) ZPRÁVA O SKUPINĚ V UTILITY LIŠTĚ
 *
 * Samostatný pruh nad hlavičkou zanikl — obsah se sloučil do stávající
 * utility lišty (dvě lišty s podobným sdělením zahlcovaly). Barvy a velikost
 * písma dědí lišta, tady je jen štítek s měsícem a zalamování.
 * ===================================================================== */

.pq-wa-utility {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* Uvozovací věta až od tabletu — na mobilu by z lišty byly tři řádky. */
.pq-wa-utility__uvod { display: none; }

@media (min-width: 700px) {
  .pq-wa-utility__uvod { display: inline; }
}

.pq-wa-utility__stitek {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  /* Světlý odznak na tmavě modré liště — kontrast textu 12:1. Korál se tu
     bil s červenou testovací variantou lišty i s tyrkysovým CTA. */
  background: var(--color-bg);
  color: var(--color-secondary-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.pq-wa-utility__stitek .pq-icon {
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .pq-wa-karta { transition: none; }
  .pq-wa-karta:hover,
  .pq-wa-karta:focus-within { transform: none; }
}