/* =============================================================================

   RESPONZIVNÍ DESIGN - MEDIA QUERIES

   Autor: Václav Cieslar

   Popis: Pouze media queries pro responzivní design - bez základních stylů

   ============================================================================= */



/* =============================================================================

   ANIMACE PRO SCROLL EFEKTY

   ============================================================================= */



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* =============================================================================

   RESPONZIVNÍ DESIGN - MOBILNÍ ZAŘÍZENÍ

   ============================================================================= */



/* Extra malé displeje (do 400px) */

@media (max-width: 400px) {

    .projects-container {

        width: 100%;

        padding: 20px 10px;

    }

    

    .projects-title h1 {

        font-size: 2.5rem;

    }

    

    .project-card {

        padding: 25px 15px;

        margin-bottom: 25px;

    }

    

    .project-card h3 {

        font-size: 1.5rem;

    }

    

    .project-card ul li {

        font-size: 1rem;

        padding-left: 30px;

    }

    

    .btn-project {

        font-size: 1rem;

        padding: 12px 24px;

    }

    

    .skills-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

}



/* Malé mobilní displeje (do 480px) */

@media (max-width: 480px) {

    header {

        padding: 0 1rem;

    }

    

    .logo img {

        width: 50px;

        height: 50px;

    }

    

    .about-me h1,

    .projects-title-main {

        font-size: 2rem;

    }

    

    .contactContainer {

        padding: 2rem;

    }

    

    .modern-card {

        padding: 1.5rem;

    }

    

    /* Hero sekce pro malé mobily */

    .hero-container {

        grid-template-columns: 1fr;

        gap: 3rem;

        text-align: center;

    }

    

    .hero-content h1 {

        font-size: 2.5rem;

    }

    

    /* Timeline pro malé mobily */

    .timeline::before {

        left: 15px;

    }

    

    .timeline-item {

        padding-left: 3rem;

    }

    

    .timeline-icon {

        left: -30px;

        width: 45px;

        height: 45px;

        font-size: 1.2rem;

    }

    

    .timeline-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }

    

    /* Personal sekce pro malé mobily */

    .personal-container {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    

    .interests-grid {

        grid-template-columns: 1fr 1fr;

    }

    

    /* Values sekce pro malé mobily */

    .values-grid {

        grid-template-columns: 1fr;

    }

    

    /* CTA sekce pro malé mobily */

    .cta-content h2 {

        font-size: 2rem;

        flex-direction: column;

        gap: 0.5rem;

    }

    

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .btn-custom {

        width: 100%;

        max-width: 300px;

    }

    

    .stats-grid {

        grid-template-columns: 1fr;

    }

    

    .stat-number {

        font-size: 2.5rem;

    }

}



/* =============================================================================

   RESPONZIVNÍ DESIGN - TABLETY A MENŠÍ NOTEBOOKY

   ============================================================================= */



/* Tablety a menší notebooky (do 768px) */

