/* ─── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:           #05111e;
    --bg2:          #071828;
    --nav-bg:       #030d18;
    --surface:      rgba(255,255,255,0.045);
    --surface-h:    rgba(255,255,255,0.08);
    --border:       rgba(255,255,255,0.08);
    --border-h:     rgba(79,195,247,0.5);
    --text:         #e8f1ff;
    --muted:        rgba(232,241,255,0.46);
    --accent:       #4fc3f7;
    --accent-dim:   rgba(79,195,247,0.12);
    --teal:         #24CEA6;
    --teal-dim:     rgba(36,206,166,0.12);
    --teal-border:  rgba(36,206,166,0.35);
    --nav-h:        64px;
    --radius:       12px;
    --tr:           0.2s ease;

    /* tag colours */
    --t-ehl:        #24CEA6;
    --t-ckk:        #64B5F6;
    --t-konference: #4DD0E1;
    --t-kulinarne:  #80CBC4;
    --t-evaluace:   #A5D6A7;
    --t-interreg:   #90CAF9;
    --t-mas:        #81D4FA;
    --t-map:        #CE93D8;
    --t-ostatni:    #B0BEC5;
    --t-zmatkymatky: #F48FB1;
}

/* ─── LIGHT MODE VARIABLES ──────────────────────────────────────── */
html.light-mode {
    --bg:        #f0f8ff;
    --bg2:       #e4f2fb;
    --surface:   #ffffff;
    --surface-h: #f0f8ff;
    --border:    rgba(20,40,80,0.12);
    --border-h:  rgba(0,153,200,0.45);
    --text:      #1a1a2e;
    --muted:     #5a6a8a;
    --accent:    #0099cc;
    --accent-dim: rgba(0,153,204,0.12);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ─── NAVBAR ────────────────────────────────────────────────────── */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--nav-h);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 2.5rem;
    backdrop-filter: blur(14px);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: var(--text);
}

.nav-logo { height: 38px; width: auto; filter: brightness(0) invert(1); }

.nav-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ─── HERO ──────────────────────────────────────────────────────── */
.hero {
    display: flex;
    justify-content: center;
    padding: 4.5rem 2.5rem 4rem;
    background: linear-gradient(150deg, #071422 0%, #0c2240 50%, rgba(36,206,166,0.10) 100%);
    border-bottom: 1px solid var(--border);
}

.hero-inner {
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    animation: fadeUp 0.7s ease both;
}

.hero-text {
    text-align: center;
}

.hero-title {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -0.025em;
    color: #fff;
    margin-bottom: 1.1rem;
}

.hero-sub {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ── Selector panel ── */
.selector-panel {
    width: 100%;
    background: linear-gradient(135deg, rgba(36,206,166,0.10) 0%, rgba(36,206,166,0.03) 100%);
    border: 1px solid var(--teal-border);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    backdrop-filter: blur(8px);
    animation: fadeUp 0.7s 0.15s ease both;
    position: relative;
    z-index: 10;
}

.panel-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1.25rem;
    text-align: center;
}

/* ── Org cards ── */
.org-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.org-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}

.org-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(36,206,166,0.25);
    border-color: var(--teal-border);
}

.org-card.selected {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(36,206,166,0.20), 0 8px 28px rgba(36,206,166,0.20);
    transform: translateY(-3px);
}
.org-card[data-org="pstros"].selected,
.org-btn[data-org="pstros"].active {
    border-color: #ff6666;
    box-shadow: 0 0 0 3px rgba(255,102,102,0.22), 0 8px 28px rgba(255,102,102,0.22);
}

.org-logo {
    height: 52px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
}

/* ─── MAIN ──────────────────────────────────────────────────────── */
main {
    flex: 1;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2.5rem 4rem;
}

/* ─── FILTER BAR ────────────────────────────────────────────────── */
.filter-bar {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.65rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.filter-bar.visible {
    display: flex;
    animation: filterIn 0.3s ease both;
}

@keyframes filterIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.filter-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
}

