/**
 * styles.css — below-the-fold styly homepage (async loading).
 * BEM, mobile-first, pouze tokeny [0.6]. Astra override blok na konci
 * souboru dle pravidel [A.4] (ID-scope + !important + granulární border-*).
 *
 * @since 1.0.0
 */

/* === Společné prvky sekcí === */
.pq-main section { padding-block: var(--space-16); }

.pq-section-head { max-width: 640px; margin-block-end: var(--space-10); }
.pq-section-head__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}
.pq-section-head__text { margin: 0; color: var(--color-text-muted); }
.pq-section-head__text + .pq-section-head__text { margin-block-start: var(--space-2); }
/* Textový odkaz v hlavičce sekce — stejný vzor jako .pq-utility__link. */
.pq-section-head__link {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.pq-section-head__link:hover { text-decoration: underline; }
.pq-section-head--invert .pq-section-head__title { color: var(--color-text-invert); }
.pq-section-head--invert .pq-section-head__text { color: var(--color-text-invert-muted); }
.pq-eyebrow--sun { color: var(--color-primary); }

/* === Stavy [0.11] === */
.pq-state {
  padding: var(--space-8);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-text-muted);
}
.pq-state > p { margin: 0 0 var(--space-4); }
.pq-state > p:only-child { margin: 0; }
.pq-state--error { border-color: var(--color-error); color: var(--color-error); }
.pq-state--invert { border-color: var(--color-text-invert-muted); color: var(--color-text-invert-muted); }

/* Loading skeleton — používá homepage.js při filtraci */
.pq-tours__grid--loading .pq-tour__card { opacity: .45; pointer-events: none; }

/* === Sekce: Výlety === */
.pq-tours__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
}
.pq-tours__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  min-height: 44px; /* dotyková plocha */
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.pq-tours__chip:hover { border-color: var(--color-secondary); }
.pq-tours__chip--active,
.pq-tours__chip[aria-pressed="true"] {
  background: var(--color-tyrkys);
  border-color: var(--color-tyrkys);
  color: var(--color-primary);
}

.pq-tours__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .pq-tours__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pq-tours__grid { grid-template-columns: repeat(3, 1fr); } }

.pq-tour__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  contain: layout;
}
.pq-tour__card:hover,
.pq-tour__card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pq-tour__media { position: relative; }
.pq-tour__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pq-tour__img--placeholder { aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)); }
.pq-tour__tag {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.pq-tour__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-5);
}
.pq-tour__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: 1.3; }
.pq-tour__link { color: var(--color-text); text-decoration: none; }
.pq-tour__link::after { content: ""; position: absolute; inset: 0; } /* celá karta klikací */
.pq-tour__link:hover { color: var(--color-secondary); }
.pq-tour__card { position: relative; }

.pq-tour__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pq-tour__meta-item { display: inline-flex; align-items: center; gap: var(--space-1); }

.pq-tour__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width) dashed var(--color-border);
}
.pq-tour__price { margin: 0; }
.pq-tour__price strong { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-weight-black); color: var(--color-accent); }
.pq-tour__price small { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.pq-tour__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}
.pq-tours__all { margin: var(--space-10) 0 0; text-align: center; }

/* ── Show-more: karty nad limit jsou skryté (atribut nastavuje homepage.js) ── */
.pq-tour[data-pq-hidden-by-limit] { display: none; }

/* ── Show-more tlačítko ── */
.pq-tours__show-more {
  display: flex;
  justify-content: center;
  margin: var(--space-8) 0 0;
}
.pq-tours__show-more[hidden] { display: none !important; }

.pq-tours__show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  min-height: 44px; /* dotyková plocha */
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pq-tours__show-more-btn:hover,
.pq-tours__show-more-btn:focus-visible {
  background: var(--color-secondary);
  color: var(--color-text-invert);
  outline: none;
}
.pq-tours__show-more-btn:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}

/* === Sekce: TOP výlety („Doporučujeme") ===
 * Výloha max. 4 prioritních výletů. Karta je stejná jako katalogová
 * .pq-tour__card (foto nahoře, poměr 3:2) — odlišení od katalogu řeší
 * jen stálý stín (přebráno z .pq-community__card) a odlišené pozadí
 * sekce (přebráno z .pq-how, viz níže), ne jiný tvar karty. */
.pq-top-tours { padding-block: var(--space-16); background: var(--color-bg-alt); }

.pq-top-tours__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .pq-top-tours__grid { grid-template-columns: repeat(2, 1fr); } }

.pq-top-tour__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  contain: layout;
}
.pq-top-tour__card:hover,
.pq-top-tour__card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pq-top-tour__media { position: relative; }
.pq-top-tour__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.pq-top-tour__img--placeholder { aspect-ratio: 2 / 1; background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)); }

