/* Mobile polish: layout, FABs, images, touch */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  overflow-x:clip;
}

img, video, svg{
  max-width:100%;
  height:auto;
}

/* Room for fixed FABs so footer/CTA are not covered */
@media (max-width: 900px){
  body{
    padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .footer{
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .layout-contact .form,
  .cta,
  .section:last-of-type{
    scroll-margin-bottom:calc(130px + env(safe-area-inset-bottom, 0px));
  }
}


/* Hero + carousel images */
@media (max-width: 900px){
  .hero.hero--split{
    padding:28px 0 24px;
  }
  .hero__img{
    height:auto;
    aspect-ratio:4 / 3;
    max-height:min(56vh, 380px);
    min-height:200px;
  }
  .hero__carousel{
    margin-top:14px;
  }
  .carousel__slide{
    width:min(320px, 86vw);
    aspect-ratio:4 / 3;
  }
  .carousel__track{
    padding:10px;
    gap:10px;
    scroll-padding-inline:10px;
  }
  .carousel__dots{
    padding:10px 10px 12px;
    gap:8px;
  }
  .carousel__dot{
    width:9px;
    height:9px;
    min-width:9px;
    min-height:9px;
    max-width:9px;
    max-height:9px;
    padding:0;
  }
  .carousel__dot.is-active{
    width:10px;
    height:10px;
    min-width:10px;
    min-height:10px;
    max-width:10px;
    max-height:10px;
  }
}

@media (max-width: 600px){
  .hero__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero__actions .btn{
    width:100%;
    justify-content:center;
  }
  .carousel__slide{
    width:min(280px, 90vw);
  }
  .stats__grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .grid-4{
    grid-template-columns:1fr;
  }
  .product__quick{
    grid-template-columns:1fr;
  }
  .map-embed iframe{
    height:min(52vh, 320px);
    min-height:220px;
  }
  .modal__dialog{
    width:min(100%, calc(100vw - 24px));
    max-height:min(88dvh, 640px);
    margin:12px;
  }
}

/* Product cards + detail images */
@media (max-width: 700px){
  .product-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .product__media{
    aspect-ratio:16 / 10;
  }
  .product__body{
    padding:16px;
  }
}

@media (max-width: 900px){
  .product-detail__media{
    position:static;
    width:100%;
  }
  .product-detail__media img{
    width:100%;
    max-height:none;
    aspect-ratio:16 / 10;
    object-fit:cover;
    object-position:center;
  }
  .product-detail__body h2{
    font-size:clamp(22px, 5.5vw, 28px);
    line-height:1.25;
  }
  .product-detail__body h3{
    font-size:15px;
  }
  .product-detail__body .btn{
    width:100%;
    justify-content:center;
  }
}

/* Photo grid on home */
@media (max-width: 600px){
  .photo-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}

@media (max-width: 380px){
  .photo-grid{
    grid-template-columns:1fr;
  }
}

/* Cards, CTA, prose */
@media (max-width: 700px){
  .grid-3 .card__body,
  .grid-2 .card__body{
    padding:16px;
  }
  .cta__panel{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:14px;
  }
  .cta__panel .btn{
    width:100%;
    justify-content:center;
  }
  .prose--wide{
    font-size:15px;
    line-height:1.75;
  }
}

/* Touch: no hover lift on cards */
@media (hover: none) and (pointer: coarse){
  .product:hover,
  .card:hover{
    transform:none;
  }
  .product:hover .product__media img{
    transform:none;
    filter:none;
  }
}

/* Splash on small screens */
@media (max-width: 600px){
  .sxj-bg{
    background-position:center 40%;
  }
  .sxj-tagline .sxj-rest{
    color:#0e4a7a !important;
    -webkit-text-fill-color:#0e4a7a !important;
  }
  .sxj-line.line-1{
    color:#0c1829 !important;
  }
}

/* Header: brand + hamburger never clip */
@media (max-width: 820px){
  .header .container{
    gap:8px;
  }
  .brand{
    min-width:0;
  }
  .brand__name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:min(52vw, 220px);
  }
  .hamburger{
    flex-shrink:0;
  }
}

/* Prevent wide tables / pre from breaking layout */
@media (max-width: 900px){
  .table-wrap table{
    min-width:520px;
  }
  pre, code{
    max-width:100%;
    overflow-x:auto;
  }
}