﻿/* ============================================================
   GIGGLE APP — responsive.css
   All media queries for responsive design
   ============================================================ */

/* 1440px+ */
@media (min-width:1441px) {
  .hero-mockup-img { max-width:380px; }
}

/* 1280px */
@media (max-width:1280px) {
  :root { --container-pad: 0 32px; }
  .hero-content { gap:60px; }
  .steps-connector { display:none; }
  .footer-grid { grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; }
}

/* 1024px - Tablet Landscape */
@media (max-width:1024px) {
  :root { --section-padding: 80px 0; }
  h1 { font-size: clamp(2.2rem,5vw,3.5rem); }
  h2 { font-size: clamp(1.8rem,4vw,2.5rem); }

  .hero-content { grid-template-columns:1fr; gap:60px; text-align:center; }
  .hero-text { max-width:100%; }
  .hero-btns { justify-content:center; }
  .hero-visual { order: 2; }
  .hero-mockup-img { max-width:280px; }
  .hero-card-1 { left:-10%; }
  .hero-card-2 { right:-10%; }

  .hamburger { display:flex; }
    /* Mobile Sidebar Nav */
  .nav-links {
    position: fixed; top: 0; right: -300px; width: 280px; height: 100vh;
    background: var(--bg-card); box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    flex-direction: column; align-items: flex-start; padding: 100px 30px 40px;
    transition: right 0.4s ease; z-index: 999; display: flex !important;
  }
  .nav-links.active { right: 0; }
  .nav-links a { width: 100%; padding: 15px 0; border-bottom: 1px solid var(--border-light); font-size: 1.1rem; }
  .hamburger { z-index: 1000; position: relative; }
  .nav-cta { display: none !important; }

  /* Experience Grid Mobile Fix */
  .experience-grid { display: flex; flex-direction: column; gap: 40px; }
  .experience-grid.reverse { direction: ltr; }
  .experience-visual { order: 1; width: 100%; }
  .experience-text { order: 2; text-align: center; }

  .about-snippet { grid-template-columns:1fr; gap:40px; }
  .about-snippet.reverse-mobile .about-snippet-img { order:-1; }
  .about-text { max-width:100%; }
  .about-stats { grid-template-columns:repeat(3,1fr); }

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

  .experience-grid { grid-template-columns:1fr; gap:40px; }
  .experience-grid.reverse { direction:ltr; }

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

  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-grid > div:first-child { grid-column:1/-1; }

  .hero-card-1,.hero-card-2 { display:none; }
}

/* 768px - Tablet */
@media (max-width:768px) {
  :root { --section-padding: 64px 0; --container-pad: 0 20px; }
  h1 { font-size: clamp(2rem,8vw,3rem); }
  h2 { font-size: clamp(1.6rem,5vw,2.2rem); }

  .section-header { margin-bottom:48px; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:1fr; }

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

  .about-stats { grid-template-columns:1fr 1fr; }

  .form-row { grid-template-columns:1fr; }

  .contact-form-wrap { padding:32px 24px; }

  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-grid > div:first-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-legal { justify-content:center; }

  .hero { padding:120px 20px 100px; }
  .page-hero { padding:140px 20px 60px; }

  .hero-btns { flex-direction:column; align-items:center; }
  .hero-btns .btn { width:100%; justify-content:center; max-width:280px; }

  .cta-btns { flex-direction:column; align-items:center; }
  .cta-btns .btn { width:100%; justify-content:center; max-width:280px; }

  .app-store-btns { flex-direction:column; align-items:center; }
}

/* 480px */
@media (max-width:480px) {
  :root { --section-padding: 56px 0; }
  h1 { font-size: clamp(1.9rem,9vw,2.5rem); }
  h2 { font-size: clamp(1.5rem,6vw,2rem); }
  p  { font-size:0.95rem; }

  .btn { padding:13px 26px; font-size:0.95rem; }
  .btn-lg { padding:15px 34px; font-size:1rem; }

  .steps-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .about-stats { grid-template-columns:1fr; gap:16px; }

  .hero-mockup-img { max-width:240px; }

  .contact-form-wrap { padding:24px 18px; }

  .feature-card { padding:28px 20px; }
  .service-card { padding:28px 20px; }
  .value-card { padding:32px 20px; }

  #back-to-top { bottom:24px; right:20px; width:46px; height:46px; }

  .mobile-menu a { font-size:1.3rem; }

  .footer-socials { gap:8px; }
  .footer-grid { gap:24px; }
}

/* 360px */
@media (max-width:360px) {
  :root { --container-pad: 0 16px; }
  h1 { font-size:1.8rem; }
  h2 { font-size:1.4rem; }

  .btn { padding:12px 22px; font-size:0.9rem; }
  .hero-btns .btn { max-width:100%; }
  .cta-btns .btn { max-width:100%; }

  .nav-logo-text { font-size:1.2rem; }
  .nav-logo-img { height:36px; width:36px; }
}

/* No horizontal overflow check */
html, body { max-width:100%; overflow-x:hidden; }
*  { min-width:0; }

