/* ============================================================
   RESPONSIVE STYLES — responsive.css
   Portfolio: Pratap Patra | 2026
   Breakpoints: 1440+ | 1200 | 1024 | 768 | 640 | 480 | 375
   ============================================================ */

/* ── Extra Large: 1440px+ ── */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
  .hero__headline { font-size: 5rem; }
}

/* ── Large Desktop: ≤ 1200px ── */
@media (max-width: 1200px) {
  .skills__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--sp-8);
  }

  /* Brand takes full row */
  .footer__grid > .footer__brand {
    grid-column: 1 / -1;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Featured card can't span 2 in 2-col grid */
  .project-card--featured {
    grid-column: span 1;
  }

  .project-card--featured .project-card__image { height: 200px; }

  .achievements__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Medium: ≤ 1024px (Tablet Landscape + Small Desktop) ── */
@media (max-width: 1024px) {
  /* ── Nav: hide links, show hamburger ── */
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }

  /* ── Hero: single column ── */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  /* Hide profile image on smaller screens */
  .hero__image-wrap { display: none; }

  .hero__headline { font-size: clamp(2.4rem, 5.5vw, 3.6rem); }
  .hero__desc { max-width: 100%; }
  .hero__stats { gap: var(--sp-6); }

  /* ── About grid: stack ── */
  .home-about__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .home-about__card-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Blog grid: 3 cols → 2 cols ── */
  .home-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Achievements: 3 → 2 cols ── */
  .achievements__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Blog page layout: drop sidebar ── */
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  /* Newsletter full width */
  .newsletter-card {
    grid-column: 1 / -1;
  }

  /* ── Featured post: stack ── */
  .featured-post {
    grid-template-columns: 1fr;
  }

  .featured-post__image {
    height: 220px;
    min-height: unset;
  }

  /* ── About page: stack sections ── */
  .about-section__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .about-section__grid--reverse .about-section__content { order: unset; }
  .about-section__grid--reverse .about-section__visual  { order: unset; }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet Portrait: ≤ 768px ── */
@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  .section { padding: var(--sp-16) 0; }

  .container { padding: 0 var(--sp-5); }

  .section-header { margin-bottom: var(--sp-10); }

  /* ── Hero ── */
  .hero {
    min-height: auto;
    padding: calc(var(--nav-h) + var(--sp-10)) 0 var(--sp-12);
  }

  .hero__stats {
    gap: var(--sp-5);
    flex-wrap: wrap;
  }

  .hero__cta { gap: var(--sp-3); }

  /* ── Skills: 2 → 1 col ── */
  .skills__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  /* ── Timeline ── */
  .timeline { max-width: 100%; }

  /* ── Achievements: 2 → 1 ── */
  .achievements__grid { grid-template-columns: 1fr; }

  /* ── Home blog: 2 → 1 ── */
  .home-blog__grid { grid-template-columns: 1fr; }

  /* ── Projects: 2 cols ── */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  /* ── Blog grid: 2 → 1 ── */
  .blog-grid { grid-template-columns: 1fr; }

  /* ── Blog sidebar: 1 col ── */
  .blog-sidebar { grid-template-columns: 1fr; }

  /* ── Footer: 2 col ── */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .footer__grid > .footer__brand { grid-column: 1 / -1; }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }

  /* ── CTA Cards ── */
  .home-cta__card  { padding: var(--sp-12) var(--sp-5); }
  .about-cta__card { padding: var(--sp-12) var(--sp-5); }

  /* ── Values ── */
  .values-grid { grid-template-columns: 1fr; }

  /* ── Learning grid ── */
  .learning-grid { grid-template-columns: 1fr; }

  /* ── Info cards ── */
  .home-about__card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Navbar ── */
  .navbar__inner { padding: 0 var(--sp-5); }

  /* ── About hero badges ── */
  .about-hero__badges { gap: var(--sp-2); }
}

/* ── Mobile: ≤ 640px ── */
@media (max-width: 640px) {
  .hero__eyebrow { font-size: 0.7rem; }

  .hero__typed-wrap { font-size: 1.15rem; }

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

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

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

  .blog-categories { gap: var(--sp-1); }
  .projects-filter { gap: var(--sp-1); }

  .filter-btn { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
  .cat-pill   { padding: 0.3rem 0.7rem;  font-size: 0.76rem; }

  .projects-stats { gap: var(--sp-6); flex-wrap: wrap; }

  /* Featured blog post: full stack on mobile */
  .featured-post { grid-template-columns: 1fr; }

  .about-section__title { font-size: 1.4rem; }

  .scroll-top {
    bottom: var(--sp-4);
    right: var(--sp-4);
    width: 40px;
    height: 40px;
  }
}

/* ── Small Mobile: ≤ 480px ── */
@media (max-width: 480px) {
  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__cta .btn { width: 100%; justify-content: center; }

  .home-cta__buttons,
  .about-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  .home-cta__buttons .btn,
  .about-cta__buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .home-about__card-grid { grid-template-columns: 1fr; }

  .hero__stat-value { font-size: 1.5rem; }

  .hero__stats { gap: var(--sp-4); }

  .section-title { font-size: 1.65rem; }

  .about-hero__title { font-size: 2rem; }

  .hobbies-wrap { gap: var(--sp-2); }
}

/* ── Tiny Mobile: ≤ 375px ── */
@media (max-width: 375px) {
  .container { padding: 0 var(--sp-4); }

  .navbar__inner { padding: 0 var(--sp-4); }

  .btn--lg { padding: 0.72rem 1.2rem; font-size: 0.88rem; }

  .hero__headline { font-size: 2.1rem; }
}