/*
 * SEOMasterz — Responsive / Media Queries
 * File: css/responsive.css
 * Author: Mehmood Gujjar
 */

/* ============================================================
   LARGE DESKTOP → 1200px
   ============================================================ */
@media (max-width: 1200px) {
  .footer-grid     { grid-template-columns: 1fr 1fr; }
  .process-grid    { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .portfolio-grid  { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   TABLET → 992px
   ============================================================ */
@media (max-width: 992px) {
  :root { --header-height: 70px; }

  /* Hero */
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-visual     { display: none; }
  .hero-actions    { justify-content: center; }
  .hero-stats      { justify-content: center; }

  /* Features */
  .features-grid   { grid-template-columns: 1fr; }

  /* Content + Sidebar */
  .content-area    { grid-template-columns: 1fr; }

  /* Navigation */
  .nav-menu { display: none; }
  .menu-toggle { display: flex; }
  .nav-menu.mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
    z-index: 999;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    gap: 0;
  }
  .nav-menu.mobile-open > li > a {
    padding: .875rem var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
    border-radius: 0;
    font-size: var(--text-base);
    display: block;
  }
  .nav-menu.mobile-open .sub-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: none;
    padding-left: var(--space-lg);
    border-left: 3px solid var(--color-secondary);
    margin: .5rem 0;
    display: none;
  }
  .nav-menu.mobile-open .dropdown-open .sub-menu { display: block; }
  .header-cta { display: none; }
}

/* ============================================================
   SMALL TABLET → 768px
   ============================================================ */
@media (max-width: 768px) {
  .container { padding-inline: var(--space-lg); }
  .section   { padding-block: var(--space-3xl); }
  .section--sm { padding-block: var(--space-2xl); }

  .services-grid    { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .posts-grid       { grid-template-columns: 1fr; }
  .packages-grid    { grid-template-columns: 1fr; }
  .footer-grid      { grid-template-columns: 1fr; }
  .portfolio-grid   { grid-template-columns: 1fr; }
  .team-grid        { grid-template-columns: repeat(2, 1fr); }

  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; }

  .page-hero { padding: var(--space-3xl) 0 var(--space-2xl); }

  h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
}

/* ============================================================
   MOBILE → 480px
   ============================================================ */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-md); }

  .hero-stats    { flex-direction: column; gap: var(--space-lg); }
  .hero-actions  { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .process-grid  { grid-template-columns: 1fr; }
  .cta-actions   { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 280px; justify-content: center; }

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

  .footer-social { flex-wrap: wrap; }

  .btn--lg { padding: 1rem 1.75rem; font-size: var(--text-base); }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header, .site-footer, .back-to-top,
  .menu-toggle, .breadcrumb-section, .top-bar { display: none !important; }
  body { font-size: 11pt; color: #000; background: white; }
  a { color: #000; text-decoration: underline; }
  h1, h2, h3 { page-break-after: avoid; color: #000; }
  .container { max-width: 100%; padding: 0; }
}