.pq-top-tour__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-5);
}
.pq-top-tour__foot { margin-block-start: auto; padding-block-start: var(--space-3); }
/* Titulek a důvod jsou omezené na max. 2 řádky (stejný princip jako
 * .pq-service__perex), ale BEZ vynucené min-height — u kratšího textu by
 * pod ním zůstala prázdná mezera. Případný rozdíl ve výšce karet vyrovná
 * .pq-top-tour__foot (margin-top:auto) tím, že vezme volný prostor před
 * tlačítkem, ne uvnitř textu. */
.pq-top-tour__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pq-top-tour__reason {
  margin: 0;
  margin-block-start: -6px; /* stáhne mezeru k titulku o ~6px, zbytek řeší gap na .pq-top-tour__body */
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pq-top-tour__link { color: var(--logo-turq); font-weight: 600; text-decoration: none; }
.pq-top-tour__link:hover { text-decoration: underline; }
.pq-top-tour__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  text-align: center;
}

/* === Sekce: Jak to funguje === */
.pq-how { background: var(--color-bg-alt); }
.pq-how__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pq-step;
}
@media (min-width: 860px) { .pq-how__steps { grid-template-columns: repeat(3, 1fr); } }
.pq-how__step {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
}
.pq-how__step::before {
  counter-increment: pq-step;
  content: counter(pq-step);
  position: absolute;
  inset-block-start: calc(-1 * var(--space-4));
  inset-inline-start: var(--space-6);
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  color: #ffffff;
  background: var(--color-modra);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-black);
}
.pq-how__step-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); }
.pq-how__step-text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* === Sekce: Průvodce === */
.pq-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
}
@media (min-width: 980px) { .pq-guide__grid { grid-template-columns: repeat(4, 1fr); } }
.pq-guide__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  min-height: 44px;
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.pq-guide__link:hover { border-color: var(--color-secondary); transform: translateY(-2px); }
.pq-guide__icon { color: var(--color-secondary); }

.pq-guide__articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) { .pq-guide__articles { grid-template-columns: repeat(3, 1fr); } }
.pq-guide__article {
  display: block;
  overflow: hidden;
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pq-guide__article:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pq-guide__article-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pq-guide__article-img--placeholder { display: block; background: var(--color-bg-alt); }
.pq-guide__article-body { display: block; padding: var(--space-5); }
.pq-guide__article-cat {
  display: block;
  margin-block-end: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.pq-guide__article-title { display: block; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: 1.3; }

/* === Sekce: Komunita === */


.pq-community {
    /* Přechod z tmavě modré do tyrkysové */
    background: linear-gradient(160deg, var(--logo-blue), var(--logo-turq));
    color: var(--color-text-invert);
}
#pq-komunita > div > header > p{
  color: #ffffff;
}

.pq-community__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
@media (min-width: 900px) { .pq-community__grid { grid-template-columns: 1.1fr .9fr; } }
.pq-community__quote {
  margin: 0 0 var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, .06);
  border: var(--border-width) var(--border-style) rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
}
.pq-community__quote p { margin: 0; font-size: var(--text-base); color: var(--color-text-invert); }
.pq-community__quote-author { margin-block-start: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.pq-community__card {
  padding: var(--space-8);
  background: var(--color-bg-card);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.pq-community__card-title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-weight-black); }
.pq-community__card-text { margin: 0 0 var(--space-6); color: var(--color-text-muted); }

/* === Sekce: O nás === */
.pq-about__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .pq-about__grid { grid-template-columns: .9fr 1.1fr; } }
.pq-about__media { position: relative; }
.pq-about__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.pq-about__img--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
  color: var(--color-text-invert-muted);
  font-weight: var(--font-weight-semibold);
}
.pq-about__license {
  position: absolute;
  inset-block-end: calc(-1 * var(--space-4));
  inset-inline-end: calc(-1 * var(--space-3));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 260px;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}
.pq-about__text { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.pq-about__cta { margin: var(--space-6) 0 0; }

/* === Patička (vizuální) === */
.pq-footer {
  padding-block: var(--space-16) var(--space-8);
  background: var(--color-secondary-dark);
  color: var(--color-text-invert-muted);
  font-size: var(--text-sm);
}
.pq-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); margin-block-end: var(--space-12); }
@media (min-width: 560px) { .pq-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pq-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pq-footer__logo { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-weight-black); color: var(--color-text-invert); }
.pq-footer__logo-r { font-size: var(--text-xs); vertical-align: super; }
.pq-footer__claim { margin: 0 0 var(--space-4); }
.pq-footer__contact { margin: 0; }
.pq-footer__contact-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-invert-muted); text-decoration: none; }
.pq-footer__contact-link:hover { color: var(--color-primary); }
.pq-footer__heading { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--color-text-invert); }
.pq-footer__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pq-footer__link { color: var(--color-text-invert-muted); text-decoration: none; }
.pq-footer__link:hover { color: var(--color-primary); }
.pq-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-width) var(--border-style) rgba(255, 255, 255, .12);
  font-size: var(--text-xs);
}
.pq-footer__bottom p { margin: 0; }



