/* ZKO Štětí. Visual language of the old Typemill site (dark band, white page, system font) kept, the hierarchy rebuilt:
 * tokens, a shared container for header, page and footer, visible focus, cards with the picture first, a two-level footer.
 * No JavaScript is needed for anything here; the photo lightbox is the kit's (assets/lightbox.css, loaded before this file).
 * The CSP allows no inline style, so every rule lives in this file.
 *
 * Colours (contrast against its background, WCAG AA needs 4.5:1 for text, 3:1 for UI):
 *   --ink #1b1c21 on white 16.7:1   --muted #5b5d67 on white 6.6:1   --link #0b5cad on white 6.9:1
 *   footer text #c9cbd2 on #17181e 11:1   footer labels #a3a5af on #17181e 7:1   accent #f2b84b on #17181e 10:1
 * There is no dark scheme on purpose: the photos and posters of the club are cut out on white, and the header and the
 * footer are dark in either case.
 */

:root {
    --brand: #17181e;
    --brand-soft: #23242c;
    --ink: #1b1c21;
    --muted: #5b5d67;
    --line: #dfe0e6;
    --surface: #f4f5f7;
    --link: #0b5cad;
    --link-hover: #083f78;
    --accent: #f2b84b;
    --on-dark: #c9cbd2;
    --on-dark-soft: #a3a5af;
    --pad: clamp(1.25rem, 6vw, 4.5rem);
    --font-size: 1.2rem;
    --radius: 10px;
}

@media (max-width: 40em) {
    :root { --font-size: 1.125rem; }
}

*, ::after, ::before { box-sizing: border-box; }

blockquote, body, dd, dl, figure, h1, h2, h3, h4, ol, p, ul { margin: 0; }
ol, ul { padding: 0; }
li + li { margin-top: .25em; }
ul[class], ol[class] { list-style: none; }

