/* ============================================================
   responsive.css  —  Universal Fluid Design System
   ToolCrate · All devices from 320px → 2560px
   Load order: style.css → mobile.css → responsive.css
   ============================================================ */

/* ── 1. FLUID DESIGN TOKENS ── */
:root {
  /* Fluid space scale */
  --space-xs: clamp(4px, 1vw, 8px);
  --space-sm: clamp(8px, 1.5vw, 12px);
  --space-md: clamp(12px, 2vw, 20px);
  --space-lg: clamp(16px, 3vw, 32px);
  --space-xl: clamp(24px, 5vw, 56px);

  /* Fluid typography */
  --text-xs: clamp(0.65rem, 1.2vw, 0.75rem);
  --text-sm: clamp(0.78rem, 1.5vw, 0.875rem);
  --text-base: clamp(0.875rem, 1.8vw, 1rem);
  --text-lg: clamp(1rem, 2vw, 1.125rem);
  --text-xl: clamp(1.1rem, 2.5vw, 1.25rem);
  --text-2xl: clamp(1.2rem, 3vw, 1.5rem);
  --text-3xl: clamp(1.4rem, 4vw, 2rem);
  --text-4xl: clamp(1.8rem, 5vw, 2.8rem);

  /* Container padding */
  --container-pad: clamp(12px, 3vw, 24px);
}

/* ── 2. GLOBAL SAFETY NET ── */
html {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100dvh;
}

*,
*::before,
*::after {
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

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

/* ── 3. CONTAINER ── */
.wrap {
  max-width: min(1120px, 92vw);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  width: 100%;
  box-sizing: border-box;
}

/* ── 4. HEADER / MASTHEAD ── */
.masthead .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: nowrap;
}

.brand-block {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.brand h1,
.brand h2,
.brand-h1 {
  font-size: var(--text-2xl);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tagline {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.install-app-btn,
.theme-toggle {
  flex-shrink: 0;
}

/* ── 5. TOOL LIST CONTAINER ── */
.tool-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  gap: var(--space-md) !important;
  width: 100%;
  box-sizing: border-box;
}

/* ── 6. TOOL CARDS ── */
.tool-row {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-sm) !important;
  padding: clamp(14px, 2.5vw, 22px) !important;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.tool-row .info {
  width: 100%;
}

.tool-row .info h3 {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  font-size: var(--text-base) !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

.tool-row .info p {
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
}

/* ── 7. CATEGORY RAIL ── */
.category-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  width: 100%;
  box-sizing: border-box;
}

.chip {
  font-size: var(--text-sm);
  padding: clamp(6px, 1.2vw, 9px) clamp(12px, 2vw, 18px);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 8. SEARCH BAR ── */
#toolSearch {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 20px);
  font-size: var(--text-base);
}

/* ── 9. TOOL PANEL (TOOL PAGES) ── */
.tool-panel {
  padding: var(--space-lg) !important;
  box-sizing: border-box;
}

.panel-head {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  flex-wrap: nowrap;
}

.panel-icon {
  width: clamp(40px, 8vw, 52px) !important;
  height: clamp(40px, 8vw, 52px) !important;
  flex-shrink: 0;
}

/* ── 10. FORM FIELDS ── */
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 18px);
}

.field textarea,
textarea {
  min-height: clamp(120px, 20vw, 180px);
  resize: vertical;
}

/* ── 11. ROW3 & ROW2 ── */
.row3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-sm);
  box-sizing: border-box;
}

.row2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-sm);
  box-sizing: border-box;
}

/* ── 12. STAT GRID ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: var(--space-sm);
}

/* ── 13. BUTTONS & CHIPS ── */
.btn {
  font-size: var(--text-sm);
  min-height: 44px;
  padding: clamp(10px, 1.8vw, 13px) clamp(18px, 3vw, 28px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* ── 14. IMAGE COMPARE ── */
.img-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-sm);
}

/* ── 15. TABLES ── */
.seo-guide-content table,
.prose table,
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.seo-guide-content thead,
.seo-guide-content tbody,
.prose thead,
.prose tbody {
  min-width: 500px;
}

/* ── 16. PROSE (ARTICLE CONTENT) ── */
.prose {
  max-width: min(760px, 100%);
  box-sizing: border-box;
}

.prose h2 {
  font-size: var(--text-3xl);
  line-height: 1.2;
}

.prose h3 {
  font-size: var(--text-xl);
}

.prose p,
.prose li {
  font-size: var(--text-base);
  line-height: 1.7;
}

/* ── 17. BLOG GRID ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-md);
  width: 100%;
  box-sizing: border-box;
}

/* ── 18. FAQ ── */
.seo-guide-content summary,
.home-faq-item summary {
  padding: clamp(12px, 2vw, 18px) clamp(14px, 2.5vw, 22px);
  font-size: var(--text-base);
}

.seo-guide-content details p,
.home-faq-item p {
  padding: 0 clamp(14px, 2.5vw, 22px) clamp(12px, 2vw, 20px);
  font-size: var(--text-sm);
}

/* ── 19. FOOTER ── */
footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ── 20. SUBJECT ROW (CGPA) ── */
.subject-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: var(--space-xs);
  align-items: center;
  box-sizing: border-box;
}

/* ── 21. DROP ZONE ── */
.drop-zone {
  padding: clamp(28px, 6vw, 52px) clamp(16px, 4vw, 24px);
}

/* ============================================================
   BREAKPOINTS & RESPONSIVE BEHAVIOR
   ============================================================ */

