/* =========================================================
   STRÁNKA EXPEDICE (rvrodina.cz/expedice)
   Načítá se jen na této stránce. Barvy bere z proměnných webu
   v css/styles.css; navíc má dvě vlastní (zástupná plocha, šedá linka).
   Stránku vytváří nastroje/expedice.py z dat v data/expedice/.
   ========================================================= */

.exp {
  --exp-ph: #D8CABD;      /* zástupná plocha fotky, oddělovače dotazů */
  --exp-line: #7A7779;    /* tenké šedé obrysy */
}
.exp p { max-width: none; margin: 0; }
.exp h1, .exp h2, .exp h3, .exp h4 { margin: 0; }
.exp-wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }  /* stejná šířka jako hlavička a zbytek webu */

/* ---------- Společné prvky ---------- */
.exp h2 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.015em; }
.exp-label { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--brown); }
.exp-note { font-size: 14px; line-height: 22px; color: var(--brown); }
.exp-note a { color: var(--brown); text-underline-offset: 3px; }
.exp-section { padding: 80px 0; }
.exp-section--tight { padding-top: 0; }
.exp-section > .exp-wrap > h2 { margin-bottom: 40px; }
.exp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.exp-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px;
  border-radius: 8px; background: var(--brown-dark); color: var(--white);
  font-size: 17px; font-weight: 700; line-height: 1.25; text-decoration: none;
}
a.exp-btn:hover { background: var(--brown); }
.exp-btn--light { background: var(--mustard); color: var(--brown-dark); }
a.exp-btn--light:hover { background: var(--white); }
/* dokud není rezervační odkaz: neklikatelný štítek s obrysem */
.exp-btn--soon { background: transparent; border: 2px solid var(--brown-dark); color: var(--brown-dark); padding: 8px 26px; }
.exp-btn--soon.exp-btn--light { border-color: var(--mustard); color: var(--mustard); }
.exp-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 16px; font-weight: 700; color: var(--brown-dark); text-underline-offset: 4px; }
.exp-link:hover { color: var(--brown); }
.exp-link--light { color: var(--white); }
.exp-link--light:hover { color: var(--mustard); }

.exp-ph {
  display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; padding: 16px; text-align: center;
  background: var(--exp-ph); border-radius: 20px; overflow: hidden;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--brown);
}
picture.exp-ph { display: block; padding: 0; }
picture.exp-ph img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.exp-ph--hero img { object-position: 50% 75%; }
.exp-ph__ico { width: 28px; height: 28px; stroke-width: 1.6; }
.exp-ico { flex: none; width: 20px; height: 20px; stroke-width: 2; }
.exp-link .exp-ico { width: 24px; height: 24px; stroke-width: 1.8; }
/* kolečka před položkami seznamů: fajfka na tmavém, čárka v obrysu */
.exp-mark { flex: none; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.exp-mark .exp-ico { width: 18px; height: 18px; stroke-width: 2.2; }
.exp-mark--ano { background: var(--brown-dark); color: var(--mustard); }
.exp-mark--ne { border: 1.5px solid var(--exp-line); color: var(--brown); }
/* hořčicová linková ikona v tmavém zaobleném čtverci */
.exp-tileico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--brown-dark); color: var(--mustard); display: flex; align-items: center; justify-content: center; }
.exp-tileico .exp-ico { width: 26px; height: 26px; stroke-width: 1.7; }
/* duny: přes celou šířku, na užší obrazovce je vidět prostřední výřez */
.exp-dunes svg { display: block; width: 100%; height: 160px; }
.exp-oryx { cursor: pointer; }
.exp-card { background: var(--white); border-radius: 20px; padding: 32px; }
.exp-card h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: 18px; }
.exp-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.exp-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 26px; }
/* položka s názvem a popisem (Co je / není v ceně) */
.exp-list__name { font-size: 17px; font-weight: 700; margin-bottom: 2px !important; }

