/**
 * Hero Slider - Responsive Styles
 * WHMCS Twenty-One Template
 */

/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) {
  .hero-slide-content {
    gap: 30px;
    padding: 40px 0;
  }
  
  .hero-slide-title {
    font-size: 36px;
  }
  
  .hero-slide-description {
    font-size: 16px;
  }
  
  .hero-slide-visual {
    max-width: 400px;
  }
}

/* Mobile Styles (below 768px) */
@media (max-width: 767px) {
  .hero-slider {
    min-height: 360px;
  }
  
  .hero-slide-content {
    flex-direction: column;
    gap: 30px;
    padding: 32px 0;
    text-align: center;
  }
  
  .hero-slide-text {
    max-width: 100%;
  }
  
  .hero-slide-visual {
    max-width: 300px;
    order: -1;
  }
  
  .hero-slide-badge {
    font-size: 12px;
    padding: 4px 12px;
  }
  
  .hero-slide-title {
    font-size: 28px;
    margin-bottom: 16px;
  }
  
  .hero-slide-description {
    font-size: 15px;
    margin-bottom: 20px;
  }
  
  .hero-slide-features {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 24px;
    justify-items: center;
  }
  
  .hero-slide-features li {
    font-size: 14px;
  }
  
  .btn-hero {
    padding: 12px 24px;
    font-size: 15px;
  }
  
  /* Navigation Controls - Touch Optimized */
  .hero-nav {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  .hero-nav-prev {
    left: 10px;
  }
  
  .hero-nav-next {
    right: 10px;
  }
  
  /* Pagination */
  .hero-pagination {
    bottom: 15px;
    gap: 8px;
  }
  
  .hero-pagination-dot {
    width: 10px;
    height: 10px;
  }
  
  .hero-pagination-dot.active {
    width: 24px;
  }
}

/* Small Mobile (below 480px) */
@media (max-width: 479px) {
  .hero-slider {
    min-height: 300px;
  }
  
  .hero-slide-content {
    padding: 26px 0;
  }
  
  .hero-slide-title {
    font-size: 24px;
  }
  
  .hero-slide-description {
    font-size: 14px;
  }
  
  .hero-slide-visual {
    max-width: 250px;
  }
  
  /* Maintain minimum 44x44px touch target size */
  .hero-nav {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  
  .hero-nav-prev {
    left: 5px;
  }
  
  .hero-nav-next {
    right: 5px;
  }
}

/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-slider {
    min-height: 300px;
  }
  
  .hero-slide-content {
    flex-direction: row;
    padding: 30px 0;
    text-align: left;
  }
  
  .hero-slide-visual {
    order: 0;
    max-width: 250px;
  }
  
  .hero-slide-features {
    grid-template-columns: repeat(2, 1fr);
    justify-items: start;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-slide-background img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Print Styles */
@media print {
  .hero-slider {
    min-height: auto;
    background: none;
  }
  
  .hero-slide {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    page-break-inside: avoid;
  }
  
  .hero-slide:not(:first-child) {
    display: none;
  }
  
  .hero-nav,
  .hero-pagination {
    display: none;
  }
  
  .btn-hero {
    border: 2px solid #1e3a8a;
    color: #1e3a8a;
  }
}