/*
 * SharkMovie - Responsive Styles & Media Queries
 */

/* Tablet & Smaller Desktop (max-width: 1024px) */
@media (max-width: 1024px) {
  .sm-hero-title {
    font-size: 2.8rem;
  }
  
  .sm-hero-content {
    padding: 35px;
    max-width: 100%;
  }

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

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

  .sm-filter-form {
    grid-template-columns: repeat(3, 1fr);
  }

  .sm-home-bottom-grid {
    padding: 20px;
    gap: 25px;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  .sm-header-inner {
    height: 60px;
  }

  .sm-primary-nav {
    display: none; /* Se oculta por defecto en móvil para menú hamburguesa */
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: var(--sm-surface);
    border-bottom: 1px solid var(--sm-border);
    padding: 20px;
    box-shadow: var(--sm-shadow-md);
  }

  .sm-primary-nav.active {
    display: block;
  }

  .sm-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sm-nav-link {
    width: 100%;
    padding: 10px 14px;
  }

  .sm-mobile-toggle {
    display: block;
  }

  .sm-hero-slider {
    min-height: 360px;
  }

  .sm-hero-title {
    font-size: 2.2rem;
  }

  .sm-hero-content {
    padding: 25px 20px;
  }

  .sm-hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .sm-hero-buttons .sm-btn {
    width: 100%;
  }

  .sm-filter-form {
    grid-template-columns: 1fr;
  }

  .sm-latest-grid {
    grid-template-columns: 1fr;
  }

  .sm-card-body-wrapper {
    padding: 12px;
    gap: 12px;
  }

  .sm-card-poster-thumb {
    width: 90px;
    min-width: 90px;
    height: 135px;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .sm-hero-title {
    font-size: 1.8rem;
  }
  
  .sm-live-search-dropdown {
    width: calc(100vw - 40px);
    right: -10px;
  }
}