/* ============================================================
   nkjk.cz/pobyty — pobyty.css
   Styly jen pro stránku pobytů. Načítá se PO style.css,
   základ (proměnné, topbar, hero, sec-head, formuláře, tlačítka,
   footer) dědí odtamtud. Grafická identita v4.
   ============================================================ */

/* 1. Hero (delší titulek než na index, menší stupeň písma, ať drží dva řádky) */

.hero__h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  max-width: 980px;
}

/* Hero stats (reuse .stats komponenty uvnitř hero) */

.hero-stats {
  margin-top: 56px;
  max-width: 980px;
  /* Termín je delší údaj, dostává širší sloupec, ať se datum
     nezalamuje do tří řádků (Laco 19. 7.) */
  grid-template-columns: 1.7fr 1.1fr 0.7fr;
}

.hero-stats .stat__value {
  font-size: clamp(22px, 2.6vw, 30px);
  text-wrap: balance;
}

/* Termín je nejpodstatnější úvodní údaj, největší ze stats (Laco 19. 7.) */
.hero-stats .stat--termin .stat__value {
  font-size: clamp(30px, 3.8vw, 46px);
  color: var(--midnight);
}

.hero__tagline {
  border-top: none;
  padding-top: 0;
  margin-top: 40px;
  max-width: 880px;
}

/* Big promise pod taglinem (Aniččin vstup 11. 7.): co rodič dostane, ne jen rámec práce */
.hero__promise {
  margin: 14px 0 0;
  max-width: 880px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

/* 1b. Úzké místo (nečíslovaná sekce hned za hero, přidáno 1. 8. po callu 30. 7.).
   Pojmenovaný problém dřív, než se cokoli nabízí. Světle šedý pruh oddělený
   hairlinou, žádná další baby blue plocha (ta patří ceně). */

.uzke-misto {
  padding: 72px 0;
  background: var(--bg-section);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.uzke-misto__h2 {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--midnight-dk);
  text-wrap: balance;
}

.uzke-misto__body {
  margin-top: 28px;
  max-width: 680px;
}

.uzke-misto__body p {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

.uzke-misto__body p:last-child {
  margin-bottom: 0;
}

.uzke-misto__close {
  margin: 32px 0 0;
  max-width: 680px;
  padding-top: 20px;
  border-top: 0.5px solid rgba(44, 62, 107, 0.35);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--midnight-dk);
}

@media (max-width: 720px) {
  .uzke-misto {
    padding: 56px 0;
  }
}

/* 2. Galerie fotek chalupy (sekce 01 / víkend) */

.gallery {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery__item {
  margin: 0;
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: var(--hairline);
  border-radius: var(--radius-card);
  cursor: zoom-in;
}

/* Lightbox: kliknutí na fotku chalupy otevře větší náhled (Laco 19. 7.) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(13, 13, 13, 0.92);
  cursor: zoom-out;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-card);
}

.gallery__item figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* 3. Co to je / co to není (sekce 01, dva sloupce) */

.is-isnt {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.not-list {
  margin-top: 0;
}

.not-list__h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--midnight);
}

.not-list .bullet-list {
  margin-top: 18px;
}

/* 4. Program po dnech (sekce 02) */

.days {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.day {
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--bg-section);
  padding: 24px 22px 22px;
}

.day__head {
  border-bottom: var(--hairline-strong);
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.day__date {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--midnight);
}

.day__h3 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

/* Výsledková věta dne (filtr „výsledek, ne proces", 17. 7.).
   Používá zatím jen náhled verze 2. */
.day__result {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--midnight);
}

.day__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.day__list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 9px 0;
  align-items: baseline;
}

.day__list li + li {
  border-top: var(--hairline);
}

.day__time {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--text-subtle);
}

.day__what {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.program-notes {
  margin-top: 48px;
}

/* 5. Co si odvezete (sekce 03), stejný vzor jako .layers na index */

.takeaways {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.takeaway {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  padding: 22px 0;
  align-items: start;
}

.takeaway:nth-child(n+3) {
  border-top: var(--hairline);
}

.takeaway__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--midnight);
  padding-top: 6px;
}

.takeaway__h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}

