/*
 * DRR DAMSON — MOBILE REAL FIX 27.05
 * Cel: naprawa realnych błędów z telefonu: nachodzące logo/przyciski,
 * ucinane menu, za wielki pomocnik, poziome rozpychanie hero/generatorów.
 * Ten plik jest ładowany na końcu CSS i używa !important tylko tam, gdzie
 * wcześniejsze style oraz inline style mogły wymuszać błędny układ.
 */

html, body{
  max-width:100% !important;
  overflow-x:hidden !important;
}

img, svg, video, canvas, iframe{
  max-width:100%;
}

@media (max-width: 768px){
  :root{ --drr-mobile-side: 16px; }

  body{
    min-width:0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  .top-bar{display:none !important;}

  .site-header-v2{
    padding:18px 0 16px !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .site-header-v2 > .container,
  .site-header-v2 .container,
  body .container{
    width:calc(100% - 32px) !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .header-v2-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:16px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .header-v2-inner .brand,
  a.brand{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:260px !important;
    margin:0 auto !important;
    padding:0 !important;
    gap:10px !important;
    transform:none !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    text-align:left !important;
    z-index:2 !important;
  }

  .header-v2-inner .brand img,
  a.brand img{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    object-fit:contain !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  .header-v2-inner .brand div,
  a.brand div{
    min-width:0 !important;
    max-width:180px !important;
  }

  .header-v2-inner .brand span:nth-child(1),
  a.brand span:nth-child(1){
    font-size:clamp(22px, 7vw, 32px) !important;
    line-height:.95 !important;
    white-space:nowrap !important;
  }

  .header-v2-inner .brand span:nth-child(2),
  a.brand span:nth-child(2){
    font-size:clamp(13px, 4.3vw, 18px) !important;
    line-height:1.05 !important;
    letter-spacing:2px !important;
  }

  .header-v2-inner .brand span:nth-child(3),
  a.brand span:nth-child(3){
    font-size:clamp(10px, 3.3vw, 14px) !important;
    line-height:1.05 !important;
  }

  .user-actions{
    order:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
    min-width:0 !important;
  }

  .user-actions .action-item,
  .action-item{
    flex:1 1 0 !important;
    min-width:0 !important;
    max-width:128px !important;
    min-height:66px !important;
    padding:10px 8px !important;
    border-radius:26px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-size:clamp(13px, 4vw, 16px) !important;
    line-height:1.05 !important;
    overflow:hidden !important;
  }

  .user-actions .action-item i,
  .action-item i{
    font-size:18px !important;
    line-height:1 !important;
    margin:0 !important;
  }

  .search-container{
    order:3 !important;
    width:100% !important;
    max-width:680px !important;
    min-width:0 !important;
    margin:0 auto !important;
    display:flex !important;
    align-items:center !important;
  }

  .search-input{
    width:100% !important;
    min-width:0 !important;
    height:56px !important;
    font-size:16px !important;
    padding:0 68px 0 18px !important;
  }

  .search-btn{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    right:3px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    border-radius:50% !important;
  }

  .main-nav-v2{
    overflow:hidden !important;
    padding:12px 0 !important;
  }

  .main-nav-v2 > .container,
  .main-nav-v2 .container{
    width:100% !important;
    max-width:100% !important;
    padding:0 14px !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    mask-image:linear-gradient(90deg, #000 0%, #000 calc(100% - 34px), transparent 100%) !important;
    -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 calc(100% - 34px), transparent 100%) !important;
  }

  .main-nav-v2 .container::-webkit-scrollbar{display:none !important;}

  .nav-v2-list,
  .nav-v2-list--rich{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:10px !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 26px 0 0 !important;
    list-style:none !important;
    overflow:visible !important;
  }

  .nav-v2-list li,
  .nav-v2-list--rich li{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
  }

  .nav-v2-list a,
  .nav-v2-list--rich a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    width:auto !important;
    min-width:max-content !important;
    padding:13px 18px !important;
    border-radius:999px !important;
    line-height:1 !important;
  }

  main,
  section,
  .hero-v2,
  .hero-v2-content,
  .card,
  .drr-topic-link-panel,
  .drr-seo-section,
  .products-grid,
  .project-card,
  .generator-card,
  .calculator-card{
    max-width:100% !important;
    min-width:0 !important;
    overflow-wrap:break-word !important;
  }

  .hero-v2,
  .hero,
  .page-hero,
  .section,
  .drr-panel,
  .glass-card{
    overflow:hidden !important;
  }

  h1, .hero-v2 h1, .hero-title, .page-title{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
    font-size:clamp(34px, 11vw, 54px) !important;
    line-height:1.04 !important;
    text-shadow:0 0 18px rgba(54,240,176,.18) !important;
  }

  h2{font-size:clamp(26px, 8vw, 38px) !important; line-height:1.08 !important;}

  .hero-v2 p,
  .hero-subtitle,
  .lead{
    max-width:100% !important;
    font-size:clamp(17px, 5vw, 22px) !important;
    line-height:1.45 !important;
    white-space:normal !important;
  }

  input, select, textarea, button{
    max-width:100% !important;
  }

  .ai-helper-button{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    max-width:58px !important;
    right:16px !important;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    left:auto !important;
    top:auto !important;
    padding:0 !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    overflow:visible !important;
    z-index:2147483600 !important;
    box-shadow:0 14px 42px rgba(0,0,0,.42), 0 0 0 1px rgba(54,240,176,.24) !important;
  }

  .ai-helper-button span:not(.helper-icon){
    display:none !important;
  }

  .ai-helper-button::before{
    content:'💬' !important;
    display:block !important;
    font-size:25px !important;
    line-height:1 !important;
    transform:translateY(1px) !important;
  }

  .ai-helper-button .helper-icon{
    position:absolute !important;
    right:7px !important;
    top:7px !important;
    width:11px !important;
    height:11px !important;
    margin:0 !important;
    border:2px solid #061511 !important;
  }

  .ai-helper-container{
    right:10px !important;
    left:10px !important;
    bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100vh - 115px) !important;
    border-radius:20px !important;
    z-index:2147483601 !important;
  }
}

@media (max-width: 430px){
  .site-header-v2 > .container,
  .site-header-v2 .container,
  body .container{
    width:calc(100% - 24px) !important;
  }

  .header-v2-inner{gap:14px !important;}

  .header-v2-inner .brand,
  a.brand{max-width:230px !important;}

  .header-v2-inner .brand img,
  a.brand img{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    max-width:48px !important;
  }

  .user-actions{gap:9px !important;}
  .user-actions .action-item,
  .action-item{
    min-height:60px !important;
    border-radius:23px !important;
    font-size:13px !important;
    padding:8px 6px !important;
  }

  .search-input{height:54px !important;}
  .search-btn{width:50px !important;height:50px !important;min-width:50px !important;}

  .nav-v2-list a,
  .nav-v2-list--rich a{
    padding:12px 15px !important;
    font-size:14px !important;
  }

  .hero-v2, .hero, .page-hero{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

@media (max-width: 360px){
  .user-actions .action-item,
  .action-item{font-size:12px !important;}
  .header-v2-inner .brand span:nth-child(1), a.brand span:nth-child(1){font-size:22px !important;}
}