/* === Nav desktop (přesunuto z critical) ===
   Desktop nav nepotřebuje být inline — mobilní stav zachycuje critical.css. */
@media (min-width: 900px) {
  .pq-nav__toggle { display: none; }
  .pq-nav__list {
    display: flex;
    position: static;
    flex-direction: row;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* =====================================================================
 * Přesunuto z critical.css kvůli limitu 8 KB [0.5] — vše pod foldem.
 * ================================================================== */
/* === Pás důvěry === */
.pq-trust {
  background: var(--color-primary);
  padding-block: var(--space-8);
}
.pq-trust__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Dlaždice — bílá karta se zaoblením a jemným stínem (dle reference) */
.pq-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 6px 20px rgb(11 46 53 / .10);
  color: var(--color-primary);
}

/* Ikonový odznak — plný zelený disk s bílou ikonou */
.pq-trust__icon-wrap {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  flex-shrink: 0;
}
.pq-trust__icon {
  color: #fff;
  width: 2rem;
  height: 2rem;
}
.pq-trust__label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
}

@media (min-width: 900px) {
  .pq-trust__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
  .pq-trust__item {
    padding: var(--space-10) var(--space-6);
  }
}


/* === Hero badge (desktop-only) === */
@media (min-width: 900px) {
/* === Hero badge — repositioned pro full-width hero === */
.pq-hero__badge {
  position: absolute;
  z-index: 2;
  bottom: var(--space-6);
  left: var(--container-pad);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.pq-hero__badge-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-success);
  animation: pq-pulse 2s infinite;
}
/* Offline — šedá tečka bez pulzování. */
.pq-hero__badge.is-offline .pq-hero__badge-dot {
  background: #9aa7a9;
  animation: none;
}
@keyframes pq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
}

/* Hero overlay — jediné místo definice (viz blok č. 4 níže).
   Dřívější @media blok přesunut TAM, aby v kaskádě vyhrál nad base pravidlem. */

/* === Tlačítka pod foldem === */
.pq-btn--ghost { border-color: var(--color-text); color: var(--color-text); background: transparent; }
.pq-btn--ghost:hover { background: var(--color-text); color: var(--color-text-invert); }
.pq-btn--whatsapp { background: var(--color-whatsapp); color: var(--color-text-invert); }
.pq-btn--whatsapp:hover { transform: translateY(-2px); }


/* =========================================================================
 * ASTRA OVERRIDE BLOK — pravidla dle [A.4]:
 * 1) VŽDY ID-scope, 2) VŽDY !important, 3) NIKDY border shorthand,
 * 4) reset PŘED active state, 6) tap-highlight reset.
 * ===================================================================== */

/* 6) tap-highlight reset pro interaktivní prvky */
#pq-header a,
#pq-header button,
#pq-utility a,
#pq-footer a {
  -webkit-tap-highlight-color: transparent !important;
}
#pq-header a:active,
#pq-header button:active {
  background: transparent !important;
}

/* Typografie hlavičky a patičky — Astra přepisuje fonty a barvy odkazů */
#pq-header a {
  font-family: var(--font-body) !important;
  text-decoration: none !important;
}
#pq-footer a {
  color: var(--color-text-invert-muted) !important;
  text-decoration: none !important;
}
#pq-footer a:hover {
  color: var(--color-primary) !important;
}

/* 4a) RESET — musí být PŘED active state blokem */
#pq-header li.current-menu-item a,
#pq-header li.current_page_item a {
  background: transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
}

/* 4b) ACTIVE STATE — po resetu, granulární border-* (nikdy shorthand) */
#pq-header .pq-nav__link[aria-current] {
  background: var(--color-bg-alt) !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 3px solid var(--color-primary) !important;
}

/* Tlačítka — Astra theme button styly mají vlastní paddingy a barvy */
#pq-main .pq-btn,
#pq-header .pq-btn,
#pq-footer .pq-btn {
  font-family: var(--font-body) !important;
  text-decoration: none !important;
}

/* === Sekce komunita — recenze ===
 * Styly pro .pq-community__reviews > .quote
 * Navazuje na existující: .pq-community, .pq-community__grid,
 * .pq-community__card — v styles.css beze změny.
 * ============================================================ */
 
