/* ==========================================================================
   components.css — komponenty (BEM-lite). Barvy a rozměry jen z tokens.css.
   ========================================================================== */

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }

.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }

/* Akcentové tlačítko – teplá barva padáku. Max. jedno na obrazovku. */
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-hover); }

.btn--ghost { border-color: currentColor; color: var(--primary); background: transparent; }
.btn--ghost-light { border-color: var(--text-on-photo); color: var(--text-on-photo); background: var(--glass); }
.btn--ghost-light:hover { background: var(--glass-hover); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- Header + navigace ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.brand img { width: 2.75rem; height: auto; }

.nav-toggle {
  display: none;              /* zobrazí se jen s JS na mobilu (viz níže) */
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
}
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }

.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
}
.nav__link {
  display: inline-block;
  padding: var(--space-xs) var(--space-2xs);
  color: var(--text);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.nav__link:hover { color: var(--link); }
.nav__link[aria-current="page"] {
  color: var(--link);
  box-shadow: inset 0 -2px 0 currentColor;
}
.nav__cta { margin-left: var(--space-xs); }

/* Mobilní menu – jen když běží JS (třída .js na <html>).
   Bez JS je menu prostě vždy viditelné a zalomené (progressive enhancement). */
@media (max-width: 47.99rem) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    flex-basis: 100%;
    display: none;
    padding-bottom: var(--space-md);
  }
  .js .nav.is-open { display: block; }
  .js .nav__list { flex-direction: column; align-items: stretch; }
  .js .nav__link { padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); }
  .js .nav__cta { margin: var(--space-sm) 0 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(92svh, 52rem);
  padding-block: var(--space-3xl) var(--space-2xl);
  color: var(--text-on-photo);
  overflow: hidden;
}
.hero--compact { min-height: min(55svh, 30rem); }
.hero__media, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after {               /* gradient pro čitelnost textu (WCAG AA) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--photo-overlay);
}
.hero__content { max-width: 40rem; }
.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}
.hero__title { margin-top: var(--space-xs); text-shadow: var(--photo-text-shadow); }
.hero__lead { margin-top: var(--space-md); font-size: var(--fs-lg); max-width: 34rem; }
.hero .btn-row { margin-top: var(--space-xl); }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-xl);
  font-size: var(--fs-sm);
}
.hero__facts li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.hero__facts svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Mraky (dekorace) ---------- */
.clouds {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.clouds__cloud {
  position: absolute;
  width: var(--w, 18rem);
  top: var(--top, 10%);
  left: -30%;
  color: var(--cloud);
  opacity: var(--o, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .clouds__cloud { animation: drift var(--drift-dur) linear infinite; animation-delay: var(--delay, 0s); }
}
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(170vw); }
}

/* ---------- Nadpis sekce ---------- */
.section-head { max-width: 42rem; margin-bottom: var(--space-2xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link);
}
.section-head h2 { margin-top: var(--space-xs); }
.section-head p { margin-top: var(--space-md); color: var(--text-muted); font-size: var(--fs-lg); }

/* Dekorativní oddělovač – trajektorie letu */
.flight-path { width: 100%; max-width: 14rem; height: auto; margin: var(--space-md) auto 0; color: var(--sky-300); }

/* ---------- Karty ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--link);
}
.card__icon svg { width: 2rem; height: 2rem; }
.card__text { color: var(--text-muted); }

/* Karta s fotkou nahoře (paramotor vs. UL) */
.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); }
.card__media { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.check-list { display: grid; gap: var(--space-xs); padding: 0; list-style: none; }
.check-list li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.check-list svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.2em; color: var(--link); }

/* ---------- Ceník ---------- */
.pricing { --grid-min: 15rem; align-items: stretch; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card--featured { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.price-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.price-card__name { font-size: var(--fs-h3); }
.price-card__duration {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.price-card__duration svg { width: 1.1rem; height: 1.1rem; }
.price-card__price {
  font-family: var(--font-heading);
  font-size: var(--fs-price);
  font-weight: var(--fw-medium);
  line-height: 1.1;
}
.price-card__price small { font-size: var(--fs-base); font-weight: var(--fw-regular); color: var(--text-muted); }
.price-card__desc { color: var(--text-muted); flex-grow: 1; }
.price-card .btn { margin-top: var(--space-sm); }
.pricing-note { margin-top: var(--space-xl); text-align: center; color: var(--text-muted); }

/* ---------- Postup (kroky) ---------- */
.steps { counter-reset: step; --grid-min: 13rem; }
.step { counter-increment: step; position: relative; padding-top: var(--space-2xl); }
.step::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
}
.step h3 { font-size: var(--fs-lg); }
.step p { margin-top: var(--space-xs); color: var(--text-muted); }

/* ---------- Dárkový certifikát ---------- */
.gift {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 56rem) {
  .gift { grid-template-columns: 1fr 1fr; }
}
/* Ukázka certifikátu – anonymní vzor jako obrázek, lehce natočený jako položený papír */
.voucher { display: grid; gap: var(--space-sm); }
.voucher__img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: rotate(-2deg);
}
.voucher__caption {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Pilot / důvěra ---------- */
.trust {
  display: grid;
  gap: var(--space-xl);
  --grid-min: 12rem;
}
.stat { text-align: center; }
.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--link);
}
.stat__label { display: block; margin-top: var(--space-xs); color: var(--text-muted); }

