/* ============================================
   COMPREHENSIVE MOBILE & TABLET RESPONSIVE
   ============================================
   
   Breakpoints:
   - Mobile: up to 768px
   - Small Mobile: up to 480px
   - Tablet: 769px - 1024px
   - Large Tablet: 1025px - 1280px
*/

/* Ensure viewport is set correctly */
@supports not (width: 100dvw) {
  html {
    width: 100vw;
    overflow-x: hidden;
  }
}

/* Prevent horizontal scroll on all devices */
* {
  box-sizing: border-box;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Base Mobile Styles (up to 768px) */
@media (max-width: 768px) {
  /* Container & Layout */
  .container {
    padding: 0 0.5rem !important;
    max-width: 100% !important;
  }
  
  .section {
    padding: 1rem 0 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Typography */
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }
  
  h2 {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }
  
  h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
  
  p, .lead {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  /* Header Mobile Optimization */
  .header-main {
    padding: 0.5rem 0 !important;
  }
  
  .header-brand {
    gap: 0.5rem !important;
  }
  
  .header-brand .logo {
    width: 40px !important;
    height: 40px !important;
  }
  
  .brand-title {
    font-size: 1.2rem !important;
  }
  
  .brand-subtitle {
    display: none !important; /* Hide subtitle on mobile */
  }
  
  .header-actions {
    gap: 0.4rem !important;
  }
  
  .btn-premium {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.75rem !important;
  }
  
  .header-icons {
    gap: 0.4rem !important;
  }
  
  .icon-link {
    min-width: 2rem !important;
  }
  
  .icon-link span {
    display: none !important; /* Hide text labels on mobile */
  }
  
  .header-lang {
    gap: 0.1rem !important;
  }
  
  .header-lang .lang-link {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.3rem !important;
    min-width: 1.4rem !important;
  }
  
  /* Hero Sections */
  .hero, .hero-compact, .hero-section {
    padding: 1.5rem 0 !important;
    text-align: center;
  }
  
  .hero-content, .hero-compact-content {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }
  
  .hero h1, .hero-compact h1 {
    font-size: 1.5rem !important;
    text-align: center !important;
  }
  
  .hero .lead, .hero-compact p {
    font-size: 0.9rem !important;
    text-align: center !important;
  }
  
  /* Grids - Single Column on Mobile */
  .templates-grid,
  .news-grid,
  .blog-grid,
  .tools-grid,
  .courses-grid,
  .featured-blog-grid,
  .featured-news-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Cards */
  .card, .template-card, .news-card, .blog-card, .tool-card, .course-card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 12px !important;
  }
  
  .card-title, .template-title, .news-title, .blog-title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .card-desc, .template-desc, .news-desc, .blog-desc {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
  
  /* Buttons - Touch Friendly */
  .btn, button {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
    min-height: 44px !important; /* iOS touch target */
    min-width: 44px !important;
    border-radius: 8px !important;
  }
  
  .btn-primary, .btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.5rem;
  }
  
  .btn-group {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  /* Forms */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  textarea,
  select {
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important; /* Prevents zoom on iOS */
    min-height: 44px !important;
    border-radius: 8px !important;
  }
  
  .search-input {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Modals */
  .modal {
    padding: 0.5rem !important;
  }
  
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    margin: 0.5rem auto !important;
    padding: 1rem !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  .modal-header {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .modal-header h2, .modal-header h3 {
    font-size: 1.2rem !important;
  }
  
  .modal-body {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }
  
  .modal-footer {
    padding: 0.75rem !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .modal-footer .btn {
    width: 100% !important;
  }
  
  /* Contact Items */
  .contacts {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .contact-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
    margin-bottom: 0 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
  }
  
  .contact-item a {
    font-size: 0.95rem !important;
    word-break: break-word !important;
    color: var(--brand1) !important;
  }
  
  .contact-item .small {
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
    color: var(--muted) !important;
  }
  
  .contact-item span:first-child {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  /* Navigation */
  .main-nav {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 1rem 0 !important;
  }
  
  .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  /* Footer */
  .footer {
    padding: 2rem 1rem !important;
  }
  
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .footer-section {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }
  
  .footer-section h3 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .footer-section ul {
    list-style: none !important;
    padding: 0 !important;
  }
  
  .footer-section li {
    margin-bottom: 0.5rem !important;
  }
  
  .footer-section a {
    font-size: 0.85rem !important;
  }
  
  /* Tables */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Utilities */
  .text-center-mobile {
    text-align: center !important;
  }
  
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
  .container {
    padding: 0 0.75rem !important;
  }
  
  h1 {
    font-size: 1.3rem !important;
  }
  
  h2 {
    font-size: 1.1rem !important;
  }
  
  .hero, .hero-compact {
    padding: 1rem 0 !important;
  }
  
  .card, .template-card, .news-card {
    padding: 0.75rem !important;
  }
  
  .btn {
    padding: 0.65rem 1.25rem !important;
    font-size: 0.85rem !important;
  }
  
  .modal-content {
    width: 98% !important;
    padding: 0.75rem !important;
  }
}

/* Tablet Styles (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 0 2rem !important;
    max-width: 100% !important;
  }
  
  /* Typography */
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.6rem !important;
  }
  
  /* Grids - 2 Columns on Tablet */
  .templates-grid,
  .news-grid,
  .blog-grid,
  .tools-grid,
  .courses-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  .featured-blog-grid,
  .featured-news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Cards */
  .card, .template-card, .news-card, .blog-card {
    padding: 1.25rem !important;
  }
  
  /* Buttons */
  .btn {
    padding: 0.8rem 1.6rem !important;
    font-size: 0.95rem !important;
  }
  
  .btn-group {
    flex-direction: row !important;
    gap: 0.75rem !important;
  }
  
  /* Modals */
  .modal-content {
    width: 85% !important;
    max-width: 700px !important;
    padding: 1.5rem !important;
  }
  
  /* Contact Items */
  .contact-item {
    flex-direction: row !important;
    align-items: center !important;
  }
  
  /* Navigation */
  .main-nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
  }
  
  .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    width: auto !important;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
}

/* Large Tablet / Small Desktop (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
  .templates-grid,
  .news-grid,
  .blog-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .tools-grid,
  .courses-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  a, button, .btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Remove hover effects on touch devices */
  .card:hover,
  .template-card:hover,
  .news-card:hover {
    transform: none !important;
  }
  
  /* Better tap feedback */
  a:active, button:active, .btn:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero, .hero-compact {
    padding: 1rem 0 !important;
  }
  
  .modal-content {
    max-height: 85vh !important;
  }
  
  .header-main {
    padding: 0.5rem 0 !important;
  }
}

/* Print Styles */
@media print {
  .header,
  .footer,
  .btn,
  .modal,
  .header-actions,
  .header-community {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }
}