/* Kontejner všech citátů — vertikální stack s mezerami */
.pq-community__reviews {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
 
/* Jednotlivý citát — stejný styl jako původní .pq-community__quote */
.pq-community__reviews .quote {
  padding: var(--space-5) var(--space-6);
  background: rgb(255 255 255 / .06);
  border: var(--border-width) var(--border-style) rgb(255 255 255 / .14);
  border-radius: var(--radius-lg);
  /* Jemný hover — lehké zvýraznění při čtení */
  margin-block-end: var(--space-5); /* fallback kdyby flex gap nefungoval */
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pq-community__reviews .quote:hover {
  background: rgb(255 255 255 / .10);
  border-color: rgb(255 255 255 / .22);
}
 
/* Hvězdičky */
.pq-community__reviews .stars {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  color: var(--color-primary); /* značková žlutá */
  letter-spacing: .05em;
  line-height: 1;
}
 
/* Text recenze */
.pq-community__reviews .quote > p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-invert);
  line-height: var(--line-height-base);
}
 
/* Autor — jméno a datum */
.pq-community__reviews .quote > footer {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-style: normal; /* <footer> není kurzíva */
}
 
.pq-community__reviews .quote:last-child { margin-block-end: 0; }
 

/* === Sekce: O nás — doplněk k existujícím stylům ===
 * Přidej za stávající .pq-about__cta blok v styles.css.
 * Existující pravidla (.pq-about__grid, __media, __img,
 * __license, __text, __cta) zůstávají beze změny.
 * ===================================================== */

/* Druhý odstavec textu — stejný styl jako první */
.pq-about__text + .pq-about__text {
  margin-block-start: calc(-1 * var(--space-2));
}

/* Fakta — horizontální řada pod textem */
.pq-about__facts {
  display: flex;
  flex-wrap: nowrap; /* nikdy nezalamuj — 3 sloupce vždy */
  gap: 0;
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pq-about__fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1 1 0;        /* stejná šířka pro všechny — žádný rozběh pro "5 000+" */
  min-width: 0;       /* zabraňuje přetékání dlouhého čísla */
  padding: var(--space-6) var(--space-3);
  text-align: center;
  border-inline-end: var(--border-width) var(--border-style) var(--color-border);
}
.pq-about__fact:last-child { border-inline-end: none; }

.pq-about__fact-value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);   /* 20px — výrazné ale nepřebíjí text */
  font-weight: var(--font-weight-black);
  line-height: 1;
  color: var(--color-secondary);
  white-space: nowrap;         /* "5 000+" se nesmí lámat */
}

.pq-about__fact-label {
  font-size: var(--text-sm);   /* 14px — čitelné bez kapitálek */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  line-height: var(--line-height-tight);
}

/* CTA — větší odsazení po faktech */
.pq-about__facts + .pq-about__cta {
  margin-block-start: var(--space-8);
}





/* Fix: guide linky nepřetékají na úzkých viewportech — grid blowout prevence */
.pq-guide__link {
  min-width: 0;      /* grid item musí smět zmenšit pod min-content */
  overflow: hidden;
}
.pq-guide__link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pq-guide__link span {
  min-width: 0;
  word-break: break-word;   /* zalamuje, nepřetéká */
}

.pq-guide { overflow: hidden; } /* nouzový fallback */




/* === Sekce: O nás — doplněk k existujícím stylům ===
 * Přidej za stávající .pq-about__cta blok v styles.css.
 * Existující pravidla (.pq-about__grid, __media, __img,
 * __license, __text, __cta) zůstávají beze změny.
 * ===================================================== */
 
/* Druhý odstavec textu — stejný styl jako první */
.pq-about__text + .pq-about__text {
  margin-block-start: calc(-1 * var(--space-2));
}
 
/* Fakta — 2×2 mřížka */
.pq-about__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
 
.pq-about__fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  border-inline-end: var(--border-width) var(--border-style) var(--color-border);
  border-block-end: var(--border-width) var(--border-style) var(--color-border);
}
.pq-about__fact:nth-child(even)      { border-inline-end: none; }
.pq-about__fact:nth-last-child(-n+2) { border-block-end: none; }
 
.pq-about__fact-value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-black);
  line-height: 1;
  color: var(--color-secondary);
  white-space: nowrap;
}
 
.pq-about__fact-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  line-height: 1.3;
}
 
/* CTA — větší odsazení po faktech */
.pq-about__facts + .pq-about__cta {
  margin-block-start: var(--space-8);
}


/*  homne fix  */

