/* =========================================================
   RESPONSIVE OPTIMALIZACE — TABLETY, MOBILY A NÍZKÉ DISPLEJE
   Desktop nad 1180 px zůstává beze změny.
========================================================= */

/* Stabilnější výška viewportu na mobilních prohlížečích */
@supports (height: 100dvh){
  html,
  body{height:100dvh;}
}

/* Zabrání přetékání dlouhých slov, e-mailů a odkazů */
.scene,
.scene-inner,
.contact-copy,
.portfolio-item,
.pricing-card{
  min-width:0;
}

.contact-links a,
.portfolio-more,
.about-panel-content p,
.process-box p{
  overflow-wrap:anywhere;
}

/* =========================================================
   TABLETY A MENŠÍ NOTEBOOKY
========================================================= */
@media (min-width:901px) and (max-width:1280px){
  .topbar{
    left:clamp(24px,3vw,40px);
    right:clamp(72px,7vw,104px);
  }

  .brand-logo{font-size:29px;}
  .brand-role{font-size:clamp(15px,1.8vw,21px);}
  .brand-divider{width:30px;}

  .glass-shell{
    left:clamp(20px,3vw,40px);
    right:clamp(72px,8vw,112px);
  }

  .scene{
    padding:clamp(30px,4vw,52px);
  }

  .scene-inner{
    width:100%;
    padding-bottom:44px;
  }

  .hero-copy,
  .project-copy{
    transform:translateX(24px);
  }

  .contact-copy{
    transform:translateX(50px);
  }

  .contact-layout{
    grid-template-columns:minmax(0,1.12fr) minmax(260px,.72fr);
    gap:28px;
  }

  .contact-copy h2{
    font-size:clamp(42px,6.2vw,72px);
  }

  .contact-portrait{
    width:min(330px,29vw);
  }

  .contact-portrait .portrait-image{
    width:min(250px,25vw);
    right:3vw;
  }

  .pricing-extras-popup{
    width:min(92vw,1040px);
    left:50%;
    right:auto;
    margin-left:0;
    transform:translate(-50%,26px) scale(.965);
  }

  .pricing-extras-layer.is-open .pricing-extras-popup{
    transform:translate(-50%,0) scale(1);
  }
 }


