/*
 * CHINTAN RAVILAL THACKER - Official Website
 * Responsive Stylesheet (css/responsive.css)
 * Media queries for premium, mobile-first design adaptability
 */

/* Desktop / Large Screens (1200px and up) */
@media (min-width: 1200px) {
  .section-container {
    padding: 0 20px;
  }
}

/* Tablets and below (992px and down) */
@media (max-width: 992px) {
  html {
    font-size: 15px;
  }

  .about-preview-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-preview-img-container {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .footer-brand {
    grid-column: span 2;
  }

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

/* Mobile Devices (768px and down) */
@media (max-width: 768px) {
  /* Navigation */
  .menu-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 79px; /* Adjusted height according to header */
    left: -100%;
    width: 100%;
    height: calc(100vh - 79px);
    background-color: var(--white);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px;
    gap: 30px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    z-index: 999;
  }

  .nav-menu.active {
    left: 0;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Timeline adaptation */
  .timeline::after {
    left: 31px;
  }

  .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .timeline-container::after {
    left: 21px;
  }

  .right {
    left: 0%;
  }

  /* Gallery adjustment */
  .gallery-grid {
    grid-auto-rows: 200px;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

  .gallery-item.wide {
    grid-column: span 1;
  }

  .lightbox-prev, .lightbox-next {
    display: none !important; /* Hide arrows on small screens, use swipe or simple lightbox close */
  }

  /* Form layouts */
  .form-group-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

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

  .footer-brand {
    grid-column: span 1;
  }

  /* Hero adaptation */
  .hero-title {
    font-size: 2.2rem;
  }

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

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

  .hero-btns .btn {
    width: 100%;
  }
}

/* Extra Small Mobile (480px and down) */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  section {
    padding: 60px 15px;
  }

  .subpage-banner {
    padding: 120px 15px 50px 15px;
  }

  .subpage-title {
    font-size: 2rem;
  }

  .about-experience-badge {
    position: static;
    margin: 20px auto 0 auto;
    max-width: 100%;
  }

  .highlight-number {
    font-size: 2.5rem;
  }
}