/* 2. Oprava tlačítek (CTA) – aby nebyla žlutá */
.pq-btn--primary, 
.pq-header__cta, 
.pq-tours__show-more-btn {
  background-color: var(--logo-turq) !important;
  color: #ffffff !important;
}

.pq-btn--primary:hover {
  background-color: var(--logo-blue) !important;
}

/* 3. Oprava barvy v kartách výletů (odstranění font tagů v HTML) */
/* Poznámka: Máte v HTML vloženy tagy <font color="...">, které přebíjejí CSS. 
   Toto pravidlo vynutí barvu titulků v kartách. */
.pq-tour__link {
  color: var(--logo-turq) !important;
  font-weight: 600;
}

/* ==========================================================================
   HERO — kompletní styling na JEDNOM místě (přesunuto z critical.css).
   Mobile-first: základ = úzký mobil, pak breakpointy nahoru.
   ========================================================================== */

/* --- Overlay --- */
.pq-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Vnitřní container --- */
.pq-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1 1 100%; /* flex-item se jinak smrští na obsah → text nebyl na plnou šířku */
  width: 100%;
  padding-block: var(--space-10) var(--space-8);
  padding-inline: var(--space-4); /* přebíjí .pq-container padding → text sahá ke krajům */
}

/* --- Obsah (text blok) --- */
.pq-hero__content {
  width: 100%;
  max-width: 100%;
}
.pq-hero__content .pq-btn { text-shadow: none; }

/* --- Eyebrow --- */
.pq-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  /* color: var(--color-secondary); */
  color: #fff;
}
.pq-hero__eyebrow { color: var(--color-primary); }

/* --- Nadpis --- */
.pq-hero__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  color: var(--color-secondary-dark); /* modrá z loga */
}
.pq-hero__title em { font-style: normal; color: var(--color-primary); } /* zelená z loga */

/* --- Perex s ikonou --- */
.pq-hero__lead-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.pq-hero__lead-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.pq-hero__lead-icon-svg { color: #fff; width: 1.25rem; height: 1.25rem; }
.pq-hero__lead {
  max-width: 100%;
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text);
}
.pq-hero__lead strong { color: var(--color-secondary-dark); }

/* --- Claim --- */
.pq-hero__claim {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: .02em;
  color: var(--color-primary);
}
.pq-hero__claim em { font-style: italic; font-weight: var(--font-weight-normal); color: var(--color-primary); }
.pq-hero__claim sup { font-size: .6em; vertical-align: super; }

/* --- CTA --- */
.pq-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pq-hero .pq-btn--ghost-invert {
  border-color: var(--color-text);
  color: var(--color-text);
}
.pq-hero .pq-btn--ghost-invert:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ==========================================================================
   ÚZKÝ MOBIL (≤700px): obrázek nahoře, text vycentrovaný a na plnou šířku dole.
   ========================================================================== */
@media (max-width: 700px) {
  /* Column layout: obsah plnou šířku, svisle, sražený DOLŮ. */
  .pq-hero {
    min-height: 88vh;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    background: var(--color-bg); /* světlé pozadí pod fotkou → text splyne */
    padding-bottom: var(--space-8) !important;
  }
  /* Obrázek pokrývá jen horní ~62 % hera a dole měkce mizí do světlého pozadí. */
  .pq-hero__bg {
    inset: 0 0 auto 0;
    height: 62%;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  }
  /* Overlay zbytečný — přechod dělá maskovaný obrázek nad světlým pozadím. */
  .pq-hero__overlay { background: none; }
  /* inner nesmí růst; sedí dole, text částečně na fotce, částečně pod ní. */
  .pq-hero__inner { flex: 0 0 auto; padding-block: var(--space-6) var(--space-4); }
  .pq-hero__badge { margin: 0; }
  .pq-hero__content { text-align: center; text-shadow: none; }
  .pq-hero__lead-wrap { justify-content: center; }
  .pq-hero__ctas { justify-content: center; }
  /* Ikona bubliny u perexu se na mobilu neukazuje. */
  .pq-hero__lead-icon { display: none; }
}

/* ==========================================================================
   ŠIRŠÍ NEŽ MOBIL (≥701px): text vlevo, měkká záře za textem, pravá strana čistá.
   ========================================================================== */
@media (min-width: 701px) {
  .pq-hero__inner { padding-block: var(--space-16) var(--space-12); }
  .pq-hero__content { max-width: 560px; }
  .pq-hero__title-line { display: block; white-space: nowrap; }
  .pq-hero__title em { display: block; white-space: nowrap; }
  .pq-hero__lead { font-size: var(--text-lg); max-width: 44ch; }
  .pq-hero__overlay {
    background: radial-gradient(
      ellipse 62% 95% at 24% 50%,
      rgb(var(--color-overlay-light-rgb) / .92) 0%,
      rgb(var(--color-overlay-light-rgb) / .78) 32%,
      rgb(var(--color-overlay-light-rgb) / .40) 55%,
      rgb(var(--color-overlay-light-rgb) / 0) 72%
    );
  }
}
@media (min-width: 1024px) {
  .pq-hero__inner { padding-block: var(--space-20) var(--space-16); }
  .pq-hero__content { max-width: 620px; }
}

