/* ============================================================
   responsive.css — All media queries / breakpoints
   ============================================================ */

/* ── 1100px ── */
@media (max-width: 1100px) {
  .tools-grid                { grid-template-columns: repeat(3, 1fr); }
  .tab-content.active        { grid-template-columns: repeat(3, 1fr); }
  .cat-grid                  { grid-template-columns: repeat(3, 1fr); }
  .footer-grid               { grid-template-columns: 1fr 1fr; }
  .tool-page-grid            { grid-template-columns: 380px 1fr; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  header                     { padding: 0 16px; }
  .header-inner              { flex-wrap: wrap; justify-content: space-between; gap: 16px; height: auto; padding: 12px 0; }
  nav                        { display: none; }
  .hamburger                 { display: flex; }
  .btn-outline               { display: none; }
  .header-actions            { flex-wrap: wrap; justify-content: flex-end; width: 100%; gap: 10px; }
  .btn-primary               { padding: 8px 16px; font-size: 13px; }
  .dark-toggle               { width: 36px; height: 36px; }
  .search-wrap{
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.search-wrap input{
  padding-right: 90px;
}
  .search-btn                { padding: 8px 16px; }
   .filter-bar{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar{
    display: none;
  }
  .tools-grid                { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tab-content.active        { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cat-grid                  { grid-template-columns: repeat(2, 1fr); }
  .section-header            { flex-wrap: wrap; gap: 12px; }
  .section-header .see-all   { flex-shrink: 0; }
  .footer-grid               { grid-template-columns: 1fr; }
  .tool-page-grid            { grid-template-columns: 1fr; gap: 24px; }
  .calc-card                 { position: static; top: auto; }
  .related-grid              { grid-template-columns: 1fr; }
  .result-grid               { grid-template-columns: 1fr 1fr; }
  .content-block             { padding: 18px; }
  .section                   { padding: 32px 0; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  header                     { padding: 0 12px; }
  .header-inner              { gap: 10px; padding: 10px 0; }
  .header-actions            { width: 100%; justify-content: flex-end; gap: 8px; }
  .btn-primary               { padding: 8px 12px; font-size: 12px; }
  .tools-grid                { grid-template-columns: 1fr; gap: 12px; }
  .tab-content.active        { grid-template-columns: 1fr; }
  .hero                      { padding: 32px 14px 28px; }
  .hero::before              { top: -60px; right: -60px; width: 220px; height: 220px; }
  .hero-stats                { gap: 16px; }
 .search-wrap{
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.search-wrap input{
  padding: 14px 16px 14px 44px;
}
  .search-btn                { right: 6px; padding: 8px 12px; }
    .filter-bar{
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar{
    display: none;
  }
  .tab-btn                   { padding: 10px 12px; font-size: 13px; }
  .cat-grid                  { grid-template-columns: 1fr; }
  .cat-card                  { padding: 16px; gap: 10px; }
  .section-header            { flex-wrap: wrap; gap: 12px; }
  .section-header .see-all   { width: 100%; text-align: right; }
  .result-grid               { grid-template-columns: 1fr; }
  .tool-page-grid            { grid-template-columns: 1fr; }
  .footer-grid               { gap: 18px; }
  .footer-bottom             { flex-direction: column; align-items: flex-start; gap: 10px; }
  .logo-text                 { font-size: 17px; }
  .search-btn span           { display: none; }
}