/* 
  Growify Market - Comprehensive Responsive Styles
  Handles all screen sizes from very small (320px) to very large (2560px+)
*/

/* ========================================
   BASE RESPONSIVE STYLES
   ======================================== */

/* Extra small devices (phones, 320px and up) */
@media only screen and (min-width: 320px) {
  html {
    font-size: 12px;
  }
  
  .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Small devices (large phones, 480px and up) */
@media only screen and (min-width: 480px) {
  html {
    font-size: 13px;
  }
  
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  html {
    font-size: 14px;
  }
  
  .container {
    max-width: 720px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Large devices (desktops, 1024px and up) */
@media only screen and (min-width: 1024px) {
  html {
    font-size: 16px;
  }
  
  .container {
    max-width: 960px;
  }
}

/* Extra large devices (large desktops, 1280px and up) */
@media only screen and (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

/* XXL devices (very large screens, 1536px and up) */
@media only screen and (min-width: 1536px) {
  .container {
    max-width: 1400px;
  }
}

/* XXXL devices (ultra-wide screens, 1920px and up) */
@media only screen and (min-width: 1920px) {
  html {
    font-size: 18px;
  }
  
  .container {
    max-width: 1600px;
  }
}

/* Mega screens (2560px and up) */
@media only screen and (min-width: 2560px) {
  html {
    font-size: 20px;
  }
  
  .container {
    max-width: 2000px;
  }
}

/* ========================================
   TYPOGRAPHY RESPONSIVE SCALING
   ======================================== */

/* Fluid typography - scales between min and max based on viewport */
@media only screen and (max-width: 320px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1.125rem; }
  h6 { font-size: 1rem; }
  
  .text-xs { font-size: 0.625rem; }
  .text-sm { font-size: 0.75rem; }
  .text-base { font-size: 0.875rem; }
  .text-lg { font-size: 1rem; }
  .text-xl { font-size: 1.125rem; }
  .text-2xl { font-size: 1.25rem; }
  .text-3xl { font-size: 1.5rem; }
  .text-4xl { font-size: 1.875rem; }
  .text-5xl { font-size: 2.25rem; }
  .text-6xl { font-size: 3rem; }
  .text-7xl { font-size: 3.75rem; }
  .text-8xl { font-size: 4.5rem; }
  .text-9xl { font-size: 6rem; }
}

@media only screen and (min-width: 321px) and (max-width: 640px) {
  h1 { font-size: clamp(2rem, 5vw, 3rem); }
  h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
  h3 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  h1 { font-size: clamp(3rem, 6vw, 4.5rem); }
  h2 { font-size: clamp(2.5rem, 5vw, 4rem); }
}

@media only screen and (min-width: 1025px) and (max-width: 1920px) {
  h1 { font-size: clamp(4rem, 7vw, 6rem); }
  h2 { font-size: clamp(3rem, 5vw, 5rem); }
}

@media only screen and (min-width: 1921px) {
  h1 { font-size: clamp(5rem, 8vw, 8rem); }
  h2 { font-size: clamp(4rem, 6vw, 6rem); }
}

/* ========================================
   SPACING RESPONSIVE
   ======================================== */

/* Fluid spacing */
@media only screen and (max-width: 640px) {
  .p-1 { padding: 0.25rem; }
  .p-2 { padding: 0.5rem; }
  .p-3 { padding: 0.75rem; }
  .p-4 { padding: 1rem; }
  .p-5 { padding: 1.25rem; }
  .p-6 { padding: 1.5rem; }
  .p-8 { padding: 2rem; }
  .p-10 { padding: 2.5rem; }
  .p-12 { padding: 3rem; }
  .p-16 { padding: 4rem; }
  .p-20 { padding: 5rem; }
  .p-24 { padding: 6rem; }
  .p-32 { padding: 8rem; }
  .p-40 { padding: 10rem; }
  .p-48 { padding: 12rem; }
  .p-60 { padding: 15rem; }
  
  .m-1 { margin: 0.25rem; }
  .m-2 { margin: 0.5rem; }
  .m-4 { margin: 1rem; }
  .m-8 { margin: 2rem; }
  .m-16 { margin: 4rem; }
  .m-20 { margin: 5rem; }
  .m-24 { margin: 6rem; }
  
  .gap-1 { gap: 0.25rem; }
  .gap-2 { gap: 0.5rem; }
  .gap-3 { gap: 0.75rem; }
  .gap-4 { gap: 1rem; }
  .gap-6 { gap: 1.5rem; }
  .gap-8 { gap: 2rem; }
  .gap-12 { gap: 3rem; }
  .gap-16 { gap: 4rem; }
}

/* ========================================
   LAYOUT RESPONSIVE
   ======================================== */

/* Flexbox responsive */
@media only screen and (max-width: 640px) {
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-1 { flex: 1 1 0%; }
  .flex-auto { flex: 1 1 auto; }
  .flex-none { flex: none; }
  
  .justify-start { justify-content: flex-start; }
  .justify-center { justify-content: center; }
  .justify-end { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }
  .justify-around { justify-content: space-around; }
  
  .items-start { align-items: flex-start; }
  .items-center { align-items: center; }
  .items-end { align-items: flex-end; }
  .items-stretch { align-items: stretch; }
  
  .order-1 { order: 1; }
  .order-2 { order: 2; }
  .order-3 { order: 3; }
  .order-4 { order: 4; }
  .order-5 { order: 5; }
}

/* Grid responsive */
@media only screen and (max-width: 640px) {
  .grid { display: grid; }
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  
  .col-span-1 { grid-column: span 1 / span 1; }
  .col-span-2 { grid-column: span 2 / span 2; }
  .col-span-3 { grid-column: span 3 / span 3; }
  .col-span-4 { grid-column: span 4 / span 4; }
  .col-span-full { grid-column: 1 / -1; }
  
  .row-span-1 { grid-row: span 1 / span 1; }
  .row-span-2 { grid-row: span 2 / span 2; }
  .row-span-3 { grid-row: span 3 / span 3; }
}

/* Tablet */
@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Desktop */
@media only screen and (min-width: 1025px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ========================================
   SECTION RESPONSIVE
   ======================================== */

@media only screen and (max-width: 640px) {
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .py-40 { padding-top: 10rem; padding-bottom: 10rem; }
  .py-48 { padding-top: 12rem; padding-bottom: 12rem; }
  .py-60 { padding-top: 15rem; padding-bottom: 15rem; }
  
  .pt-20 { padding-top: 5rem; }
  .pt-32 { padding-top: 8rem; }
  .pt-48 { padding-top: 12rem; }
  .pb-8 { padding-bottom: 2rem; }
  .pb-12 { padding-bottom: 3rem; }
  .pb-16 { padding-bottom: 4rem; }
  .pb-24 { padding-bottom: 6rem; }
  .pb-32 { padding-bottom: 8rem; }
  
  .my-8 { margin-top: 2rem; margin-bottom: 2rem; }
  .my-12 { margin-top: 3rem; margin-bottom: 3rem; }
  .my-16 { margin-top: 4rem; margin-bottom: 4rem; }
  .my-20 { margin-top: 5rem; margin-bottom: 5rem; }
  .my-24 { margin-top: 6rem; margin-bottom: 6rem; }
  .my-32 { margin-top: 8rem; margin-bottom: 8rem; }
  
  .mb-8 { margin-bottom: 2rem; }
  .mb-12 { margin-bottom: 3rem; }
  .mb-16 { margin-bottom: 4rem; }
  .mb-20 { margin-bottom: 5rem; }
  .mb-24 { margin-bottom: 6rem; }
  
  .mt-8 { margin-top: 2rem; }
  .mt-12 { margin-top: 3rem; }
  .mt-16 { margin-top: 4rem; }
  .mt-20 { margin-top: 5rem; }
  .mt-24 { margin-top: 6rem; }
  .mt-32 { margin-top: 8rem; }
}

/* Tablet */
@media only screen and (min-width: 641px) and (max-width: 1024px) {
  section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .py-32 { padding-top: 6rem; padding-bottom: 6rem; }
  .py-40 { padding-top: 8rem; padding-bottom: 8rem; }
  .py-60 { padding-top: 10rem; padding-bottom: 10rem; }
  
  .pt-20 { padding-top: 6rem; }
  .pt-32 { padding-top: 10rem; }
}

/* Large desktop */
@media only screen and (min-width: 1921px) {
  section {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  
  .py-32 { padding-top: 10rem; padding-bottom: 10rem; }
  .py-60 { padding-top: 20rem; padding-bottom: 20rem; }
  
  .pt-20 { padding-top: 8rem; }
  .pt-32 { padding-top: 12rem; }
}

/* ========================================
   COMPONENT RESPONSIVE
   ======================================== */

/* Cards */
@media only screen and (max-width: 640px) {
  .rounded-2xl { border-radius: 1rem; }
  .rounded-3xl { border-radius: 1.5rem; }
  .rounded-\[32px\] { border-radius: 2rem; }
  .rounded-\[40px\] { border-radius: 2.5rem; }
  .rounded-\[48px\] { border-radius: 3rem; }
  .rounded-\[60px\] { border-radius: 3.5rem; }
  .rounded-\[80px\] { border-radius: 5rem; }
  
  .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
  .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
}

/* Buttons */
@media only screen and (max-width: 640px) {
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
  }
  
  .px-12 { padding-left: 2rem; padding-right: 2rem; }
  .px-16 { padding-left: 3rem; padding-right: 3rem; }
  .py-6 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .py-7 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .py-8 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
}

/* Navbar */
@media only screen and (max-width: 640px) {
  nav.fixed {
    height: auto;
    min-height: 4rem;
  }
  
  .h-16 { height: 4rem; }
  .h-20 { height: 5rem; }
}

/* ========================================
   HERO SECTION RESPONSIVE
   ======================================== */

@media only screen and (max-width: 640px) {
  .hero-section {
    padding-top: 8rem;
    padding-bottom: 6rem;
    min-height: auto;
  }
  
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.1;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-buttons a {
    width: 100%;
    text-align: center;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .hero-section {
    padding-top: 10rem;
    padding-bottom: 8rem;
  }
  
  .hero-title {
    font-size: 4rem;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  .hero-section {
    padding-top: 12rem;
    padding-bottom: 10rem;
  }
  
  .hero-title {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 1441px) {
  .hero-section {
    padding-top: 14rem;
    padding-bottom: 12rem;
  }
  
  .hero-title {
    font-size: 6rem;
  }
}

/* ========================================
   FOOTER RESPONSIVE
   ======================================== */

@media only screen and (max-width: 640px) {
  footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  footer .grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  footer .lg\:col-span-2 {
    grid-column: span 1;
  }
  
  .py-24 { padding-top: 4rem; padding-bottom: 4rem; }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  footer .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 1921px) {
  footer .grid {
    grid-template-columns: repeat(6, 1fr);
  }
  
  footer .lg\:col-span-2 {
    grid-column: span 2;
  }
}

/* ========================================
   FLOATING CONTACT BUTTONS
   ======================================== */

@media only screen and (max-width: 640px) {
  .fixed.left-6 {
    left: 1rem;
  }
  
  .fixed.right-6 {
    right: 1rem;
  }
  
  .fixed.bottom-6 {
    bottom: 1rem;
  }
  
  .fixed.left-6 .p-4,
  .fixed.right-6 .p-3 {
    padding: 0.75rem;
  }
  
  .fixed .h-7 {
    height: 1.5rem;
    width: 1.5rem;
  }
  
  .fixed .h-6 {
    height: 1.25rem;
    width: 1.25rem;
  }
}

@media only screen and (min-width: 1921px) {
  .fixed.left-6 {
    left: 2rem;
  }
  
  .fixed.right-6 {
    right: 2rem;
  }
  
  .fixed.bottom-6 {
    bottom: 2rem;
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Width utilities */
@media only screen and (max-width: 640px) {
  .w-\[400px\] {
    width: 100%;
    max-width: 100%;
  }
  
  .w-\[600px\] {
    width: 100%;
    max-width: 100%;
  }
  
  .w-\[800px\] {
    width: 100%;
    max-width: 100%;
  }
}

/* Height utilities */
@media only screen and (max-width: 640px) {
  .h-\[300px\] {
    height: auto;
    min-height: 200px;
  }
  
  .h-\[600px\] {
    height: 300px;
  }
}

@media only screen and (min-width: 1921px) {
  .h-\[300px\] {
    height: 400px;
  }
  
  .h-\[600px\] {
    height: 800px;
  }
}

/* ========================================
   SCROLLBAR RESPONSIVE
   ======================================== */

@media only screen and (max-width: 640px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}

@media only screen and (min-width: 1921px) {
  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }
}

/* ========================================
   ANIMATION RESPONSIVE
   ======================================== */

@media only screen and (max-width: 640px) {
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
  }
  
  .animate-float {
    animation: float 8s ease-in-out infinite;
  }
}

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

/* ========================================
   HIDE/SCHOW UTILITIES
   ======================================== */

@media only screen and (max-width: 640px) {
  .hidden {
    display: none !important;
  }
  
  .block {
    display: block;
  }
  
  .lg\:hidden {
    display: block;
  }
  
  .lg\:flex {
    display: none;
  }
}

@media only screen and (min-width: 641px) {
  .sm\:hidden {
    display: none;
  }
  
  .md\:hidden {
    display: none;
  }
  
  .lg\:hidden {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
  
  .lg\:hidden {
    display: none;
  }
}

/* ========================================
   CONTAINER MAX-WIDTH
   ======================================== */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 320px) {
  .container {
    max-width: 320px;
  }
}

@media only screen and (min-width: 480px) {
  .container {
    max-width: 480px;
  }
}

@media only screen and (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media only screen and (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media only screen and (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media only screen and (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

@media only screen and (min-width: 1920px) {
  .container {
    max-width: 1920px;
  }
}

@media only screen and (min-width: 2560px) {
  .container {
    max-width: 2400px;
  }
}