@media (max-width: 768px) {

    /* === NAVIGACE A HAMBURGER MENU === */

    .menu-icon {

        display: block;

        z-index: 1001;

    }

    

    .main-nav {

        display: none;

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background: var(--glass-light);

        backdrop-filter: blur(20px);

        border-radius: 0 0 20px 20px;

        padding: 2rem 0;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        z-index: 1000;

    }

    

    body.dark-mode .main-nav {

        background: var(--glass-dark);

    }

    

    .main-nav.show {

        display: block !important;

        animation: slideDown 0.3s ease;

    }

    

    .main-nav ul {

        flex-direction: column;

        text-align: center;

        gap: 1rem;

    }



    .menu-toggle-checkbox:checked ~ .main-nav {

    display: flex !important;

    animation: slideDown 0.3s ease-in-out;

}

    

    /* === OBECNÉ KOMPONENTY === */

    .projects-container {

        width: 90%;

        padding: 20px 15px;

    }

    

    .project-card {

        padding: 35px 25px;

    }

    

    .skills-grid {

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        gap: 2rem !important;

        justify-items: center !important;

    }

    

.up {

    bottom: 1rem !important;

    right: 6rem !important;

    width: 50px !important;

    height: 50px !important;

    z-index: 9999 !important;

}



.up img {

    width: 55px !important;

    height: 55px !important;

    /*filter: brightness(0) invert(1) !important;*/

    display: block !important;

}

    

    .about-me-container,

    .grid,

    .certificates-container {

        grid-template-columns: 1fr;

    }

    

    .about-me h1 {

        font-size: 2.5rem;

    }

    

    .projects-title-main {

        font-size: 2.5rem;

    }

    

    .modern-card {

        padding: 2rem;

    }

    

    /* === FOOTER === */

    .footer {

        flex-shrink: 0;

    }

    

    .footer-container {

        flex-direction: column;

        align-items: center !important; /* vycentrovat */

        text-align: center;

        gap: 2rem;

    }

    

    .footer-left,

    .footer-right,

    .contact-info {

        align-items: center !important;

    }

    

    /* === HERO SEKCE PRO TABLETY === */

    .hero-container {

        grid-template-columns: 1fr;

        gap: 3rem;

        text-align: center;

    }

    

    .hero-content h1 {

        font-size: 3rem;

    }

    

    /* === TIMELINE PRO TABLETY === */

    .timeline::before {

        left: 20px;

    }

    

    .timeline-item {

        padding-left: 4rem;

    }

    

    .timeline-icon {

        left: -35px;

        width: 50px;

        height: 50px;

        font-size: 1.3rem;

    }

    

    .timeline-achievements {

        flex-direction: column;

    }

    

    /* === PERSONAL SEKCE PRO TABLETY === */

    .personal-container {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    

    .interests-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    /* === VALUES SEKCE PRO TABLETY === */

    .values-grid {

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    }

    

    /* === CTA SEKCE PRO TABLETY === */

    .cta-buttons {

        flex-direction: column;

        align-items: center;

        gap: 1rem;

    }

    

    /* === CERTIFIKÁTY A DOVEDNOSTI === */

    .certificates-hero h2 {

        font-size: 2.5rem;

        flex-direction: column;

        gap: 0.5rem;

    }

    

    .intro-card {

        padding: 2rem;

    }

    

    .skills-categories {

        grid-template-columns: 1fr;

    }

    

    .skill-progress-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }

    

    .skill-progress-item span:first-child {

        min-width: auto;

    }

    

    .progress-bar {

        width: 100%;

    }

    

    /* === PROJEKTY === */

    .project-meta {

        justify-content: center;

    }

    

    .project-technologies {

        justify-content: center;

    }

    

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .achievement {

        flex-direction: column;

        text-align: center;

    }

        .hero-container {

        grid-template-columns: 1fr !important;

        text-align: center;

    }

    

    .hero-image,

    .personal-image {

        margin: 0 auto;

        max-width: 300px;

    }

    

    .hero-image img,

    .personal-image img {

        max-width: 100%;

    }

    

    .personal-container {

        grid-template-columns: 1fr !important;

    }

    

    .personal-image {

        order: -1; /* Obrázek nahoře na mobilu */

        margin-bottom: 2rem;

    }



    .skills-showcase {

    padding: 2.5rem 1.5rem !important;

    margin: 3rem 0 !important;

}



.skills-grid {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;

    gap: 2rem !important;

    justify-items: center !important;

}

}



/* =============================================================================

   RESPONZIVNÍ DESIGN - VĚTŠÍ DISPLEJE

   ============================================================================= */



/* Zobrazení navigace na větších displejích */

@media (min-width: 769px) {

    .menu-icon {

        display: none;

    }

    

    .main-nav {

        display: flex !important;

    }

}



@media (max-width: 600px) {

  .stats-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    padding: 0 1rem;

  }



  .stat-item {

    padding: 1rem;

    border-radius: 1rem;

    background: rgba(255, 255, 255, 0.05);

    text-align: center;

    color: white;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

  }



  .stat-number {

    font-weight: bold;

    margin-bottom: 0.5rem;

    word-break: keep-all;

  }



  .stat-label {

    line-height: 1.2;

    white-space: normal;

    word-break: break-word;

  }



  .stat-icon i {

    font-size: 2rem;

    margin-top: 0.5rem;

    display: inline-block;

  }

  .skills-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 2rem;

}

}



@media (max-width: 480px) {

    .skills-grid {

        justify-items: center !important;

        place-items: center !important;

    }



        .stats-section {

        padding: 2rem 1rem !important;

        margin: 2rem 0 !important;

    }

}



@media (max-width: 480px) {

.skills-showcase {

    margin: 2rem 0 !important;

    padding: 2rem 1rem !important;

}



.skills-grid {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 1.5rem !important;

}



.skill-item {

    margin: 0 !important;

    max-width: 280px !important;

    width: 100% !important;

}



.skills-title {

    font-size: 1.8rem !important;

    margin-bottom: 2rem !important;

    text-align: center !important;

}



.stats-grid {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 1.5rem !important;

}



.stat-item {

    margin: 0 !important;

    max-width: 280px !important;

    width: 100% !important;

}



.stats-title {

    font-size: 1.8rem !important;

    margin-bottom: 2rem !important;

    text-align: center !important;

}

}



