/* BETONPANELLER — responsive QA final fixes
   Scope: mobile/tablet/landscape only. No desktop design or typography-scale changes. */

@media (max-width:767px){
  body.bp-premium :is(
    .bp-intro,.bp-collection,.bp-performance,.bp-technical,
    .bp-projects,.bp-colors,.bp-faq,.bp-contact
  ) h2{
    max-width:none!important;
    width:100%!important;
    text-wrap:balance;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  body.bp-premium :is(
    .bp-intro,.bp-collection,.bp-performance,.bp-technical,
    .bp-projects,.bp-colors,.bp-faq,.bp-contact
  ) h2 > br{
    display:none!important;
  }

  body.bp-premium :is(
    .bp-intro,.bp-collection,.bp-performance,.bp-technical,
    .bp-projects,.bp-colors,.bp-faq,.bp-contact
  ) h2 > br + span::before{
    content:" ";
  }

  /* Use margins, not a fixed width, to avoid over-constraining mobile shells. */
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell,
  body.bp-premium :is(
    .bp-shell,.bp-colors-shell,.bp-faq-shell,.bp-contact-shell,.bp-footer-shell
  ){
    width:auto!important;
    max-width:none!important;
    margin-left:max(16px,env(safe-area-inset-left))!important;
    margin-right:max(16px,env(safe-area-inset-right))!important;
  }

  /* EN mobile hero: wrap at spaces like TR; shared typography retains 44px. */
  html[lang="en"] body.bp-premium.bp-home #header4-l h1{
    max-width:none!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    letter-spacing:normal!important;
  }

  /* FAQ — more room for the question, less dead vertical space. */
  body.bp-premium .bp-faq-list summary{
    grid-template-columns:34px minmax(0,1fr) 26px!important;
    gap:12px!important;
    padding:19px 0!important;
    align-items:center!important;
  }
  body.bp-premium .bp-faq-list summary strong{
    line-height:1.35!important;
    text-wrap:pretty;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.bp-premium .bp-faq-no{
    align-self:start!important;
    padding-top:5px!important;
  }
  body.bp-premium .bp-faq-plus{
    width:18px!important;
    height:18px!important;
  }
  body.bp-premium .bp-faq-plus::before,
  body.bp-premium .bp-faq-plus::after{
    width:14px!important;
    top:8px!important;
  }
  body.bp-premium .bp-faq-answer{
    max-width:none!important;
    padding:0 38px 22px 46px!important;
  }
}

@media (max-width:430px){
  body.bp-premium :is(
    .bp-text-link,.bp-projects-cta,.bp-colors-cta,
    .bp-technical-links a,.bp-contact-primary,.hbp-cta
  ){
    max-width:100%!important;
    white-space:normal!important;
  }
}

@media (min-width:768px) and (max-width:991px){
  body.bp-premium :is(
    .bp-intro,.bp-collection,.bp-performance,.bp-technical,
    .bp-projects,.bp-colors,.bp-faq,.bp-contact
  ) h2{
    text-wrap:balance;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}

/* Target 844x390 and similar landscape phone/tablet views. */
@media (orientation:landscape) and (min-width:701px) and (max-width:991px) and (max-height:500px){
  #menu1-2uh .navbar{
    min-height:64px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }

  #menu1-2uh .navbar-toggler,
  #menu1-2uh .navbar.navbar-short .navbar-toggler-right{
    top:9px!important;
    width:42px!important;
    height:42px!important;
  }

  #menu1-2uh .navbar-collapse{
    max-height:calc(100dvh - 72px)!important;
    margin-top:4px!important;
    padding:8px 18px 12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  #menu1-2uh .navbar-nav > .nav-item > .nav-link,
  #menu1-2uh .nav-item a.nav-link{
    min-height:42px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  #menu1-2uh .ct70-header-tools{
    min-height:40px!important;
    height:auto!important;
    margin-top:4px!important;
    padding-top:4px!important;
    gap:9px!important;
  }

  #menu1-2uh .mega-menu-panel.is-open{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:18px!important;
    row-gap:0!important;
    margin:2px 0 6px!important;
    padding:5px 8px 7px!important;
  }

  #menu1-2uh .mega-column{
    min-width:0!important;
    padding:5px 0 7px!important;
    border-top:1px solid rgba(255,255,255,.06)!important;
  }

  #menu1-2uh .mega-column:nth-child(-n+2){
    border-top:0!important;
  }

  #menu1-2uh .mega-column + .mega-column{
    border-left:0!important;
  }

  #menu1-2uh .mega-brand-link{
    padding:5px 7px 6px!important;
    margin:0!important;
  }

  #menu1-2uh .mega-product-list{
    margin:0 0 3px 7px!important;
    padding:1px 0 2px 7px!important;
  }

  #menu1-2uh .mega-product-link{
    padding:3px 7px!important;
  }
}