/* ============================================================
   responsive.css
   All breakpoints in one file, ordered large → small.
   Load AFTER styles.css.
   ============================================================ */


/* ============================================================
   1440px+ — wide / large desktop tweaks
   ============================================================ */
@media (min-width: 1440px) {
  :root { --section-pad: 140px; }
}


/* ============================================================
   ≤1024px — laptop / tablet landscape
   ============================================================ */
@media (max-width: 1024px) {
  /* Hero */
  .hero-content { grid-template-columns: 1fr; }
  .hero-stats   { flex-direction: row; flex-wrap: wrap; }
  .hero-stat    { min-width: 140px; }

  /* Homepage sections */
  .about-grid      { grid-template-columns: 1fr; gap: 48px; }
  .metrics-grid    { grid-template-columns: repeat(2,1fr); }
  .skills-layout   { grid-template-columns: 1fr; gap: 48px; }
  .expertise-inner { grid-template-columns: 1fr; }
  .contact-inner   { grid-template-columns: 1fr; gap: 48px; }
  .project-card.featured { grid-template-columns: 1fr; }

  /* Projects page */
  .projects-grid { grid-template-columns: repeat(2,1fr); }
  .stats-row     { grid-template-columns: repeat(2,1fr); }

  /* Blog */
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
  .cta-card,
  .recent-list-card { grid-column: 1 / -1; }

  /* Legal */
  .glance-grid { grid-template-columns: repeat(2,1fr); }
}


/* ============================================================
   ≤960px — tablet portrait / small laptop
   ============================================================ */
@media (max-width: 960px) {
  /* Article */
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .role-grid { grid-template-columns: 1fr; }

  /* Case study */
  .case-layout { grid-template-columns: 1fr; }
  .case-sidebar { position: static; }
  .psr-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   ≤900px — narrower tablet
   ============================================================ */
@media (max-width: 900px) {
  /* Legal */
  .legal-layout  { grid-template-columns: 1fr; }
  .legal-sidebar { position: static; }
  .rights-grid   { grid-template-columns: 1fr; }

  /* About */
  .philosophy-split { grid-template-columns: 1fr; gap: 48px; }
  .values-grid      { grid-template-columns: 1fr; }

  /* Contact page */
  .contact-layout { grid-template-columns: 1fr; }

  /* Resume */
  .resume-layout  { grid-template-columns: 1fr; }
  .resume-sidebar { position: static; }
  .achievements-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   ≤768px — mobile landscape / small tablet
   ============================================================ */
@media (max-width: 768px) {
  :root { --section-pad: 72px; }
body.menu-open { overflow: hidden; }
/* Add this to responsive.css under the 768px media query */
body.menu-open header {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Ensure the hamburger button stays on top of the menu */
body.menu-open .nav-toggle {
    z-index: 10001;
}
  /* Nav — hide desktop links, show hamburger */
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }
  nav         { padding: 18px 20px; }
  .container  { padding: 0 20px; }

  /* Mobile nav overlay */

/*  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--bg);
    align-items: center;
    justify-content: center;
    gap: 36px;
     z-index: 10000; 
  }*/


.nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--bg) !important; /* Ensure background is 100% opaque */
    align-items: center;
    justify-content: center;
    gap: 36px;
    z-index: 10000;
    height: 100vh; /* Force full viewport height */
    width: 100vw;
}

  .nav-links.open a { font-size: 22px; }

  /* Homepage grids */
  .projects-grid { grid-template-columns: 1fr; }
  .blog-grid     { grid-template-columns: 1fr; }
  .projects-header,
  .blog-header   { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Metrics */
  .metrics-grid { grid-template-columns: repeat(2,1fr); }

  /* Featured project */
  .fp-inner   { grid-template-columns: 1fr; }
  .fp-visual  { min-height: 200px; }

  /* Blog sidebar stacked */
  .blog-sidebar { display: flex; flex-direction: column; }

  /* Featured post */
  .featured-inner { grid-template-columns: 1fr; }
  .featured-thumb { min-height: 200px; }
  .posts-grid     { grid-template-columns: 1fr; }

  /* Hero cover */
  .hero-cover { height: 200px; }

  /* Article */
  .author-box { flex-direction: column; }
  .cta-btns   { flex-direction: column; align-items: center; }

  /* Case study */
  .quick-stats-inner { grid-template-columns: repeat(2,1fr); }
  .next-project      { flex-direction: column; align-items: flex-start; }
  .ts-group          { flex-direction: column; gap: 6px; }

  /* Resume */
  .resume-hero-inner   { grid-template-columns: 1fr; }
  .download-block      { align-items: flex-start; text-align: left; }
  .metrics-row         { grid-template-columns: repeat(3,1fr); }
  .exp-header          { flex-direction: column; gap: 10px; }
  .achievements-grid   { grid-template-columns: repeat(2,1fr); }
  .profile-top         { flex-direction: column; }

  /* Contact page */
  .contact-form-wrap { padding: 28px 20px; }
  .form-grid         { grid-template-columns: 1fr; }
  .form-group.full   { grid-column: 1; }

  /* About */
  .cta-strip { padding: 40px 24px; }

  /* Legal */
  .data-table          { font-size: 12px; }
  .data-table th,
  .data-table td       { padding: 10px 12px; }
  .glance-grid         { grid-template-columns: 1fr; }

   .query-table,.page-table{font-size:12px}

  /* Stats strip */
  .stats-row { grid-template-columns: repeat(2,1fr); }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   ≤480px — small mobile
   ============================================================ */
@media (max-width: 480px) {
  /* Hide hero stats on very small screens */
  .hero-stats { display: none; }

  .metrics-grid    { grid-template-columns: 1fr; }
  .filter-bar      { gap: 6px; }
  .filter-btn      { font-size: 11px; padding: 6px 12px; }

  /* Case study */
  .quick-stats-inner { grid-template-columns: 1fr; }

  /* Resume */
  .metrics-row       { grid-template-columns: repeat(2,1fr); }
  .achievements-grid { grid-template-columns: 1fr; }

  /* Projects */
  .stats-row { grid-template-columns: 1fr; }
}


/* ============================================================
   Print styles (resume page)
   ============================================================ */
@media print {
  header,
  footer,
  .resume-sidebar,
  .download-block { display: none; }

  .resume-layout { grid-template-columns: 1fr; }

  body { background: white; color: black; }

  .profile-card,
  .exp-item,
  .ach-card,
  .edu-item { background: white; border: 1px solid #ddd; }
}


/* 7. Responsive Mobile View */
@media (max-width: 500px) {
    .pagination-area {
        gap: 6px;
    }
    .pagination-area a, 
    .pagination-area span {
        min-width: 40px;
        height: 40px;
        font-size: 14px;
        padding: 0 8px;
        border-radius: 10px;
    }
}