.pq-community {
  background-color: var(--logo-blue);
}

/* 5. Odstranění žlutého "nádechu" z filtrů */
.pq-tours__chip--active {
  background-color: var(--logo-turq) !important;
  color: #ffffff !important;
}


.pq-hero .pq-btn--ghost-invert:hover {
    background: var(--logo-turq) !important;
    border-color: var(--logo-turq) !important;
    color: var(--color-bg);
}

.pq-utility__link {
  color: #ffffff !important;
}

    .pq-utility__contact:hover {
        color: #ffffff !important;
            text-decoration: underline;
    }

.pq-trust__icon {
  color: #ffffff !important;
}
.pq-trust__label {
  color: var(--color-primary) !important;
}



.pq-community__reviews .quote > footer,
.pq-community__reviews .stars {   
    color: var(--color-zluta);    
}


.pq-about__license {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Mezera mezi ikonou a textem */
    padding: 8px 16px;
    background-color: var(--logo-turq); /* Tyrkysová */
    color: #ffffff;
    border-radius: var(--radius-lg);
    text-decoration: none; /* Odstraní podtržení */
    transition: background-color 0.3s ease;
    font-weight: 500;
    cursor: pointer;
}

.pq-about__license:hover {
    background-color: var(--logo-blue); /* Ztmavnutí na modrou při hoveru */
    color: #ffffff;
}

/* Ošetření ikony uvnitř odkazu */
.pq-about__license .pq-icon {
    fill: currentColor; /* Ikona přebírá barvu textu */
}



/* =========================================================================
 * SEKCE: SLUŽBY (section-services.php)
 * Přidat do styles.css za sekci „Sekce: O nás"
 * BEM, mobile-first, výhradně tokeny [0.4], [CP-12]
 * ===================================================================== */

.pq-services {
  background: var(--color-bg-alt);
}

/* Grid karet — 1 sloupec → 2 → 3 (4 pokud >= 980px a je 8 položek) */
.pq-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

@media (min-width: 1100px) {
  /* 4 sloupce jen pokud máme >= 7 karet — jinak 3 sloupce lépe vyplní grid */
  .pq-services__grid:has(.pq-service:nth-child(7)) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Karta ── */
.pq-service {
  display: flex; /* list-item → flex kvůli stretch výšky */
}

/* [CP-12] defensive hidden */
.pq-service[hidden] { display: none !important; }

.pq-service__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.pq-service__card:hover,
.pq-service__card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

/* ── Ikona ── */
.pq-service__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-block-end: var(--space-5);
  background: linear-gradient(
    135deg,
    rgb(var(--color-overlay-rgb) / .06),
    rgb(var(--color-overlay-rgb) / .02)
  );
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.pq-service__icon {
  width: 26px;
  height: 26px;
}

/* ── Tělo karty ── */
.pq-service__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0; /* grid blowout fix */
}

.pq-service__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.pq-service__link {
  color: var(--color-text);
  text-decoration: none;
}

/* Celá karta klikací */
.pq-service__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pq-service__link:hover,
.pq-service__link:focus-visible {
  color: var(--color-secondary);
  outline: none;
}

.pq-service__link:focus-visible::after {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.pq-service__perex {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  /* Omezit na 3 řádky — zabrání roztahování různě vysokých karet */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Patička karty ── */
.pq-service__foot {
  display: flex;
  align-items: center;
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width) dashed var(--color-border);
}

.pq-service__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  /* Je to span, ne odkaz — odkaz je ::after na .pq-service__link */
  pointer-events: none;
}

/* Šipka se při hoveru na kartu posune doprava */
.pq-service__card:hover .pq-service__more .pq-icon,
.pq-service__card:focus-within .pq-service__more .pq-icon {
  transform: translateX(3px);
  transition: transform var(--transition-fast);
}


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

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

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

.pq-services__footer {
  margin-block-start: var(--space-8);
  text-align: center;
}

/* ============================================================
   PAGE TEMPLATES — O NÁS & KOMUNITA
   ============================================================ */

/* ── Page hero — tmavý pruh nad obsahem (sdílený pro /o-nas/ i /komunita/) ── */
.pq-page-hero {
  background-color: var(--color-secondary-dark);
  color: var(--color-text-invert);
  /* .pq-main section přidá padding-block: var(--space-16) — to stačí */
}

