/* Kulturna — hand-written, no build step. Brand: light blue #8fc3ff, red #d10000.
   Deliberately early-web: visible 1px rules, outlined pills, underlined links,
   no shadows, no transitions. */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/jost-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kulturna";
  src: url(/static/fonts/kulturna.ttf) format("truetype");
  font-display: swap;
}

:root {
  --red: #d10000;
  --blue: #8fc3ff;
  --bg: #f4f4f4;
  --ink: #111;
  --muted: #555;
  --font: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  padding: 0 24px 40px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--bg);
}
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0 0 .6em; }
small { color: var(--muted); font-size: 13px; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
.inline { display: inline; }
.linklike { background: none; border: 0; padding: 0; text-decoration: underline; color: inherit; }
.hp { position: absolute; left: -9999px; }

/* ---- pills & buttons ---- */
.btn, .pill {
  display: inline-block;
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 1px 10px 2px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}
.btn-blue { background: var(--blue); }
.btn.big { font-size: 16px; padding: 6px 22px; }
.pill.go { background: var(--blue); }
.pill.danger { color: var(--red); }
button.pill, button.btn { font-family: var(--font); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pills .right { margin-left: auto; }

/* ---- header ---- */
.top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid var(--red);
}
.brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--red); text-decoration: none;
  font-size: 24px; letter-spacing: -.01em;
}
.search {
  flex: 1; max-width: 640px;
  display: flex; align-items: center;
  border: 1px solid var(--red); border-radius: 8px;
  padding: 0 10px; background: var(--bg);
}
.search button { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 2px 6px; transform: rotate(-45deg); }
.search input { flex: 1; border: 0; background: transparent; padding: 4px 6px; outline: none; }
.search input::placeholder { color: #999; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.top nav span { color: var(--ink); }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.lang a.on { text-decoration: underline; }

.masthead { padding: 10px 0 8px; border-bottom: 1px solid var(--red); }
.wordmark {
  font-family: "Kulturna", var(--font);
  font-weight: 700;
  font-size: clamp(44px, 6.5vw, 100px);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--red);
}
.wordmark a { text-decoration: none; }
p.wordmark { margin: 0; } /* the masthead is an H1 only on listing pages */
.tagline { margin: 4px 0 0; font-size: 16px; }

/* ---- weather ---- */
.weather {
  display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--red);
  font-size: 14px; color: var(--red);
}
.weather .city { margin-right: 6px; }
.weather .day { color: var(--ink); }
.weather .day::before { content: "|"; margin-right: 8px; color: var(--red); }
.weather .day.today { font-weight: 700; }
.weather .day.today::before { content: ""; margin: 0; }
.weather .ico { color: var(--blue); }
.wi { width: 20px; height: 20px; vertical-align: -5px; margin-left: 2px; color: var(--blue); }

/* ---- filters ---- */
.filters {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--red);
}
.dropdowns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.views { margin-left: auto; display: flex; gap: 8px; }
.dd { position: relative; }
.dd summary {
  list-style: none; cursor: pointer;
  display: inline-flex; gap: 14px; align-items: center;
  border: 1px solid var(--red); border-radius: 4px; min-width: 88px; justify-content: space-between;
  padding: 1px 10px 2px; font-size: 13px; background: var(--bg);
}
.dd summary::-webkit-details-marker { display: none; }
.dd[data-active] summary { background: var(--blue); }
.dd[open] summary { background: var(--blue); }
.dd .menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 220px; background: var(--bg);
  border: 1px solid var(--red); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.dd .menu.cols { min-width: 420px; display: grid; grid-template-columns: 1fr 1fr; }
.dd .menu label { display: block; white-space: nowrap; }
.dd .menu .btn { justify-self: start; align-self: flex-start; margin-top: 6px; grid-column: 1 / -1; }
.dd .menu input[type=date] { border: 1px solid var(--red); background: var(--bg); padding: 1px 6px; border-radius: 6px; margin-left: 6px; }
.reset { font-size: 13px; }