/* Tablet (641px - 1024px): 2 columns */
@media (min-width: 641px) and (max-width: 1024px) {
  .tool-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Laptop (1025px - 1439px): 3 columns */
@media (min-width: 1025px) and (max-width: 1439px) {
  .tool-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Desktop (1440px+): wider container + columns */
@media (min-width: 1440px) {
  .wrap {
    max-width: min(1360px, 94vw);
  }
  .tool-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  }
}

/* Ultra-wide (1920px+): centered max 1440px container */
@media (min-width: 1920px) {
  .wrap {
    max-width: min(1440px, 90vw);
  }
  .tool-list {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .wrap {
    padding-left: clamp(12px, 4vw, 16px);
    padding-right: clamp(12px, 4vw, 16px);
  }

  .tool-list {
    grid-template-columns: 1fr !important;
    gap: clamp(8px, 2vw, 12px) !important;
    padding: 0 !important;
  }

  .tool-row {
    padding: clamp(14px, 4vw, 18px) !important;
  }

  .brand h1,
  .brand h2,
  .brand-h1 {
    font-size: clamp(1.1rem, 5vw, 1.35rem) !important;
  }

  /* Compact circular install button */
  .install-app-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
  }
  .install-app-btn .install-text,
  .install-app-btn span:not(:has(svg)) {
    display: none !important;
  }
  .install-app-btn svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .theme-toggle {
    padding: 8px 12px !important;
    font-size: 0.76rem !important;
    flex-shrink: 0 !important;
  }

  /* Horizontal scrolling chips */
  .category-rail {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
    padding: clamp(8px, 2vw, 12px) 0 !important;
    justify-content: flex-start !important;
  }
  .category-rail::-webkit-scrollbar {
    display: none !important;
  }
  .chip {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 0.78rem !important;
  }

  /* Tool Panel mobile */
  .tool-panel {
    padding: clamp(16px, 4vw, 20px) !important;
    border-radius: 16px !important;
  }
  .panel-head {
    flex-direction: column;
  }
  .panel-head h2 {
    font-size: clamp(1.15rem, 4vw, 1.35rem) !important;
  }

  .row3,
  .row2 {
    grid-template-columns: 1fr !important;
  }

  .subject-row {
    grid-template-columns: 1.5fr 1fr 1fr auto !important;
    gap: 6px !important;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .btn-row {
    gap: 8px !important;
  }
  .btn {
    min-height: 44px !important;
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
  }

  .feature-strip {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-sm) !important;
  }
  .footer-links {
    gap: clamp(12px, 3vw, 16px) !important;
  }

  .prose h2,
  .seo-guide-content h2 {
    font-size: clamp(1.35rem, 4vw, 1.6rem) !important;
  }

  .img-compare {
    grid-template-columns: 1fr !important;
  }

  .drop-zone {
    padding: 28px 16px !important;
  }
}

/* Tiny phone (max-width: 380px) */
@media (max-width: 380px) {
  .brand h1,
  .brand h2,
  .brand-h1 {
    font-size: clamp(1rem, 4.5vw, 1.2rem) !important;
  }

  .install-app-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .theme-toggle {
    padding: 7px 10px !important;
    font-size: 0.72rem !important;
  }

  .chip {
    padding: 6px 12px !important;
    font-size: 0.74rem !important;
  }

  .tool-panel {
    padding: 14px !important;
  }

  .subject-row {
    grid-template-columns: 1.2fr 0.8fr 0.8fr auto !important;
    gap: 4px !important;
  }
}

/* Ultra narrow / Fold (max-width: 300px) */
@media (max-width: 300px) {
  .brand h1,
  .brand h2,
  .brand-h1 {
    font-size: 0.95rem !important;
  }
  .masthead .row {
    gap: 4px !important;
  }
  .install-app-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .masthead {
    padding: 10px 0 8px !important;
    margin-bottom: 10px !important;
  }
  .brand h1,
  .brand h2,
  .brand-h1 {
    font-size: 1.15rem !important;
  }
  .hero-illus {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Foldable multi-pane */
@media (spanning: single-fold-vertical) {
  .tool-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Touch devices: 44px min tap targets & active states */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .chip,
  .theme-toggle,
  .back-btn,
  .install-app-btn,
  .checks label {
    min-height: 44px;
  }

  .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .tool-row:hover {
    transform: none !important;
  }
  .badge:hover {
    transform: none !important;
  }
  .chip:hover {
    transform: none !important;
  }

  .tool-row:active {
    transform: scale(0.985) !important;
    transition: transform 0.1s ease !important;
  }
  .btn:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
  .chip:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Prefers color scheme fallback */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F5FAF7;
    --bg-2: #FFFFFF;
    --surface: rgba(255, 255, 255, 0.85);
    --surface-2: #FFFFFF;
    --surface-3: #F0F7F4;
    --border: rgba(15, 42, 32, 0.10);
    --border-2: rgba(15, 42, 32, 0.18);
    --ink: #0A1410;
    --ink-2: #3D5A50;
    --ink-3: #6E8A7E;
  }
}

/* Print */
@media print {
  .masthead,
  .category-rail,
  .search-row,
  .btn-row,
  footer,
  .install-app-btn,
  .theme-toggle,
  .back-btn {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt !important;
  }

  .wrap {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .tool-panel {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }

  .prose,
  .seo-guide-content {
    max-width: 100% !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

/* Container Queries (progressive enhancement) */
@supports (container-type: inline-size) {
  .tool-list {
    container-type: inline-size;
  }

  @container (max-width: 480px) {
    .tool-row {
      padding: 14px !important;
    }
    .tool-row .info h3 {
      font-size: 0.95rem !important;
    }
  }

  @container (min-width: 600px) and (max-width: 900px) {
    .tool-row .info h3 {
      font-size: 1rem !important;
    }
  }
}