.pq-eyebrow--invert { color: var(--color-primary); }

.pq-page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  color: var(--color-text-invert);
  margin: var(--space-4) 0 var(--space-6);
}

.pq-page-hero__lead {
  font-size: var(--text-lg);
  line-height: var(--line-height-base);
  color: var(--color-text-invert-muted);
  max-width: 640px;
  margin: 0;
}

/* Hero s tlačítkem (komunita) */
.pq-page-hero .pq-btn { margin-block-start: var(--space-8); }

/* ── /o-nas/ — licence badge: statická pozice na subpage ── */
.pq-about--page .pq-about__license {
  position: static;
  display: inline-flex;
  margin-block-start: var(--space-5);
}

/* ── /o-nas/ — střídání pozadí sekcí: hodnoty a komunikace na světlém bg ── */
#znalosti-phu-quocu-a-zkusenosti-jirka-tours,
#komunikace-a-podpora {
  background: var(--color-bg);
}

/* ── /o-nas/ — hodnoty: 6 karet ve 3 sloupcích (přebíjí .pq-services výchozí 4) ── */
@media (min-width: 1100px) {
  .pq-onas-values__grid6 { grid-template-columns: repeat(3, 1fr); }
}

/* ── /o-nas/ — karty hodnot nejsou klikací: zakáž hover efekt ── */
.pq-onas-values .pq-service__card { cursor: default; }
.pq-onas-values .pq-service__card:hover,
.pq-onas-values .pq-service__card:focus-within {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

/* ── /o-nas/ — sekce Mise (.pq-community): centrovaný text ── */
.pq-onas-mission .pq-container { max-width: 760px; text-align: center; }
.pq-onas-mission__text {
  font-size: var(--text-xl);
  line-height: var(--line-height-loose);
  color: var(--color-text-invert-muted);
  margin-block-start: var(--space-5);
}

/* ── /o-nas/ — sekce Komunikace: 2 sloupce text + obrázek ── */
.pq-onas-comm__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 900px) {
  .pq-onas-comm__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

.pq-onas-comm__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* ── /o-nas/ — sekce CTA: centrovaný text + kontaktní grid ── */
.pq-onas-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 860px) {
  .pq-onas-contact__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

.pq-onas-contact__cta p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-8);
}

.pq-onas-contact__info {
  font-style: normal;
  background: var(--color-bg-alt);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.pq-onas-contact__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0;
}

.pq-onas-contact__dl dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding-block-start: 1px;
}

.pq-onas-contact__dl dd {
  margin: 0;
  font-size: var(--text-sm);
}

.pq-onas-contact__dl a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

.pq-onas-contact__dl a:hover { text-decoration: underline; }

/* Hero s tlačítkem (komunita) — mezera pod perexem */
.pq-page-hero .pq-btn { margin-block-start: var(--space-8); }

/* ── /o-nas/ — sekce Příběh: .pq-about__* jsou plně dostupné,
   přidáme jen modifier pro subpage (bez záporných absolutních pozic licence) ── */
.pq-about--page .pq-about__license {
  position: static;
  display: inline-flex;
  margin-block-start: var(--space-5);
}

/* ── /o-nas/ — sekce Hodnoty: .pq-services a .pq-service__card reused,
   potlačíme hover-link chování (karty nejsou klikací) ── */
.pq-onas-values .pq-service__card { cursor: default; }
.pq-onas-values .pq-service__card:hover,
.pq-onas-values .pq-service__card:focus-within {
  transform: none;
  box-shadow: none;
}

/* ── /o-nas/ — sekce Mise: reuse .pq-community (gradient bg),
   centrovaný text ── */
.pq-onas-mission .pq-container {
  max-width: 760px;
  text-align: center;
}

.pq-onas-mission .pq-section-head__title { color: var(--color-text-invert); }

.pq-onas-mission__text {
  font-size: var(--text-xl);
  line-height: var(--line-height-loose);
  color: var(--color-text-invert-muted);
  margin-block-start: var(--space-6);
}

/* ── /o-nas/ — tlačítka pod nadpisem CTA ── */
.pq-onas-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ── /komunita/ — WA sekce ── */
.pq-komunita-wa__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 900px) {
  .pq-komunita-wa__grid { grid-template-columns: 1fr 340px; gap: var(--space-16); }
}

.pq-komunita-wa__benefits {
  list-style: none;
  margin: var(--space-6) 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pq-komunita-wa__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.pq-komunita-wa__benefits .pq-icon--sm {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 2px;
}

/* ── /komunita/ — recenze grid ── */
.pq-komunita-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-block-start: var(--space-10);
}

