/* ==========================================================================
   RESPONSIVE.CSS — mobile-first refinements & breakpoint polish
   ========================================================================== */

/* Base (mobile) tightening already handled inline via clamp()/media queries
   in main/components/pages. This file layers final touch-target, spacing
   and density adjustments so mobile feels native, not a squeezed desktop. */

@media(max-width:767px){
  :root{--nav-h:66px;--announce-h:36px}
  .section{padding-block:var(--sp-6)}
  .container{padding-inline:18px}
  h1{font-size:clamp(2rem,8vw,2.6rem)}
  .hero{padding-block:var(--sp-6) var(--sp-5)}
  .hero .container{gap:var(--sp-5)}
  .hero-media{order:-1;aspect-ratio:4/3}
  .hero-badges{gap:var(--sp-3);flex-wrap:wrap}
  .btn{padding:15px 24px;font-size:.82rem}
  .stats-grid{gap:var(--sp-4) var(--sp-2)}
  .brand-grid,.icon-grid{gap:12px}
  .footer-bottom{flex-direction:column;text-align:center}
  .modal{padding:var(--sp-4)}
  .editorial-quote{padding-block:var(--sp-6)}
  body{padding-bottom:0}
  .fab{width:50px;height:50px}
  .fab svg{width:22px;height:22px}
}

/* Ensure comfortable thumb targets everywhere on touch devices */
@media(hover:none){
  .btn,.icon-btn,.fab,.bn-item,.filter-chip,.accordion-trigger{min-height:44px}
  .card:hover{transform:none}
}

/* Tablet */
@media(min-width:768px) and (max-width:1024px){
  .brand-grid,.icon-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}

/* Large desktop breathing room */
@media(min-width:1440px){
  :root{--container:1320px}
  .section{padding-block:var(--sp-9)}
}

/* Print (privacy/terms friendliness) */
@media print{
  .navbar,.announce,.floating-actions,.bottom-nav,.site-footer,#loading-screen,#scroll-progress{display:none!important}
  body{background:#fff;color:#000}
}