/* ========================================================= */
/* 📱 MOBILE RESPONSIVE STYLESHEET - LORE-RC                */
/* ========================================================= */
/* ✅ This file contains mobile-specific overrides to prevent overlaps and ensure proper alignment */

/* ========================================================= */
/* 📱 TABLET & SMALL DESKTOP (max-width: 768px)            */
/* ========================================================= */

@media (max-width: 768px) {
  /* ✅ FIXED: Body padding to account for fixed navbar */
  body {
    padding-top: calc(var(--nav-height) + 1.5rem);
  }

  /* ✅ FIXED: Navbar padding adjustments for mobile */
  .nav-custom {
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
  }

  /* ✅ FIXED: Navbar container - stack items vertically on very small screens */
  .nav-custom .container-fluid {
    flex-direction: column;
    align-items: center; /* Center items */
    gap: 10px; /* Space between stacked items */
    padding: 0 15px; /* Side padding */
  }

  /* ✅ FIXED: Hero container - single column layout */
  /* ✅ CENTERED: Maintain vertical centering on mobile, accounting for navbar */
  .hero-container {
    position: fixed; /* Maintain fixed positioning */
    top: calc(50vh + 40px); /* Center vertically + account for smaller navbar on mobile */
    left: 50%; /* Keep centered horizontally */
    transform: translate(-50%, -50%); /* Perfect centering */
    width: 100%;
    max-width: 600px;
    padding: 0 15px; /* Side padding only */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* ✅ FIXED: Hero card ordering - maintain absolute positioning for centering */
  .hero-card {
    position: absolute; /* Keep absolute for perfect centering */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%) scale(0.8); /* Center and scale */
    width: 100%;
  }

  /* ✅ FIXED: Active card stays centered */
  .hero-card.active {
    transform: translate(-50%, -50%) scale(1); /* Keep centered when active */
  }

  /* ✅ FIXED: Glass card responsive sizing */
  .glass-card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 25px 20px; /* Reduced padding for mobile */
  }

  /* ✅ FIXED: Text alignment for cards on mobile */
  .feature-card,
  .info-card,
  .future-card,
  .dashboard-card {
    text-align: left;
  }
  
  /* ✅ FIXED: Dashboard navbar adjustments */
  .navbar.glass-nav .container-fluid {
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: space-between;
  }
  
  /* ✅ FIXED: Hide center menu on mobile if needed */
  .nav-center {
    order: 3; /* Move to bottom if visible */
    width: 100%;
    margin-top: 10px;
  }
  
  /* ✅ FIXED: Account icon alignment */
  .nav-right {
    order: 2; /* Keep account icon visible */
  }
}

/* ========================================================= */
/* 📱 SMALL MOBILE DEVICES (max-width: 480px)               */
/* ========================================================= */

@media (max-width: 480px) {
  /* ✅ FIXED: Smaller logo on very small screens */
  .logo-img {
    height: 48px;
  }
  
  /* ✅ FIXED: Logo icon in dashboard */
  .logo-icon {
    width: 35px;
    height: 35px;
  }

  /* ✅ FIXED: Glass card minimal padding */
  .glass-card {
    border-radius: 20px;
    padding: 1.1rem;
    max-width: 95%; /* Slightly smaller on very small screens */
  }

  /* ✅ FIXED: Full width buttons on mobile */
  .btn-warning,
  .btn-soft {
    width: 100%;
    text-align: center;
  }

  /* ✅ FIXED: Code preview adjustments */
  .code-preview code {
    font-size: 1.4rem;
    letter-spacing: 0.2rem;
  }
  
  /* ✅ FIXED: Navbar further adjustments */
  .nav-custom {
    padding: 8px 10px;
  }
  
  /* ✅ FIXED: Brand text smaller */
  .brand-text {
    font-size: 1rem;
  }
  
  /* ✅ FIXED: Account icon smaller */
  .account-img {
    width: 32px;
    height: 32px;
  }
  
  /* ✅ FIXED: Hero container padding - maintain centering */
  .hero-container {
    position: fixed; /* Maintain fixed positioning */
    top: calc(50vh + 35px); /* Center vertically + account for navbar on small screens */
    left: 50%; /* Keep centered horizontally */
    transform: translate(-50%, -50%); /* Perfect centering */
    padding: 0 10px; /* Side padding only */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* ✅ FIXED: Ensure cards stay centered on extra small screens */
  .hero-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
  }
  
  .hero-card.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  /* ✅ FIXED: Section spacing */
  .featured-section,
  .previous-videos {
    padding: 0 10px;
    margin-top: 20px;
  }
  
  /* ✅ FIXED: Carousel images smaller */
  .carousel-item img {
    height: 180px;
  }
  
  /* ✅ FIXED: Video cards full width */
  .previous-videos .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: 15px;
  }
}

/* ========================================================= */
/* 📱 EXTRA SMALL DEVICES (max-width: 360px)                */
/* ========================================================= */

@media (max-width: 360px) {
  /* ✅ FIXED: Even smaller logo */
  .logo-img {
    height: 40px;
  }
  
  /* ✅ FIXED: Minimal glass card padding */
  .glass-card {
    padding: 0.9rem;
  }
  
  /* ✅ FIXED: Smaller fonts */
  .share-tech-regular {
    font-size: 1.8rem;
  }
  
  .hero-desc {
    font-size: 0.95rem;
  }
  
  /* ✅ FIXED: Navbar minimal padding */
  .nav-custom {
    padding: 6px 8px;
  }
}