/* ---------- 1. Úvod ---------- */
.exp-hero { padding: 40px 0 64px; }
.exp-hero__grid { display: flex; align-items: center; gap: 62px; }
.exp-hero__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.exp-hero h1 { font-size: 60px; line-height: 66px; font-weight: 700; letter-spacing: -.02em; }
.exp-lead { font-size: 20px; line-height: 32px; }
.exp-hero .exp-actions { padding-top: 4px; }
.exp-ph--hero { flex: 0 0 42.3%; height: 510px; }

/* ---------- 3. Základní údaje ---------- */
.exp-facts { background: var(--brown-dark); }
.exp-facts__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-block: 0; padding: 28px 0; }
.exp-facts dt { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--exp-ph); margin-bottom: 2px; }
.exp-facts dd { margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: var(--white); }
.exp-facts dd.exp-facts__price { color: var(--mustard); }
.exp-dots { display: flex; align-items: center; gap: 6px; height: 28px; }
.exp-dot { width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--mustard); background: var(--mustard); }
.exp-dot--empty { background: transparent; }

/* ---------- 4. Co s námi zažiješ ---------- */
.exp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.exp-ph--tile { height: 222px; border-radius: 16px; margin-bottom: 12px; }
.exp-tile h3 { font-size: 18px; line-height: 26px; font-weight: 700; margin-bottom: 2px; }
.exp-tile p { font-size: 15px; line-height: 23px; color: var(--brown); }

/* ---------- 5. Je to expedice, ne zájezd ---------- */
.exp-two { display: flex; gap: 24px; }
.exp-two .exp-card { flex: 1 1 0; min-width: 0; }

/* ---------- 6. Kdo tě provede ---------- */
.exp-guide { display: flex; align-items: center; gap: 62px; }
.exp-ph--guide { flex: 0 0 34.6%; height: 420px; }
.exp-guide__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.exp-guide__text p:not(.exp-label) { font-size: 17px; line-height: 28px; }
.exp-guide__text .exp-link { align-self: flex-start; min-height: 44px; }

/* ---------- 7. Jak expedice probíhá ---------- */
.exp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.exp-card--icon { padding: 28px; }
.exp-card--icon h3 { font-size: 19px; line-height: 27px; margin: 14px 0; }
.exp-card--icon p { font-size: 16px; line-height: 26px; }

/* ---------- 8. Trasa a program den po dni ----------
   První etapa stojí vedle mapy (stejně vysoké), další etapy mají dvě karty dnů vedle sebe. */
.exp-section > .exp-wrap > h2 + .exp-intro { margin-top: -28px; margin-bottom: 40px; }
.exp-intro { font-size: 18px; line-height: 28px; max-width: 680px !important; }
.exp-stages, .exp-stages__rest { display: flex; flex-direction: column; gap: 56px; }
.exp-stage { display: flex; flex-direction: column; gap: 20px; }
.exp-stage--first { flex-direction: row; align-items: stretch; gap: 24px; }
.exp-stage__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.exp-stage__col .exp-day { flex: 1 1 auto; }
.exp-map { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: var(--white); border-radius: 20px; padding: 24px; }
.exp-ph--map { height: 480px; border-radius: 12px; }
.exp-map__svg { display: block; width: 100%; height: auto; }
.exp-map__legend { display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 14px; line-height: 20px; color: var(--brown); }
/* název etapy, rozsah dnů a za nimi přerušovaná hořčicová linka až k pravému okraji */
.exp-stage__head { display: flex; align-items: center; gap: 14px; }
.exp-stage__head h3 { font-size: 22px; line-height: 30px; font-weight: 700; }
.exp-stage__range { flex: none; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--brown); white-space: nowrap; }
.exp-stage__line { flex: 1 1 0; min-width: 24px; height: 0; border-top: 3px dashed var(--mustard); }
.exp-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* karta dne: kolečko s číslem a datum, název, odstavce, štítky u spodního okraje */
.exp-day { display: flex; flex-direction: column; gap: 12px; background: var(--white); border-radius: 20px; padding: 28px; }
.exp-day__top { display: flex; align-items: center; gap: 12px; }
.exp-day__num {
  flex: none; width: 40px; height: 40px; border-radius: 999px;
  background: var(--brown-dark); color: var(--white); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.exp-day__date { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--brown); white-space: nowrap; }
