/* =====================================================================
   RESPONSIVE FINE-TUNING
   Bootstrap 5 handles the grid; this file only adjusts our custom
   components at the breakpoints Bootstrap doesn't already cover.
   ===================================================================== */

@media (max-width: 1199px){
  .cta-band{padding:50px 40px;}
}

@media (max-width: 991px){
  .section-head{margin-bottom:40px;}
  .footer-col{margin-bottom:20px;}
  .post-nav-row{flex-direction:column;}
  .post-nav-row .next-post{text-align:left;margin-left:0;}
  .post-nav-row a{max-width:100%;}
}

@media (max-width: 767px){
  h1{font-size:clamp(30px,7vw,40px) !important;}
  .cta-band{flex-direction:column;text-align:center;align-items:flex-start;}
  .author-box{flex-direction:column;text-align:center;}
  .author-box .avatar-ring{margin:0 auto;}
}

@media (max-width: 575px){
  .service-card{padding:30px 24px;}
  .contact-info-card{flex-direction:column;text-align:center;}
  .contact-info-card .ci-icon{margin:0 auto;}
  .comment-row{flex-direction:column;}
  .comment-row .avatar-ring{margin-bottom:6px;}
}

/* Premium app-like tap targets on touch devices */
@media (hover: none) and (pointer: coarse){
  .btn, .nav-link, .faq-q, a{ -webkit-tap-highlight-color: transparent; }
  .service-card:hover, .card-flat:hover, .work-card:hover { transform:none; }
}