/* =============================================================================
   site.css — CSS dnešního webu, přenesené z Global Styles v databázi
   (post wp-global-styles-twentytwentyfive, „Vlastní CSS" v Editoru webu,
   naposled uloženo 2026-06-23). Původní záznam v DB zůstal jako záloha.

   Platí pro celý web a načítá se i do editoru (viz functions.php).
   Nový štítkový/plakátový systém sem NEPATŘÍ — ten je v kapsa-core.css
   a v blocks/plakat/plakat.css.

   Rozdělené po logických celcích 2026-07-26 podle skutečného použití
   (`php tools/audit-site-css.php` projde obsah v DB i šablony motivu).
   Deklarace jsou nezměněné, jen přeskládané a okomentované.

   Odstraněno při úklidu:
     .decoration-clone — bez výskytu; zbytek po zahlušeném experimentu s hoverem
     .space-between    — bez výskytu; utilita justify-content
     .highlight        — animovaný obrys na hover; byl to pokus kolem plakátů,
                         ty už mají vlastní řešení (zvednutí stínem)
     hover u hyperlink-group-block — ztmavení a zvětšení; zvětšení se cukalo
     image-accordion / lateral-menu — zaparkované experimenty
   Kdyby se po nich zastesklo: původní CSS je pořád v DB v postu ID 6
   (wp-global-styles-twentytwentyfive), ten zůstal netknutý.
   ============================================================================= */


/* =============================================================================
   1 · ŠTÍTKY DNEŠNÍCH DLAŽDIC  ⚠ dočasné, na odstřel
   Starý ribbonový systém na kartách kroužků: vlaječka useknutá zleva do špičky,
   napozicovaná do rohu dlaždice. Nahrazuje ho nový štítkový systém
   (kapsa-core.css).

   STAV ODSTŘELU:
     1) zeď plakátů nahradí stránku „Kroužky pro děti Praha"  → .free, .age
        ⏳ ZBÝVÁ — proto tu ty dvě třídy pořád jsou
     2) štítky na homepage                                    → .summary, .summary2
        ✅ hotovo 2026-07-26, pravidla smazána (nahradil kapsa-core.css)
     3) štítky v záhlaví konkrétních kroužků                   ⏳ zbývá

   ⚠ PŘI DALŠÍM ÚKLIDU NEVĚŘIT DOTAZU DO DB. `.age`/`.free` se v post_content
   ukládají jako `class="age has-teko-font-family …"`, takže hledání
   `class="age"` je NENAJDE a vypadá to, že jsou mrtvé. Rozhoduje render:
     curl -s http://wordpress/krouzky-pro-deti-praha/ | grep -oE 'class="[^"]*\b(age|free)\b'

   POZOR: `.free` má position:absolute !important a kolidovalo to s plakátem —
   proto má plakátový signál třídu `stav-volno`, ne `free`.
   ============================================================================= */

.free, .age {
    color: white !important; font-weight: bold;
    position: absolute !important;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 15px 50%);
    padding: 4px 8px 4px 24px;
    text-align: right;
}

.age {
    background: #16A286 !important;
    right: -24px;
    top: 0;
}

.free {
    background: #aaaa00 !important;
    right: -24px;
    top: 60px;
}


/* =============================================================================
   2 · TYPOGRAFICKÉ EFEKTY
   ============================================================================= */

/* silný černý obrys + bílá záře — nadpis čitelný na jakékoli fotce
   (články o dronech) */
.outline-text {
    text-shadow: -2px -2px black, 2px 2px black, -1px 2px black, 2px -2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 0px 0px 20px white;
}

/* jemnější varianta téhož — text přes fotku na landing stránkách */
.text-shadow {
  text-shadow: 0 0 5px #000;
}

/* pomlčka před položkou místo odrážky */
.dash::before {
    content: "— ";
    font-weight: bold;
}


/* =============================================================================
   3 · LAYOUT — drobné utility
   ============================================================================= */

.no-bullet {
  list-style-type: none;
  padding-left: 0;
}

.float-right {
  float: right;
}

/* vytáhne prvek nad sousedy, když se překrývají */
.elevated {
  position: relative;
  z-index: 10;
}