/* =========================================================
   TABLETY NA VÝŠKU A MOBILY
========================================================= */
@media (max-width:900px){
  html,
  body{
    overscroll-behavior:none;
  }

  #bgVideo{
    transform:scale(1.04);
  }

  .grain{
    opacity:.025;
    animation:none;
  }

  .white-veil{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .topbar{
    top:max(16px,env(safe-area-inset-top));
    left:max(16px,env(safe-area-inset-left));
    right:max(48px,calc(env(safe-area-inset-right) + 42px));
    gap:12px;
  }

  .topbar-left{gap:12px;}
  .brand{gap:10px;}
  .brand-logo{font-size:25px;}
  .brand-divider{width:22px;}
  .brand-role{
    max-width:none;
    font-size:12px;
    line-height:1.2;
    letter-spacing:.08em;
    white-space:nowrap;
  }

  .brand-call svg{
    width:22px;
    height:22px;
  }

  .top-whatsapp{
    gap:0;
    width:44px;
    height:44px;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }

  .top-whatsapp span{display:none;}

  .glass-shell{
    left:max(10px,env(safe-area-inset-left));
    right:max(38px,calc(env(safe-area-inset-right) + 34px));
    top:max(66px,calc(env(safe-area-inset-top) + 58px));
    bottom:max(8px,env(safe-area-inset-bottom));
    overflow:hidden;
  }

  .scene{
    display:block;
    padding:26px 18px 82px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .scene::-webkit-scrollbar{display:none;}

  .scene-inner{
    width:100%;
    min-height:100%;
    margin:0;
    padding-bottom:0;
  }

  .hero-layout,
  .collaboration-layout,
  .project-layout,
  .project-layout-image-left,
  .contact-layout{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
  }

  .hero-copy,
  .project-copy,
  .contact-copy,
  .collaboration-support,
  .collaboration-main{
    transform:none;
    padding-left:0;
  }

  .eyebrow{
    margin-bottom:16px;
    font-size:9px;
  }

  h2,
  .about-me-heading h2,
  .collaboration-heading h2,
  .pricing-heading h2,
  .contact-copy h2{
    font-size:clamp(34px,8.7vw,62px);
    line-height:1.04;
    letter-spacing:-.045em;
  }

  .hero-name{
    font-size:clamp(40px,10vw,68px);
    line-height:1;
  }

  .hero-claim{
    margin-top:24px;
    font-size:clamp(17px,3.8vw,23px);
  }

  .hero-claim,
  .hero-note,
  .project-description,
  .contact-copy > p,
  .process-box p{
    font-size:clamp(15px,3.25vw,18px) !important;
    line-height:1.6 !important;
  }

  /* Úvodní portrét */
  .portrait-card{
    position:relative;
    order:2;
    justify-self:stretch;
    width:100%;
    height:clamp(300px,48vh,520px);
    min-height:0;
  }

  .hero .portrait-image{
    right:-10vw;
    bottom:-3vh;
    width:min(760px,105vw);
  }

  /* Spolupráce */
  .collaboration-heading,
  .pricing-heading,
  .about-me-heading,
  .portfolio-heading{
    max-width:none;
    margin:0 0 24px;
    text-align:left;
  }

  .collaboration-boxes,
  .pricing-cards,
  .portfolio-grid{
    grid-template-columns:1fr;
  }

  .collaboration-boxes{gap:16px;}
  .process-box{
    min-height:0 !important;
    padding:20px;
    border-width:2px;
    border-radius:15px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  /* Portfolio */
  .portfolio-grid{
    gap:30px;
    padding-top:0;
  }

  .portfolio-item .project-frame{
    width:100%;
    aspect-ratio:16/10;
  }

  .project-frame:hover img{
    transform:none;
  }

  .project-wave{display:none;}

  .project-placeholder{
    padding:0 14px 24px;
    font-size:clamp(13px,3.3vw,18px);
  }

  .project-letter{
    margin:-16px 7px 0;
    padding:18px 18px 19px;
    max-height:62px;
    border-width:2px;
    border-radius:16px;
  }

  .project-letter::after{
    top:17px;
    right:18px;
    opacity:1;
  }

  .project-letter-title{
    padding-right:32px;
    font-size:clamp(15px,3.7vw,19px);
  }

  .project-letter-text{
    font-size:14px !important;
    line-height:1.58 !important;
  }

  .portfolio-more{
    margin-top:8px;
    min-height:0;
    white-space:normal;
    transform:none;
    text-align:left;
    font-size:14px;
  }

  /* Ceník */
  .pricing-layout{
    padding-bottom:74px;
  }

  .pricing-cards{gap:16px;}

  .pricing-card{
    min-height:0;
    padding:21px 20px 22px;
    border-width:2px;
    border-radius:15px;
  }

  .pricing-card li{
    font-size:14px;
  }

  .pricing-extras-trigger{
    left:0;
    right:0;
    min-height:54px;
    border-width:2px;
  }

  .pricing-extras-popup{
    width:auto;
    left:max(12px,env(safe-area-inset-left));
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
    margin:0;
    max-height:calc(100dvh - 24px);
    padding:20px;
    border-width:2px;
    transform:translateY(26px) scale(.965);
  }

  .pricing-extras-layer.is-open .pricing-extras-popup{
    transform:translateY(0) scale(1);
  }

  /* O mně */
  .about-me-layout{padding-bottom:0;}
  .about-accordion{gap:11px;}

  .about-panel{
    border-width:2px;
    border-radius:15px;
  }

  .about-panel-trigger{
    min-height:60px;
    padding:15px 18px;
  }

  .about-panel-trigger > span:first-child{
    font-size:15px;
  }

  .about-panel-content p{
    padding:0 18px 18px;
    font-size:14px;
    line-height:1.65;
  }

  /* Kontakt */
  .contact-layout{
    position:relative;
    min-height:calc(100dvh - 150px);
    padding-bottom:280px;
  }

  .contact-copy{
    position:relative;
    z-index:2;
    order:1;
  }

  .contact-copy h2{
    margin-bottom:24px;
  }

  .contact-copy > p{
    max-width:620px;
  }

  .contact-links{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-top:28px;
  }

  .contact-links a{
    font-size:15px;
  }

  .signature{
    margin-top:34px;
  }

  .contact-portrait{
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    width:240px;
    height:280px;
    min-height:0;
    pointer-events:none;
  }

  .contact-portrait .portrait-image{
    right:-14px;
    bottom:0;
    width:210px;
    opacity:.90;
  }

  /* Pravá navigace */
  .scroll-rail{
    right:max(6px,env(safe-area-inset-right));
    top:50%;
    height:58vh;
  }

  .rail-word,
  .rail-section{
    display:block;
  }

  .rail-segment-top{margin-bottom:20px;}
  .rail-segment-bottom{margin-top:20px;}
  .rail-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;}
  .rail-arrow{font-size:19px;}

  .mobile-hint{
    display:block;
    left:max(14px,env(safe-area-inset-left));
    bottom:max(6px,env(safe-area-inset-bottom));
  }
}

/* =========================================================
   TELEFONY
========================================================= */
@media (max-width:600px){
  .topbar{
    right:max(44px,calc(env(safe-area-inset-right) + 38px));
  }

  .brand-role{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:10px;
  }

  .brand-divider{width:16px;}
  .topbar-left{gap:8px;}

  .top-whatsapp{
    width:39px;
    height:39px;
    border-width:1px;
  }

  .top-whatsapp svg{
    width:19px;
    height:19px;
  }

  .glass-shell{
    right:max(32px,calc(env(safe-area-inset-right) + 28px));
    top:max(60px,calc(env(safe-area-inset-top) + 54px));
  }

  .scene{
    padding:22px 14px 72px;
  }

  .eyebrow{
    letter-spacing:.22em;
  }

  h2,
  .about-me-heading h2,
  .collaboration-heading h2,
  .pricing-heading h2,
  .contact-copy h2{
    font-size:clamp(31px,10vw,48px);
  }

  .hero-name{
    font-size:clamp(36px,11.5vw,54px);
  }

  .hero .portrait-image{
    right:-20vw;
    width:122vw;
  }

  .portrait-card{
    height:clamp(280px,43vh,420px);
  }

  .portfolio-intro,
  .pricing-intro,
  .about-me-intro{
    font-size:14px;
  }

  .project-letter{
    margin-top:-13px;
  }

  .pricing-row{
    align-items:flex-start;
    gap:14px;
    font-size:12px;
  }

  .pricing-row strong{
    max-width:48%;
    white-space:normal;
    text-align:right;
  }

  .contact-links a{
    max-width:100%;
  }
}

/* Velmi úzké telefony */
@media (max-width:380px){
  .brand-role{display:none;}
  .brand-divider{display:none;}

  .hero-name,
  h2,
  .about-me-heading h2,
  .collaboration-heading h2,
  .pricing-heading h2,
  .contact-copy h2{
    overflow-wrap:anywhere;
  }

}

/* =========================================================
   TELEFON / TABLET NA ŠÍŘKU S MALOU VÝŠKOU
========================================================= */
@media (max-height:620px) and (min-width:601px) and (max-width:1180px){
  .topbar{
    top:10px;
  }

  .glass-shell{
    top:52px;
    bottom:6px;
  }

  .scene{
    padding-top:18px;
    padding-bottom:56px;
  }

  .scene-inner{
    padding-bottom:0;
  }

  .portrait-card{
    height:68vh;
  }

  .contact-layout{
    grid-template-columns:minmax(0,1fr) 220px;
    padding-bottom:0;
  }

  .contact-portrait{
    position:relative;
    width:220px;
    height:65vh;
  }

  .contact-portrait .portrait-image{
    right:0;
    width:190px;
  }

  .signature{
    margin-top:24px;
  }
}

/* Dotyková zařízení: nevyžadovat hover pro vizuální odezvu */
@media (hover:none){
  .process-box:hover,
  .pricing-card:hover,
  .about-panel:hover,
  .contact-links a:hover,
  .top-whatsapp:hover{
    transform:none;
  }
}

/* =========================================================
   VNITŘNÍ SCROLL SEKCE — STABILNÍ MOBILNÍ REŽIM
========================================================= */
@media (max-width:900px){
  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden;
    touch-action:none;
  }

  .glass-shell{
    overflow:hidden !important;
    contain:layout paint;
  }

  .scene{
    height:100%;
    max-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    touch-action:pan-y;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }

  .scene:not(.is-active){
    overflow:hidden !important;
  }

  .scene.is-active{
    overflow-y:auto !important;
  }

  .scene-inner{
    min-height:calc(100% + 1px);
  }

  /* Dostatečný prostor pod posledním prvkem, aby šel konec
     sekce na iOS i Androidu skutečně doscrollovat. */
  .scene-inner::after{
    content:"";
    display:block;
    height:max(28px,env(safe-area-inset-bottom));
  }
}