/* MOBILNÍ ÚPRAVY PRO PROJEKTY SEKCI */

@media (max-width: 768px) {

    /* Projekt karty na mobilu */

    .modern-card {

        padding: 1.5rem !important;

        margin-bottom: 2rem !important;

    }

    

    /* Nadpisy projektů */

    .modern-card h3 {

        font-size: 1.5rem !important;

        text-align: center;

        margin-bottom: 1rem !important;

    }

    

    /* Project meta na mobilu */

    .project-meta {

        justify-content: center !important;

        gap: 0.5rem !important;

        margin-bottom: 1.5rem !important;

    }

    

    .project-duration,

    .project-type {

        font-size: 0.8rem !important;

        padding: 0.3rem 0.8rem !important;

    }

    

    /* Seznam v projektech - lepší čitelnost */

    .modern-card ul {

        padding: 0 !important;

        margin: 1.5rem 0 !important;

    }

    

    .modern-card ul li {

     font-size: 1.2rem !important;

    line-height: 1.4 !important;

    margin-bottom: 0.2rem !important;

    padding: 0.5rem !important;

    background: rgba(255, 255, 255, 0.05) !important;

    border-radius: 8px !important;

    display: flex !important; /* DŮLEŽITÉ - musí být flex, ne block */

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: baseline !important;

}

    

    /* Ikony v seznamu */

    .modern-card ul li i {

        margin-right: 0.5rem !important;

        width: 20px !important;

        text-align: center !important;

        display: inline-block !important;

        color: var(--accent-tertiary) !important;

    }



        .modern-card ul li:has(.web-link) {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        align-items: baseline !important;

    }

    

    .modern-card ul li .web-link {

        display: inline !important;

        white-space: nowrap !important;

        margin-left: 0.3rem !important;

    }



    

    

    /* Odkazy na mobilu */

    .modern-card ul li .web-link {

        display: inline !important;

        margin-left: 0.3rem !important;

        font-size: 0.9rem !important;

        padding: 0.2rem 0.5rem !important;

        border-radius: 4px !important;

        word-break: break-all !important;

        white-space: nowrap !important;

    }

    

    /* Tech tagy na mobilu */

    .project-technologies {

        justify-content: center !important;

        gap: 0.3rem !important;

        margin: 1rem 0 !important;

    }

    

    .tech-tag {

        font-size: 1rem !important;

        padding: 0.2rem 0.6rem !important;

    }

    

    /* Tlačítka na mobilu */

    .modern-btn {

        width: 100% !important;

        justify-content: center !important;

        font-size: 0.9rem !important;

        padding: 0.8rem 1.5rem !important;

    }

}



/* Pro extra malé mobily */

@media (max-width: 480px) {

    .modern-card h3 {

        font-size: 1.5rem !important;

    }

    

    .modern-card ul li {

        font-size: 1.2rem !important;

        padding: 0.4rem !important;

    }

    

    .modern-card ul li .web-link {

     font-size: 0.85rem !important;

    display: inline !important;  /* MUSÍ BÝT inline */

    white-space: nowrap !important;

    margin-left: 0.3rem !important;

}

}



/* =============================================================================

   13. MEDIA QUERIES (RESPONSIVITA)

   ============================================================================= */

/* Oprava viditelnosti textů na mobilu v light mode */

