/* ============================================================
   IMAGE COMPRESSOR & OPTIMIZER — Responsive Stylesheet (responsive.css)
   Breakpoints: 320px, 375px, 390px, 414px, 768px, 1024px, 1440px+ (Section 37)
   ============================================================ */

/* ------------------------------------------------------------
   Large Desktop Screens (1440px+)
   ------------------------------------------------------------ */
@media (min-width: 1440px) {
  :root {
    --max-width: 1280px;
  }
}


/* ------------------------------------------------------------
   Compact Desktop Screens (1025px to 1240px)
   ------------------------------------------------------------ */
@media (min-width: 1025px) and (max-width: 1240px) {
  .brand-logo {
    gap: 6px;
  }

  .brand-logo-img {
    height: 32px;
    max-width: 36px;
  }

  .brand-text-stacked {
    font-size: 12px;
  }

  .main-nav {
    gap: 4px;
  }

  .nav-link {
    padding: 6px 8px;
    font-size: 12.5px;
    gap: 3px;
  }

  .header-actions {
    gap: 4px;
  }

  .tools-grid-btn, .theme-toggle-btn {
    width: 36px;
    height: 36px;
  }

  .dropdown-menu.mega-menu {
    width: 860px;
    max-width: calc(100vw - 32px);
    right: -40px;
    padding: 18px 16px;
    gap: 12px;
  }

  .dropdown-menu.mega-menu::before {
    right: 48px;
  }
}

/* ------------------------------------------------------------
   Tablet Landscape & Small Desktops (<= 1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root {
    --content-padding: 24px;
  }

  .workspace-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .workspace-right {
    position: static;
  }

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ------------------------------------------------------------
   Tablets & Mobile Header Breakpoint (<= 1024px)
   Covers 1024x1366, 768x1024 tablets and all mobile screens
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Header & Navigation Drawer */
  .main-nav, .header-actions .desktop-only {
    display: none !important;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Tree Line (Hamburger Menu) - LEFT side */
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    order: 1;
    margin: 0;
    padding: 8px;
    color: var(--text);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
  }

  /* Brand Logo with GUDBA - CENTER */
  .brand-logo {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin: 0;
    text-decoration: none;
  }

  .brand-logo-img {
    height: 32px;
  }

  /* Right Side: 9-Dot Grid Icon + Theme Toggle */
  .header-actions {
    order: 3;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
  }

  .tools-grid-btn {
    display: inline-flex !important;
    width: 36px;
    height: 36px;
  }

  .theme-toggle-btn {
    width: 36px;
    height: 36px;
  }
}

/* ------------------------------------------------------------
   Tablets & Phablets (<= 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --content-padding: 20px;
  }

  h1, .h1 {
    font-size: 32px; /* Section 5: Mobile H1 */
  }

  h2, .h2 {
    font-size: 26px; /* Section 5: Mobile H2 */
  }

  h3, .h3 {
    font-size: 20px;
  }

  /* Mobile Navigation Drawer (Matches Image 3) */
  .mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--surface);
    padding: 20px 24px 60px 24px;
    display: none;
    flex-direction: column;
    z-index: 99999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .mobile-nav-drawer.open {
    display: flex;
    animation: drawerSlide 200ms ease-out forwards;
  }

  @keyframes drawerSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Workspace Stacked Flow (Section 37: Queue -> Settings -> Compress) */
  .workspace-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .workspace-right {
    position: static;
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }

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

  .results-grid {
    grid-template-columns: 1fr;
  }

  .comparison-container {
    height: 380px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}

/* ------------------------------------------------------------
   Mobile Devices (<= 414px: iPhone Plus / Max / Modern Android)
   ------------------------------------------------------------ */
@media (max-width: 414px) {
  :root {
    --content-padding: 16px;
  }

  .upload-dropzone {
    padding: var(--space-3xl) var(--space-md);
  }

  .dropzone-icon {
    width: 56px;
    height: 56px;
  }

  .dropzone-icon svg {
    width: 28px;
    height: 28px;
  }

  .dropzone-title {
    font-size: 18px;
  }

  .results-hero-stat {
    font-size: 40px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .results-actions-bar {
    flex-direction: column;
    width: 100%;
  }

  .results-actions-bar .btn {
    width: 100%;
  }

  .comparison-container {
    height: 280px;
  }

  .queue-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .queue-item-thumb-wrapper {
    width: 100%;
    height: 120px;
  }

  .queue-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------------
   Small Mobile Devices (<= 375px / 320px: iPhone SE, Small Screens)
   ------------------------------------------------------------ */
@media (max-width: 375px) {
  h1, .h1 {
    font-size: 28px;
  }

  .brand-logo {
    gap: 6px;
  }

  .brand-logo-img {
    height: 28px;
  }

  .brand-logo span.brand-text {
    font-size: 13px;
  }

  .btn-lg {
    padding: 14px 20px;
    font-size: 15px;
  }

  .filter-pill {
    padding: 6px 12px;
    font-size: 12px;
  }
}


/* ------------------------------------------------------------
   SEO Content Section Responsive Layout (4-col, 2-col, 1-col)
   ------------------------------------------------------------ */
.seo-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.seo-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .seo-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .seo-grid-4, .seo-grid-2 {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }

  .seo-content-block {
    padding: var(--space-lg) !important;
  }

  .seo-content-block h2 {
    font-size: 22px !important;
  }

  .hero-section {
    padding: var(--space-3xl) 0 var(--space-xl);
  }
}