/* Mobile & Tablet Responsive Styles */

/* Tablet styles */
@media (max-width: 1024px) {
  .content-wrapper {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .page-title {
    font-size: 2.5rem;
  }
  
  .highlights-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
  }
  
  .quick-access-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  .sidebar {
    width: 64px;
  }
  
  .main-content {
    margin-left: 64px;
  }
  
  .content-wrapper {
    padding: var(--spacing-md) var(--spacing-sm);
  }
  
  .hero-section {
    padding: var(--spacing-xl) 0;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1.125rem;
  }
  
  .highlights-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .highlight-card {
    padding: var(--spacing-lg);
  }
  
  .quick-access-grid {
    grid-template-columns: 1fr;
  }
  
  .creator-card {
    padding: var(--spacing-lg);
  }
  
  .creator-title {
    font-size: 1.5rem;
  }
  
  .creator-message {
    font-size: 1rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  /* Sidebar adjustments for mobile */
  .sidebar-logo {
    padding: var(--spacing-md) 0;
  }
  
  .logo-icon {
    font-size: 1.5rem;
  }
  
  .nav-item {
    height: 48px;
    margin: 0 var(--spacing-xs);
  }
  
  .nav-icon {
    font-size: 1.125rem;
  }
  
  /* Tooltip adjustments for mobile */
  .nav-item::after {
    font-size: 0.75rem;
    padding: 6px var(--spacing-sm);
  }
}

/* Very small mobile devices */
@media (max-width: 480px) {
  .sidebar {
    width: 56px;
  }
  
  .main-content {
    margin-left: 56px;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .page-title {
    font-size: 1.75rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .highlight-card {
    padding: var(--spacing-md);
  }
  
  .card-icon {
    font-size: 2rem;
  }
  
  .access-card {
    padding: var(--spacing-lg);
  }
  
  .creator-card {
    padding: var(--spacing-md);
  }
  
  /* Even smaller sidebar for tiny screens */
  .sidebar-logo {
    padding: var(--spacing-sm) 0;
  }
  
  .logo-icon {
    font-size: 1.25rem;
  }
  
  .nav-item {
    height: 40px;
    margin: 0 2px;
  }
  
  .nav-icon {
    font-size: 1rem;
  }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    padding: var(--spacing-lg) 0;
  }
  
  .hero-title {
    font-size: 2.25rem;
  }
  
  .content-wrapper {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-icon {
    text-rendering: optimizeLegibility;
  }
  
  .nav-icon {
    text-rendering: optimizeLegibility;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .highlight-card::before {
    display: none;
  }
}