/* ==========================================================================
   Fastols — Mobile responsive fixes
   Also referenced by templates/page.html but missing from the project.
   Keeps small screens from producing horizontal scroll/clipped content.
   ========================================================================== */

html,body{overflow-x:hidden;max-width:100%}

/* Shared responsive guardrails for pages and generated locale content. */
img,svg,video,canvas,iframe{max-width:100%}
.container{min-width:0}
.site-header{min-width:0}
.site-header .container,.site-header .header-inner{min-width:0;max-width:100%}
.tool-card-shell,.tool-form,.tool-page-hero,.article-page,.blog-page{min-width:0;max-width:100%}
.tool-card-shell{overflow:hidden}
.tool-grid,.features,.footer-grid,.home-articles-grid,.blog-grid,.related-grid{width:100%;min-width:0}
.tool-card,.feature-card,.home-article-card,.blog-card,.related-card{min-width:0;overflow-wrap:anywhere}
.tool-card h1,.tool-card h2,.tool-card h3,.feature-card h2,.feature-card h3,.blog-card-title,.home-article-body h3{overflow-wrap:anywhere}

@media(max-width:480px){
  .container{padding-inline:16px}

  .home-hero{padding:26px 0 24px}
  .home-search-wrap{margin-top:20px}

  .popular-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .popular-tool{padding:16px 14px}

  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat-card{padding:14px;gap:10px}
  .cat-card .cc-name{font-size:12.8px}

  .all-tools-search{max-width:none}

  .why-grid{gap:12px}

  .home-section{padding:36px 0}

  .site-header{height:auto;min-height:var(--header-h)}
  .site-header .container,.site-header .header-inner{gap:8px}
  .site-header .brand{flex:0 0 auto;max-width:48vw}
  .site-header .brand span,.site-header .brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tool-page-hero{padding-top:28px}
  .tool-intro h1,.article-title{font-size:clamp(25px,8vw,38px);line-height:1.25;overflow-wrap:anywhere}
  .tool-intro p,.article-intro p{font-size:14px;line-height:1.7}
  .tool-card-shell{border-radius:14px}
  .tool-card-shell .tool-form{padding-inline:12px}
  .tool-card-shell .tool-actions{flex-wrap:wrap;gap:10px}
  .tool-card-shell .tool-actions .btn{min-width:0;max-width:100%;white-space:normal}
  .article-art{min-height:180px;height:auto}
  .article-content,.article-body{max-width:100%;overflow-wrap:anywhere}
  .article-content pre,.article-body pre,.code-editor-textarea{max-width:100%;overflow-x:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col{min-width:0}
}

@media(min-width:481px) and (max-width:991px){
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .features,.blog-grid,.home-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}