/* =========================================================
   Agripoli v0.41 — mobile containment, footer repair,
   and simplified BIOFILL® mobile experience.
   ========================================================= */

html,body{max-width:100%;overflow-x:hidden}
.site-header,.site-footer,main,section{max-width:100%}

/* Global mobile containment without forcing one-character word breaks. */
@media (max-width:820px){
  .shell{min-width:0;max-width:100%}
  h1,h2,h3,p,a,span,strong,small{word-break:normal;overflow-wrap:normal}
  h1,h2,h3,p{hyphens:none}

  /* Footer repair: prevent the company statement from collapsing to 1ch. */
  .site-footer{overflow:hidden;padding:42px 0 20px}
  .site-footer .footer-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
    align-items:start !important;
    width:100% !important;
    min-width:0 !important;
  }
  .site-footer .footer-brand{
    display:inline-flex !important;
    width:max-content !important;
    max-width:100% !important;
  }
  .site-footer .footer-grid>p{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:620px !important;
    margin:0 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    line-height:1.7 !important;
  }
  .site-footer .footer-links{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px 16px !important;
    width:100% !important;
    min-width:0 !important;
    justify-content:stretch !important;
  }
  .site-footer .footer-links a{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:4px 0 !important;
    text-align:left !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }
  .site-footer .footer-bottom{
    width:100% !important;
    min-width:0 !important;
  }
}

@media (max-width:420px){
  :root{--shell:min(100% - 24px,1180px)}
  .site-footer .footer-links{grid-template-columns:1fr 1fr !important}
  .site-footer .footer-grid>p{font-size:13px !important;line-height:1.65 !important}
  .site-footer .footer-bottom{font-size:12px !important}
}

/* Product catalog copy rhythm. */
#katalog .section-heading{max-width:980px}
#katalog .section-heading h2{max-width:15ch}
#katalog .section-heading p{max-width:76ch}

/* BIOFILL® mobile: center the powder, reduce noise, then reveal sectors. */
@media (max-width:640px){
  .bf-ecosystem{
    padding:18px 14px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }
  .bf-ecosystem .pf-visual-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-bottom:18px !important;
  }
  .bf-ecosystem .pf-visual-copy h3{
    font-size:clamp(24px,7.8vw,30px) !important;
    line-height:1.1 !important;
    max-width:13ch !important;
  }
  .bf-ecosystem .pf-visual-copy p{
    font-size:13px !important;
    line-height:1.58 !important;
  }
  .bf-ecosystem .pf-value-pills{
    display:flex !important;
    gap:8px !important;
    overflow-x:auto !important;
    padding:2px 0 5px !important;
    margin:0 -2px !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .bf-ecosystem .pf-value-pills::-webkit-scrollbar{display:none}
  .bf-ecosystem .pf-value-pills span{
    flex:0 0 auto !important;
    min-width:max-content !important;
    padding:10px 12px 10px 34px !important;
    border-radius:999px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
  .bf-ecosystem .pf-value-pills span::before{left:13px !important;width:10px !important;height:10px !important;margin-top:-5px !important;box-shadow:0 0 0 4px rgba(47,185,128,.10) !important}

  .bf-ecosystem .bf-network{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "center center"
      "lt rt"
      "lm rm"
      "bottom bottom" !important;
    gap:10px !important;
    padding:2px 0 0 !important;
  }
  .bf-ecosystem .bf-connectors,
  .bf-ecosystem .bf-center-ring{display:none !important}
  .bf-ecosystem .bf-center-stage{
    grid-area:center !important;
    min-height:174px !important;
    padding:0 !important;
    margin-bottom:2px !important;
  }
  .bf-ecosystem .bf-powder-core{
    width:156px !important;
    max-width:156px !important;
    aspect-ratio:1/1 !important;
    padding:12px !important;
    border-radius:50% !important;
    box-shadow:0 16px 34px rgba(23,52,43,.10) !important;
  }
  .bf-ecosystem .bf-powder-icon{
    width:104px !important;
    max-width:104px !important;
    margin-bottom:4px !important;
    animation:bf-mobile-float 4.6s ease-in-out infinite !important;
  }
  .bf-ecosystem .bf-powder-icon::before,
  .bf-ecosystem .bf-powder-icon::after{display:none !important}
  .bf-ecosystem .bf-center-label span{font-size:9px !important;letter-spacing:.08em !important}
  .bf-ecosystem .bf-center-label strong{font-size:12.5px !important;line-height:1.25 !important}

  .bf-ecosystem .bf-sector-card{
    min-height:104px !important;
    padding:12px 9px !important;
    border-radius:18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    text-align:center !important;
    opacity:0;
    transform:translateY(14px) scale(.98);
  }
  .bf-ecosystem .bf-sector-icon{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    border-radius:13px !important;
  }
  .bf-ecosystem .bf-sector-icon svg{width:24px !important;height:24px !important}
  .bf-ecosystem .bf-sector-copy strong{
    font-size:12px !important;
    line-height:1.25 !important;
    margin:0 !important;
  }
  .bf-ecosystem .bf-sector-copy span{display:none !important}
  .bf-ecosystem .card-bottom{
    grid-area:bottom !important;
    max-width:none !important;
    min-height:70px !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    text-align:left !important;
    padding:12px 14px !important;
  }

  .js .bf-ecosystem.is-visible .bf-sector-card{
    opacity:1 !important;
    transform:none !important;
    transition:opacity .52s ease,transform .62s cubic-bezier(.22,1,.36,1) !important;
  }
  .js .bf-ecosystem.is-visible .card-left-top{transition-delay:.08s !important}
  .js .bf-ecosystem.is-visible .card-right-top{transition-delay:.16s !important}
  .js .bf-ecosystem.is-visible .card-left-middle{transition-delay:.24s !important}
  .js .bf-ecosystem.is-visible .card-right-middle{transition-delay:.32s !important}
  .js .bf-ecosystem.is-visible .card-bottom{transition-delay:.40s !important}
}

@keyframes bf-mobile-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (max-width:380px){
  .bf-ecosystem .bf-network{gap:8px !important}
  .bf-ecosystem .bf-sector-card{min-height:98px !important;padding:10px 7px !important}
  .bf-ecosystem .bf-sector-copy strong{font-size:11.5px !important}
  .bf-ecosystem .bf-powder-core{width:148px !important;max-width:148px !important}
}

@media (prefers-reduced-motion:reduce){
  .bf-ecosystem .bf-powder-icon{animation:none !important}
}