/* ================================================================
   AURELIA — responsive-enhancements.css
   Comprehensive responsive design improvements
   Load LAST for highest priority
   ================================================================ */

/* ── TABLET IMPROVEMENTS (769px - 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Improve spacing */
  .hero, .services, .projects, .about, .reviews, .contact {
    padding: 80px 40px !important;
  }

  .section-h2 {
    font-size: clamp(36px, 4.5vw, 56px) !important;
  }

  .hero-h1 {
    font-size: clamp(48px, 6vw, 88px) !important;
  }

  /* Services grid 2 columns on tablet */
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }

  /* Projects grid adjustments */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .project-card.wide {
    grid-column: span 2 !important;
  }

  /* Team grid 2 columns */
  .team-grid, .members-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
}

/* ── MOBILE IMPROVEMENTS (max 768px) ── */
@media (max-width: 768px) {
  /* Base improvements */
  html, body {
    font-size: 14px !important;
  }

  /* Better padding on mobile */
  section, .hero, .stats, .services, .projects, .about, 
  .reviews, .contact, .team-hero, .team-section, .team-cta {
    padding: 50px 20px !important;
  }

  /* Better spacing for small screens */
  .hero-left, .hero-right {
    margin-top: 40px !important;
  }

  .hero-right {
    transform: scale(0.8);
    display: flex !important; 
    margin-top: 20px !important;
  }

  /* Hero text sizing */
  .hero-h1 {
    font-size: clamp(32px, 8vw, 52px) !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
  }

  .hero-desc {
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 32px !important;
  }

  .hero-tag {
    font-size: 11px !important;
    margin-bottom: 16px !important;
  }

  /* Section headings mobile */
  .section-h2 {
    font-size: clamp(28px, 6vw, 42px) !important;
    line-height: 1.3 !important;
  }

  .section-tag {
    font-size: 11px !important;
  }

  /* Services single column */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .service-card {
    padding: 32px 20px !important;
  }

  .service-title {
    font-size: 18px !important;
  }

  .service-desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* Projects single column */
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .project-card.wide {
    grid-column: span 1 !important;
  }

  .project-info {
    padding: 20px !important;
  }

  .project-title {
    font-size: 18px !important;
  }

  .project-desc {
    font-size: 14px !important;
  }

  /* Contact form */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px !important;
    font-size: 14px !important;
  }

  .form-group label {
    font-size: 12px !important;
  }

  /* Team grid single column */
  .team-grid, .members-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .team-member-card {
    padding: 20px !important;
  }

  .member-name {
    font-size: 18px !important;
  }

  .member-title {
    font-size: 13px !important;
  }

  /* Reviews cards */
  .review-card {
    padding: 24px !important;
  }

  .review-text {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* Stats spacing */
  .stats {
    gap: 20px !important;
  }

  .stat-num {
    font-size: 28px !important;
  }

  .stat-label {
    font-size: 11px !important;
  }

  /* Navbar improvements for mobile */
  #navbar {
    padding: 12px 20px !important;
  }



  .logo-text {
    gap: 2px !important;
  }

  .brand {
    font-size: 12px !important;
  }

  .sub {
    font-size: 8px !important;
  }

  /* Hide desktop nav on mobile */
  .nav-links {
    display: none !important;
  }

  /* Mobile nav drawer improvements */
  .mobile-nav-drawer {
    width: 75vw !important;
    padding: 80px 24px 40px !important;
  }

  .mobile-nav-links a {
    padding: 14px 0 !important;
    font-size: 14px !important;
  }

  .mobile-nav-cta {
    margin-bottom: 24px !important;
  }

  .mobile-nav-socials {
    gap: 12px !important;
  }

  /* Footer on mobile */
  footer {
    padding: 40px 20px !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .footer-links {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  /* About section mobile */
  .about-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .about-values {
    grid-template-columns: 1fr !important;
  }

  .about-value {
    padding: 20px !important;
  }

  .about-value h4 {
    font-size: 16px !important;
  }

  .about-value p {
    font-size: 14px !important;
  }

  /* Contact section mobile */
  .contact-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .contact-info h3 {
    font-size: 20px !important;
  }

  .contact-info p {
    font-size: 14px !important;
  }

  /* CTA strip mobile */
  .cta-strip {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .cta-left {
    text-align: center !important;
  }

  .cta-left h2 {
    font-size: clamp(24px, 5vw, 36px) !important;
  }

  /* Buttons responsive */
  .btn-primary, .btn-outline, .btn-submit {
    padding: 12px 24px !important;
    font-size: 12px !important;
  }

  .btn-primary span, .btn-outline span {
    font-size: 12px !important;
  }

  /* Better readability */
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
  }

  p, li, label, span {
    word-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Better touch targets */
  button, a, input, select, textarea {
    min-height: 44px !important; /* iOS touch target */
  }



  /* Improve form accessibility */
  input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--red) !important;
    outline-offset: 2px !important;
  }

  /* Better card spacing */
  .service-card, .project-card, .team-member-card, .review-card {
    margin-bottom: 8px !important;
  }

  /* Table responsive */
  table {
    font-size: 12px !important;
  }

  /* Floating buttons position */
  .floating-btns {
    gap: 12px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  .scroll-top-btn, .whatsapp-btn {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── SMALL MOBILE (max 480px) ── */
@media (max-width: 480px) {
  section, .hero, .stats, .services, .projects, .about,
  .reviews, .contact, .team-hero, .team-section, .team-cta {
    padding: 36px 16px !important;
  }

  .hero-h1 {
    font-size: clamp(24px, 7vw, 40px) !important;
  }

  .section-h2 {
    font-size: clamp(22px, 5.5vw, 36px) !important;
  }

  .mobile-nav-drawer {
    width: 75vw !important;
  }

  /* Better text sizing for very small screens */
  p, .review-text, .service-desc, .project-desc {
    font-size: 14px !important;
  }

  /* Reduce padding in forms */
  .form-group {
    margin-bottom: 16px !important;
  }

  /* Hero hero-ctas better spacing */
  .hero-ctas {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .btn-primary, .btn-outline {
    width: 100% !important;
  }

  /* Better navbar on very small screens */
  #navbar {
    padding: 10px 12px !important;
  }

  .logo {
    width: 40px !important;
  }

  .brand {
    font-size: 10px !important;
  }

  .sub {
    font-size: 6px !important;
  }

  /* Filter buttons mobile */
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .filter-btn {
    padding: 8px 16px !important;
    font-size: 11px !important;
  }

  /* Stat display improvement */
  .stat-num {
    font-size: 24px !important;
  }

  /* Hero stats responsive */
  .hero-stats {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .hero-stat-line {
    display: none !important;
  }

  /* Contact form very small screen */
  .contact-form {
    padding: 20px !important;
  }
}

/* ── PRINT STYLES ── */
@media print {
  nav, .floating-btns, .theme-toggle {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  a {
    color: #0066cc !important;
  }
}

/* ── ACCESSIBILITY IMPROVEMENTS ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── DARK MODE SUPPORT ── */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg) !important;
    color: var(--text-1) !important;
  }
}

/* ── HIGH CONTRAST MODE ── */
@media (prefers-contrast: more) {
  :root {
    --red: #c8102e !important;
    --text-1: #000000 !important;
    --text-2: #333333 !important;
  }

  body.theme-light {
    --text-1: #000000 !important;
  }
}