.exp-day h4 { font-size: 19px; line-height: 27px; font-weight: 700; }
.exp-day p { font-size: 16px; line-height: 26px; }
.exp-day__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.exp-day__tags span { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: var(--sand); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--brown); }
/* poslední den (přílet domů): úzký řádek přes celou šířku */
.exp-day--row { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 28px; }
.exp-day--row h4 { font-size: 18px; line-height: 26px; }

/* sbalený program: řádek "Dál nás čeká…" a tlačítko jsou <summary>, zbylé etapy obsah nativního <details> */
.exp-more summary { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; cursor: pointer; }
.exp-more summary::-webkit-details-marker { display: none; }
.exp-more__next { font-size: 16px; line-height: 26px; color: var(--brown); }
.exp-more__btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border: 1.5px solid var(--brown-dark); border-radius: 8px; font-size: 16px; font-weight: 700; white-space: nowrap;
}
.exp-more summary:hover .exp-more__btn { background: var(--white); }
.exp-more summary:focus-visible { outline: none; }
.exp-more summary:focus-visible .exp-more__btn { outline: 3px solid var(--brown-dark); outline-offset: 3px; }
.exp-more__open, .exp-more[open] .exp-more__closed, .exp-more[open] .exp-more__next { display: none; }
.exp-more[open] .exp-more__open { display: inline; }
.exp-more .exp-stages__rest { margin-top: 56px; }

/* ---------- 9. Na co budeš vzpomínat ---------- */
.exp-memories .exp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.exp-memories__end { margin-top: 24px !important; font-size: 18px; line-height: 30px; max-width: 800px !important; }

/* ---------- 10. Film ---------- */
.exp-film { background: var(--brown); padding: 64px 0; }
.exp-film__grid { display: flex; align-items: center; gap: 62px; }
.exp-film__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.exp-film .exp-label { color: var(--mustard); }
.exp-film h2 { color: var(--white); }
.exp-film__text p:not(.exp-label) { font-size: 17px; line-height: 28px; color: var(--white); }
.exp-film .exp-btn { margin-top: 8px; }
.exp-ph--film { flex: 0 0 40.4%; height: 332px; }

/* ---------- 11. Než se rozhodneš a 13. Dotazy: rozbalovací řádky (nativní details) ---------- */
.exp-faq { border-bottom: 1.5px solid var(--exp-ph); }
.exp-faq details { border-top: 1.5px solid var(--exp-ph); }
.exp-faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 8px 0; font-size: 17px; line-height: 26px; font-weight: 700; cursor: pointer;
}
.exp-faq summary::-webkit-details-marker { display: none; }
.exp-faq__ico { width: 24px; height: 24px; }
.exp-faq details[open] .exp-faq__ico { transform: rotate(180deg); }
.exp-faq summary:hover { color: var(--brown); }
.exp-faq summary:focus-visible { outline: 3px solid var(--brown-dark); outline-offset: 3px; }
.exp-faq__body { display: flex; flex-direction: column; gap: 10px; padding: 0 0 20px; }
.exp-faq__body p, .exp-faq__body li { font-size: 16px; line-height: 26px; }
.exp-faq__body ul { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 4px; }
/* Než se rozhodneš: vyšší řádky s ikonou, text odsazený pod název */
.exp-faq--info summary { justify-content: flex-start; gap: 14px; min-height: 76px; padding: 4px 0; }
.exp-faq--info summary h3 { flex: 1 1 0; font-size: 21px; line-height: 28px; font-weight: 700; }
.exp-faq--info .exp-faq__body { gap: 14px; padding: 4px 0 28px 62px; max-width: 840px; }
.exp-faq--info .exp-faq__body p, .exp-faq--info .exp-faq__body li { font-size: 17px; line-height: 28px; }
/* dotazy: skupiny ve dvou sloupcích */
.exp-faq-cols { display: flex; align-items: flex-start; gap: 48px; }
.exp-faq-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.exp-faq__group h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: 12px; }

