/* Kluby Diochi — O nás „Kde nás najdete" + klub.php (Diolinka 24. 9. 2026).
   Jazyk Matějova taháku jako poradna a Sféra: slonová kost, petrolejová #108780, tmavě modrá #23305B,
   zlatá #C9A44B, jemné šestiúhelníky. Barvy JEN uvnitř .kl — zbytek webu beze změny. */
.kl { --kl-petrol:#108780; --kl-petrol-tm:#0b6661; --kl-petrol-sv:#e8f3f1; --kl-navy:#23305B; --kl-zlata:#C9A44B;
      --kl-kost:#F2EDE1; --kl-kost-sv:#F8F5EE; --kl-linka:#e3dac5; --kl-text:#3a4150;
      --kl-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23C9A44B' stroke-width='1' opacity='.32'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/%3E%3Cpath d='M28 63v34M1 47.5-27 63M55 47.5 83 63'/%3E%3C/g%3E%3C/svg%3E");
      color: var(--kl-text); }
.kl h1, .kl h2, .kl h3 { color: var(--kl-navy); }
.kl h2::after { background: var(--kl-zlata) !important; }
.kl .w-koupit { background: var(--kl-petrol); }
.kl .w-koupit:hover { background: var(--kl-petrol-tm); }
.kl .w-koupit-druhy { background:#fff; color: var(--kl-petrol-tm); border:1px solid var(--kl-petrol); }
.kl .w-koupit-druhy:hover { background: var(--kl-petrol-sv); }
.kl-stitek { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.18em;
             text-transform:uppercase; color: var(--kl-petrol); font-weight:600; margin:0 0 .4rem; }
.kl-stitek::before { content:""; width:.55rem; height:.55rem; transform: rotate(45deg); background: var(--kl-zlata); }
.kl-chyba { padding:.9rem 1.1rem; border-radius:.7rem; background:#fff4f2; border:1px solid #e7b3a8; color:#7a2a1c; }

/* ---- tlačítka kontaktů ---- */
.kl-tlacitka { display:flex; flex-wrap:wrap; gap:.45rem; margin:.2rem 0 0; }
.kl-tl { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .95rem; border-radius:999px; font-size:.92rem;
         font-weight:600; text-decoration:none; line-height:1.2; border:1px solid var(--kl-linka); background:#fff;
         color: var(--kl-navy); transition: background .15s, border-color .15s, color .15s; max-width:100%; overflow-wrap:anywhere; }
.kl-tl:hover { border-color: var(--kl-petrol); color: var(--kl-petrol-tm); }
.kl-tl-tel { background: var(--kl-petrol); border-color: var(--kl-petrol); color:#fff; }
.kl-tl-tel:hover { background: var(--kl-petrol-tm); color:#fff; }
.kl-tl-detail { border-color: var(--kl-zlata); }
.kl-tl span[aria-hidden] { font-size:1rem; }

/* ---- kruh s fotkou / monogramem ---- */
.kl-foto { flex:none; display:grid; place-items:center; width:5.2rem; height:5.2rem; border-radius:50%; overflow:hidden;
           background: var(--kl-kost); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--kl-zlata), 0 6px 16px rgba(35,48,91,.18); }
.kl-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.kl-foto-monogram { color: var(--kl-petrol); font: 600 1.6rem/1 Georgia, serif; letter-spacing:.04em;
                    background: var(--kl-hex) 0 0 / 28px 48px, var(--kl-kost-sv); }
.kl-foto-velka { width:11rem; height:11rem; }
.kl-foto-velka.kl-foto-monogram { font-size:3.2rem; }

/* ---- O nás: sekce ---- */
.kl-sekce { margin: 2.6rem 0 2rem; }
.kl-sekce > h2 { margin-top:0; }
.kl-perex { max-width: 46rem; font-size:1.05rem; }

.kl-mapa-obal { display:grid; grid-template-columns: minmax(0, 2.1fr) minmax(16rem, 1fr); gap:1rem; align-items:stretch;
                margin: 1.2rem 0 1.6rem; padding:1.2rem; border-radius:1.1rem; overflow:hidden;
                background: radial-gradient(ellipse at 90% 0%, rgba(16,135,128,.14), transparent 55%),
                            radial-gradient(ellipse at 0% 100%, rgba(201,164,75,.18), transparent 50%),
                            var(--kl-hex) 0 0 / 56px 97px, linear-gradient(120deg, var(--kl-kost-sv), var(--kl-kost));
                box-shadow: 0 6px 24px rgba(35,48,91,.10); }
.kl-mapa { min-width:0; align-self:center; }

.kl-mapa-svg { display:block; width:100%; height:auto; overflow:visible; }
.kl-kraje path { fill:#fff; fill-opacity:.82; stroke: var(--kl-petrol); stroke-width:1.3; stroke-opacity:.55; stroke-linejoin:round; transition: fill .2s; }
.kl-kraje path:hover { fill: var(--kl-petrol-sv); }
.kl-hit { fill: transparent; }
.kl-bod { fill: var(--kl-zlata); stroke: var(--kl-navy); stroke-width:2.5; transition: r .15s, fill .15s; }
.kl-bod-zar { fill: var(--kl-zlata); opacity:0; transition: opacity .2s; }
.kl-spendlik text, .kl-centrala text { font: 600 20px/1 system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--kl-navy);
       paint-order: stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; pointer-events:none; }
.kl-spendlik { cursor:pointer; outline:none; }
.kl-spendlik:hover .kl-bod, .kl-spendlik:focus-visible .kl-bod, .kl-spendlik.je .kl-bod { fill: var(--kl-petrol); r:10; }
.kl-spendlik:hover .kl-bod-zar, .kl-spendlik:focus-visible .kl-bod-zar, .kl-spendlik.je .kl-bod-zar { opacity:.35; }
.kl-spendlik.je .kl-bod-zar { animation: kl-pulz 2s ease-out infinite; }
.kl-spendlik:focus-visible text, .kl-spendlik.je text { fill: var(--kl-petrol-tm); }
.kl-centrala path { fill: var(--kl-navy); stroke:#fff; stroke-width:2; }
.kl-centrala text { fill: var(--kl-navy); font-weight:700; }
@keyframes kl-pulz { 0% { r:10; opacity:.5; } 100% { r:26; opacity:0; } }
@media (prefers-reduced-motion: reduce) { .kl-spendlik.je .kl-bod-zar { animation:none; } }

/* panel u mapy */
.kl-panel { background:#fff; border-radius:.9rem; border:1px solid var(--kl-linka); padding:1.1rem 1.2rem;
            box-shadow: 0 4px 18px rgba(35,48,91,.08); min-width:0; }
.kl-panel h3 { margin:.2rem 0 .4rem; font-size:1.15rem; }
.kl-panel p { margin:.3rem 0; font-size:.94rem; }
.kl-panel-ikona { display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
                  background: var(--kl-navy); color: var(--kl-zlata); font-size:1.1rem; }
.kl-panel-rada { color: var(--text-slaby); font-size:.86rem !important; border-top:1px dashed var(--kl-linka); padding-top:.6rem; margin-top:.8rem !important; }
.kl-panel .kl-karta { border:0; box-shadow:none; padding:0; background:transparent; }
.kl-panel .kl-karta:hover { transform:none; box-shadow:none; }
.kl-panel-zpet { background:none; border:0; padding:0; margin:0 0 .5rem; font:inherit; font-size:.85rem; color: var(--kl-petrol-tm); cursor:pointer; }

/* ---- karty klubů ---- */
.kl-karty { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap:1rem; }
.kl-karta { display:flex; flex-direction:column; gap:.35rem; padding:1.3rem 1.2rem 1.1rem; border-radius:1rem; background:#fff;
            border:1px solid var(--kl-linka); position:relative; text-align:center; min-width:0;
            transition: transform .15s, box-shadow .15s, border-color .15s; }
.kl-karta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35,48,91,.12); border-color: var(--kl-zlata); }
.kl-karta:target { border-color: var(--kl-petrol); box-shadow: 0 0 0 3px rgba(16,135,128,.25); }
.kl-karta-hlava { display:flex; flex-direction:column; align-items:center; gap:.15rem; text-decoration:none; color:inherit; }
.kl-karta-hlava .kl-foto { margin-bottom:.55rem; }
.kl-karta-mesto { font: 700 1.55rem/1.1 Georgia, "Times New Roman", serif; color: var(--kl-navy); letter-spacing:.01em; }
.kl-karta-hlava:hover .kl-karta-mesto { color: var(--kl-petrol-tm); }
.kl-karta-jmeno { font-weight:600; color: var(--kl-petrol-tm); }
.kl-karta-misto { font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--kl-zlata); font-weight:700; }
.kl-karta-adresa { margin:.35rem 0 0; font-size:.92rem; }
.kl-karta-doba { margin:0; font-size:.84rem; color: var(--text-slaby); }
.kl-karta .kl-tlacitka { justify-content:center; margin-top:auto; padding-top:.6rem; }
.kl-karta .kl-tl { font-size:.84rem; padding:.42rem .8rem; }
.kl-karty-male { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* zahraničí */
.kl-zahr-nadpis { margin:2rem 0 .7rem; font-size:1.15rem; }
.kl-zahr { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap:.7rem; }
.kl-zahr li { display:flex; flex-direction:column; gap:.15rem; padding:.85rem 1rem; border-radius:.8rem; background: var(--kl-kost-sv);
              border:1px solid var(--kl-linka); font-size:.88rem; min-width:0; overflow-wrap:anywhere; }
.kl-zahr strong { color: var(--kl-navy); font-size:1rem; }
.kl-zahr-spojeni { display:flex; flex-direction:column; gap:.1rem; margin-top:.2rem; }
.kl-zahr a { color: var(--kl-petrol-tm); }
.kl-dole { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.6rem 0 0; }

/* ---- detail klubu ---- */
.kl-hero { display:flex; align-items:center; gap:2.2rem; margin:.6rem 0 1.6rem; padding:2.2rem 2.4rem; border-radius:1.1rem; overflow:hidden;
           background: radial-gradient(ellipse at 88% 10%, rgba(16,135,128,.16), transparent 55%),
                       radial-gradient(ellipse at 5% 100%, rgba(201,164,75,.20), transparent 50%),
                       var(--kl-hex) 0 0 / 56px 97px, linear-gradient(120deg, var(--kl-kost-sv), var(--kl-kost));
           box-shadow: 0 6px 24px rgba(35,48,91,.10); }
.kl-hero-text { min-width:0; }
.kl-hero h1 { margin:0 0 .3rem; font: 700 clamp(2.3rem, 5.4vw, 3.6rem)/1.05 Georgia, "Times New Roman", serif; }
.kl-hero-jmeno { margin:0 0 .6rem; font-size:1.2rem; font-weight:600; color: var(--kl-petrol-tm); }
.kl-hero-jmeno span { color: var(--kl-zlata); font-weight:700; letter-spacing:.04em; }
.kl-hero-perex { margin:0 0 1rem; max-width:40rem; }

.kl-mrizka { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap:1.2rem; align-items:start; margin-bottom:2rem; }
.kl-udaje { background:#fff; border:1px solid var(--kl-linka); border-radius:1rem; padding:1.3rem 1.4rem; }
.kl-udaje h2 { margin-top:0; }
.kl-udaje dl { display:grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap:.55rem .8rem; margin:0 0 1rem; }
.kl-udaje dt { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--kl-zlata); font-weight:700; padding-top:.15rem; }
.kl-udaje dd { margin:0; overflow-wrap:anywhere; }
.kl-udaje dd small { display:block; color: var(--text-slaby); }
.kl-udaje a { color: var(--kl-petrol-tm); font-weight:600; }
.kl-radek { display:block; }
.kl-mapa-mala { padding:1rem; border-radius:1rem; background: var(--kl-hex) 0 0 / 56px 97px, var(--kl-kost-sv); border:1px solid var(--kl-linka); }
.kl-mapa-detail .kl-spendlik:not(.je) text { display:none; }
.kl-mapa-detail .kl-spendlik:not(.je) .kl-bod { r:6; fill:#fff; stroke: var(--kl-petrol); }
.kl-mapa-detail .kl-spendlik.je text { font-size:30px; }

.kl-akce, .kl-medailonek, .kl-okoli { margin: 0 0 2.2rem; }
.kl-akce .w-termin a { border-color: var(--kl-linka); }
.kl-akce .w-termin a:hover { border-color: var(--kl-petrol); }
.kl-akce .w-termin-datum strong { color: var(--kl-petrol-tm); }
.kl-akce .w-termin-nazev small { display:block; font-weight:400; font-size:.85rem; color: var(--text-slaby); }
.kl-akce-nic { padding:1rem 1.2rem; border-radius:.8rem; background: var(--kl-kost-sv); border:1px dashed var(--kl-linka); }
.kl-akce-pozn { font-size:.86rem; color: var(--text-slaby); }

.kl-rozhovor { max-width: 46rem; padding:.4rem 0 .2rem 1.4rem; border-left:3px solid var(--kl-zlata); }
.kl-rozhovor h3 { margin:1.3rem 0 .35rem; font-size:1.05rem; color: var(--kl-petrol-tm); }
.kl-rozhovor h3:first-child { margin-top:.2rem; }
.kl-rozhovor p { margin:.35rem 0; line-height:1.65; }

.kl-vyzva { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 2.2rem;
            padding:1.5rem 1.7rem; border-radius:1rem; color:#fff;
            background: var(--kl-hex) 0 0 / 56px 97px, linear-gradient(120deg, var(--kl-navy), #1d4f6e 60%, var(--kl-petrol)); }
.kl-vyzva h2 { color:#fff; margin:0 0 .3rem; }
.kl-vyzva h2::after { display:none; }
.kl-vyzva p { margin:0; max-width:34rem; }
.kl-vyzva .w-koupit { background: var(--kl-zlata); color: var(--kl-navy); }
.kl-vyzva .w-koupit:hover { background:#dcb95f; }
.kl-vyzva .kl-tl { background:transparent; color:#fff; border-color: rgba(255,255,255,.55); }

/* ---- mobil ---- */
@media (max-width: 56rem) {
  .kl-mapa-obal { grid-template-columns: 1fr; padding:.8rem; }
  .kl-mrizka { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .kl-spendlik text { display:none; }
  .kl-centrala text { display:none; }
  .kl-hero { flex-direction:column; text-align:center; gap:1.1rem; padding:1.6rem 1.1rem; }
  .kl-hero .kl-tlacitka { justify-content:center; }
  .kl-foto-velka { width:8.5rem; height:8.5rem; }
  .kl-udaje { padding:1.1rem 1rem; }
  .kl-udaje dl { grid-template-columns: 1fr; gap:.1rem; }
  .kl-udaje dd { margin-bottom:.5rem; }
  .kl-rozhovor { padding-left:.9rem; }
  .kl-vyzva { padding:1.2rem 1.1rem; }
  .kl-karty { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .kl-mapa-obal .kl-bod { r:13; stroke-width:3.5; }
  .kl-mapa-obal .kl-spendlik.je .kl-bod { r:15; }
  .kl-mapa-obal .kl-centrala path { transform-box: fill-box; transform-origin: center; transform: scale(1.5); }
}