/* ===================================================================
   XILXIL TOOLS HUB - RESPONSIVE OVERRIDES
   Mobile-first improvements for all devices
   Target: 320px (small phones) to 2560px (4K monitors)
   =================================================================== */

/* ============================================================
   RESPONSIVE BREAKPOINTS
   - Small phones: 320px - 479px
   - Phones: 480px - 767px
   - Tablets portrait: 768px - 1023px
   - Tablets landscape / small laptops: 1024px - 1279px
   - Laptops: 1280px - 1535px
   - Desktops: 1536px - 1919px
   - Large desktops/4K: 1920px+
   ============================================================ */

/* ---------- BASE RESPONSIVE FIXES ---------- */

/* Better mobile font sizing */
html {
  font-size: clamp(14px, 2.5vw, 16px);
}

/* Ensure body doesn't overflow horizontally on any device */
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Container responsive padding */
.container {
  padding-left: clamp(0.75rem, 4vw, 1.5rem);
  padding-right: clamp(0.75rem, 4vw, 1.5rem);
}

/* ---------- HEADER RESPONSIVE ---------- */

@media (max-width: 1024px) {
  .header-inner {
    gap: 0.5rem;
  }
  .logo {
    font-size: 1.0625rem;
  }
  .logo-mark {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .site-header {
    position: sticky;
  }
  .header-inner {
    height: 60px;
  }
  .logo-text small {
    font-size: 0.5625rem;
  }
}

@media (max-width: 480px) {
  .header-inner {
    height: 56px;
  }
  .logo {
    font-size: 0.9375rem;
  }
  .logo-mark {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
  }
  .logo-text small {
    display: none;
  }
}

/* ---------- HERO RESPONSIVE ---------- */

@media (max-width: 768px) {
  .hero {
    padding: 3rem 0 2rem;
  }
  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.1;
  }
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .hero-search input {
    padding: 1rem 1rem 1rem 2.75rem;
    font-size: 0.9375rem;
  }
  .hero-search svg {
    left: 1rem;
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 2rem 0 1.5rem;
  }
  .hero-eyebrow {
    font-size: 0.75rem;
    padding: 4px 12px;
  }
  .hero-subtitle {
    font-size: 0.9375rem;
  }
  .hero .btn-lg {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ---------- GRID RESPONSIVE ---------- */

/* Better grid behavior on smaller screens */
@media (max-width: 1024px) {
  .grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
  }
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.875rem;
  }
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .grid-auto {
    grid-template-columns: 1fr;
  }
  .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- TOOL CARD RESPONSIVE ---------- */

@media (max-width: 768px) {
  .tool-card {
    padding: 1rem;
  }
  .tool-card-icon {
    width: 40px;
    height: 40px;
  }
  .tool-card-title {
    font-size: 1rem;
  }
  .tool-card-desc {
    font-size: 0.8125rem;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 480px) {
  .tool-card {
    padding: 0.875rem;
  }
  .tool-card-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.5rem;
  }
}

/* ---------- TOOL LAYOUT RESPONSIVE ---------- */

@media (max-width: 900px) {
  .tool-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tool-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .tool-sidebar {
    grid-template-columns: 1fr;
  }
  .tool-header h1 {
    font-size: 1.5rem;
  }
  .tool-header-desc {
    font-size: 0.9375rem;
  }
}

/* ---------- WORKSPACE RESPONSIVE ---------- */

@media (max-width: 700px) {
  .workspace {
    padding: 1rem;
  }
  .workspace-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .workspace-grid > div:first-child {
    order: 1;
  }
  .workspace-grid > div:last-child {
    order: 2;
  }
}

@media (max-width: 480px) {
  .workspace {
    padding: 0.875rem;
  }
  .input, .textarea, .select {
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
  }
  .textarea {
    min-height: 100px;
  }
  /* Prevent iOS zoom on input focus */
  @supports (-webkit-touch-callout: none) {
    .input, .textarea, .select {
      font-size: 16px;
    }
  }
}

/* ---------- BUTTONS RESPONSIVE ---------- */

@media (max-width: 480px) {
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
  .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    width: 100%;
  }
  .btn-block {
    width: 100%;
  }
  .flex.gap-md.flex-wrap {
    flex-direction: column;
  }
  .flex.gap-md.flex-wrap .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ---------- STATS RESPONSIVE ---------- */

@media (max-width: 600px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .stat-num {
    font-size: 2rem;
  }
  .stat-label {
    font-size: 0.6875rem;
  }
}

/* ---------- FOOTER RESPONSIVE ---------- */

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 500px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .footer-social {
    justify-content: center;
  }
}

/* ---------- SEARCH RESULTS RESPONSIVE ---------- */

