/* ==========================================================
   ai.vscht.cz – vlastní vrstva nad šablonou Massively
   Paleta odvozena z banneru "AI fórum" (neonová cyber-modrá)
   ========================================================== */

:root {
    --accent:      #17b3cc;   /* neonová azurová – hlavní */
    --accent-2:    #0e8fa6;   /* tmavší varianta pro text na světlém */
    --accent-glow: #22d3ee;   /* jasný neon pro hover/svit */
    --magenta:     #c026a8;   /* doplňkový neon */
    --deep:        #0d1b3e;   /* hluboké modré pozadí */
    --deep-2:      #14264f;
    --ink:         #1b2632;
    --ink-soft:    #55606c;
}

/* ---- Přebarvení výchozích modrých prvků šablony ---- */
a               { color: var(--accent-2); }
a:hover         { color: var(--accent-glow); }
#nav a.active   { color: var(--accent) !important; }

/* Tlačítka: plná výplň s bílým textem – čitelná (default šablony mělo
   průhledné pozadí + tmavý text, po přebarvení nešlo přečíst). */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    background-color: var(--accent-2) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(14, 143, 166, 0.28);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
    background-color: var(--accent) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(23, 179, 204, 0.45);
}
.button.primary {
    background-color: var(--magenta) !important;
    box-shadow: 0 4px 14px rgba(192, 38, 168, 0.3);
}
.button.primary:hover {
    background-color: #d63bbd !important;
    box-shadow: 0 8px 22px rgba(192, 38, 168, 0.5);
}

/* ============ HERO / INTRO ============ */
#intro {
    background-image:
        linear-gradient(180deg, rgba(13,27,62,.90) 0%, rgba(13,27,62,.70) 45%, rgba(13,27,62,.94) 100%),
        url("../../images/aiforum.jpg");
    background-size: cover;
    background-position: center;
}
#intro h1 {
    text-shadow: 0 0 24px rgba(34,211,238,.45), 0 2px 12px rgba(0,0,0,.4);
}
#intro:after {   /* jemná neonová linka pod nadpisem */
    content: "";
    display: block;
    width: 80px; height: 3px;
    margin: 1.5rem auto 0;
    background: linear-gradient(90deg, var(--accent-glow), var(--magenta));
    border-radius: 3px;
}

/* ============ WIDGETY FÓR ============ */
.forum-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 1rem 0;
}
.forum-widget {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%);
    border: 1px solid rgba(34,211,238,.25);
    border-radius: 12px;
    color: #eaf6f8;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.forum-widget:hover {
    transform: translateY(-4px);
    border-color: var(--accent-glow);
    box-shadow: 0 12px 30px rgba(13,27,62,.45), 0 0 0 1px rgba(34,211,238,.4) inset;
    color: #ffffff;
}
.forum-widget .fw-icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(34,211,238,.14);
    color: var(--accent-glow);
    font-size: 1.3rem;
}
.forum-widget .fw-text { line-height: 1.35; }
.forum-widget .fw-text strong { display:block; font-size: 1.02rem; color:#ffffff; }
.forum-widget .fw-text span   { font-size: .85rem; color: rgba(234,246,248,.72); }
.forum-widget .fw-arrow {
    margin-left: auto;
    color: var(--accent-glow);
    opacity: .6;
    transition: transform .22s ease, opacity .22s ease;
}
.forum-widget:hover .fw-arrow { transform: translateX(4px); opacity: 1; }

/* ============ ILUSTRACE (rozumná velikost, ne přes celou šířku) ==== */
.illus {
    max-width: 340px;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(27,38,50,.14);
}
.media-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin: 1.5rem 0;
}
.media-split .illus { flex: 0 0 340px; max-width: 340px; }
.media-split .media-body { flex: 1 1 300px; }
@media (max-width: 736px) {
    .media-split .illus { flex-basis: 100%; max-width: 100%; }
}

/* ============ GALERIE KURZŮ (menší dlaždice) ============ */
.course-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}
.course-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(27,38,50,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.course-gallery img:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(23,179,204,.28);
}
@media (max-width: 736px) {
    .course-gallery { grid-template-columns: 1fr 1fr; }
}

/* ============ KARTY TÝMU (O nás) ============ */
.team-grid { display:flex; flex-wrap:wrap; gap:2rem; margin:2.5rem 0 3rem; }
.team-card {
    flex:1 1 340px; background:#fff; border:1px solid #eee; border-radius:14px;
    padding:2rem 2rem 2.25rem; overflow:hidden; text-align:center;
    box-shadow:0 8px 24px rgba(27,38,50,.07);
    transition: transform .22s ease, box-shadow .22s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow:0 14px 34px rgba(23,179,204,.16); }