@media (min-width: 720px) {
  .pq-komunita-reviews__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Recenze na světlém pozadí (ne dark .pq-community) — přebijeme barvy */
.pq-komunita-reviews__grid .pq-community__quote {
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
}

.pq-komunita-reviews__grid .pq-community__quote p { color: var(--color-text); }
.pq-komunita-reviews__grid .pq-community__quote-author { color: var(--color-secondary); }
.pq-komunita-reviews__grid .stars { color: var(--color-accent); font-size: var(--text-base); margin-block-end: var(--space-2); }

/* ── /komunita/ — 3 kroky: reuse .pq-how__steps ale BEZ counter ── */
.pq-komunita-how__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
}

@media (min-width: 720px) {
  .pq-komunita-how__steps { grid-template-columns: repeat(3, 1fr); }
}

.pq-komunita-how__step {
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
}

.pq-komunita-how__num {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  margin-block-end: var(--space-5);
  background: var(--color-secondary-dark);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-black);
  color: var(--color-text-invert);
}

.pq-komunita-how__step h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

.pq-komunita-how__step p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.pq-komunita-how__cta { margin-block-start: var(--space-12); text-align: center; }

/* ── /komunita/ — sekce Výlety (tmavá): reuse .pq-community bg ── */
.pq-komunita-tours .pq-container {
  text-align: center;
  max-width: 640px;
}

.pq-komunita-tours .pq-section-head__title { color: var(--color-text-invert); }

.pq-komunita-tours__lead {
  font-size: var(--text-lg);
  color: var(--color-text-invert-muted);
  margin: var(--space-4) 0 var(--space-8);
}

/* ══════════════════════════════════════════════════════
   /pruvodce-phu-quoc/ — stránka Průvodce
   ══════════════════════════════════════════════════════ */

/* 2. Úvod */
.pq-guide-intro {
  background: var(--color-bg-alt);
  padding-block: var(--space-12);
}
.pq-guide-intro__inner { max-width: 760px; }
.pq-guide-intro__text {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.pq-guide-intro__text:last-child { margin-bottom: 0; }

/* 3. Dlaždice kategorií */
.pq-guide-cats { padding-block: var(--space-16); }

.pq-guide-cats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .pq-guide-cats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pq-guide-cats__grid { grid-template-columns: repeat(3, 1fr); }
}

.pq-guide-cat__card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-6);
  height: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.pq-guide-cat__card:hover,
.pq-guide-cat__card:focus-within {
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.08);
  border-color: var(--color-primary);
}

.pq-guide-cat__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.pq-guide-cat__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-bg-alt);
  border-radius: 10px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.pq-guide-cat__card:hover .pq-guide-cat__icon-wrap,
.pq-guide-cat__card:focus-within .pq-guide-cat__icon-wrap {
  background: var(--color-primary);
}
.pq-guide-cat__icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  transition: color 0.2s ease;
}
.pq-guide-cat__card:hover .pq-guide-cat__icon,
.pq-guide-cat__card:focus-within .pq-guide-cat__icon {
  color: var(--color-text-invert);
}

.pq-guide-cat__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--line-height-tight);
}

.pq-guide-cat__perex {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin: 0 0 var(--space-5);
}

.pq-guide-cat__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
}
.pq-guide-cat__link-text {
  position: relative;
}
.pq-guide-cat__link-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.pq-guide-cat__card:hover .pq-guide-cat__link-text::after,
.pq-guide-cat__card:focus-within .pq-guide-cat__link-text::after {
  transform: scaleX(1);
}
.pq-guide-cat__arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.pq-guide-cat__card:hover .pq-guide-cat__arrow,
.pq-guide-cat__card:focus-within .pq-guide-cat__arrow {
  transform: translateX(3px);
}

/* Celá karta klikatelná — odkaz se roztáhne přes celou plochu. */
.pq-guide-cat__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.pq-guide-cat__card { position: relative; }

/* 4. CTA výlety — reuse .pq-community (tmavé pozadí) */
.pq-guide-cta .pq-container { text-align: center; max-width: 700px; }
.pq-guide-cta__inner { text-align: center; }
.pq-guide-cta__text {
  font-size: var(--text-lg);
  color: var(--color-text-invert-muted);
  margin: var(--space-4) 0 var(--space-8);
}
.pq-guide-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* 5. FAQ */
.pq-guide-faq {
  background: var(--color-bg-alt);
  padding-block: var(--space-16);
}

.pq-guide-faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pq-guide-faq__item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-6);
}

.pq-guide-faq__q {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.pq-guide-faq__a {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin: 0;
}


body.archive:not(.home)   #pq-main h1{
  color: #fff;
}