img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none; }
pre { overflow-x: auto; }
/* The editor sets numbers and short phrases in code; they should look like a mark in the text, not like a program. */
code { padding: .05em .35em; border-radius: 4px; background: #eceef2; font: inherit; }
pre code { padding: 0; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

html { overflow-y: scroll; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: var(--font-size);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* --- links, focus, skip link --------------------------------------------------------------------------------------- */

a {
    color: var(--link);
    font-weight: 500;
    text-underline-offset: .18em;
    text-decoration-thickness: .075em;
}
a:hover { color: var(--link-hover); text-decoration-thickness: .13em; }

:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 3px;
    border-radius: 2px;
}
.header :focus-visible, .footer :focus-visible, .preview-bar :focus-visible { outline-color: var(--accent); }
main:focus { outline: none; }

.skip {
    position: absolute;
    left: .75rem;
    top: -4rem;
    z-index: 30;
    padding: .6rem 1rem;
    background: #fff;
    color: var(--brand);
    border-radius: 6px;
    font-weight: 700;
}
.skip:focus { top: .75rem; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- headings ------------------------------------------------------------------------------------------------------- */

h1, h2, h3, h4 { line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.6rem); letter-spacing: -.01em; margin: 0 0 .35em; }
h2 { font-size: 1.55em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }

/* --- the shared container: header, page and footer line up on the same edges ---------------------------------------- */

.header-inner, .main, .footer-inner {
    width: 100%;
    max-width: calc(50rem + 2 * var(--pad));
    margin-inline: auto;
    padding-inline: var(--pad);
}

/* --- header --------------------------------------------------------------------------------------------------------- */

.header { flex: none; background: var(--brand); color: #fff; }
.header a { color: inherit; text-decoration: none; }

.header-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .15rem 2rem;
    padding-block: .6rem;
}

.iconlink {
    display: inline-flex;
    align-items: center;
    padding: .4rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.2;
}

.headernav { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin: 0; padding: 0; list-style: none; }
.naviitem { margin: 0; }
.naviitem a {
    display: inline-block;
    padding: .7rem .1rem .55rem;
    border-bottom: 3px solid transparent;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
}
.naviitem a:hover { border-bottom-color: rgba(255, 255, 255, .5); }
.naviitem a.active { border-bottom-color: var(--accent); font-weight: 700; }

@media (max-width: 50rem) {
    .header-inner { flex-direction: column; align-items: flex-start; }
    .headernav { gap: 0 1.1rem; }
}

.preview-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: .5rem var(--pad);
    background: var(--brand-soft); color: #fff;
}
.preview-bar a { color: #fff; }

/* --- page ----------------------------------------------------------------------------------------------------------- */

.main { flex: 1 0 auto; padding-block: 1.75rem 3rem; }

.breadcrumbs { margin-bottom: .6rem; font-size: .95rem; }
.breadcrumbs a { display: inline-block; padding: .25rem 0; color: var(--muted); }
.breadcrumbs a::before { content: "← "; }
.breadcrumbs a:hover { color: var(--ink); }

.meta { color: var(--muted); font-size: .95rem; }
.empty { color: var(--muted); }
.subtitle, .excerpt { color: var(--muted); font-size: 1.05em; }

.content { padding: 1rem 0 0; }
.content > * + * { margin-top: 1em; }
.content > h2, .content > h3, .content > h4 { margin-top: 1.9em; margin-bottom: -.1em; }
.content > :first-child { margin-top: 0; }
.content ol, .content ul { padding-left: 1.3em; }
/* Long web addresses typed in the text must wrap instead of pushing the page sideways. */
.content a { overflow-wrap: anywhere; }

.content :where(.image, .gallery-figure) { margin: 1.5rem 0; }
.image img, .gallery-figure img { border-radius: 6px; }
figcaption { margin-top: .4rem; color: var(--muted); font-size: .9rem; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .6rem;
}
.gallery-item { --fy: 35%; }   /* default crop; the classes fx-/fy- of a picture with a focal point set the variables on the <img> itself */
.gallery-item img { aspect-ratio: 1; object-fit: cover; object-position: var(--fx, 50%) var(--fy); }

.columns { display: grid; gap: 1.5rem; margin: 1.5rem 0; }
@media (min-width: 40rem) {
    .columns[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
    .columns[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
}

.callout {
    margin: 1.25rem 0;
    padding: .85rem 1.1rem;
    border-left: 4px solid #0877d8;
    border-radius: 0 6px 6px 0;
    background: #eef6fd;
}
.callout p { margin: 0; }
.callout-varovani { border-left-color: #c58a00; background: #fff8e6; color: #5f4800; }
.callout-tip { border-left-color: #6b7f35; background: #f3f6ea; }

/* A wide table (the fee schedule) scrolls inside its wrapper; overflow on the <table> itself does nothing. */
.table-wrap { overflow-x: auto; margin: 1.25rem 0; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 1.05rem; }
th, td { padding: .55rem .7rem; border: 1px solid #cfd1d8; text-align: left; }
th { background: var(--surface); }
tbody tr:nth-child(odd) { background: #f6f7f9; }

/* Files (the editor offers the block on every site) */
.file { margin: 1.5rem 0; }
.file-card {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.file-card-icon { font-size: 1.6rem; }
.file-card-info { display: flex; flex-direction: column; gap: .1rem; overflow: hidden; min-width: 0; }
.file-card-info a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-size { color: var(--muted); font-size: .85rem; }
.file-card-download { margin-left: auto; flex-shrink: 0; }
.file-preview-pdf { width: 100%; height: 32rem; border: 1px solid var(--line); border-radius: 6px; }
.file-preview-video { width: 100%; border-radius: 6px; }
.file-preview-text {
    margin: 0; padding: .85rem 1rem; overflow-x: auto; white-space: pre-wrap; font-size: .85rem;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}

.empty-page { padding: 3rem 0; text-align: center; }
.empty-page p + p { margin-top: 1.25rem; }

/* --- buttons -------------------------------------------------------------------------------------------------------- */

.button {
    display: inline-block;
    min-height: 2.75rem;
    padding: .65em 1.4em;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s;
}
.button:hover { background: #2f313c; color: #fff; }

/* --- home: news ----------------------------------------------------------------------------------------------------- */

.novinky-preview { margin-top: 2.5rem; }
.sectiontitle {
    margin: 2.5rem 0 .75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 1.6em;
}
.novinky-preview .sectiontitle { margin-top: 0; }
.more { margin-top: 1.5rem; }

/* --- cards (news, activities) --------------------------------------------------------------------------------------- */

.cardlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}
.cardlist > li { margin: 0; }

.cardlink {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius);
}
.cardlink:focus-visible { outline-offset: 4px; border-radius: var(--radius); }

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.cardlink:hover .card, .cardlink:focus-visible .card {
    border-color: #c4c6ce;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
    transform: translateY(-2px);
}

/* The picture comes first, the title and date under it, whatever the order in the markup (the link reads title first).
   Ratio, fit and focal point come from the kit's cards.css (classes chosen in the settings); this is only the default position:
   posters carry the title and the date at the top, photos have faces above the middle. */
.cardlist { --fy: 20%; }
.cardimage {
    order: -1;
    background: var(--surface);
}
/* A card without a picture gets a bar instead, so the row keeps its rhythm. */
.card:not(:has(.cardimage))::before { content: ""; display: block; height: .45rem; background: var(--brand); }

.heading-container { padding: .85rem 1.1rem 1rem; }
.cardtitle { margin: 0; font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
.cardlink:hover .cardtitle { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.heading-container .meta { margin-top: .2rem; }

@media (prefers-reduced-motion: reduce) {
    .cardlink:hover .card, .cardlink:focus-visible .card { transform: none; }
}

/* --- footer --------------------------------------------------------------------------------------------------------- */

.footer {
    flex: none;
    margin-top: 1rem;
    border-top: 4px solid var(--accent);
    background: var(--brand);
    color: var(--on-dark);
    font-size: 1rem;
    line-height: 1.6;
}
.footer a { color: #fff; font-weight: 500; }
.footer a:hover { color: var(--accent); }

.footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2.5rem 3rem;
    align-items: start;
    padding-block: 2.5rem 2.75rem;
}
.footer-info { display: grid; gap: 1.75rem; }

.footer-title { margin: 0 0 .6rem; color: #fff; font-size: 1.15rem; line-height: 1.3; }

.footer-rows { display: grid; gap: .1rem; }
.footer-rows > div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: .5rem; }
.footer-rows dt { padding: .15rem 0; color: var(--on-dark-soft); }
.footer-rows dd { overflow-wrap: anywhere; }
.footer-rows a, .social a { display: inline-block; padding: .15rem 0; }

.footer-lines { display: grid; font-style: normal; }
.footer-lines span { display: block; }
.footer-rows + .footer-lines { margin-top: .9rem; }

.social { display: flex; flex-wrap: wrap; gap: .15rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.social li { margin: 0; }

/* The map: a closed <details> is the click that loads it. */
.map { overflow: hidden; border: 1px solid #3a3c46; border-radius: var(--radius); background: var(--brand-soft); }
.map-summary { display: block; list-style: none; cursor: pointer; }
.map-summary::-webkit-details-marker { display: none; }
.map-summary:focus-visible { outline-offset: -3px; }

.map-closed {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .6rem;
    min-height: 16rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.map-pin { color: var(--accent); }
.map-button {
    padding: .6em 1.3em;
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    font-weight: 700;
    transition: background-color .15s;
}
.map-summary:hover .map-button { background: var(--accent); }
.map-hint { max-width: 21rem; color: var(--on-dark-soft); font-size: .9rem; line-height: 1.45; }

.map-opened { display: none; padding: .55rem 1rem; color: #fff; font-size: .9rem; text-align: right; }
.map[open] .map-closed { display: none; }
.map[open] .map-opened { display: block; }

.map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; background: #e6e7ea; }
.map-link { margin-top: .5rem; font-size: .95rem; }
.map-link a { display: inline-block; padding: .2rem 0; }

@media (max-width: 48rem) {
    .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2rem 2.25rem; }
    .map-closed { min-height: 13rem; }
}

/* 404: ways back to the sections */
.notfound-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin: 1.25rem 0; padding: 0; }