.takeaway__body {
  margin: 8px 0 0;
  max-width: 440px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

.workbook-note {
  margin: 40px 0 0;
  max-width: 640px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

/* Navaznost na komunitu NKJK (menší baby blue panel, povolený vedle
   velké plochy ceny, identita v4 sekce 2). Text vždy tmavý. */
.navaznost {
  margin-top: 40px;
  max-width: 720px;
  background: var(--baby-blue);
  border-radius: var(--radius-card);
  padding: 28px 32px;
}

.navaznost__h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--midnight-dk);
}

.navaznost__body {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.navaznost__body a {
  color: var(--midnight-dk);
  font-weight: 600;
  border-bottom: 0.5px solid rgba(26, 37, 71, 0.5);
}

/* 6. Cena (sekce 04), jediná velká baby blue plocha stránky.
   Text vždy tmavý (identita v4, sekce 2). */

.section--cena {
  background: var(--baby-blue);
}

.price {
  margin-top: 40px;
  max-width: 880px;
}

.price__main {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 0.5px solid rgba(13, 13, 13, 0.25);
}

.price__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 7vw, 84px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  /* Bez uppercase, „Kč" se píše s malým č */
  color: var(--midnight-dk);
}

.price__unit {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--midnight-dk);
}

/* Shrnutí hodnoty pod cenou (call 30. 7.: v ceně je toho víc, než je na první pohled vidět) */
.price__lede {
  margin: 20px 0 0;
  max-width: 620px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.price__cols {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.price__h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--midnight-dk);
}

.price__col .bullet-list {
  margin-top: 18px;
}

.price__col .bullet-list li {
  color: var(--text);
  margin-bottom: 10px;
}

/* 7. Kdo vás víkendem provede (sekce 05) */

.team {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.team-card__photo-wrap {
  margin: 0 0 20px;
}

.team-card__photo {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--hairline);
  border-radius: var(--radius-card);
  filter: grayscale(10%) contrast(0.98);
}

/* Placeholder do doby, než budou fotky Aničky a Lucky.
   Žádné stock fotky (identita v4), jen klidná plocha s iniciálou. */
.team-card__photo-wrap--placeholder {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--bg-section);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card__initial {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 72px;
  color: var(--midnight);
  opacity: 0.35;
}

.team-card__h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}

.team-card__role {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--midnight);
}

.team-card__body {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Odkazy v biu a poznámkách (laco.cz, nkjk.cz): midnight + tenká linka */
.team-card__body a,
.workbook-note a {
  color: var(--midnight);
  border-bottom: 0.5px solid rgba(44, 62, 107, 0.4);
}

.team-card__body a:hover,
.workbook-note a:hover {
  color: var(--midnight-dk);
}

/* 8. Předběžná objednávka (sekce 06), bronze rámeček + bronze tag
   = jediný bronze prvek stránky (klíčový moment konverze, jako
   lead magnet karta na index). */

.rezervace {
  margin-top: 48px;
  max-width: 780px;
  min-height: 0;
  padding: 36px 36px 32px;
  border: 0.5px solid var(--bronze);
}

.rezervace .card__tag {
  color: var(--bronze);
}

.rezervace .form {
  margin-top: 24px;
}

/* 9. Mobile breakpoint */

@media (max-width: 960px) {
  /* Pattern (kostičky) za hero textem na mobilu zhoršuje čitelnost,
     schovat (Aniččina/Lacova připomínka 13. 7.). Platí jen pro tuhle stránku. */
  .hero::before {
    display: none;
  }

  /* Svislé rysky u kraje hero na mobilu vypadají jako ztracené pomlčky
     u textu (Aniččina připomínka 13. 7. a 18. 7.). Na desktopu zůstávají. */
  .hero__ticks {
    display: none;
  }

  /* Čtyři odkazy v navigaci (index má tři) se na úzký displej nevejdou
     ve výchozí velikosti. Zmenšit a povolit zalomení, ať nic nepřetéká. */
  .topbar__row {
    height: auto;
    min-height: 56px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .topbar__nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 14px;
  }

  .topbar__link {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  .gallery {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .is-isnt {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }

  .days {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .takeaways {
    grid-template-columns: 1fr;
    column-gap: 0;
    margin-top: 32px;
  }

  .takeaway:nth-child(n+2) {
    border-top: var(--hairline);
  }

  .price__cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .team {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }

  .rezervace {
    padding: 28px 24px 24px;
  }

  /* Delší CTA text na úzkém mobilu smí zalomit */
  .form--pobyt .btn span {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}