/* =========================================================
   FINÁLNÍ MOBILNÍ DOLADĚNÍ 2026
   Jednotné chování napříč iPhone SE / iPhone / Pixel / Galaxy.
   Desktop nad 900 px tato pravidla nemění.
========================================================= */
@media (max-width:900px){
  /* Stabilní využití prostoru a stejné boční odsazení obsahu */
  .glass-shell{
    left:max(10px,env(safe-area-inset-left));
    right:max(40px,calc(env(safe-area-inset-right) + 36px));
    top:max(62px,calc(env(safe-area-inset-top) + 56px));
    bottom:max(8px,env(safe-area-inset-bottom));
    border-radius:0;
  }

  .scene{
    padding:clamp(20px,5vw,30px) clamp(16px,5vw,28px) 78px;
    scroll-padding-top:20px;
  }

  .scene-inner{
    width:min(100%,680px);
    margin-inline:auto;
  }

  .hero-copy,
  .collaboration-heading,
  .portfolio-heading,
  .pricing-heading,
  .about-me-heading,
  .contact-copy{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  /* Nadpisy se už neopírají o jednu stranu displeje */
  .hero-name,
  .collaboration-heading h2,
  .portfolio-heading h2,
  .pricing-heading h2,
  .about-me-heading h2,
  .contact-copy h2{
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  /* ---------- 01 ÚVOD ---------- */
  .hero-layout{
    display:flex;
    flex-direction:column;
    gap:18px;
    min-height:100%;
  }

  .hero-copy{order:1;}

  .hero .portrait-card{
    order:2;
    position:relative;
    align-self:stretch;
    justify-self:auto;
    width:100%;
    height:clamp(245px,38dvh,430px);
    min-height:245px;
    margin-top:2px;
    overflow:visible;
  }

  .hero .portrait-image{
    left:50%;
    right:auto;
    bottom:clamp(-54px,-5dvh,-26px);
    width:clamp(310px,92vw,610px);
    max-width:none;
    transform:translateX(-50%);
  }

  /* ---------- 03 PORTFOLIO ---------- */
  .portfolio-grid{gap:34px;}

  .portfolio-item .project-frame{
    z-index:2;
    border-radius:16px;
  }

  /* Glass karta je užší než obálka, vystředěná a těsně pod ní. */
  .project-letter{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    z-index:3;
    width:calc(100% - 20px);
    max-width:none;
    aspect-ratio:auto;
    margin:6px auto 0;
    max-height:64px;
    padding:18px 18px 20px;
    border-radius:16px;
    box-sizing:border-box;
    pointer-events:auto;
    cursor:pointer;
    transform:none;
    overflow:hidden;
  }

  .project-letter::after{
    top:17px;
    right:18px;
  }

  /* Na dotykových displejích otevírá panel výhradně JS třída.
     Hover/focus už nemůže držet okno otevřené po kliknutí na křížek. */
  .portfolio-item:hover .project-letter,
  .portfolio-item:focus-within .project-letter{
    max-height:64px;
    transform:none;
  }

  .portfolio-item:hover .project-letter-text,
  .portfolio-item:focus-within .project-letter-text{
    opacity:0;
    transform:translateY(-10px);
    transition-delay:0s;
  }

  .portfolio-item:hover .project-letter::after,
  .portfolio-item:focus-within .project-letter::after{
    transform:none;
  }

  .portfolio-item.is-letter-open .project-letter{
    max-height:420px;
  }

  .portfolio-item.is-letter-open .project-letter-text{
    opacity:1;
    transform:none;
    transition-delay:.1s;
  }

  .portfolio-item.is-letter-open .project-letter::after{
    opacity:1;
    transform:rotate(45deg);
  }

  /* ---------- 06 KONTAKT ---------- */
  .contact-layout{
    display:flex;
    flex-direction:column;
    position:relative;
    min-height:0;
    padding-bottom:0;
    gap:clamp(14px,3.5vw,24px);
    overflow:visible;
  }

  .contact-copy{
    position:relative;
    z-index:2;
    width:100%;
  }

  /* Portrét je součástí toku stránky: vždy zůstane pod textem. */
  .contact-portrait{
    position:relative;
    z-index:1;
    left:auto;
    right:auto;
    bottom:auto;
    order:2;
    align-self:center;
    width:min(340px,88vw);
    height:clamp(250px,36dvh,370px);
    min-height:250px;
    margin:0 auto;
    transform:none;
    overflow:visible;
    pointer-events:none;
  }

  .contact-portrait .portrait-image{
    left:50%;
    right:auto;
    bottom:0;
    width:clamp(170px,48vw,240px);
    max-width:none;
    height:auto;
    transform:translateX(-50%);
    opacity:.92;
  }

  /* ---------- PRAVÁ NAVIGACE ---------- */
  .scroll-rail{
    right:max(14px,calc(env(safe-area-inset-right) + 10px));
    top:40%;
    height:min(68dvh,560px);
    grid-template-rows:34px minmax(92px,1fr) auto minmax(92px,1fr) 34px auto;
  }

  .rail-word,
  .rail-section{
    display:block;
    font-size:8px;
    letter-spacing:.12em;
    line-height:1;
  }

  /* Text je mimo osu linky, takže se s ní nikdy nekříží. */
  .rail-word{
    transform:translateX(-1px);
  }

  .rail-section{
    top:calc(100% + 14px);
    transform:translateX(calc(-50% - 1px));
  }

  .rail-segment-top{margin-bottom:24px;}
  .rail-segment-bottom{margin-top:24px;}
}

/* Běžné telefony */
@media (max-width:600px){
  .hero-name{
    font-size:clamp(35px,10.7vw,52px);
    line-height:1.01;
  }

  .hero-claim{
    margin-top:20px;
    font-size:clamp(15px,4.15vw,18px) !important;
    line-height:1.5 !important;
  }

  .contact-copy h2{
    font-size:clamp(31px,9.6vw,46px);
  }

  .contact-copy > p{
    line-height:1.55 !important;
  }

  .contact-portrait{
    width:min(300px,86vw);
    height:clamp(230px,33dvh,320px);
    min-height:230px;
  }

  .contact-portrait .portrait-image{
    width:clamp(160px,46vw,220px);
    transform:translate(-50%,65px);
  }
}

/* Nízké displeje: iPhone SE, starší iPhone a kompaktní Androidy */
@media (max-width:600px) and (max-height:740px){
  .scene{
    padding-top:18px;
  }

  .eyebrow{
    margin-bottom:11px;
  }

  .hero-layout{gap:8px;}

  .hero-name{
    font-size:clamp(34px,10.2vw,46px);
  }

  .hero-claim{
    margin-top:14px;
    font-size:15px !important;
    line-height:1.43 !important;
  }

  .hero .portrait-card{
    height:220px;
    min-height:220px;
    margin-top:0;
  }

  .hero .portrait-image{
    width:clamp(290px,82vw,390px);
    bottom:-62px;
  }

}

/* Velmi úzké telefony */
@media (max-width:380px){
  .scene{
    padding-left:14px;
    padding-right:14px;
  }

  .hero-name{
    font-size:clamp(32px,10.5vw,42px);
  }

  .hero .portrait-image{
    width:88vw;
  }

  .project-letter-title{
    font-size:14px;
  }

}

/* =========================================================
   iPad Pro 12.9" (1024 × 1366)
========================================================= */

@media (min-width:1000px)
and (max-width:1035px)
and (min-height:1300px){

    /* Glass panel */
    .project-letter{

        left:10px;
        right:10px;
        width:auto;

        top:8px;

        border-radius:30px;

        /* Posun obsahu uvnitř panelu */
        padding:14px 22px 22px !important;

    }

    /* Vyjetí dopisu */
    .portfolio-item:hover .project-letter,
    .portfolio-item:focus-within .project-letter,
    .portfolio-item.is-letter-open .project-letter{

        transform:translateY(-104%);

    }

    /* Nadpis dopisu */
    .project-letter-title{

        font-size:13px !important;
        margin-bottom:10px !important;

    }

    /* Text dopisu */
    .project-letter .project-letter-text{

        font-size:10px !important;
        line-height:1.25 !important;

    }

    /* Text OTEVŘÍT WEB */
    .portfolio-item .project-placeholder{

        padding-bottom:28px !important;
        font-size:10px !important;

    }

/* Text pod portfoliem */
.portfolio-more{

    max-width:none !important;
    width:calc(100% + 40px) !important;

    margin-left:-45px !important;

}



/* Prostor pod cenovými kartami pro spodní lištu */
.pricing-layout{

    position:relative;
    padding-bottom:72px !important;

}

/* Doplňkové služby – lišta pod kartami */
.pricing-extras-trigger{

    margin-top:0 !important;

    bottom:0 !important;
    transform:none !important;

}
/* Kontakt - portrét */
.contact-portrait .portrait-image{

    bottom:-250px !important;

 }
/* Hero fotografie */
.hero .portrait-image{

    width:110% !important;

    right:-110px !important;

    bottom:130px !important;

   }
}


/* =========================================================
   Surface Pro 7 (912 × 1368)
========================================================= */

@media (min-width:890px)
and (max-width:930px)
and (min-height:1300px){

    /* Glass panel */
    .project-letter{

        left:10px;
        right:10px;
        width:auto;

        top:8px;

        border-radius:30px;

        /* Posun obsahu uvnitř panelu */
        padding:14px 22px 22px !important;

    }

    /* Vyjetí dopisu */
    .portfolio-item:hover .project-letter,
    .portfolio-item:focus-within .project-letter,
    .portfolio-item.is-letter-open .project-letter{

        transform:translateY(-104%);

    }

    /* Nadpis dopisu */
    .project-letter-title{

        font-size:13px !important;
        margin-bottom:10px !important;

    }

    /* Text dopisu */
    .project-letter .project-letter-text{

        font-size:10px !important;
        line-height:1.25 !important;

    }

    /* Text OTEVŘÍT WEB */
    .portfolio-item .project-placeholder{

        padding-bottom:28px !important;
        font-size:10px !important;

    }

    /* Text pod portfoliem */
    .portfolio-more{

        max-width:none !important;
        width:calc(100% + 40px) !important;

        margin-left:-45px !important;

    }

    /* Prostor pod cenovými kartami pro spodní lištu */
    .pricing-layout{

        position:relative;
        padding-bottom:72px !important;

    }

    /* Doplňkové služby – lišta pod kartami */
    .pricing-extras-trigger{

        margin-top:0 !important;

        bottom:0 !important;
        transform:none !important;

    }

    /* Kontakt - portrét */
    .contact-portrait .portrait-image{

        bottom:-250px !important;

    }

    /* Hero fotografie */
    .hero .portrait-image{

        width:110% !important;

        right:-110px !important;

        bottom:130px !important;

    }

}