@media (max-width: 768px) {

    /* Základní text */

    body:not(.dark-mode) p,

    body:not(.dark-mode) span,

    body:not(.dark-mode) div,

    body:not(.dark-mode) li {

        color: var(--light-text-primary) !important;

    }

    

    /* Navigace */

    body:not(.dark-mode) .main-nav {

        background: #ffffff !important;

        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;

    }

    

    body:not(.dark-mode) nav li a {

        color: var(--light-text-primary) !important;

    }

    

    body:not(.dark-mode) nav li a:hover {

        color: var(--accent-primary) !important;

        background: rgba(43, 80, 243, 0.1) !important;

    }

    

    /* Menu icon */

    body:not(.dark-mode) .menu-icon .bar {

        background: var(--light-text-primary) !important;

    }

    

    body:not(.dark-mode) .menu-icon .menu-text {

        color: var(--light-text-primary) !important;

    }

    

    /* Formuláře */

    body:not(.dark-mode) .form-group label {

        color: var(--light-text-primary) !important;

    }

    

    body:not(.dark-mode) .contactContainer p,

    body:not(.dark-mode) .contactContainer strong {

        color: var(--light-text-primary) !important;

    }

    

    /* Karty a komponenty */

    body:not(.dark-mode) .item p,

    body:not(.dark-mode) .certificate p,

    body:not(.dark-mode) .modern-card p,

    body:not(.dark-mode) .project-card p {

        color: var(--light-text-secondary) !important;

    }

    

    /* Statistiky - správné barvy textů v light mode */

    body:not(.dark-mode) .stat-label {

        color: var(--light-text-primary) !important; /* #1a202c - tmavě šedá/černá */

        font-size: 1.2rem;

        font-weight: 600;

    }

    

    body:not(.dark-mode) .skill-name {

        color: var(--light-text-primary) !important; /* #1a202c - tmavě šedá/černá */

        font-size: 1.2rem;

        font-weight: 600;

    }

    

    /* Obnovení barevných čísel */

    body:not(.dark-mode) .stat-number {

        color: var(--accent-tertiary) !important;

    }

    

    body:not(.dark-mode) .skill-percentage {

        color: var(--accent-primary) !important;

    }

    

    /* Barevné ikony ve statistikách */

    body:not(.dark-mode) .stat-icon {

        color: var(--accent-primary) !important; /* Modrá barva pro ikony */

        opacity: 1;

    }

    

    body:not(.dark-mode) .skill-icon i {

        color: var(--accent-primary) !important;

    }

    

    /* Obnovení ohraničení karet */

    body:not(.dark-mode) .stat-item,

    body:not(.dark-mode) .skill-item {

        background: #ffffff !important;

        border: 1px solid #e0e0e0 !important;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;

    }

    

    body:not(.dark-mode) .project-card,

    body:not(.dark-mode) .modern-card {

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;

    }

    

    body:not(.dark-mode) .certificate,

    body:not(.dark-mode) .modern-certificate {

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;

    }

    

    body:not(.dark-mode) .value-card {

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;

    }

    

    body:not(.dark-mode) .item {

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;

    }

    

    /* Timeline */

    body:not(.dark-mode) .timeline-body,

    body:not(.dark-mode) .timeline-body p {

        color: var(--light-text-secondary) !important;

    }

    

    /* About sekce */

    body:not(.dark-mode) .about-me p,

    body:not(.dark-mode) .hero-intro p {

        color: var(--light-text-secondary) !important;

    }

    

    /* Hodnoty */

    body:not(.dark-mode) .value-card p {

        color: var(--light-text-secondary) !important;

    }

    

    /* Footer */

    body:not(.dark-mode) .footer {

        background: #f8f9fa !important;

    }

    

    body:not(.dark-mode) .footer-left span,

    body:not(.dark-mode) .footer-right span,

    body:not(.dark-mode) .contact-info div,

    body:not(.dark-mode) .email-link {

        color: var(--light-text-primary) !important;

    }

    

    /* Zajistit čitelnost na světlém pozadí */

    body:not(.dark-mode) {

        background: #ffffff !important;

    }

    

    body:not(.dark-mode) main {

        background: #ffffff !important;

    }

    

    /* Přidání kontrastního pozadí pro sekce */

    body:not(.dark-mode) section {

        background: #ffffff !important;

    }

    

    body:not(.dark-mode) .about-me-container,

    body:not(.dark-mode) .projects-section,

    body:not(.dark-mode) .certificates-section,

    body:not(.dark-mode) .contact-form-section {

        background: #ffffff !important;

    }

    

    /* Zajištění viditelnosti navigace při otevření */

    body:not(.dark-mode) .menu-toggle-checkbox:checked ~ .main-nav::before {

        background: #ffffff !important;

    }



    body.dark-mode .project-card,

    body.dark-mode .modern-card,

    body.dark-mode .skills-showcase,

    body.dark-mode .stats-section {

        background: rgba(255, 255, 255, 0.05) !important;

        border: 1px solid rgba(255, 255, 255, 0.15) !important;

        border-radius: 20px !important;

    }

}



/* Tablet a menší zařízení */

@media (max-width: 968px) {

    .about-me-container {

        grid-template-columns: 1fr;

        gap: 3rem;

        margin: 4rem auto;

    }

    

    .about-me-photo {

        position: relative;

        top: auto;

        max-width: 350px;

        margin: 0 auto;

    }

    

    .about-me h1 {

        font-size: 2.5rem;

        text-align: center;

    }

    

    .about-me p:first-child {

        font-size: 1.15rem;

    }

}



/* Mobilní zařízení */