/* ── Pill filter buttons ── */
.f-btn {
    padding: 0.38rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--tr), color var(--tr), border-color var(--tr);
}

.f-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text);
    border-color: rgba(255,255,255,0.28);
}

.f-btn.active {
    background: var(--teal);
    border-color: var(--teal);
    color: #05111e;
    font-weight: 700;
}

.filter-count {
    font-size: 0.8rem;
    color: var(--muted);
    flex: 1;
    white-space: nowrap;
}

.status-label {
    font-size: 0.85rem;
    color: var(--muted);
}
.status-label strong { color: var(--accent); }

.clear-org-btn {
    display: none;
    padding: 0.32rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tr), color var(--tr), border-color var(--tr);
    white-space: nowrap;
}
.clear-org-btn.visible { display: inline-flex; align-items: center; gap: 0.3rem; }
.clear-org-btn:hover { background: rgba(239,83,80,0.1); border-color: rgba(239,83,80,0.35); color: #ef5350; }

/* ─── NO RESULTS ────────────────────────────────────────────────── */
.no-results {
    display: none;
    text-align: center;
    padding: 5rem 1rem;
    color: var(--muted);
}

/* ─── GRID ──────────────────────────────────────────────────────── */
.items-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* ─── CARD ──────────────────────────────────────────────────────── */
.item-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.05rem 1.1rem 2.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    opacity: 0;
    transition: background var(--tr), border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}

.item-card.card-in {
    animation: cardIn 0.38s ease both;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.item-card:hover {
    background: var(--surface-h);
    border-color: var(--border-h);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.32);
}

/* ─── TAG ───────────────────────────────────────────────────────── */
.item-tag {
    display: inline-block;
    padding: 0.17rem 0.62rem;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    align-self: flex-start;
    border: 1px solid currentColor;
}

.tag-ehl        { color: var(--t-ehl);        background: rgba(36,206,166,0.09); }
.tag-ckk        { color: var(--t-ckk);        background: rgba(100,181,246,0.09); }
.tag-konference { color: var(--t-konference);  background: rgba(77,208,225,0.09); }
.tag-kulinarne  { color: var(--t-kulinarne);   background: rgba(128,203,196,0.09); }
.tag-evaluace   { color: var(--t-evaluace);    background: rgba(165,214,167,0.09); }
.tag-interreg   { color: var(--t-interreg);    background: rgba(144,202,249,0.09); }
.tag-mas        { color: var(--t-mas);         background: rgba(129,212,250,0.09); }
.tag-mas-zpravodaj { color: var(--t-mas);     background: rgba(129,212,250,0.09); }
.tag-map        { color: var(--t-map);         background: rgba(206,147,216,0.09); }
.tag-ostatni      { color: var(--t-ostatni);      background: rgba(176,190,197,0.09); }
.tag-zmatkymatky  { color: var(--t-zmatkymatky);  background: rgba(244,143,177,0.09); }
.tag-pstros       { background: #ff6666;           color: #ffffff; }
.tag-image        { color: #ffb74d;               background: rgba(255,183,77,0.09); }

.item-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
}
.item-card:hover .item-title { color: #fff; }

/* ─── FOOTER ────────────────────────────────────────────────────── */
footer {
    background: var(--nav-bg);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
    margin-top: 6rem;
}

.footer-top {
    padding: 2rem 2.5rem 1.2rem;
    text-align: center;
}

.footer-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}


.footer-bottom {
    padding: 1rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--muted);
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
}