/* ---------- Fotky / zástupné plochy ---------- */
.photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Zástupná plocha pro fotku, která ještě nebyla vybraná (TODO) */
.placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--placeholder-from), var(--placeholder-to));
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--space-md);
}
.placeholder--flush { border-radius: 0; }
.placeholder svg { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--space-xs); opacity: 0.6; }

/* ---------- Galerie ---------- */
.gallery {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  grid-auto-flow: dense;
}
.gallery__item {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
}
/* Široká fotka = velká dlaždice 2×2 se stejným poměrem 4:3 jako malé dlaždice, takže přesně
   lícuje se dvěma řádky. Fotka se do plochy jen "vlije" (absolute) a nemění výšku řádků. */
.gallery__item--wide { grid-column: span 2; grid-row: span 2; }
.gallery__item--wide picture,
.gallery__item--wide img { position: absolute; inset: 0; }
@media (max-width: 30rem) {
  .gallery__item--wide { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease-out);
}
.gallery__item picture { height: 100%; }   /* aby img s height:100% vyplnil dlaždici i u fotek na výšku */
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item .placeholder { aspect-ratio: auto; height: 100%; border-radius: 0; }

/* ---------- Lightbox (<dialog>) ---------- */
.lightbox {
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cloud);
}
.lightbox::backdrop { background: var(--lightbox-backdrop); }
.lightbox__figure {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--space-2xl) var(--space-md);
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100svh - 8rem);
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox__caption { margin-top: var(--space-sm); text-align: center; font-size: var(--fs-sm); opacity: 0.85; }
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--glass);
  color: var(--cloud);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover { background: var(--glass-hover); }
.lightbox__btn svg { width: 1.5rem; height: 1.5rem; }
.lightbox__btn--close { top: var(--space-md); right: var(--space-md); }
.lightbox__btn--prev { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: var(--space-md); top: 50%; transform: translateY(-50%); }

/* ---------- FAQ (<details>, funguje bez JS) ---------- */
.faq { display: grid; gap: var(--space-sm); }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--link);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 var(--space-lg) var(--space-lg); color: var(--text-muted); }
.faq__answer > * + * { margin-top: var(--space-sm); }

/* ---------- Info dlaždice (počasí, časy) ---------- */
.info-tiles { --grid-min: 12rem; }
.info-tile {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-lg);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.info-tile svg { width: 2rem; height: 2rem; flex: none; color: var(--link); }
.info-tile strong { display: block; font-family: var(--font-heading); font-weight: var(--fw-medium); }
.info-tile span { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Kontakt ---------- */
.contact-list { display: grid; gap: var(--space-md); padding: 0; list-style: none; }
.contact-list li { display: flex; gap: var(--space-md); align-items: center; }
.contact-list__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--link);
}
.contact-list__icon svg { width: 1.5rem; height: 1.5rem; }
.contact-list__label { display: block; font-size: var(--fs-sm); color: var(--text-muted); }
.contact-list a { font-size: var(--fs-lg); font-weight: var(--fw-medium); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.notice {
  padding: var(--space-lg);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

/* ---------- CTA pás ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sky-700), var(--sky-900));
  color: var(--cloud);
  text-align: center;
}
.cta-band h2 { color: var(--cloud); }
.cta-band p { margin: var(--space-md) auto 0; max-width: 36rem; opacity: 0.9; }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-xl); }

/* ---------- Two-column split ---------- */
.split { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--sky-900);
  color: var(--sky-100);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--cloud); }
.site-footer__grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer h2 { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--cloud); margin-bottom: var(--space-sm); }
.site-footer ul { padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.site-footer__brand img { width: 3.5rem; margin-bottom: var(--space-sm); }
.site-footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--footer-divider);
  opacity: 0.8;
}

/* ---------- Scroll reveal ---------- */
/* Prvky se skrývají jen když běží JS – bez JS je vše vidět hned. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* Náhled galerie na úvodní stránce: pevně 2 / 3 sloupce, ať 6 fotek nezanechá díru */
.gallery--teaser { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .gallery--teaser { grid-template-columns: repeat(3, 1fr); } }