@media (max-width: 768px) {

    /* Navigace */

    .main-nav ul {

        flex-direction: column;

        gap: 1rem;

    }



    .menu-icon {

        display: flex;

    }



    .menu-toggle-checkbox:checked ~ .main-nav {

        display: flex;

        animation: slideDown 0.3s ease-in-out;

    }



    .menu-toggle-checkbox:checked ~ .main-nav::before {

        content: '';

        position: fixed;

        top: 80px;

        left: 0;

        width: 100%;

        min-height: 100%;

        background: white;

        z-index: -1;

    }



    body.dark-mode .menu-toggle-checkbox:checked ~ .main-nav::before {

        background: #1a202c;

    }



    .mode-container {

        margin-left: auto;

        margin-right: 2rem;

    }

    

    /* Hero intro */

    .hero-intro p {

        font-size: 1rem;

        line-height: 1.7;

    }

    

    /* About page hero */

    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 2rem;

    }

    

    .hero-content h1 {

        font-size: 2rem;

    }

    

    .hero-image {

        max-width: 300px;

        margin: 0 auto;

    }

    

    /* Timeline */

    .timeline::before {

        left: 20px;

    }

    

    .timeline-item {

        padding-left: 60px;

    }

    

    .timeline-icon {

        left: 5px;

    }

    

    .timeline-header {

        flex-direction: column;

        align-items: flex-start;

    }

    

    /* Personal */

    .personal-container {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .personal-image {

        order: -1;

        max-width: 300px;

        margin: 0 auto;

    }

    

    .interests-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    /* Values */

    .values-grid {

        grid-template-columns: 1fr;

    }

    

    /* CTA */

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .btn-custom {

        width: 100%;

        max-width: 300px;

    }

}



/* Malé mobilní zařízení */

@media (max-width: 480px) {

    .about-me-container {

        margin: 3rem auto;

    }

    

    .about-me h1 {

        font-size: 2rem;

    }

    

    .about-me h1 i {

        display: block;

        margin-bottom: 1rem;

        text-align: center;

    }

    

    .about-me h3 {

        font-size: 1.5rem;

    }

    

    .about-me ul {

        padding: 1rem;

    }

    

    .about-me ul li {

        font-size: 1rem;

        padding-left: 2.5rem;

    }

    

    .about-me .btn-custom {

        padding: 1rem 2rem;

        font-size: 1.2rem;

    }

}



/* =============================

   🟦 MOBILY – malá zařízení

   ============================= */

@media (max-width: 480px) {

  body {

    font-size: 0.95rem;

  }



  .project-card,

  .modern-card {

    padding: 1.5rem;

  }



  .project-card h3,

  .modern-card h3 {

    font-size: 1.5rem;

  }



  .modern-card ul li {

    font-size: 0.95rem;

    line-height: 1.4;

    margin-bottom: 0.6rem;

  }



  .project-meta {

    flex-direction: column;

    gap: 0.5rem;

  }

}



/* =============================

   🟨 MOBILY A TABLETY – běžná šířka

   ============================= */

@media (max-width: 768px) {

  body {

    font-size: 1rem;

  }



  .project-card,

  .modern-card {

    padding: 2rem;

  }



  .project-card h3,

  .modern-card h3 {

    font-size: 1.8rem;

  }



  .modern-card ul li {

    font-size: 1rem;

    line-height: 1.5;

    margin-bottom: 0.8rem;

  }



  .skills-grid,

  .stats-grid {

    grid-template-columns: 1fr; /* 1 sloupec */

  }

}



/* Přidejte tento CSS kód do sekce MEDIA QUERIES (kolem řádku 1800) */



/* ROZŠÍŘENÍ SEKCÍ NA PROJEKTY STRÁNCE */

.projects-section {

    max-width: 1400px !important;

    padding: 5rem 1rem !important;

}



.projects-container {

    max-width: 1400px !important;

}



/* OPRAVA DARK MODE OHRANIČENÍ A POZADÍ */

body.dark-mode .project-card::before,

body.dark-mode .modern-card::before {

    display: none !important;

}



body.dark-mode .skill-item {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

}



body.dark-mode .stat-item {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

}



/* Oprava project-meta (Současnost, B2B E-commerce atd.) */

.project-meta {

    display: inline-flex !important;

    gap: 0.8rem !important;

    flex-wrap: wrap !important;

    margin-bottom: 1.5rem !important;

}



.project-duration,

.project-type {

    display: inline-flex !important;

    align-items: center !important;

    gap: 0.4rem !important;

    padding: 0.4rem 0.8rem !important;

    font-size: 0.9rem !important;

    border-radius: 15px !important;

    width: auto !important;

}



