/* Styl webu Penzion U Běžkaře. Barvy podle večerní fotky domu: tmavé dřevo, sníh, teplé světlo z oken. */
:root {
  --drevo: #3b2a1e;
  --snih: #f7f8fa;
  --svetlo: #e8a33d;
  --text: #22262b;
  --sede: #5d6670;
  --sirka: 62rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--snih);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #8a4b12; }

/* Menu drží nahoře, aby se dalo kdykoli skočit na kontakt */
.menu {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem;
  padding: .6rem 1rem;
  background: rgba(59, 42, 30, .95);
}
.menu a { color: var(--snih); text-decoration: none; }
.menu .logo { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.menu nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }

/* Úvodní fotka přes celou šířku, text pod ní, ať je na mobilu čitelný */
.hero { position: relative; background: var(--drevo); color: var(--snih); }
.hero-foto { width: 100%; max-height: 80vh; object-fit: cover; }
.hero-text { max-width: var(--sirka); margin: 0 auto; padding: 1.5rem 1rem 2rem; }
.hero h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.15; }
/* Štítek u titulku: fiktivnost má být vidět hned nahoře, ne až v patičce */
.stitek {
  display: inline-block; margin: 0 0 .6rem; padding: .15rem .6rem; border: 1px solid var(--svetlo);
  border-radius: .3rem; font-size: .85rem; letter-spacing: .03em; color: var(--svetlo);
}
.podtitulek { margin: 0 0 1.25rem; font-size: 1.15rem; max-width: 40rem; }
.tlacitko {
  display: inline-block; padding: .8rem 1.4rem; border-radius: .4rem;
  background: var(--svetlo); color: var(--drevo); font-weight: 700; text-decoration: none;
}
.tlacitko:hover, .tlacitko:focus { background: #f2b85c; }

.sekce { max-width: var(--sirka); margin: 0 auto; padding: 2.5rem 1rem; scroll-margin-top: 3.5rem; }
.sekce h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-top: 0; }

.mapa { position: relative; width: 100%; aspect-ratio: 16 / 10; border: 1px solid #d5d9de; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.popisek, figcaption { color: var(--sede); font-size: .92rem; }

.okoli-foto { margin: 0; }
.okoli-foto img { border: 1px solid #d5d9de; }

.kontakt { border-top: 4px solid var(--svetlo); }

.paticka { background: var(--drevo); color: var(--snih); text-align: center; padding: 1.5rem 1rem; }
.paticka p { margin: .2rem 0; }
.paticka .drobne { font-size: .85rem; opacity: .85; }

/* Karty s fotkami interiéru: fotky jsou malé (380 x 508), proto je nezvětšujeme přes celou šířku */
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.karta { margin: 0; max-width: 19rem; }
.karta img { width: 100%; border: 1px solid #d5d9de; border-radius: .3rem; }
/* Široká fotka domu zabere v mřížce dva sloupce, na mobilu jeden */
.karta-siroka { max-width: none; grid-column: span 2; }
.karta-siroka img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Text vedle jedné fotky; na úzké obrazovce pod sebou */
.vedle { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 46rem) {
  .vedle { grid-template-columns: 1fr 15rem; }
}
.sekce ul { padding-left: 1.2rem; }
.sekce li { margin-bottom: .4rem; }

/* Ceník: jednoduchá tabulka, na mobilu se vejde, protože má jen dva sloupce */
.cenik { width: 100%; max-width: 36rem; border-collapse: collapse; }
.cenik caption { text-align: left; color: var(--sede); font-size: .92rem; padding-bottom: .4rem; }
.cenik th, .cenik td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid #d5d9de; vertical-align: top; }
.cenik th { font-weight: 400; }
.cenik td { white-space: nowrap; font-weight: 700; }

.otazky dt { font-weight: 700; margin-top: .6rem; }
.otazky dd { margin: .1rem 0 0; }

/* Na mobilu by deset odkazů v menu zabralo půl obrazovky; menu se tam posouvá do strany uvnitř sebe */
@media (max-width: 40rem) {
  .menu { flex-wrap: nowrap; }
  .menu nav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; min-width: 0; }
  .karta-siroka { grid-column: auto; }
  .cenik td { white-space: normal; }
}

/* Fotky okolí z Commons: mřížka, na mobilu pod sebou */
.okoli-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.stav-stop { margin-top: 1.5rem; }
/* Místo pro video: rámeček v poměru 16:9, aby se po doplnění videa nerozhodila stránka */
.video {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  aspect-ratio: 16 / 9; max-width: 40rem; margin-top: 1.25rem; padding: 1rem;
  background: var(--drevo); color: var(--snih); border-radius: .4rem;
}
.video p { margin: .2rem 0; font-size: 1.3rem; font-weight: 700; }
.video .drobne { font-size: .95rem; font-weight: 400; opacity: .85; }