/* ==========================================================================
   RESPONSIVE.CSS - Breakpoints & Mobile Adaptability Layouts
   ========================================================================== */

/* 1. LARGE TABLETS & SMALL LAPTOPS (Max 1024px) */
@media screen and (max-width: 1024px) {
  :root {
    font-size: 15px; /* Slight scaling down of all REM values */
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .blog-listing-grid, .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* 2. PORTRAIT TABLETS (Max 768px) */
@media screen and (max-width: 768px) {
  /* Toggle off desktop elements */
  .d-none-mobile {
    display: none !important;
  }

  /* Structural paddings */
  section {
    padding: 70px 15px;
  }

  /* Header adjustments */
  .navbar {
    padding: 15px 0;
  }

  /* Hamburger Toggle Display */
  .nav-toggle {
    display: flex;
  }

  /* Mobile Drawer Menu Navigation Mechanics */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--border-glass);
    padding: 100px 30px 40px;
    transition: right var(--transition-medium);
    z-index: 99;
  }

  .nav-menu.open {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    gap: 25px;
  }

  .nav-link {
    font-size: 1.15rem;
  }

  /* Hamburger transition animations */
  .nav-toggle.open .bar-1 {
    transform: rotate(45deg) translate(5px, 6px);
  }

  .nav-toggle.open .bar-2 {
    opacity: 0;
  }

  .nav-toggle.open .bar-3 {
    transform: rotate(-45deg) translate(5px, -7px);
  }

  /* Hero Section */
  .hero-title {
    font-size: 2.6rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 15px;
    max-width: 300px;
    margin: 0 auto;
  }

  /* About Section Grid collapse */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-visual {
    order: -1; /* Display profile picture above text */
  }

  .about-image-wrapper::before {
    display: none; /* Simplify on mobile */
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  /* Services collapse */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Contact layout collapse */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Slider Heights */
  .testimonials-carousel {
    height: 400px; /* Expand vertical card space for wrap texts */
  }
}

/* 3. MOBILE SCREEN (Max 480px) */
@media screen and (max-width: 480px) {
  :root {
    font-size: 14px;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .blog-listing-grid, .blog-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .single-post-card {
    padding: 25px 15px;
  }

  .post-detail-title {
    font-size: 1.85rem;
  }

  .testimonials-carousel {
    height: 480px; /* Allow more text wrapping on extremely small width screens */
  }

  /* Back-to-top position adjust for WhatsApp spacing */
  .back-to-top-btn {
    bottom: 20px;
    right: 90px;
  }
}