/**
 * /css/kurz.css
 * ----------------------------------------------------------
 * Sekční CSS pro detail záznamu (kurz, akce, exkurze, soutěž).
 * Načítá se automaticky z includes/header.php pouze na stránkách
 * /kurzy/*, /akce/*, /exkurze/*, /soutez/* a kurz.php.
 *
 * Záměrně NEOBSAHUJE:
 *   - .signal-uroven, .kurz-card-uroven, .uroven-* → jsou v style.css
 *   - .kurz-card-stitky, .kurz-stitek              → jsou v style.css
 *   - .sa-filter-btn, .sa-filter-active             → jsou v style.css
 *   - navbar, footer, section, section-inner        → jsou v style.css
 * ----------------------------------------------------------
 */

/* ── Layout detailu ─────────────────────────────────────── */
/* Bílý kontejner — obsah na světlém pozadí */
.kurz-detail-wrapper {
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 8px);
    padding: 2rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
}

.kurz-detail-layout {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.kurz-detail-main {
    flex: 1 1 0;
    min-width: 0;
}

.kurz-detail-side {
    flex: 0 0 300px;
    width: 300px;
}
/* Béžové pozadí sekce, aby bílý wrapper vynikl */
.section:has(.kurz-detail-wrapper) {
    background: var(--bg-cream, #f5f1e8);
}

@media (max-width: 900px) {
    .kurz-detail-wrapper { padding: 1.25rem; }
    .kurz-detail-layout  { flex-direction: column; }
    .kurz-detail-side    { width: 100%; }
}

/* ── Meta pásek (kategorie, úroveň, štítky) ─────────────── */
/* Využívá existující styl .sa-filter-btn + .sa-filter-active ze style.css.
   Na detailu jsou neklikatelné — jen vizuální štítky. */
.kurz-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.kurz-detail-meta .sa-filter-btn {
  cursor: default;
  padding: .15rem .55rem;
  font-size: .55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  gap: .1rem;
}

/* Signal úrovně taky mírně zmenšit, ať ladí s menším paddingem */
.kurz-detail-meta .signal-uroven {
    transform: scale(.85);
    transform-origin: left center;
}

/* ── Textový obsah ──────────────────────────────────────── */
.kurz-obsah {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text, #111);
    margin-bottom: 1.5rem;
}

.kurz-obsah p:last-child { margin-bottom: 0; }

/* ── Sidebar boxy ───────────────────────────────────────── */
.side-box {
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 8px);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.side-box h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

/* ── Galerie ────────────────────────────────────────────── */
.galerie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.galerie-item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform .2s ease;
}

.galerie-item img:hover {
    transform: scale(1.04);
}

/* ── Soubory ke stažení ─────────────────────────────────── */
.file-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.file-list li {
    padding: .4rem 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.file-list li:last-child {
    border-bottom: none;
}

.file-list a {
    color: var(--primary-link, #1d4ed8);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
}

.file-list a:hover {
    text-decoration: underline;
}

.file-list .file-size {
    color: #888;
    font-size: .8rem;
    margin-left: auto;
}

/* ── YouTube embed ──────────────────────────────────────── */
.yt-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: var(--radius, 8px);
}

.yt-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── YouTube tlačítko ───────────────────────────────────── */
.btn-youtube {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #FF0000;
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    margin-top: 1rem;
    transition: background .2s ease;
}

.btn-youtube:hover {
    background: #CC0000;
    color: #fff;
}

/* ── Rozbalovací popis videa ────────────────────────────── */
/* Popis pod hlavním videem / playlistem — celý text, bez ořezu */
.video-desc,
.playlist-desc {
    font-size: .9rem;
    color: var(--text-light, #6b7280);
    line-height: 1.5;
}

/* Expand tlačítka pod hlavním přehrávačem už nejsou potřeba */
#currentVideoExpandBtn,
#playlistExpandBtn {
    display: none;
}

.video-desc.expanded,
.playlist-desc.expanded {
    -webkit-line-clamp: unset;
    display: block;
}

/* ── YT sekce a layout ──────────────────────────────────── */
.kurz-yt-section {
    margin-top: 1.5rem;
}

.yt-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.yt-main {
    flex: 1 1 0;
    min-width: 0;
}

/* Sidebar se přizpůsobí délce videa/obsahu — bez scrollu */
.yt-sidebar {
    flex: 0 0 320px;
    width: 320px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 8px);
    padding: .75rem 1rem;
    background: var(--bg-white, #fff);
}

@media (max-width: 900px) {
    .yt-layout   { flex-direction: column; }
    .yt-sidebar  { width: 100%; }
}

.yt-sidebar-title {
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    color: var(--text, #111);
}

.yt-current-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: .5rem 0 .4rem;
    line-height: 1.35;
    color: var(--text, #111);
}

/* Playlist položky */
.yt-playlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yt-playlist-item {
    display: flex;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
    cursor: pointer;
    transition: background .15s ease;
    border-radius: 4px;
}

.yt-playlist-item:last-child { border-bottom: none; }

.yt-playlist-item:hover { background: var(--bg, #f9fafb); }

.yt-playlist-item img {
    width: 100px;
    height: 56px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 4px;
}

.yt-playlist-item-info {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    flex: 1 1 0;
}

.yt-playlist-item-title {
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text, #111);
}

.yt-playlist-item-desc {
    font-size: .78rem;
    color: var(--text-light, #6b7280);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-playlist-item-desc.expanded {
    -webkit-line-clamp: unset;
    display: block;
}

/* Tlačítko Zobrazit více */
.yt-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .8rem;
    color: var(--primary, #1d4ed8);
    padding: 0;
    text-align: left;
    margin-top: .2rem;
}

.yt-expand-btn:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   KURZ-OBSAH — styly pro HTML obsah generovaný z editoru
   Všechny selektory jsou zanořeny pod .kurz-obsah, aby
   nepřebíjely ostatní styly na stránce.
═══════════════════════════════════════════════════════════ */

/* ── Blockquote — citace / zvýrazněný úvodní text ────────
   Béžové pozadí, kurzíva, velká uvozovka jako dekorace    */
.kurz-obsah blockquote {
    position: relative;
    background: #f5f0e8;
    border: none;
    border-radius: 4px;
    padding: 2rem 2rem 1.5rem 2.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #444;
}

/* Dekorativní uvozovka vlevo nahoře */
.kurz-obsah blockquote::before {
    content: '\201C';
    position: absolute;
    top: -0.2rem;
    left: 1rem;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: #c8b99a;
    line-height: 1;
}

/* Odstavce uvnitř blockquote — reset spodního marginu */
.kurz-obsah blockquote p {
    margin: 0 0 0.75rem;
}
.kurz-obsah blockquote p:last-child {
    margin-bottom: 0;
}


/* ── Callout — info box s modrým levým okrajem ───────────
   Používá se pro důležité informace (termín, vyhlášení).
   V HTML editoru přidat třídu: <p class="callout">        */
.kurz-obsah .callout {
    border-left: 4px solid var(--primary, #1a6ab1);
    background: #eef4fb;
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    border-radius: 0 4px 4px 0;
}


/* ── Nadpisy h3, h4 ──────────────────────────────────────
   Vizuální oddělení sekcí v obsahu kurzu                  */
.kurz-obsah h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2rem 0 0.5rem;
    color: var(--dark, #1a2b4a);
}
.kurz-obsah h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.5rem 0 0.4rem;
    color: var(--dark, #1a2b4a);
}


/* ── Odstavce ────────────────────────────────────────────
   Řádkování a mezery mezi odstavci                        */
.kurz-obsah p {
    margin: 0 0 1rem;
    line-height: 1.7;
}

/* Prázdné odstavce z editoru (obsahují jen &nbsp;) skrýt */
.kurz-obsah p:empty,
.kurz-obsah p > br:only-child {
    display: none;
}


/* ── Horizontální oddělovač ──────────────────────────────
   Tenká šedá čára pro oddělení sekcí                      */
.kurz-obsah hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
}


/* ── Odkazy ──────────────────────────────────────────────
   Barva odkazů odpovídá primární barvě webu               */
.kurz-obsah a {
    color: var(--primary-link, #1a6ab1);
    text-decoration: underline;
}
.kurz-obsah a:hover {
    text-decoration: none;
}

/* Text pod oddělovačem — menší písmo, tlumená barva */
.kurz-obsah .kurz-obsah-meta {
    font-size: 0.85rem;
    color: #666;
}
.kurz-obsah .kurz-obsah-meta a {
    color: var(--primary-link, #1a6ab1);
}