/* ═══════════════════════════════════════════════════
   zupkaondrej.cz — sdílený design systém
   Bez Bootstrap · Čisté CSS · 2026
═══════════════════════════════════════════════════ */
:root {
  --orange:  #E48600;
  --orange-d:#c97800;
  --green:   #2a980f;
  --purple:  #8a008c;
  --ink:     #1a1a1a;
  --muted:   #444;
  --bg:      #fafaf8;
  --card:    #f8f8f6;
  --rule:    #ddd;
  --max:     1080px;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--ink); background: var(--bg); }
a { color: var(--orange); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
hr { border: none; border-top: 2px solid var(--purple); margin: 32px 0; }

/* ── NAV ── */
.nav { background: var(--ink); position: sticky; top: 0; z-index: 100; border-bottom: 3px solid var(--orange); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; flex-wrap: wrap; }
.nav-brand { font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: .06em; color: #fff; padding: 14px 16px 14px 0; white-space: nowrap; margin-right: 4px; }
.nav-brand:hover { color: var(--orange); text-decoration: none; }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin-left: auto; }
.nav-links li a { color: #ccc; font-size: 13px; letter-spacing: .03em; padding: 15px 10px; display: block; transition: color .15s, background .15s; }
.nav-links li a:hover, .nav-links li a.active { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.nav-logo img { width: 100px; height: auto; border-radius: 2px; opacity: .85; transition: opacity .15s; }
.nav-logo a:hover img { opacity: 1; }
.nav-logo a:hover { text-decoration: none; }

/* ── CONTAINERS ── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { margin: 40px auto; max-width: var(--max); padding: 0 20px; }

/* ── BOX1 — oranžový rámeček ── */
.box1 {
  background: var(--card);
  border: 2px solid var(--orange);
  border-radius: 8px;
  padding: 36px 40px;
  margin-bottom: 28px;
}
.box1 h1 { font-family: var(--serif); font-size: clamp(26px,4vw,38px); font-weight: 300; color: var(--orange); margin-bottom: 16px; text-align: center; }
.box1 h1 .secondary { color: var(--ink); font-size: .82em; font-weight: 400; }
.box1 p { color: var(--muted); font-size: 15px; margin-bottom: 12px; text-align: justify; }
.box1 p:last-child { margin-bottom: 0; }

/* ── BOX2 — fialový rámeček ── */
.box2 {
  background: transparent;
  border: 2px solid var(--purple);
  border-radius: 6px;
  padding: 28px 36px;
  margin-bottom: 28px;
}
.box2 h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--purple); margin-bottom: 14px; text-align: center; }
.box2 p { color: var(--muted); font-size: 15px; margin-bottom: 12px; text-align: center; }
.box2 p.orange { color: var(--orange); }

/* ── GALLERY — nahrazuje tabulky fotografiemi ── */
.gallery { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.gallery img { width: 100%; border-radius: 2px; }
.gallery-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.gallery-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }

/* ── SCROLL TO TOP ── */
#scroll-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 999;
  width: 46px; height: 46px; line-height: 42px; text-align: center;
  background: var(--purple); color: #fff; border-radius: 50%;
  font-size: 20px; border: 2px solid #fff; cursor: pointer;
  display: none; text-decoration: none; transition: background .2s;
}
#scroll-to-top:hover { background: var(--orange); text-decoration: none; }

/* ── BUTTONS ── */
.btn { display: inline-block; padding: 11px 26px; font-size: 13px; letter-spacing: .07em; border-radius: 3px; font-weight: 500; transition: background .2s, color .2s; margin: 4px 3px; }
.btn-primary { background: var(--orange); color: #fff !important; }
.btn-primary:hover { background: var(--orange-d); text-decoration: none; }
.btn-green { background: var(--green); color: #fff !important; }
.btn-green:hover { background: #1f7009; text-decoration: none; }
.btn-outline { background: transparent; color: var(--orange) !important; border: 2px solid var(--orange); }
.btn-outline:hover { background: var(--orange); color: #fff !important; text-decoration: none; }

/* ── PANELS — kurzy ── */
.panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 24px 0; }
.panel { border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: #fff; }
.panel-head { padding: 12px 16px; font-size: 13px; font-weight: 600; letter-spacing: .05em; color: #fff; }
.panel-orange .panel-head { background: var(--orange); }
.panel-green  .panel-head { background: var(--green); }
.panel-purple .panel-head { background: var(--purple); }
.panel-blue   .panel-head { background: #2060a0; }
.panel-red    .panel-head { background: #a02020; }
.panel img { width: 100%; }
.panel-body { padding: 14px 16px; font-size: 14px; color: var(--muted); }
.panel-body p { margin-bottom: 8px; }
.panel-body .price { font-weight: 700; color: var(--ink); font-size: 16px; }
.panel-body .time  { font-size: 13px; color: var(--muted); }

/* ── VIDEO ── */
.video-wrap { position: relative; padding-bottom: 56.25%; border-radius: 4px; overflow: hidden; margin: 16px 0; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ── CALENDAR ── */
.calendar-wrap { margin: 16px 0; border-radius: 4px; overflow: hidden; }
.calendar-wrap iframe { width: 100%; display: block; border: none; }

/* ── CENÍK ── */
.cenik-list { list-style: none; padding: 0; margin: 12px 0; }
.cenik-list li { padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
.cenik-list li:last-child { border-bottom: none; }
.cenik-list .label { color: var(--ink); font-weight: 500; }
.cenik-list .green { color: var(--green); font-style: italic; }

/* ── CONTACT ROW ── */
.contact-row { display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; padding: 20px 0; text-align: center; }
.contact-row a { color: var(--orange); font-size: 15px; }

/* ── BTN ROW ── */
.btn-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 20px 0; }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--rule); text-align: center; padding: 24px 20px; font-size: 13px; color: var(--muted); letter-spacing: .05em; margin-top: 48px; }
footer h4 { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--orange); }

/* ── RESPONSIVE ── */
@media (max-width: 800px) {
  .gallery-3, .gallery-4 { grid-template-columns: 1fr 1fr; }
  .box1, .box2 { padding: 24px 20px; }
  .panels { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nav-logo { display: none; }
  .nav-links li a { padding: 13px 7px; font-size: 12px; }
  .gallery-2, .gallery-3, .gallery-4 { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
  .box1, .box2 { padding: 20px 16px; }
}