/* dvojnásobná šířka v gridu (na mobilu se ruší, viz sekce 4) */
.span-2 {
  grid-column: span 2;
}


/* =============================================================================
   4 · MOBIL
   Třídy .is-layout-grid a .is-layout-constrained generuje WordPress až při
   renderu, takže je audit v obsahu nenajde — přesto jsou nosné, nemazat.
   ============================================================================= */

@media (max-width: 768px) {
  .span-2 {
    grid-column: auto;
  }
  /* jakýkoli grid na mobilu do jednoho sloupce */
  body .is-layout-grid {
    grid-template-columns: 1fr;
  }
  /* obtékání vpravo na úzkém displeji nedává smysl → do toku */
  .is-layout-constrained > .alignright  {
    float: none;
    margin-inline-start: 0;
  }
}

@media (max-width: 781px) {
  /* obrátí pořadí sloupců — na mobilu má jít text před obrázek */
  .reverse-mobile {
    flex-direction: column-reverse;
  }
}


/* =============================================================================
   5 · ÚPRAVY BLOKŮ A PLUGINŮ
   ============================================================================= */

/* odkaz přes celou skupinu (plugin hyperlink-group-block) — bez podtržení.
   Zůstává kvůli odkazům z plakátu na stránku kroužku.
   Pokusy o hover (ztmavení + zvětšení) zrušeny 2026-07-26 — zvětšení se cukalo
   a plakáty mají vlastní hover (zvednutí stínem). */
.wp-block-tiptip-hyperlink-group-block {
    text-decoration: none;
}

/* v coveru je odkaz podtržený až na hover (jinak by rušil v kompozici) */
.wp-block-cover a {
    text-decoration: none;
}

.wp-block-cover a:hover {
    text-decoration: underline;
}

/* rozostřený podklad panelu přes fotku */
.blur {
    backdrop-filter: blur(10px);
}

/* rozbalovací blok: +/− místo výchozího trojúhelníčku */
.wp-block-details summary {
  position: relative;
}

.wp-block-details summary::marker {
  content: "+ ";
  font-weight: bold;
}

.wp-block-details[open] summary::marker {
	content: "− "
}

/* cokoli s title atributem dostane tečkované podtržení = „najeď, je tu vysvětlivka" */
[title] {
  text-decoration: underline dotted;
}


/* =============================================================================
   6 · LIGHTBOX (plugin lightbox-photoswipe)
   Třídy .pswp* vyrábí PhotoSwipe až za běhu v JS → audit je v obsahu nenajde.
   Nemazat, dokud je plugin aktivní.
   ============================================================================= */

.pswp .pswp__hide-on-close.pswp__dynamic-caption--overlay {
  opacity: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0) 100%);
}

.pswp__dynamic-caption {
  color: #fff !important;
  font-family: "Annie CZ", "Annie Use Your Telescope", cursive;
  font-weight: bold;
  font-size: 40px;
  text-shadow: 0 0 10px black, 0 0 5px black;
}


/* =============================================================================
   7 · MENU A PATIČKA
   ============================================================================= */

/* položka menu jako tlačítko s oválným rámečkem (třída se přiřazuje
   v navigaci; v patičce je rámeček bílý a posunutý o padding zpět doleva) */
.menu-button a {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 0 20px;
}

footer .menu-button a {
  margin-left: -20px;
  border: 1px solid #fff;
}

footer {
  margin-top: 0 !important;
}


/* =============================================================================
   8 · VÝPIS PŘÍSPĚVKŮ NA ÚVODNÍ STRÁNCE
   Mozaika: první dva a poslední dva články mají nestejnou šířku (2+1, 1+2),
   aby výpis nebyl pravidelná mřížka. Používá šablona „Úvodní stránka webu".
   ============================================================================= */

@media (min-width: 1000px) {
.my-post-template ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.my-post-template li {
  margin-block-start: 0 !important;
}
.my-post-template li:nth-child(1) {
  grid-column: span 2;
}
.my-post-template li:nth-child(2) {
  grid-column: span 1;
}

.my-post-template li:nth-child(6) {
  grid-column: span 1;
}
.my-post-template li:nth-child(7) {
  grid-column: span 2;
}
}