/* Mobile Optimization Styles */

@media (max-width: 1024px) {
  /* Hero Section */
  .hero {
    min-height: auto;
    padding: 8rem 1.5rem 4rem !important;
    height: auto;
  }
  
  .hero .grid {
    gap: 3rem;
  }

  .hero-title {
    font-size: clamp(3rem, 10vw, 5rem) !important;
    text-align: center;
  }

  .hero-sub {
    font-size: 1.125rem;
    text-align: center;
    margin: 0 auto 2.5rem !important;
  }

  .hero-cta {
    justify-content: center;
  }
  
  /* Rug image */
  .hero-rug-container {
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: auto !important;
  }
  
  .hero-rug-wrap {
    position: static !important;
    display: block !important;
  }
  
  .hero-rug-wrap img.hero-rug {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Floating Tags */
  .floating-tag {
    position: absolute !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    width: max-content !important;
    max-width: calc(100% - 20px) !important;
    font-size: 0.65rem !important;
    padding: 0.4rem 0.8rem !important;
    white-space: nowrap !important;
    text-align: left !important;
    box-shadow: 0 10px 20px rgba(26,18,10,0.15) !important;
    border-radius: 2px !important;
  }
  
  .tag-amooghli { top: 5% !important; left: 10px !important; right: auto !important; bottom: auto !important; }
  .tag-wefts { bottom: 5% !important; right: 10px !important; left: auto !important; top: auto !important; }
  .tag-master { top: 45% !important; right: 10px !important; left: auto !important; bottom: auto !important; }

  /* Zoomed Cartouche Image */
  .hero-floating.absolute.z-20 {
    width: 220px !important;
    top: -5% !important;
    right: -5% !important;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(2.5rem, 12vw, 3.5rem) !important;
  }
  .hero-sub {
    font-size: 1rem;
  }
  
  .hero-rug-container {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  /* Adjust tags for smaller screens so they don't overlap too much */
  .tag-amooghli { left: 5px !important; top: -2% !important; right: auto !important; bottom: auto !important; }
  .tag-wefts { right: 5px !important; bottom: 2% !important; left: auto !important; top: auto !important; }
  .tag-master { top: 42% !important; right: 5px !important; left: auto !important; bottom: auto !important; }
  
  .hero-floating.absolute.z-20 {
    width: 160px !important;
    right: -10px !important;
    top: 5% !important;
  }
}