/* ---------- 12. Cena ---------- */
.exp-price { display: flex; flex-direction: column; gap: 40px; }
.exp-price__lists { display: flex; align-items: stretch; gap: 24px; }
.exp-price__lists .exp-card { flex: 1 1 0; min-width: 0; }
.exp-price__lists h2 { font-size: 24px; line-height: 32px; letter-spacing: 0; margin-bottom: 20px; }
.exp-price__lists .exp-list { gap: 18px; }
.exp-price__band {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--brown-dark); color: var(--white); border-radius: 20px; padding: 36px;
}
.exp-price__main { flex: none; max-width: 300px; }
.exp-price__label { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--exp-ph); }
.exp-price__amount { font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; margin: 4px 0 !important; }
.exp-price__note { font-size: 15px; line-height: 22px; color: var(--exp-ph); }
.exp-price__rows { flex: 1 1 0; min-width: 0; max-width: 310px; margin: 0; }
.exp-price__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 16px; line-height: 24px; }
.exp-price__rows div + div { border-top: 1px solid var(--brown); }
.exp-price__rows dt { color: var(--exp-ph); }
.exp-price__rows dd { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }
.exp-price__cta { flex: none; max-width: 365px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.exp-price__cta p { font-size: 14px; line-height: 22px; color: var(--exp-ph); text-align: center; }
.exp-price__cta a:not(.exp-btn) { color: var(--exp-ph); text-underline-offset: 3px; }
.exp-price__band :focus-visible { outline-color: var(--mustard); }
/* rezervační tlačítko se nikdy neláme na dva řádky */
.exp-btn { white-space: nowrap; }

/* ---------- 13. Závěrečný pás ---------- */
.exp-final { background: var(--brown-dark); color: var(--white); padding: 56px 0; }
.exp-final .exp-wrap { display: flex; flex-direction: column; gap: 40px; }
.exp-final h2 { color: var(--white); margin-bottom: -28px; }
.exp-final__lead { font-size: 18px; line-height: 28px; max-width: 640px !important; }
.exp-steps { margin: 0; padding: 0; list-style: none; display: flex; gap: 32px; }
.exp-steps li { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 26px; }
.exp-steps li span:first-child {
  flex: none; width: 32px; height: 32px; border-radius: 999px; border: 2px solid var(--mustard);
  color: var(--mustard); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.exp-steps li span:last-child { padding-top: 3px; }
.exp-final .exp-actions { gap: 12px 28px; }
.exp-organizer { border: 1.5px solid var(--exp-line); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 24px; }
.exp-organizer strong { font-size: 16px; }
.exp-organizer a { color: var(--white); font-weight: 700; text-underline-offset: 3px; }
.exp-organizer a:hover { color: var(--mustard); }
.exp :focus-visible { outline-offset: 3px; }
.exp-final :focus-visible, .exp-film :focus-visible { outline-color: var(--mustard); }

/* ---------- Lišta na mobilu (jen s rezervačním odkazem) ---------- */
.exp-bar { display: none; }

/* ---------- Užší okno a tablet (769–1100 px) ---------- */
@media (max-width: 1100px) {
  /* mapa se nenatahuje na výšku sloupce s dny (jinak kolem ní roste bílá plocha) */
  .exp-map { align-self: flex-start; }
  /* pás s cenou: cena a tři řádky vedle sebe, tlačítko s větou pod nimi přes celou šířku */
  .exp-price__band { flex-wrap: wrap; gap: 28px 40px; }
  .exp-price__main { flex: 0 1 auto; max-width: none; }
  .exp-price__rows { flex: 1 1 260px; max-width: none; }
  .exp-price__cta { flex: 1 1 100%; max-width: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
  /* spodní lišta: cena a tlačítko Rezervace, pořád na očích */
  .exp-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--brown-dark); color: var(--white); border-top: 1px solid var(--brown);
  }
  .exp-bar__price { display: flex; flex-direction: column; font-size: 18px; line-height: 24px; font-weight: 700; white-space: nowrap; }
  .exp-bar__price span { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--exp-ph); }
  .exp-bar .exp-btn { min-height: 44px; padding: 0 22px; gap: 8px; font-size: 16px; }
  /* místo pro lištu, aby nepřekrývala konec zápatí */
  .exp--bar ~ .site-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .exp h2 { font-size: 30px; line-height: 38px; }
  .exp-section { padding: 48px 0; }
  .exp-section--tight { padding-top: 0; }
  .exp-section > .exp-wrap > h2 { margin-bottom: 28px; }
  .exp-btn { padding: 0 22px; font-size: 16px; }
  .exp-btn--soon { padding: 8px 20px; }
  .exp-hero { padding: 24px 0 40px; }
  .exp-hero__grid, .exp-guide, .exp-stage--first, .exp-film__grid, .exp-price__lists, .exp-price__band, .exp-faq-cols, .exp-two { flex-direction: column; align-items: stretch; }
  .exp-hero__grid { gap: 28px; }
  .exp-hero h1 { font-size: 38px; line-height: 44px; }
  .exp-lead { font-size: 18px; line-height: 28px; }
  .exp-ph--hero { flex: none; height: 300px; }
  .exp-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .exp-facts dd { font-size: 18px; }
  .exp-tiles, .exp-cards, .exp-days, .exp-memories .exp-list { grid-template-columns: minmax(0, 1fr); }
  .exp-card { padding: 24px; }
  .exp-guide, .exp-film__grid, .exp-two { gap: 24px; }
  .exp-ph--guide { flex: none; height: 280px; }
  .exp-section > .exp-wrap > h2 + .exp-intro { margin-top: -16px; margin-bottom: 28px; }
  .exp-intro { font-size: 17px; }

  .exp-stages, .exp-stages__rest { gap: 40px; }
  .exp-more .exp-stages__rest { margin-top: 40px; }
  .exp-stage--first { gap: 28px; }
  .exp-map { flex: none; padding: 16px; }
  .exp-day { padding: 22px; }
  .exp-day--row { padding: 14px 22px; }

  .exp-memories__end { font-size: 17px; line-height: 28px; }
  .exp-film { padding: 48px 0; }
  .exp-ph--film { flex: none; height: 240px; }
  .exp-faq--info .exp-faq__body { padding-left: 0; }
  .exp-faq--info summary h3 { font-size: 20px; }
  .exp-faq-cols { gap: 40px; }
  .exp-faq-col { flex: none; }

  /* pás s cenou: pod sebou, tlačítko přes celou šířku karty, nápis na jednom řádku */
  .exp-price { gap: 24px; }
  .exp-price__band { padding: 24px; gap: 24px; }
  .exp-price__main, .exp-price__rows, .exp-price__cta { flex: none; max-width: none; }
  .exp-price__amount { font-size: 40px; }
  .exp-price__cta { align-items: stretch; }
  .exp-price__cta .exp-btn { justify-content: center; padding: 0 16px; }
  .exp-price__cta p { text-align: left; }

  .exp-final { padding: 40px 0; }
  .exp-final .exp-wrap { gap: 28px; }
  .exp-final h2 { margin-bottom: -16px; }
  .exp-final__lead { font-size: 17px; }
  .exp-steps { flex-direction: column; gap: 16px; }
}
/* nejužší telefony (320 px): rezervační tlačítko se nesmí zalomit, proto menší písmo a odsazení */
@media (max-width: 374.98px) {
  .exp-btn, .exp-price__cta .exp-btn { padding: 0 14px; gap: 8px; font-size: 15px; }
  .exp-btn--soon { padding: 8px 12px; font-size: 14px; }
  .exp-price__band { padding: 20px 16px; }
  .exp-price__cta .exp-btn--soon { font-size: 13px; padding: 8px 8px; }
  .exp-bar { padding-inline: 16px; }
  /* nápis na tlačítku pro rozbalení programu se také nesmí zalomit */
  .exp-more__btn { padding: 0 12px; font-size: 14px; }
}