/* ---- grid ---- */
/* Cards carry their separator on top and the grid overlaps the filter bar's
   rule by 1px, so the first row merges with it and the last card in each
   column has no trailing line. */
.grid { columns: 4; column-gap: 24px; margin-top: -1px; }
.card {
  display: block; break-inside: avoid;
  padding: 6px 0 16px; border-top: 1px solid var(--red);
  text-decoration: none;
}
.card-head { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
.card img { width: 100%; }
.noimg { display: block; height: 160px; background: var(--blue); }
.card .title, .row .title { display: block; text-transform: uppercase; font-weight: 700; margin-top: 8px; line-height: 1.15; }
.card .venue, .row .venue { display: block; font-size: 14px; margin: 2px 0 8px; }
.card .pills { justify-content: space-between; }
.card:hover .title { text-decoration: underline; }
.empty { padding: 40px 0; font-size: 18px; }

/* ---- calendar list ---- */
.list .day {
  color: var(--red); font-size: 30px; font-weight: 700;
  padding: 18px 0 6px; border-bottom: 1px solid var(--red);
}
.row {
  display: grid;
  grid-template-columns: 56px 220px minmax(220px, 1fr) 1.6fr;
  border-bottom: 1px solid var(--red);
}
.row > div { padding: 10px 12px 12px 0; }
.row > div + div { border-left: 1px solid var(--red); padding-left: 12px; }
.row .c-time { color: var(--red); font-weight: 700; padding-left: 0; }
.row .c-img img { max-height: 320px; width: auto; }
.row .c-meta a { text-decoration: none; }
.row .c-desc { display: flex; flex-direction: column; }
.row .c-desc p { text-align: justify; }
.row .pills.bottom { margin-top: auto; justify-content: flex-end; padding-top: 12px; }
.row:target, .row.highlight, .list .row:hover { background: var(--blue); }

/* ---- detail panel / modal ---- */
.back { padding: 12px 0 0; font-size: 14px; }
.panel {
  position: relative;
  display: grid; grid-template-columns: minmax(260px, 2fr) 3fr; gap: 32px;
  background: var(--blue); border: 1px solid var(--red); border-radius: 4px;
  padding: 48px 32px 28px; margin: 16px auto; max-width: 1100px;
  font-size: 15.5px;
}
.panel::before { content: ""; position: absolute; left: 12px; right: 12px; top: 30px; border-top: 1px solid var(--red); }
.panel .close {
  position: absolute; top: 8px; right: 12px;
  width: 22px; height: 22px; border: 1px solid var(--red); border-radius: 50%;
  color: var(--red); display: block; box-sizing: border-box;
}
.panel .close svg { width: 100%; height: 100%; display: block; }
.panel-img img { width: 100%; }
.panel-body h1, .panel-body h2 { color: #fff; font-size: 44px; line-height: 1; margin-bottom: 48px; }
.panel-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--red); margin-bottom: 10px; }
.panel .pills { margin-bottom: 12px; }
.panel .pill { background: var(--bg); }
.panel .desc { text-align: justify; white-space: normal; }
.panel-price { text-align: right; margin-top: 8px; }
.panel-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 28px; }

#modal { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; }
#modal .backdrop { position: fixed; inset: 0; background: rgba(244, 244, 244, .55); }
#modal .dialog { position: relative; padding: 24px; min-height: 100%; cursor: default; }
#modal .panel { margin: 4vh auto; }
body.modal-open { overflow: hidden; }