.team-card .team-photo {
    width:128px; height:128px; object-fit:cover; object-position:center 22%;
    display:block; margin:0 auto 1.25rem;
    border-radius:50%; border:3px solid var(--accent-glow);
}
.team-card .team-info { padding:0; text-align:left; }
.team-card h3 {
    display:flex; align-items:center; justify-content:center; gap:.6rem;
    margin-bottom:.75rem;
}
.team-card p  { font-size:.95rem; margin-bottom:.75rem; }
.team-card p:last-child { margin-bottom:0; }

/* LinkedIn odznak */
.li-badge {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:6px;
    background:#0a66c2; color:#fff !important;
    font-size:.85rem; border-bottom:none !important;
    transition: transform .18s ease, background-color .18s ease;
}
.li-badge:hover { background:#0e8fa6; color:#fff !important; transform:translateY(-2px); }

/* ============ PRUH HODNOT ============ */
.value-strip { display:flex; flex-wrap:wrap; gap:1.5rem; margin:1rem 0 2.5rem; text-align:center; }
.value-strip > div {
    flex:1 1 200px; padding:1.5rem 1rem; border-radius:10px;
    border-top:3px solid var(--accent); background:#f7fbfc;
}
.value-strip h3 { font-size:1.1rem; margin-bottom:.5rem; color:var(--ink); }
.value-strip p  { font-size:.9rem; color:var(--ink-soft); margin:0; }

/* ============ CITACE ============ */
.pull-quote {
    border-left:4px solid var(--accent); padding:.5rem 0 .5rem 1.5rem;
    margin:2rem 0; font-style:italic; color:var(--ink-soft);
}
.pull-quote cite {
    display:block; margin-top:.5rem; font-style:normal;
    font-size:.85rem; color:var(--accent-2);
}

/* ============ DYNAMIKA – plynulé nabíhání sekcí ============ */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Skrýt kvůli animaci jen když JS potvrdí podporu (třída na <html>).
   Bez JS zůstává obsah normálně viditelný. */
.js-anim .reveal { opacity: 0; }
.js-anim .reveal.is-visible { animation: riseIn .7s cubic-bezier(.2,.7,.2,1) forwards; }

/* jemný svit u featured obrázku */
.post.featured .image.main img { border-radius: 12px; }

/* ============ ČISTÉ POZADÍ ============ */
/* Šablona kreslí přes celý web tmavou rozmazanou parallax texturu (bg.jpg).
   Skryto – obsah má bílé pozadí, intro vlastní banner, web působí čistě. */
#wrapper > .bg { display: none !important; }
body, #wrapper { background: #f4f7f9; }

/* ---- Nová čistá patička (footer-cols) ---- */
#footer {
    display: block !important;
    background: var(--deep) !important;
    color: rgba(255,255,255,.78) !important;
    border-top: 3px solid var(--accent);
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
#footer .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 2.5rem;
    padding: 3.5rem 4rem 1rem;
    max-width: 1400px;
    margin: 0 auto;
}
#footer .footer-cols section { margin: 0; }
#footer .footer-cols h3 {
    color: var(--accent-glow);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .7rem;
}
#footer .footer-cols p { font-size: .85rem; line-height: 1.6; margin: 0; color: rgba(255,255,255,.78); text-align: left; }
#footer .footer-cols a { color: #ffffff; border-bottom-color: rgba(255,255,255,.35); }
#footer .footer-cols a:hover { color: var(--accent-glow); }
.footer-note {
    text-align: center;
    max-width: 1400px;
    margin: 1.5rem auto 0;
    padding: 1.5rem 4rem 0;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: .8rem;
    color: rgba(255,255,255,.6);
}
.footer-note a { color: rgba(255,255,255,.85); }
#copyright {
    background: var(--deep) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1.5rem 0 2.5rem !important;
}
#copyright ul li { color: rgba(255,255,255,.5) !important; }
@media (max-width: 736px) {
    #footer .footer-cols { grid-template-columns: 1fr 1fr; padding: 2.5rem 2rem 1rem; }
    .footer-note { padding: 1.5rem 2rem 0; }
}

/* ============ FIXNÍ MENU NAHOŘE ============ */
/* Šablona měla menu position:relative s poloprůhledným pozadím, které po
   odscrollování z hero splynulo a bylo nečitelné. Sticky tu nefunguje –
   #wrapper má overflow:hidden, který sticky ruší. Proto position:fixed
   + kompenzace odsazení obsahu (.nav-spacer), aby menu nezakrývalo obsah. */
#nav {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 3.5rem;
    line-height: 3.5rem;
    background: rgba(13, 27, 62, 0.96) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(34, 211, 238, 0.25);
    justify-content: center;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 1000 !important;
    transform: none !important;
}
#nav a:hover { color: var(--accent-glow) !important; }
#nav ul.links { padding-left: 0; }