/* Dark mode project-meta */

body.dark-mode .project-duration,

body.dark-mode .project-type {

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

}



/* ZÁKLADNÍ VELIKOST PÍSMA PRO UL LI */

.modern-card ul li,

.project-card ul li {

    font-size: 1.2rem !important; /* Sjednocení velikosti písma */

    line-height: 1.6 !important;

}



/* MOBILNÍ VERZE */

@media (max-width: 768px) {

    /* Zachování emoji ikon */

    .modern-card ul li::before {

        content: '✨' !important;

        position: relative !important;

        display: inline-block !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        margin-right: 0.5rem !important;

        font-size: 1.2rem !important;

        flex-shrink: 0 !important;

    }

    

    /* Obecné styly pro ul li */

    .modern-card ul li,

    .project-card ul li {

        display: flex !important;

        align-items: flex-start !important;

        gap: 0.5rem !important;

        padding-left: 0 !important;

        margin-bottom: 1rem !important;

        font-size: 1.2rem !important; /* Zachování velikosti i na mobilu */

    }

    

    /* Font Awesome ikony */

    .modern-card ul li i,

    .project-card ul li i {

        color: var(--accent-primary) !important;

        font-size: 1.2rem !important;

        min-width: 1.5rem !important;

        margin-top: 0.2rem !important;

        flex-shrink: 0 !important;

    }

    

    /* Oprava zalamování textu a odkazů */

    .modern-card ul li {

        word-wrap: break-word !important;

        overflow-wrap: break-word !important;

    }

    

    .modern-card ul li .web-link,

    .project-card ul li .web-link {

        display: inline !important;

        word-break: break-word !important;

        hyphens: auto !important;

        -webkit-hyphens: auto !important;

        -ms-hyphens: auto !important;

    }

    

    /* Speciální úprava pro text s odkazem */

    .modern-card ul li:has(.web-link) {

        flex-wrap: nowrap !important;

        white-space: normal !important;

    }

    

    /* Oprava pro položky s odkazy - aby zůstaly na jednom řádku */

    .modern-card ul li {

        flex-wrap: nowrap !important;

    }

    

    .modern-card ul li .web-link {

        display: inline !important;

        white-space: nowrap !important;

        margin-left: 0.3rem !important;

    }

    

    /* Dark mode specifické úpravy */

    body.dark-mode .modern-card ul li::before {

        color: #ffd700 !important;

    }

    

    body.dark-mode .project-card,

    body.dark-mode .modern-card,

    body.dark-mode .skill-item,

    body.dark-mode .stat-item,

    body.dark-mode .skills-showcase {

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

    }

    

    /* Oprava project-meta v mobilní verzi */

    .project-meta {

        justify-content: flex-start !important;

    }

    

    .project-duration,

    .project-type {

        font-size: 0.85rem !important;

        padding: 0.3rem 0.6rem !important;

    }

}



/* DESKTOP - ROZŠÍŘENÍ OBSAHU */

@media (min-width: 769px) {

    .projects-section .project-card,

    .projects-section .modern-card {

        margin-bottom: 2.5rem !important;

        padding: 2.5rem 3rem !important;

    }

    

    .skills-showcase,

    .stats-section {

        max-width: 1400px !important;

        margin: 4rem auto !important;

        padding: 3rem !important;

    }

    

    .skills-grid,

    .stats-grid {

        max-width: 1400px !important;

        gap: 2.5rem !important;

    }

}



/* TABLET */

@media (min-width: 769px) and (max-width: 1024px) {

    .projects-section {

        padding: 4rem 2rem !important;

    }

    

    .projects-container {

        max-width: 95% !important;

    }

}



/* EXTRA MALÉ OBRAZOVKY */

@media (max-width: 480px) {

    .projects-section {

        padding: 3rem 0.5rem !important;

    }

    

    .modern-card ul li,

    .project-card ul li {

        font-size: 1.15rem !important; /* Trochu menší na velmi malých obrazovkách */

        margin-bottom: 0.8rem !important;

    }

    

    .modern-card ul li::before {

        font-size: 1.1rem !important;

        margin-right: 0.4rem !important;

    }

    

    .modern-card ul li i,

    .project-card ul li i {

        font-size: 1.1rem !important;

    }

}



/* Alternativní řešení pro inline odkazy */

.modern-card ul li {

    display: flex !important;

    flex-wrap: nowrap !important;

    align-items: flex-start !important;

}