/* ---- prose pages / forms ---- */
.prose { max-width: 760px; padding: 24px 0 8px; font-size: 16px; }
.prose h2 { color: var(--red); font-size: 32px; margin-bottom: 12px; }
.prose .muted { color: var(--muted); font-size: 15px; }
.prose .pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
/* error pages sit in the middle of the screen */
.error-page { min-height: 60vh; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.error-page h2 { font-size: 72px; line-height: 1; }
.error-page .pills { justify-content: center; }
.form { max-width: 760px; padding: 8px 0 32px; }
.field { margin-bottom: 18px; }
.field label, .field .label { display: block; font-weight: 700; }
.field small { display: block; margin-bottom: 4px; }
.field input[type=text], .field input[type=email], .field input[type=date], .field input[type=time], .field textarea {
  width: 100%; border: 1px solid var(--red); border-radius: 6px; background: var(--bg); padding: 6px 10px;
}
.field textarea { resize: vertical; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field .when { display: flex; gap: 10px; }
.field .when input[type=date] { flex: 3; min-width: 0; }
.field .when input[type=time] { flex: 2; min-width: 0; }
.field input[type=date], .field input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-height: 36px; line-height: 1.4; text-align: left; }
/* iOS Safari centres the value of date/time inputs on its own */
.field input::-webkit-date-and-time-value { text-align: left; }
/* file picker: the native input stays focusable but off-screen; the label is the button */
.field .file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.field .file .file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.field .file label.btn { display: inline-block; margin: 0; font-weight: 400; cursor: pointer; padding: 4px 14px; border-radius: 6px; font-size: 14px; }
.field .file .file-input:focus-visible + label.btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.field .file .file-name { font-size: 14px; color: var(--muted); }
.field .file.has-file .file-name { color: var(--ink); }
.field .choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin-top: 4px; }
.field .choices label { font-weight: 400; }
.field .preview { max-width: 200px; margin: 6px 0; }
/* hidden means hidden, even where a rule sets display (e.g. .form .errors) */
[hidden] { display: none !important; }
.errors { border: 1px solid var(--red); color: var(--red); padding: 10px 14px; margin: 12px 0; max-width: 760px; }
.form .invalid > label { color: var(--red); }
.form .invalid input[type=text], .form .invalid input[type=email], .form .invalid input[type=date],
.form .invalid input[type=time], .form .invalid textarea { border-width: 2px; background: #fff0f0 !important; }
.form .invalid .choices { outline: 2px solid var(--red); outline-offset: 8px; border-radius: 8px; }
.form .invalid .file label.btn { outline: 2px solid var(--red); outline-offset: 3px; }
.form .invalid input[type=checkbox] { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.errors p { margin: 0; }
.ok { color: var(--red); font-weight: 700; }

/* ---- newsletter / footer ---- */
footer { margin-top: 30px; }
.newsletter {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid var(--red); border-bottom: 1px solid var(--red);
}
.newsletter h2 { color: var(--red); font-size: 26px; margin-bottom: 6px; }
.newsletter p { margin: 0; }
.newsletter form { margin-left: auto; display: flex; gap: 8px; }
.newsletter input[type=email] {
  width: 300px; border: 1px solid var(--red); border-radius: 6px; background: var(--bg);
  padding: 4px 12px; text-align: center;
}
.newsletter .btn { padding: 4px 18px; border-radius: 6px; font-size: 15px; }

/* ---- map ---- */
.map { height: 72vh; min-height: 420px; border: 1px solid var(--red); margin-top: 12px; background: #dfe8f0; }
.map-note { padding: 8px 0; font-size: 13px; color: var(--muted); }
.leaflet-popup-content-wrapper { border-radius: 0; background: var(--blue); border: 1px solid var(--red); box-shadow: none; }
.leaflet-popup-tip { background: var(--blue); box-shadow: none; }
.leaflet-popup-content { margin: 10px 12px; font-family: var(--font); }
.map-pop { display: grid; grid-template-columns: 90px 1fr; gap: 10px; min-width: 240px; }
.map-pop img { width: 90px; }
.map-pop b { display: block; text-transform: uppercase; }
.map-pop a { color: inherit; }
.pin { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 1px solid var(--red); }

/* ---- admin ---- */
.admin-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--red); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-list .row { grid-template-columns: 90px 160px minmax(220px, 1fr) 1.4fr; }
.admin-list .c-img img { max-height: 200px; }
/* events without a poster: a dashed frame instead of an empty column; links to the editor to add one */
.admin-list .no-poster { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; max-height: 200px; border: 1px dashed var(--red); border-radius: 6px; color: var(--muted); font-size: 13px; text-decoration: none; }
.admin-list .no-poster:hover { color: var(--red); background: #fff; }
.status { display: inline-block; font-size: 12px; text-transform: uppercase; border: 1px solid var(--red); padding: 0 8px; border-radius: 4px; }
.s-approved { background: var(--blue); }
.s-rejected { color: var(--red); }
.note { color: var(--red); font-size: 13px; }
.original blockquote { margin: 4px 0 8px; padding: 8px 12px; border-left: 3px solid var(--blue); background: #eef4fb; font-size: 14px; white-space: normal; }
.original summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.field.original summary { font-weight: 700; font-size: 15px; color: var(--ink); }
.field.original .table { margin: 6px 0 8px; font-size: 14px; }
.field.original .table th { width: 140px; color: var(--muted); font-weight: 400; }
.field.original label small, .field.original summary small { font-weight: 400; display: inline; margin-left: 6px; color: var(--muted); }
.post { display: grid; grid-template-columns: 420px 1fr; gap: 32px; padding: 16px 0 40px; }
.post img { width: 100%; border: 1px solid var(--red); }
.post textarea { width: 100%; min-height: 360px; border: 1px solid var(--red); border-radius: 6px; background: var(--bg); padding: 10px; font: inherit; font-size: 14px; }
.post .pills { margin: 10px 0; }
@media (max-width: 900px) { .post { grid-template-columns: 1fr; } }
.login { max-width: 320px; margin: 15vh auto; text-align: center; }
.login img { margin: 0 auto 20px; }
.login input { width: 100%; border: 1px solid var(--red); border-radius: 6px; background: var(--bg); padding: 6px 10px; margin-bottom: 10px; }

/* ---- responsive ---- */
@media (max-width: 1200px) { .grid { columns: 3; } }
@media (max-width: 900px) {
  body { padding: 0 14px 30px; }
  .grid { columns: 2; column-gap: 16px; }
  .top { flex-wrap: wrap; gap: 10px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .top nav { margin-left: auto; gap: 8px; font-size: 14px; white-space: normal; flex-wrap: wrap; justify-content: flex-end; }
  .row, .admin-list .row { grid-template-columns: 48px 1fr; }
  .row .c-meta { grid-column: 2; border-left: 0 !important; padding-left: 0 !important; }
  .row .c-desc { grid-column: 1 / -1; border-left: 0 !important; padding-left: 0 !important; }
  .row .c-img img { max-height: 200px; }
  .panel { grid-template-columns: 1fr; padding-top: 40px; }
  .panel-body h1, .panel-body h2 { font-size: 30px; margin-bottom: 16px; }
  .dd .menu.cols { min-width: 0; grid-template-columns: 1fr; }
  .newsletter form { margin-left: 0; flex-wrap: wrap; }
  .newsletter input[type=email] { width: 100%; }
  .field.two { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid { columns: 1; }
  .views { margin-left: 0; }
  .top nav > span:not(.lang) { display: none; }
}

/* ---- admin on a phone ----
   The queue's four columns become one card per event: status and source on
   one line, the poster, the details, the text, then the actions, all flush
   left. The header's own admin links repeat the tabs below, so they go. */
@media (max-width: 700px) {
  body.admin .top nav > a:not(.btn), body.admin .top nav > span:not(.lang) { display: none; }
  .admin-bar { padding: 10px 0; gap: 8px; }
  .admin-bar .tabs { gap: 6px; }
  .admin-bar .btn { font-size: 14px; padding: 2px 10px; }
  .admin-list .row { grid-template-columns: 1fr; padding: 14px 0 10px; }
  .admin-list .row > div, .admin-list .row > div + div { grid-column: auto; border-left: 0 !important; padding: 0 0 8px !important; }
  .admin-list .c-time { display: flex; align-items: center; gap: 8px; }
  .admin-list .c-time br { display: none; }
  .admin-list .c-img img { max-height: 240px; max-width: 100%; }
  .admin-list .no-poster { aspect-ratio: auto; max-height: none; padding: 8px; }
  .admin-list .c-meta .title { margin-top: 0; }
  .admin-list .c-desc p { text-align: left; }
  .admin-list .pills.bottom { justify-content: flex-start; padding-top: 4px; }
  .field.original .table th { width: 90px; }
  .field.original .table td { word-break: break-word; }
}

/* ---- landing page (also the full site's "o nás") ----
   The sections are stacked "záložky": rounded bars that overlap the one
   above by a few pixels, with a soft shadow on the overlap. Blue sections
   open onto the page background; the red form section stays red and holds
   a cream card, like the mockup. */
body.landing .top { border-bottom: 0; }
.hero { text-align: center; padding: 24px 0 8px; }
.hero .word {
  color: var(--red); font-weight: 700; letter-spacing: -.045em; line-height: .9;
  font-size: clamp(84px, 19vw, 260px); margin: 0 0 8px;
}
.hero .t1 { color: var(--red); font-weight: 700; font-size: clamp(18px, 2.4vw, 26px); margin: 0; }
.hero .t2 { color: var(--red); font-size: clamp(16px, 2.1vw, 22px); margin: 2px 0 0; }
.hero .arrow { margin: 36px auto 28px; transform: rotate(90deg); }
.stack { display: flex; flex-direction: column; }
.tab {
  position: relative; margin-top: -12px; border-radius: 12px;
  background: var(--bg); box-shadow: 0 -5px 12px rgba(0, 0, 0, .16);
}
.tab:first-child { margin-top: 0; }
.tab summary, .tab.block h2 {
  display: block; list-style: none; cursor: pointer; border-radius: 12px;
  background: var(--blue); color: #fff6ea;
  font-weight: 700; text-transform: uppercase; text-align: center;
  font-size: clamp(30px, 6.3vw, 92px); line-height: 1.02; padding: 8px 20px 16px;
}
.tab summary::-webkit-details-marker { display: none; }
.tab summary, .tab.block h2 { user-select: none; -webkit-user-select: none; }
.tab summary:focus:not(:focus-visible) { outline: none; }
.tab summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tab.red { background: var(--red); }
.tab.red summary, .tab.red.block h2 { background: var(--red); }
.tab .body { padding: 36px 16px 52px; max-width: 760px; margin: 0 auto; text-align: center; color: var(--red); font-size: 17px; }
.tab .body p { margin: 0 0 1.1em; }
.tab .body h3 { font-size: 22px; margin-bottom: 14px; }
.tab .body.form-body { max-width: 960px; padding: 0 16px 28px; }
.tab .card {
  background: #fdf6ec; border-radius: 18px; padding: 32px 40px 36px;
  color: var(--ink); text-align: center;
}
.tab .card h3 { color: var(--red); font-size: clamp(22px, 2.6vw, 30px); text-transform: lowercase; margin-bottom: 18px; }
.tab .card > p { max-width: 640px; margin-left: auto; margin-right: auto; }
.tab .card .disclaimer { font-size: 15px; }
.tab .card .disclaimer b { color: var(--red); }
.tab .card .form { text-align: left; margin: 24px auto 0; padding-bottom: 8px; }
.form .errors { display: flex; align-items: center; min-height: 48px; text-align: left; margin: 0 0 18px; padding: 10px 16px; }
.form .errors p { margin: 0; line-height: 1.3; }
.tab .card .field input[type=text], .tab .card .field input[type=email], .tab .card .field input[type=date],
.tab .card .field input[type=time], .tab .card .field textarea { background: #fffdf9; }
.team { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.member {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 320px; max-width: 100%; padding: 14px 18px; border-radius: 6px;
  background: var(--red); color: #fff; text-align: left; line-height: 1.2;
}
.member b { font-size: 19px; }
.member img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; flex: none; }
.contact { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; color: var(--ink); max-width: 640px; }
.contact .labels, .contact .values { display: flex; flex-direction: column; gap: 4px; }
.contact .labels { text-align: right; }
.contact .values { text-align: left; }
.contact .values a { color: var(--ink); }
.tab.block { color: #fff; text-align: center; padding-bottom: 32px; }
.tab.block h2 { cursor: default; padding-bottom: 6px; }
.tab.block p { margin: 6px 0 14px; }
.tab.block form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 16px; }
.tab.block input[type=email] { width: 340px; max-width: 100%; border: 1px solid var(--red); border-radius: 6px; padding: 5px 12px; text-align: center; background: #fff8f0; }
.tab.block .btn { padding: 5px 20px; border-radius: 6px; font-size: 15px; }
.tab.block .ok { color: #fff; }
.gdpr { display: inline-block; margin: 14px 0 0; font-size: 12px; color: #9a9a9a; text-decoration: none; }
.gdpr:hover { text-decoration: underline; }
.consent label { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.consent label span { flex: 1; min-width: 0; }
.consent input { margin-top: 4px; }
.foot { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 0; font-size: 14px; }
/* the section listings, linked from every page so they are found and crawled */
.browse { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 0 0; font-size: 14px; }
.browse b { font-weight: 700; }
/* heading and intro of a section listing (/vystavy, /vikend, ...) */
.section-head { padding: 18px 0 6px; max-width: 760px; }
.section-head h1 { color: var(--red); font-size: 34px; line-height: 1.1; margin: 0 0 6px; }
.section-head p { margin: 0; font-size: 16px; }
.legal h3 { color: var(--red); font-size: 20px; margin: 22px 0 6px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.prose .disclaimer { font-size: 15px; }
.sys { max-width: 900px; padding: 18px 0 8px; border-bottom: 1px solid var(--red); }
.sys h2 { color: var(--red); font-size: 24px; margin-bottom: 8px; }
.sys h3 { font-size: 16px; margin: 18px 0 6px; }
.sys .small { font-size: 14px; color: var(--muted); margin-top: 8px; }
.inline-input { border: 1px solid var(--red); border-radius: 6px; background: var(--bg); padding: 2px 10px; min-width: 280px; }
.table { border-collapse: collapse; width: 100%; max-width: 900px; margin: 12px 0; }
.table th, .table td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--red); }
.table th { font-weight: 700; vertical-align: top; }
.table td { vertical-align: top; }
.counter { display: block; text-align: right; color: var(--muted); font-size: 12px; margin-top: 3px; }
.counter.over { color: var(--red); font-weight: 700; }
.nl-error { color: #fff; font-weight: 700; margin-bottom: 10px; }
.newsletter .nl-error { color: var(--red); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.prose .disclaimer { font-size: 15px; }
@media (max-width: 560px) {
  .hero { padding-top: 12px; }
  .hero .arrow { width: 80px; margin: 24px auto 18px; }
  .tab { margin-top: -8px; border-radius: 8px; }
  .tab summary, .tab.block h2 { font-size: clamp(24px, 7.5vw, 30px); padding: 8px 10px 12px; border-radius: 8px; }
  .tab .body { padding: 24px 8px 34px; font-size: 16px; }
  .tab .body.form-body { padding: 0 6px 16px; }
  .tab .card { padding: 22px 14px 24px; border-radius: 12px; }
  .tab .body .form { padding-bottom: 0; }
  .tab.block input[type=email] { width: 100%; }
  .member { padding: 12px 14px; }
  .contact { grid-template-columns: 1fr; gap: 10px; }
  .contact .labels, .contact .values { text-align: center; }
  .contact .arrow { display: none; }
  .member { width: 100%; }
}