/* Na malých displejích šablona přepíná na hamburger (#navPanelToggle);
   skryjeme fixní desktop lištu, aby se nepřekrývala. */
@media screen and (max-width: 736px) {
    #nav { display: none !important; }
}

/* ---- Kompenzace fixního menu ---- */
/* Podstránky bez #intro: #header (logo) i #main musí začínat pod lištou. */
#header { padding-top: 3.5rem; }
/* Stránky S #intro (hlavní): intro je fullscreen, menu přes něj plave –
   žádná kompenzace, ať banner není useknutý. Header s logem tam navíc
   splývá s intrem. */
#intro ~ #header { padding-top: 0; }

/* ============ ROZCESTNÍK ============ */
.post h2 { margin-top: 2.5rem; }

/* Widgety externích odkazů */
.link-widgets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.25rem 0 1rem;
}
.link-widget {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid #e7edf0;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.link-widget:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(23,179,204,.16);
    color: var(--ink);
}
.link-widget .lw-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 1.15rem;
}
.link-widget .lw-text { line-height: 1.35; }
.link-widget .lw-text strong { display: block; font-size: 1rem; color: var(--ink); }
.link-widget .lw-text span   { font-size: .84rem; color: var(--ink-soft); }
.link-widget .lw-ext {
    margin-left: auto; color: var(--accent-2); opacity: .55;
    transition: opacity .2s ease, transform .2s ease;
}
.link-widget:hover .lw-ext { opacity: 1; transform: translate(2px,-2px); }

/* Nedostupný (interní) odkaz */
.link-widget.is-disabled {
    cursor: default; opacity: .7; background: #f5f7f8;
}
.link-widget.is-disabled:hover { transform: none; box-shadow: none; border-color: #e7edf0; }
.link-widget.is-disabled .lw-icon {
    background: #c3ccd2;
}

/* Karty článků */
.article-list { display: flex; flex-direction: column; gap: 1rem; margin: 1.25rem 0; }
.article-card {
    display: block;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid #e7edf0;
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    text-decoration: none; color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease;
}
.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(23,179,204,.16);
    color: var(--ink);
}
.article-card h3 { margin-bottom: .5rem; }
.article-card p  { font-size: .95rem; color: var(--ink-soft); margin-bottom: .75rem; }
.article-card .ac-more {
    font-size: .85rem; font-weight: 700; color: var(--accent-2);
    display: inline-flex; align-items: center; gap: .4rem;
}
.article-card:hover .ac-more i { transform: translateX(3px); transition: transform .2s ease; }

@media (max-width: 736px) {
    .link-widgets { grid-template-columns: 1fr; }
}

/* ============ CTA DLAŽDICE (hlavní stránka) ============ */
.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1rem 0;
}
.cta-card {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2.25rem;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 260px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.cta-card:hover { transform: translateY(-5px); color: #fff; }
.cta-courses {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    box-shadow: 0 12px 30px rgba(23,179,204,.28);
}
.cta-courses:hover { box-shadow: 0 18px 40px rgba(23,179,204,.42); }
.cta-guide {
    background: linear-gradient(135deg, var(--deep-2) 0%, var(--deep) 100%);
    box-shadow: 0 12px 30px rgba(13,27,62,.3);
    border: 1px solid rgba(34,211,238,.25);
}
.cta-guide:hover { box-shadow: 0 18px 40px rgba(13,27,62,.5); border-color: var(--accent-glow); }
.cta-card .cta-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.15);
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}
.cta-card h2 { color: #fff; margin-bottom: .6rem; }
.cta-card p  { color: rgba(255,255,255,.9); font-size: .98rem; flex-grow: 1; }
.cta-card .cta-link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: .92rem;
    margin-top: .5rem;
}
.cta-card:hover .cta-link i { transform: translateX(4px); transition: transform .2s ease; }

@media (max-width: 736px) {
    .cta-grid { grid-template-columns: 1fr; }
}

/* ============ RECENZE ÚČASTNÍKŮ ============ */
.testimonials {
    columns: 2;
    column-gap: 1.5rem;
    margin: 1.5rem 0;
}
.testimonial {
    break-inside: avoid;
    margin: 0 0 1.5rem 0;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid #e7edf0;
    border-radius: 12px;
    border-left: 4px solid var(--accent);
    font-style: italic;
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.6;
    box-shadow: 0 6px 18px rgba(27,38,50,.05);
    position: relative;
}
.testimonial:before {
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 3rem;
    color: var(--accent);
    opacity: .25;
    position: absolute;
    top: .3rem; left: .6rem;
    line-height: 1;
}
@media (max-width: 736px) {
    .testimonials { columns: 1; }
}