/* BETONPANELLER — Concretta concretta.html responsive parity layer.
   Scope: mobile/tablet only. Desktop >=1181px is intentionally untouched.
   Reference breakpoints: Concretta V453 / V426. */

@media (max-width:1180px){
  body.bp-premium{overflow-x:clip!important;}
  body.bp-premium *,body.bp-premium *::before,body.bp-premium *::after{box-sizing:border-box;}
  body.bp-premium :where(.row,[class*="grid"],[class*="shell"],[class*="wrap"],[class*="copy"],[class*="content"],[class*="panel"]){min-width:0;}
  body.bp-premium :where(img,video,iframe,svg){max-width:100%;}

  /* Keep the Betonpaneller hero image itself unchanged; only make its crop stable. */
  body.bp-premium #header4-l.mbz-hero-v34{
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:50% 50%!important;
    background-attachment:scroll!important;
  }
}

/* Tablet portrait / compact tablets — Concretta's calm single-column hero and 28px gutters. */
@media (min-width:701px) and (max-width:991px){
  body.bp-premium #header4-l.mbz-hero-v34{
    height:auto!important;
    min-height:86svh!important;
    padding-top:max(104px,calc(88px + env(safe-area-inset-top)))!important;
    padding-bottom:72px!important;
    align-items:flex-end!important;
    background-position:50% 50%!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell{
    width:calc(100% - 56px)!important;
    max-width:1120px!important;
    margin:0 auto!important;
    padding:0!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
    padding-top:22px!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 h1{
    max-width:640px!important;
    margin:0!important;
    font-size:clamp(48px,6.4vw,58px)!important;
    line-height:.98!important;
    letter-spacing:-.04em!important;
    overflow-wrap:anywhere!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-copy-col{max-width:560px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .hero-desc{max-width:560px!important;font-size:14px!important;line-height:1.65!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-links{display:flex!important;flex-wrap:wrap!important;gap:12px 20px!important;margin-top:22px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz40-material-line{margin-top:24px!important;}

  body.bp-premium :where(.bp-shell,.bp-colors-shell,.bp-faq-shell,.bp-contact-shell,.bp-footer-shell){
    width:calc(100% - 56px)!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.bp-premium :where(.bp-intro,.bp-collection,.bp-performance,.bp-technical,.bp-projects,.bp-colors,.bp-faq,.bp-contact){padding-top:82px!important;padding-bottom:86px!important;}
  body.bp-premium :where(.bp-intro-grid,.bp-collection-head,.bp-technical-grid,.bp-contact-shell,.bp-faq-head){grid-template-columns:1fr!important;gap:36px!important;}
  body.bp-premium .bp-intro-copy{padding-top:0!important;max-width:680px!important;}
  body.bp-premium .bp-technical-visual{max-width:760px!important;}
  body.bp-premium .bp-color-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:34px 16px!important;}
}

/* Phones / large phones — same safe-area and 20px gutter logic as Concretta. */
@media (max-width:700px){
  body.bp-premium{overflow-x:hidden!important;}
  body.bp-premium #header4-l.mbz-hero-v34{
    height:auto!important;
    min-height:100svh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    padding-top:max(84px,calc(68px + env(safe-area-inset-top)))!important;
    padding-bottom:max(64px,calc(48px + env(safe-area-inset-bottom)))!important;
    align-items:flex-end!important;
    background-position:50% 50%!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell{
    width:auto!important;
    max-width:none!important;
    margin-left:max(20px,env(safe-area-inset-left))!important;
    margin-right:max(20px,env(safe-area-inset-right))!important;
    padding:0!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-kicker{font-size:9px!important;letter-spacing:.18em!important;margin-bottom:16px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-grid{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;padding-top:18px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 h1{
    max-width:340px!important;
    margin:0!important;
    font-size:clamp(38px,10.8vw,44px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    text-wrap:balance;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-copy-col{max-width:340px!important;padding:0!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .bp-mbz-subtitle{font-size:10px!important;line-height:1.25!important;margin:0 0 10px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .hero-desc{max-width:340px!important;margin:0!important;font-size:13.5px!important;line-height:1.58!important;overflow-wrap:anywhere!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-links{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:7px!important;margin-top:21px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-link{max-width:100%!important;white-space:normal!important;font-size:12px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz40-material-line{max-width:100%!important;margin-top:18px!important;flex-wrap:wrap!important;gap:6px 10px!important;}

  body.bp-premium :where(.bp-shell,.bp-colors-shell,.bp-faq-shell,.bp-contact-shell,.bp-footer-shell){
    width:auto!important;
    max-width:none!important;
    margin-left:max(20px,env(safe-area-inset-left))!important;
    margin-right:max(20px,env(safe-area-inset-right))!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.bp-premium :where(.bp-intro,.bp-collection,.bp-performance,.bp-technical,.bp-projects,.bp-colors,.bp-faq,.bp-contact){padding-top:68px!important;padding-bottom:72px!important;}
  body.bp-premium :where(.bp-intro-grid,.bp-collection-head,.bp-technical-grid,.bp-contact-shell,.bp-faq-head){grid-template-columns:1fr!important;gap:26px!important;}
  body.bp-premium .bp-intro-copy{padding-top:0!important;max-width:100%!important;}
  body.bp-premium .bp-collection-grid{display:block!important;}
  body.bp-premium .bp-projects-grid{display:block!important;}
  body.bp-premium .bp-performance-grid{grid-template-columns:1fr!important;}
  body.bp-premium .bp-technical-media{height:auto!important;min-height:0!important;}
  body.bp-premium .bp-technical-media img{width:100%!important;height:auto!important;min-height:0!important;object-fit:cover!important;}
  body.bp-premium .bp-color-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:30px 10px!important;}
  body.bp-premium :where(input,select,textarea,button){max-width:100%;}
  body.bp-premium :where(input,select,textarea){font-size:16px;}
}

/* Small iPhones. */
@media (max-width:390px){
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell,
  body.bp-premium :where(.bp-shell,.bp-colors-shell,.bp-faq-shell,.bp-contact-shell,.bp-footer-shell){
    margin-left:max(16px,env(safe-area-inset-left))!important;
    margin-right:max(16px,env(safe-area-inset-right))!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 h1{font-size:37px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .hero-desc{font-size:13px!important;}
}

/* iPhone Safari browser bars. */
@supports (-webkit-touch-callout:none){
  @media (max-width:700px){
    body.bp-premium #header4-l.mbz-hero-v34{min-height:100svh!important;}
    body.bp-premium #header4-l.mbz-hero-v34 .mbz34-grid{-webkit-transform:none!important;transform:none!important;}
  }
}

/* Phone landscape / short viewport — do not force a portrait-height hero. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  body.bp-premium #header4-l.mbz-hero-v34{
    min-height:0!important;
    height:auto!important;
    padding-top:max(78px,calc(64px + env(safe-area-inset-top)))!important;
    padding-bottom:max(34px,calc(24px + env(safe-area-inset-bottom)))!important;
    background-position:50% 50%!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell{
    width:auto!important;
    max-width:none!important;
    margin-left:max(20px,env(safe-area-inset-left))!important;
    margin-right:max(20px,env(safe-area-inset-right))!important;
    padding:0!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-grid{grid-template-columns:1fr!important;gap:10px!important;padding-top:12px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 h1{max-width:520px!important;font-size:clamp(34px,6vw,42px)!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-copy-col{max-width:560px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .hero-desc{max-width:560px!important;font-size:12.5px!important;line-height:1.5!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-links{flex-direction:row!important;flex-wrap:wrap!important;gap:8px 16px!important;margin-top:14px!important;}
  body.bp-premium #header4-l.mbz-hero-v34 .mbz40-material-line{margin-top:14px!important;}
}

/* Landscape touch-tablets — keep the desktop composition but use Concretta-safe gutters. */
@media (min-width:992px) and (max-width:1180px) and (hover:none) and (pointer:coarse){
  body.bp-premium #header4-l.mbz-hero-v34{
    height:auto!important;
    min-height:82svh!important;
    padding-top:96px!important;
    padding-bottom:70px!important;
    background-position:50% 50%!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell{
    width:calc(100% - 64px)!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
  }
  body.bp-premium :where(.bp-shell,.bp-colors-shell,.bp-faq-shell,.bp-contact-shell,.bp-footer-shell){
    width:calc(100% - 64px)!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* V2 — Concretta hero vertical-flow parity.
   Concretta keeps the mobile/tablet hero as a flex-end stage while the inner wrap
   stays at its natural content height. This prevents the copy block from climbing
   behind the header on tall portrait screens. Image crop is intentionally unchanged. */
@media (max-width:1180px){
  body.bp-premium #header4-l.mbz-hero-v34{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-end!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell{
    height:auto!important;
    min-height:0!important;
    display:block!important;
    flex:0 1 auto!important;
    align-self:auto!important;
    justify-content:initial!important;
  }
}

/* Portrait phones: same bottom-anchored rhythm as concretta.html V453. */
@media (max-width:700px) and (orientation:portrait){
  body.bp-premium #header4-l.mbz-hero-v34{
    min-height:100svh!important;
    min-height:100dvh!important;
    padding-top:max(84px,calc(68px + env(safe-area-inset-top)))!important;
    padding-bottom:max(64px,calc(48px + env(safe-area-inset-bottom)))!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell{
    margin-top:auto!important;
    margin-bottom:0!important;
  }
}

/* Compact tablets: preserve Concretta's bottom anchor with a natural-height wrap. */
@media (min-width:701px) and (max-width:991px){
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell{
    margin-top:auto!important;
    margin-bottom:0!important;
  }
}

/* Landscape keeps content-driven height exactly as in the Concretta short-screen rule. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  body.bp-premium #header4-l.mbz-hero-v34{
    align-items:flex-start!important;
  }
  body.bp-premium #header4-l.mbz-hero-v34 .mbz34-shell{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}