.modern-card ul li .web-link {

    display: inline !important;

    white-space: nowrap !important;

    margin-left: 0.3rem !important;

    flex-shrink: 0 !important;

}



/* MOBILNÍ OPRAVY */

@media (max-width: 768px) {

    /* Light mode */

    body:not(.dark-mode) .skills-showcase {

        background: white !important;

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        border-radius: 25px !important;

        padding: 2rem 1rem !important;

    }

    

    body:not(.dark-mode) .stats-section {

        background: white !important;

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        border-radius: 25px !important;

    }

    

    /* Dark mode */

    body.dark-mode .skills-showcase {

        background: rgba(26, 32, 44, 0.4) !important;

        border: 1px solid rgba(255, 255, 255, 0.15) !important;

        border-radius: 25px !important;

    }

    

    body.dark-mode .stats-section {

        background: rgba(26, 32, 44, 0.4) !important;

        border: 1px solid rgba(255, 255, 255, 0.15) !important;

        border-radius: 25px !important;

    }

    

    /* Oprava stat-label v dark mode na mobilu */

    body.dark-mode .stat-label {

        color: rgba(255, 255, 255, 0.9) !important;

    }

}



/* MOBILNÍ DARK MODE OPRAVY */

@media (max-width: 768px) {

    /* Oprava pozadí */

    body.dark-mode {

        background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%) !important;

    }

    

    /* Projects title wrapper */

    body.dark-mode .projects-title-wrapper {

        background: rgba(255, 255, 255, 0.05) !important;

        border: 1px solid rgba(255, 255, 255, 0.15) !important;

        border-radius: 20px !important;

        backdrop-filter: blur(10px);

    }

    

    /* Projekt karty */

    body.dark-mode .project-card,

    body.dark-mode .modern-card {

        background: rgba(255, 255, 255, 0.08) !important;

        border: 1px solid rgba(255, 255, 255, 0.2) !important;

        border-radius: 20px !important;

        backdrop-filter: blur(10px);

        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;

    }

    

    /* Skills a stats sekce */

    body.dark-mode .skills-showcase,

    body.dark-mode .stats-section {

        background: rgba(255, 255, 255, 0.05) !important;

        border: 1px solid rgba(255, 255, 255, 0.15) !important;

        border-radius: 25px !important;

        backdrop-filter: blur(10px);

    }

    

    /* Jednotlivé skill a stat položky */

    body.dark-mode .skill-item,

    body.dark-mode .stat-item {

        background: rgba(255, 255, 255, 0.08) !important;

        border: 1px solid rgba(255, 255, 255, 0.15) !important;

        border-radius: 20px !important;

    }

    

    /* Oprava pro main element */

    body.dark-mode main {

        background: transparent !important;

    }

    

    /* Projects section pozadí */

    body.dark-mode .projects-section {

        background: transparent !important;

    }

}



@media (max-width: 480px) {

    body.dark-mode .projects-container {

        padding: 1rem;

    }

    

    body.dark-mode .projects-title-wrapper {

        padding: 1.5rem;

        margin-bottom: 2rem;

    }

    

    body.dark-mode .project-card,

    body.dark-mode .modern-card {

        margin-bottom: 1.5rem;

    }

}



/* Oprava skills-categories na mobilu */

@media (max-width: 768px) {

    .skills-categories {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 2rem !important;

    }

    

    .skill-category-card {

        background: var(--glass-light) !important;

        border-radius: 20px !important;

        padding: 2rem !important;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;

        border: 1px solid var(--glass-border-light) !important;

        position: relative !important;

        overflow: hidden !important;

    }

    

    /* Dark mode úpravy */

    body.dark-mode .skill-category-card {

        background: rgba(255, 255, 255, 0.05) !important;

        border: 1px solid rgba(255, 255, 255, 0.15) !important;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;

    }

    

    .skill-category-card::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 3px;

        background: var(--gradient-primary);

    }

    

    .category-header {

        display: flex !important;

        align-items: center !important;

        gap: 1rem !important;

        margin-bottom: 2rem !important;

    }

    

    .category-header i {

        font-size: 2rem !important;

        color: var(--accent-primary) !important;

    }

    

    .category-header h4 {

        font-size: 1.5rem !important;

        color: var(--light-text-primary) !important;

        margin: 0 !important;

    }

    

    body.dark-mode .category-header h4 {

        color: var(--dark-text-primary) !important;

    }

    

    /* Progress bars */

    .skill-progress-item {

        display: flex !important;

        align-items: center !important;

        gap: 1rem !important;

        margin-bottom: 1.5rem !important;

        flex-direction: row !important;

    }

    

    .skill-progress-item span:first-child {

        min-width: 120px !important;

        font-weight: 600 !important;

        color: var(--light-text-secondary) !important;

    }

    

    body.dark-mode .skill-progress-item span:first-child {

        color: var(--dark-text-secondary) !important;

    }

    

    .progress-bar {

        flex: 1 !important;

        height: 8px !important;

        background: rgba(102, 126, 234, 0.2) !important;

        border-radius: 10px !important;

        overflow: hidden !important;

        position: relative !important;

    }

    

    .progress-fill {

        height: 100% !important;

        background: var(--gradient-primary) !important;

        border-radius: 10px !important;

        transition: width 2s ease-out !important;

    }

    

    .percentage {

        min-width: 50px !important;

        text-align: right !important;

        font-weight: 600 !important;

        color: var(--accent-primary) !important;

        font-size: 0.9rem !important;

    }

}



