/* =========================================
   RESPONSIVE — all breakpoints consolidated
   ========================================= */

/* ---- TABLET & MOBILE (≤ 1024px) ---- */
@media (max-width: 1024px) {

    /* Footer */
    .gf-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .gf-cta-section {
        grid-column: auto;
        padding-bottom: 2rem;
    }

    .gf-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Modal sidebar */
    .modal-layout {
        flex-direction: column;
        overflow-y: auto;
        height: 100vh;
    }
    .modal-sidebar-col {
        width: 100%;
        height: auto;
        border-left: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .modal-main-col {
        height: auto;
        overflow-y: visible;
    }
    .modal-image {
        height: auto;
        padding: 2rem 0;
    }
    .modal-image img {
        max-height: 70vh;
    }

    /* Featured Work — sticky slides */
    .featured-work .section-header { padding: 4rem 2rem 2rem; }
    .fs-title { font-size: clamp(2rem, 5vw, 3.5rem); }
    .fs-info  { flex: 0 0 48%; padding: 2.5rem 1.5rem 2.5rem 3%; }
    .fs-progress { right: 1.2rem; }
    .fs-scroll-hint { left: 24%; }

    .slider-controls { display: flex; }

    /* Archive */
    .archive-layout { grid-template-columns: 1fr; }
    .sticky-filter-wrapper { position: static; margin-bottom: 2rem; }
    .filter-list { flex-direction: row; flex-wrap: wrap; }
    .f-btn { border: 1px solid #ddd; }
    .span-col-2, .span-row-2 { grid-column: auto; grid-row: auto; }
    .archive-grid { grid-auto-rows: auto; }
    .a-image { aspect-ratio: 16/9; }

    /* Stats */
    .dashboard-stats { gap: 1rem; }
    .d-value { font-size: 1.5rem; }

    /* XP */
    .xp-grid { grid-template-columns: 1fr; }
}

/* ---- MOBILE (≤ 768px) ---- */
@media (max-width: 768px) {

    /* ---- CURSOR ---- */
    .custom-cursor, .cursor-aura { display: none; }
    body { cursor: auto; }
    a, button, .f-card, .a-card, .featured-slide[data-project] { cursor: pointer !important; }
    /* Custom kurzor je pod 769 px vypnutý (initCursor se ukončí), takže
       polím je nutné nativní I-beam vrátit — jinak zůstanou bez kurzoru. */
    input, textarea, select, option, label,
    .form-input, .form-textarea { cursor: auto !important; }
    input[type="submit"], input[type="button"] { cursor: pointer !important; }

    /* ---- NAV ---- */
    .mobile-header { display: flex; }
    .lang-switcher { display: none; }
    .fab-contact { display: flex; }

    /* ---- DOTYKOVÉ CÍLE ----
       Prst není kurzor. Vizuální velikost prvků zůstává, roste jen plocha,
       na kterou se dá trefit — doporučené minimum je ~44 px.
       Hamburger měl 30 × 20 px, odkazy v patičce ~20 px na výšku. */
    .hamburger-menu {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 12px 7px;
    }
    .mobile-logo { padding: 0.55rem 0; }
    .m-lang-btn { padding: 0.5rem 0.9rem; }
    .scroll-indicator { padding: 0.6rem 1rem; }

    /* ---- SECTIONS ---- */
    section { padding: 3rem 1.2rem; }
    .hero { padding-top: 5.5rem; }

    /* ---- HERO ---- */
    .hero h1 { font-size: clamp(3.5rem, 18vw, 6rem); }
    .hero-name-top, .hero-name-bottom { transform: none !important; }
    /* Hollow text → filled on mobile (no stroke glitches) */
    .hero-name-bottom {
        will-change: auto;
        -webkit-text-stroke: 0;
        color: var(--accent);
    }
    .fs-num {
        font-size: 0.7rem !important;
        line-height: 1 !important;
        -webkit-text-stroke: 0 !important;
        color: var(--accent) !important;
        will-change: auto !important;
    }
    .fs-intro-heading em {
        -webkit-text-stroke: 0 !important;
        color: var(--accent) !important;
        will-change: auto !important;
    }

    /* ---- ABOUT ---- */

    /* Remove huge decorative :) number — overflows and creates scroll on mobile */
    .bg-number { display: none; }

    .editorial-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    /* Simplify photo on mobile */
    .photo-column { padding: 0.5rem 0 0; }
    .photo-frame-back { display: none; }
    .editorial-photo { aspect-ratio: 3/2; width: 100%; }
    .photo-caption { right: 0; bottom: 0; font-size: 0.7rem; }
    .location-widget { margin-bottom: 1rem; font-size: 0.72rem; padding: 0.6rem 1rem; }

    .manifesto-highlight { font-size: 1.7rem; margin-bottom: 1.2rem; min-height: 0; }
    .bio-columns { grid-template-columns: 1fr; gap: 0.8rem; font-size: 0.95rem; }
    .action-row { flex-direction: column; align-items: flex-start; margin-top: 1.5rem; gap: 1rem; }
    .btn-group { flex-direction: row; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
    .contact-cta, .download-cv { padding: 0.85rem 1.5rem; font-size: 0.85rem; }
    .software-toolkit-large { gap: 1.2rem; }
    .software-icon-lg { width: 40px; height: 40px; }

    .career-section { margin-top: 3.5rem; }

    /* ---- FEATURED WORK — mobile redesign ---- */
    /*
     * On desktop: sticky horizontal scroll through full-screen slides.
     * On mobile: disable sticky mechanism entirely, show as vertical
     * card list — each card has image on top (56vw height) + info below.
     */

    /* Step 1: Kill the sticky scroll container */
    .featured-sticky-outer { height: auto; }
    .featured-sticky-inner {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        perspective: none !important;
    }
    .featured-slides-track {
        flex-direction: column !important;
        height: auto !important;
        transform: none !important;   /* Override JS inline transform */
        transform-style: flat !important;
        gap: 0 !important;
    }

    /* Step 2: All slides visible regardless of .is-active class */
    .featured-slide .fs-image-wrap  { opacity: 1 !important; }
    .featured-slide .fs-info        { opacity: 1 !important; transform: none !important; }
    .featured-slide .fs-intro-inner { opacity: 1 !important; transform: none !important; }

    /* Step 3: Intro slide → compact section label */
    .fs-intro-slide {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 2.5rem 1.2rem 1.8rem !important;
        cursor: auto !important;
        border-bottom: none !important;
        /* 3D dlaždic je čistě desktopová věc — na telefonu jen ubírá výkon
           a rozbíjí čtení. Sousedi se nevykukují, takže by stejně nebylo co. */
        transform: none !important;
        opacity: 1 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .fs-intro-slide::after    { display: none !important; }
    .fs-intro-scroll-cue      { display: none !important; }
    .fs-intro-eyebrow         { margin-bottom: 0.6rem; }
    .fs-intro-heading {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.0 !important;
    }

    /* Step 4: Project cards — image top, info below */
    .featured-slide:not(.fs-intro-slide) {
        min-width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        /* Byl tu 2px růžový pruh (--accent). Na desktopu se dlaždice oddělují
           prostorem, takže na mobilu měl nahradit tu hranici — jenže nad první
           kartou seděl těsně pod nadpisem „Vybrané práce“ a četl se jako chyba
           renderu, ne jako design. Vlasová linka oddělí karty stejně dobře
           a nekonkuruje růžové v nadpisu. */
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        border-bottom: none !important;
        background: #080808 !important;
    }

    /* Image: fixed height proportional to screen */
    .featured-slide:not(.fs-intro-slide) .fs-image-wrap {
        flex: none !important;
        width: 100% !important;
        height: 56vw !important;
        min-height: 180px !important;
        order: 1 !important;
    }

    /* Image gradient: fade darker at bottom edge */
    .featured-slide:not(.fs-intro-slide) .fs-image-wrap::before {
        background: linear-gradient(to bottom, transparent 45%, rgba(8,8,8,0.65) 100%);
    }

    /* Info block: below image */
    .featured-slide:not(.fs-intro-slide) .fs-info {
        flex: 1 !important;
        order: 2 !important;
        flex-direction: column !important;
        padding: 1.4rem 1.2rem 1.8rem !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
    }

    /* Typography tweaks inside cards */
    .fs-meta    { margin-bottom: 0.4rem !important; gap: 0.5rem !important; }
    .fs-title   { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; margin-bottom: 0 !important; }
    .fs-tags    { margin-bottom: 0.3rem !important; gap: 0.25rem !important; }
    .fs-cta     { margin-top: 0.2rem !important; }

    /* Description: show, clamp to 2 lines */
    .fs-desc {
        font-size: 0.875rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
    }

    /* Hide nav dots and slide counter */
    .fs-progress { display: none !important; }
    .fs-counter  { display: none !important; }

    /* ---- MODAL ---- */
    .modal-close { top: 1rem; right: 1rem; }
    .modal-layout { flex-direction: column; overflow-y: auto; height: 100vh; }
    .modal-sidebar-col {
        width: 100%; height: auto;
        border-left: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 1.5rem;
    }
    .modal-main-col { height: auto; overflow-y: visible; padding: 1.5rem; }
    .modal-sidebar-col h2 { font-size: 2rem; }
    .modal-image { height: auto; padding: 1.5rem 0; }
    .modal-image img { max-height: 80vh; }
    .pd-grid-2, .comparison-wrapper { grid-template-columns: 1fr; gap: 2rem; }
    .pd-title { font-size: 1.5rem; }

    /* ---- FOOTER ---- */
    .gf-container { padding: 3.5rem 1.2rem; }
    .gf-grid { grid-template-columns: 1fr; gap: 2rem; }
    .gf-big-email { font-size: clamp(1.8rem, 7vw, 2.5rem); }
    .gf-bottom {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        /* Plovoucí tlačítko kontaktu sedí 2 rem nad spodní hranou a je 56 px
           vysoké — bez tohohle odsazení leží přes copyright a „Zpět nahoru". */
        padding-bottom: 6rem;
    }

    /* Odkazy v patičce jsou na telefonu jediná navigace, tak ať se do nich dá
       trefit. Padding je svislý, takže se rozestupy nezmění opticky, jen se
       zvětší plocha. */
    .gf-nav { gap: 0 !important; }
    .gf-nav a { display: block; padding: 0.7rem 0; }
    .gf-nav a:hover { padding-left: 0; }
    .gf-phone { padding: 0.65rem 0; }
    .gf-vcard { padding: 0.95rem 1.3rem; }
    .gf-back-top { padding: 0.8rem 0.4rem; }

    /* ---- ARCHIVE ---- */
    .archive-section { padding: 3rem 1.2rem; }
    .archive-grid { grid-template-columns: 1fr; }
    .archive-sidebar, .archive-grid { min-width: 0; }

    /* Statistiky v řadě, tlačítko přes celou šířku pod nimi.
       V jedné řadě se na 390 px popisky lámaly na dva řádky („Total / Files")
       a na „Surprise me" zbylo 8,8 px — pod hranicí čitelnosti. */
    .archive-dashboard {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1.1rem !important;
        padding: 1.2rem !important;
    }
    .dashboard-stats {
        justify-content: space-between;
        gap: 0.8rem;
        min-width: 0;
    }
    .d-stat { justify-content: flex-start; min-width: 0; }
    .d-label { font-size: 0.68rem; white-space: nowrap; }
    .d-value { font-size: 1.8rem; }
    .dashboard-actions { width: 100%; }
    .random-glitch-btn {
        width: 100%;
        padding: 0.9rem 1rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    /* Filters: horizontal scrollable square tiles */
    .sticky-filter-wrapper { margin-bottom: 1.5rem; }
    .filter-label { font-size: 0.7rem; margin-bottom: 0.5rem; }
    .filter-list {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.45rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .filter-list::-webkit-scrollbar { display: none; }
    .f-btn {
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        scroll-snap-align: start;
        width: 72px !important;
        height: 72px !important;
        padding: 0.4rem 0.3rem !important;
        border: 1px solid rgba(0,0,0,0.15) !important;
        font-size: 0.6rem !important;
        line-height: 1.2 !important;
        gap: 0 !important;
    }
    .f-btn::before { display: none !important; }
    .f-btn:hover { padding-left: 0.3rem !important; }
    .filter-count {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 0.2rem !important;
        font-size: 0.65rem !important;
    }

    /* ---- CAREER ---- */
    .xp-card { min-height: auto; padding: 1.8rem 1.4rem; }
    /* Odsazený rámeček vyčnívá o 10 px vpravo, což se na 390 px ořízne
       o padding sekce a vypadá to jako chyba sazby, ne jako ozdoba. */
    .xp-card::before { display: none; }
    .xp-card-header { flex-direction: column; gap: 0.5rem; }
    .xp-company-logo { text-align: left; font-size: 1rem; }

    /* ---- LIGHTBOX ----
       Screenshoty z desktopu jsou na telefonu tak jako tak drobné, tak ať
       aspoň využijí celou šířku. Zbytek dořeší pinch zoom — viewport ho
       nikde nezakazuje. */
    .lightbox img { max-width: 100%; max-height: 88vh; border-radius: 0; }
    .lb-arrow { width: 44px; height: 44px; font-size: 1.2rem; }
    .lightbox-controls { padding: 0 0.6rem; }
}

/* ---- SMALL PHONES (≤ 480px) ---- */
@media (max-width: 480px) {
    .hero h1    { font-size: clamp(3rem, 20vw, 5rem); }
    .fs-title   { font-size: 1.4rem !important; }
    .fs-num     { font-size: 0.65rem !important; }
    .fs-info    { padding: 1.2rem 1rem 1.5rem !important; }
    .gf-big-email { font-size: 1.7rem; }
    .gf-bottom  { padding: 1.5rem 1.2rem; }

    .dashboard-stats { gap: 0.6rem; }
    .d-value { font-size: 1.6rem; }
    .d-label { font-size: 0.64rem; }
    .mobile-header { padding-left: 1.2rem; padding-right: 1.2rem; }
    .modal-tags  { gap: 0.5rem; }
    .modal-tag   { padding: 0.5rem 1rem; font-size: 0.8rem; }

    /* Already filled via 768px block — no overrides needed */
}