/**
 * Responsive Styles
 * 
 * Media queries for mobile, tablet, and desktop.
 * Mobile-first approach.
 *
 * @package NileDevelopments
 * @version 1.0.0
 */

/* ============================================
   Tablet (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-form-box, .hero-form-wrap { max-width: 480px; margin: 0 auto; }
}

/* ============================================
   Small Tablet / Large Phone (max-width: 900px)
   ============================================ */
@media (max-width: 900px) {
  .project-card { grid-template-columns: 1fr; }
  .project-card:nth-child(even) { direction: rtl; }
  .card-img { min-height: 260px; }
  .card-body { padding: 28px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   Tablet Portrait (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .hero-stats { gap: 20px; }
  .hero-stat-val { font-size: 1.4rem; }
  #mob-bar { display: flex !important; }
  .float-wa { bottom: calc(90px + var(--safe-bottom)); }
  #toast { bottom: 110px; }
  .projects-sec { padding: 60px 0; }
  .features-sec { padding: 60px 0; }
  .contact-sec { padding: 60px 0; }
  .section-header { margin-bottom: 40px; }
  .project-pricing-cards { grid-template-columns: 1fr; }
}

/* ============================================
   Mobile (max-width: 600px)
   ============================================ */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .posts-grid { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Small Mobile (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .wa-btn span { display: none; }
  .lang-btn { padding: 6px 10px; font-size: .75rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .proj-nav-link { padding: 12px 14px; font-size: .78rem; }
  .trust-item { font-size: .78rem; }
  .card-body { padding: 20px 16px; }
  .card-actions { flex-direction: column; }
  .card-actions .btn { width: 100%; }
  .section-title { font-size: 1.5rem; }
  .popup-h2 { font-size: 1.2rem; }
  .popup-body { padding: 20px 16px; }
  .page-banner-title { font-size: 1.6rem; }
  .post-title { font-size: 1.6rem; }
  .project-hero-title { font-size: 1.8rem; }
  .project-hero-ctas { flex-direction: column; }
  .project-hero-ctas .btn { width: 100%; }
}