@media (max-width: 768px) {
  .header-search {
    width: 180px;
  }
  .header-search input {
    padding: 0.4375rem 0.875rem 0.4375rem 2.25rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .search-result-item {
    padding: 0.75rem;
  }
  .search-result-item .tool-card-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
}

/* ---------- BREADCRUMB RESPONSIVE ---------- */

@media (max-width: 480px) {
  .breadcrumb {
    font-size: 0.75rem;
    flex-wrap: wrap;
  }
}

/* ---------- GLASS CARD RESPONSIVE ---------- */

@media (max-width: 768px) {
  .glass-card {
    padding: 1.25rem;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .glass-card {
    padding: 1rem;
    border-radius: 12px;
  }
}

/* ---------- FAQ RESPONSIVE ---------- */

@media (max-width: 480px) {
  .faq-item summary {
    padding: 0.875rem;
    font-size: 0.9375rem;
  }
  .faq-item-body {
    padding: 0 0.875rem 0.875rem;
    font-size: 0.875rem;
  }
}

/* ---------- RESULT BOX RESPONSIVE ---------- */

@media (max-width: 480px) {
  .result-box {
    padding: 0.875rem;
    font-size: 0.8125rem;
    min-height: 100px;
  }
}

/* ---------- TYPOGRAPHY RESPONSIVE ---------- */

@media (max-width: 768px) {
  h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
  h2 { font-size: clamp(1.375rem, 4vw, 2rem); }
  h3 { font-size: clamp(1.125rem, 3vw, 1.5rem); }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  h3 { font-size: 1.125rem; }
  p, li { font-size: 0.9375rem; }
}

/* ---------- TABLET-SPECIFIC OPTIMIZATIONS ---------- */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Better use of tablet space */
  .container {
    max-width: 100%;
  }
  .tool-card-desc {
    -webkit-line-clamp: 3;
  }
}

/* ---------- LARGE DESKTOP OPTIMIZATIONS ---------- */

@media (min-width: 1920px) {
  :root {
    --container-max: 1440px;
  }
  html {
    font-size: 18px;
  }
}

/* ---------- TOUCH DEVICE OPTIMIZATIONS ---------- */

@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets on touch devices */
  .btn, .nav-link, .chip, .tool-card {
    min-height: 44px;
  }
  .tool-card:hover {
    transform: none;
  }
  .faq-item summary {
    padding: 1rem;
    min-height: 48px;
  }
}

/* ---------- PRINT OPTIMIZATIONS ---------- */

@media print {
  body::before, body::after, .particle-bg, .scan-line {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .site-header, .site-footer, .header-search, .menu-toggle {
    display: none !important;
  }
  .glass-card {
    background: white !important;
    color: black !important;
    border: 1px solid #ddd !important;
    backdrop-filter: none !important;
  }
}

/* ---------- ACCESSIBILITY: 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;
  }
  .particle-bg, .scan-line {
    display: none !important;
  }
}

/* ---------- DARK/LIGHT MODE COMPATIBILITY ---------- */

/* Honor user's system preference if they have one */
@media (prefers-color-scheme: light) {
  /* Keep our dark theme — it's intentional */
  /* This is here in case we want to add a light theme later */
}

/* ---------- HIGH CONTRAST MODE ---------- */

@media (prefers-contrast: high) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #d0d0ff;
    --text-muted: #a0a0c8;
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* ---------- LANDSCAPE PHONE OPTIMIZATION ---------- */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero {
    padding: 1.5rem 0;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    margin-bottom: 1rem;
  }
  .site-header {
    position: sticky;
  }
}

/* ---------- FOLDABLE / ULTRA-WIDE PHONES ---------- */

@media (min-width: 280px) and (max-width: 320px) {
  /* Very small phones */
  html {
    font-size: 13px;
  }
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .hero-title {
    font-size: 1.5rem;
  }
}

/* ---------- BLOG ARTICLE RESPONSIVE ---------- */

@media (max-width: 768px) {
  article pre {
    font-size: 0.75rem;
    padding: 0.75rem;
    overflow-x: auto;
  }
  article code {
    font-size: 0.8125rem;
  }
  article h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }
  article p {
    line-height: 1.65;
  }
}

/* ---------- FORM ELEMENTS RESPONSIVE ---------- */

@media (max-width: 480px) {
  .field {
    margin-bottom: 0.875rem;
  }
  .label {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }
  /* Stack radio/checkbox options vertically on small screens */
  .flex.gap-md.flex-wrap:has(input[type="radio"]) {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- PREVENT HORIZONTAL SCROLL ---------- */

/* Ensure no element causes horizontal scroll */
img, video, canvas, svg, iframe, table, pre {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

table {
  display: block;
  overflow-x: auto;
  width: 100%;
}

/* ---------- SAFE AREA FOR NOTCHED PHONES ---------- */

@supports (padding: env(safe-area-inset-top)) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .container {
    padding-left: max(env(safe-area-inset-left), 1rem);
    padding-right: max(env(safe-area-inset-right), 1rem);
  }
}

/* ---------- MOBILE NAV IMPROVEMENTS ---------- */

@media (max-width: 900px) {
  .mobile-nav {
    padding: 1.5rem;
  }
  .mobile-nav .nav-link {
    font-size: 1.125rem;
    padding: 0.875rem 0;
  }
}

/* ---------- CHIP / BADGE RESPONSIVE ---------- */

@media (max-width: 480px) {
  .chip {
    padding: 4px 10px;
    font-size: 0.75rem;
  }
  .badge {
    padding: 3px 8px;
    font-size: 0.6875rem;
  }
}

/* ---------- TOOL WORKSPACE ACTIONS RESPONSIVE ---------- */

@media (max-width: 480px) {
  /* Make action buttons full-width on mobile */
  .workspace [data-action]:not([data-action="copy"]):not([data-action="clear"]) {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  /* Keep copy/clear side by side */
  .workspace [data-action="copy"],
  .workspace [data-action="clear"] {
    flex: 1;
  }
}