/* ─── ENTRANCE ANIMATION ────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── RESPONSIVE: NOTEBOOK (max 1199px) ─────────────────────────── */
@media (max-width: 1199px) {
    .items-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── RESPONSIVE: TABLET / LANDSCAPE (max 899px) ────────────────── */
@media (max-width: 899px) {
    .hero { padding: 3rem 1.5rem 3rem; }
    .hero-inner { gap: 2rem; }
    .selector-panel { padding: 1.25rem 1.25rem; }
    .items-grid { grid-template-columns: repeat(2, 1fr); }
    main { padding: 1.5rem 1.5rem 3rem; }
    .navbar { padding: 0 1.5rem; }
}

/* ─── RESPONSIVE: PHONE PORTRAIT (max 599px) ────────────────────── */
@media (max-width: 599px) {
    .navbar { padding: 0 1rem; }
    .nav-title { font-size: 0.88rem; }
    .nav-logo { height: 30px; }

    .hero { padding: 2.5rem 1rem 2.5rem; }
    .hero-inner { gap: 1.75rem; }
    .hero-title { font-size: 2.1rem; }

    main { padding: 1.1rem 1rem 2.5rem; }
    .items-grid { grid-template-columns: 1fr; gap: 0.8rem; }

    .footer-top { padding: 1.5rem 1rem 1rem; }
    .footer-bottom { padding: 0.9rem 1rem; }
}

/* ─── LIGHT MODE ELEMENT OVERRIDES ─────────────────────────────── */

/* Nav text vždy bílý – nav zůstává tmavý v obou módech */
html.light-mode .nav-brand { color: #ffffff; }

html.light-mode .hero {
    background: #f0f8ff !important;
    border-bottom-color: rgba(20,40,80,0.1);
}
html.light-mode .hero-title { color: #1a1a2e; }
html.light-mode .hero-sub   { color: #4a4a6a; }
html.light-mode .theme-toggle {
    background: rgba(26,26,46,0.1);
    color: #1a1a2e;
    border: 1px solid rgba(26,26,46,0.2);
}
html.light-mode .theme-toggle:hover {
    background: rgba(26,26,46,0.18);
    border-color: rgba(26,26,46,0.35);
}

html.light-mode .filter-bar {
    background: rgba(20,40,80,0.04);
}

html.light-mode .f-btn {
    border-color: rgba(20,40,80,0.18);
    color: var(--muted);
}
html.light-mode .f-btn:hover {
    background: rgba(20,40,80,0.06);
    color: var(--text);
    border-color: rgba(20,40,80,0.32);
}

html.light-mode .clear-org-btn {
    border-color: rgba(20,40,80,0.18);
    color: var(--muted);
}
html.light-mode .clear-org-btn:hover {
    background: rgba(239,83,80,0.08);
}

html.light-mode .item-card {
    box-shadow: 0 2px 8px rgba(20,40,80,0.08);
}
html.light-mode .item-card:hover {
    background: #e8f4ff;
    border-color: #00c9a7;
    box-shadow: 0 4px 20px rgba(0,201,167,0.15);
    transform: translateY(-2px);
}
html.light-mode .item-card:hover .item-title { color: #1a1a2e !important; }
html.light-mode .item-card:hover .item-meta,
html.light-mode .item-card:hover .item-desc,
html.light-mode .item-card:hover .item-tag,
html.light-mode .item-card:hover { color: inherit !important; }

/* ─── MAIN: position relative pro theme toggle ──────────────────── */
main { position: relative; }

/* ─── UTILITY TŘÍDY PRO JS THEME TOGGLE ────────────────────────── */
.force-light-bg { background: #f0f8ff !important; color: #1a1a2e !important; }
.force-dark-bg  { background: #1a1a2e !important; color: #e8f1ff !important; }

/* ─── FORUM NADPISY V LIGHT MODE ────────────────────────────────── */
html.light-mode #pstrosForum h2,
html.light-mode #pstrosForum h3,
html.light-mode .forum-section-title,
html.light-mode .forum-cta h3,
html.light-mode [class*="forum"] h2,
html.light-mode [class*="forum"] h3 {
    color: #1a1a2e !important;
}