/* ============================================================
   Paintora - Responsive Stylesheet
   Mobile-first media queries for all breakpoints
   Developer: Mohd Rijvan Khan Mogia | Year: 2026
   ============================================================ */

/* ============================================================
   XS - Extra Small (< 576px) - Mobile Portrait
   ============================================================ */
@media (max-width: 575.98px) {
  /* Typography */
  .hero-title {
    font-size: 2.2rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.7rem;
  }

  .page-hero-title {
    font-size: 2rem;
  }

  /* Hero */
  .hero-section {
    padding: 80px 0 40px;
    min-height: auto;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-playstore {
    width: 100%;
    justify-content: center;
  }

  .palette-visual {
    width: 260px;
    height: 260px;
    margin: 0 auto;
  }

  .palette-bg {
    width: 220px;
    height: 220px;
    top: 20px;
    left: 20px;
  }

  .palette-hole {
    width: 45px;
    height: 45px;
    bottom: 60px;
    right: 70px;
  }

  .blob-1, .blob-3, .blob-5 { width: 40px; height: 40px; }
  .blob-2, .blob-4, .blob-6 { width: 35px; height: 35px; }
  .blob-1 { top: 45px; left: 55px; }
  .blob-2 { top: 50px; left: 110px; }
  .blob-3 { top: 105px; left: 40px; }
  .blob-4 { top: 110px; left: 160px; }
  .blob-5 { top: 165px; left: 65px; }
  .blob-6 { top: 162px; left: 130px; }

  /* Navbar */
  .navbar-paintora {
    padding: 10px 0;
  }

  .navbar-brand-paintora {
    font-size: 1.25rem;
  }

  .navbar-brand-paintora .brand-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  /* Features */
  .section-padding {
    padding: 60px 0;
  }

  .feature-card {
    padding: 28px 20px;
  }

  /* Tools */
  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* Palette */
  .palette-container {
    padding: 24px 16px;
  }

  .swatch {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  /* Footer */
  .footer-paintora {
    padding: 50px 0 24px;
  }

  .footer-badges {
    justify-content: flex-start;
    margin-top: 12px;
  }

  /* Scroll to top */
  #scrollToTop {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }

  /* Legal */
  .legal-section h2 {
    font-size: 1.2rem;
  }

  /* App overview */
  .app-overview-card {
    padding: 32px 20px;
  }

  .app-stat .stat-number {
    font-size: 2rem;
  }

  /* CTA */
  .cta-section h2 {
    font-size: 1.8rem;
  }
}

/* ============================================================
   SM - Small (576px – 767px) - Mobile Landscape / Large Mobile
   ============================================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-title {
    font-size: 2.8rem;
  }

  .hero-section {
    padding: 90px 0 50px;
    min-height: auto;
  }

  .palette-visual {
    width: 300px;
    height: 300px;
    margin: 0 auto;
  }

  .palette-bg {
    width: 260px;
    height: 260px;
  }

  .section-title {
    font-size: 1.9rem;
  }

  .page-hero-title {
    font-size: 2.4rem;
  }

  .section-padding {
    padding: 70px 0;
  }

  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .footer-badges {
    justify-content: flex-start;
    margin-top: 12px;
  }
}

/* ============================================================
   MD - Medium (768px – 991px) - Tablets
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-title {
    font-size: 3rem;
  }

  .hero-section {
    padding: 90px 0 60px;
    min-height: auto;
  }

  .palette-visual {
    width: 320px;
    height: 320px;
    margin: 0 auto;
    margin-top: 40px;
  }

  .tool-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .section-title {
    font-size: 2rem;
  }

  .page-hero-title {
    font-size: 2.6rem;
  }

  .section-padding {
    padding: 75px 0;
  }

  .app-overview-card {
    padding: 40px 30px;
  }

  .footer-badges {
    justify-content: flex-start;
    margin-top: 12px;
  }
}

/* ============================================================
   LG - Large (992px – 1199px) - Desktops
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-title {
    font-size: 3.4rem;
  }

  .palette-visual {
    width: 340px;
    height: 340px;
  }

  .tool-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   XL - Extra Large (1200px – 1399px)
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .hero-title {
    font-size: 3.6rem;
  }

  .palette-visual {
    width: 350px;
    height: 350px;
  }
}

/* ============================================================
   XXL - Ultra Wide (≥ 1400px)
   ============================================================ */
@media (min-width: 1400px) {
  .hero-title {
    font-size: 4rem;
  }

  .palette-visual {
    width: 400px;
    height: 400px;
  }

  .palette-bg {
    width: 330px;
    height: 330px;
  }
}

/* ============================================================
   Mobile: Navbar collapse adjustments
   ============================================================ */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.08);
  }

  .navbar-nav .nav-link {
    padding: 10px 14px !important;
    border-radius: 8px;
  }

  .hero-art {
    margin-top: 48px;
  }
}

/* ============================================================
   Mobile: Hero adjustments
   ============================================================ */
@media (max-width: 767.98px) {
  .hero-content {
    text-align: center;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .page-hero {
    padding: 80px 0 50px;
    text-align: center;
  }

  .breadcrumb-paintora {
    justify-content: center;
  }
}

/* ============================================================
   Mobile: Features & Cards
   ============================================================ */
@media (max-width: 767.98px) {
  .feature-icon {
    width: 54px;
    height: 54px;
    font-size: 1.5rem;
  }

  .gallery-canvas {
    height: 180px;
  }

  .legal-content {
    padding: 0 4px;
  }
}

/* ============================================================
   Mobile: Footer
   ============================================================ */
@media (max-width: 767.98px) {
  .footer-paintora > .container > .row > div {
    margin-bottom: 32px;
  }

  .footer-paintora > .container > .row > div:last-child {
    margin-bottom: 0;
  }

  .footer-copyright {
    text-align: center;
    margin-bottom: 12px;
  }

  .footer-badges {
    justify-content: center;
  }
}

/* ============================================================
   Touch device improvements
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .feature-card:hover {
    transform: none;
  }

  .tool-item:hover {
    transform: none;
  }

  .swatch:hover {
    transform: scale(1.05);
  }

  .btn-primary-custom:hover,
  .btn-secondary-custom:hover {
    transform: none;
  }

  .btn-playstore:hover {
    transform: none;
  }

  .gallery-card:hover {
    transform: none;
  }
}

/* ============================================================
   Print styles
   ============================================================ */
@media print {
  .navbar-paintora,
  .footer-paintora,
  #scrollToTop,
  .hero-section,
  .cta-section {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  .legal-content {
    max-width: 100%;
  }

  .legal-section h2 {
    page-break-after: avoid;
  }

  .legal-section {
    page-break-inside: avoid;
  }
}