/* Pro extra malé displeje */

@media (max-width: 480px) {

    .skill-category-card {

        padding: 1.5rem !important;

    }

    

    .category-header h4 {

        font-size: 1.3rem !important;

    }

    

    .skill-progress-item {

        flex-wrap: wrap !important;

    }

    

    .skill-progress-item span:first-child {

        min-width: 100% !important;

        margin-bottom: 0.5rem !important;

    }

    

    .progress-bar {

        width: calc(100% - 60px) !important;

    }

}



/* Tablet a menší zařízení */

@media (max-width: 968px) {

    .about-me-container {

        grid-template-columns: 1fr;

        gap: 3rem;

        margin: 4rem auto;

    }

    

    .about-me-photo {

        position: relative;

        top: auto;

        max-width: 350px;

        margin: 0 auto;

    }

    

    .about-me h1 {

        font-size: 2.5rem;

        text-align: center;

    }

    

    .about-me p:first-child {

        font-size: 1.15rem;

    }

}



/* Mobilní zařízení */

@media (max-width: 768px) {

    /* Navigace */

    .main-nav {

        display: none;

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background: #ffffff !important;

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;

        border-radius: 0 0 20px 20px;

        padding: 2rem 0;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        z-index: 1000;

    }

    

    body.dark-mode .main-nav {

        background: #1a1a2e !important;

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;

    }



    .main-nav ul {

        flex-direction: column;

        gap: 1rem;

    }



    .menu-icon {

        display: flex;

    }



    .menu-toggle-checkbox:checked ~ .main-nav {

        display: flex;

        animation: slideDown 0.3s ease-in-out;

    }



    .menu-toggle-checkbox:checked ~ .main-nav::before {

        content: '';

        position: fixed;

        top: 80px;

        left: 0;

        width: 100%;

        min-height: 100%;

        background: white;

        z-index: -1;

    }



    body.dark-mode .menu-toggle-checkbox:checked ~ .main-nav::before {

        background: #1a202c;

    }



    .mode-container {

        margin-left: auto;

        margin-right: 2rem;

    }

    

    /* Hero intro */

    .hero-intro p {

        font-size: 1rem;

        line-height: 1.7;

    }

    

    /* About page hero */

    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 2rem;

    }

    

    .hero-content h1 {

        font-size: 2rem;

    }

    

    .hero-image {

        max-width: 300px;

        margin: 0 auto;

    }

    

    /* Timeline */

    .timeline::before {

        left: 20px;

    }

    

    .timeline-item {

        padding-left: 60px;

    }

    

    .timeline-icon {

        left: 5px;

    }

    

    .timeline-header {

        flex-direction: column;

        align-items: flex-start;

    }

    

    /* Personal */

    .personal-container {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .personal-image {

        order: -1;

        max-width: 300px;

        margin: 0 auto;

    }

    

    .interests-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    /* Values */

    .values-grid {

        grid-template-columns: 1fr;

    }

    

    /* CTA */

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .btn-custom {

        width: 100%;

        max-width: 300px;

    }

}



/* Malé mobilní zařízení */

@media (max-width: 480px) {

    .about-me-container {

        margin: 3rem auto;

    }

    

    .about-me h1 {

        font-size: 2rem;

    }

    

    .about-me h1 i {

        display: block;

        margin-bottom: 1rem;

        text-align: center;

    }

    

    .about-me h3 {

        font-size: 1.5rem;

    }

    

    .about-me ul {

        padding: 1rem;

    }

    

    .about-me ul li {

        font-size: 1rem;

        padding-left: 2.5rem;

    }

    

    .about-me .btn-custom {

        padding: 1rem 2rem;

        font-size: 1rem;

    }

}