/* Cleaned: removed unused classes — see CHANGELOG */
/* ============================================================
   RESPONSIVE.CSS - Responsive Breakpoints
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .hero__grid--two-col { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .home-articles-grid { grid-template-columns: repeat(2, 1fr); }
  .home-sections {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .home-sections > :last-child {
    grid-column: 1 / -1;
  }
  .home-grid {
    grid-template-columns: 1fr 1fr;
  }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  .nav__links, .nav__socials { display: none; }
  .nav__hamburger { display: flex; }
  .nav__drawer { top: 60px; }
  body.has-preprod-banner .nav__drawer { top: 88px; }
  .hero { padding: 2rem 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__grid--two-col { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__center { grid-column: 1; }
  .hero__right { display: none; }
  .hero__headline { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .hero__tagline { max-width: 100%; }
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .home-sections { grid-template-columns: 1fr; gap: 2.5rem; }
  .home-sections > :last-child { grid-column: auto; }
  .home-grid { grid-template-columns: 1fr; }
  .home-articles-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .article-detail { padding: 2rem 1rem; }
  .article-detail__body { font-size: var(--text-sm); }
  .related-articles__grid { grid-template-columns: 1fr; }
  .project-detail__layout { grid-template-columns: 1fr; }
  #matrix-canvas { display: none; }
  .container { padding: 0 1rem; }
  .section { padding: 2rem 0; }
  body.has-preprod-banner .nav { top: 28px; }
  body.has-preprod-banner .reading-progress { top: 88px; }
  .reading-progress { top: 60px; }
  .footer__socials { gap: 1rem; }
  .preprod-banner { font-size: 0.65rem; padding: 0.3rem 0.75rem; }
  .admin-modal__content { width: 100%; max-width: 100%; border-radius: 0; }
  .articles-toolbar { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .articles-search { max-width: 100%; }
  .articles-toolbar__right { justify-content: space-between; }
  .threat-section__frame iframe { min-height: 400px; height: 500px; }
}

/* Small mobile */
@media (max-width: 480px) {
  html { font-size: 14px; }
  .hero__headline { font-size: 1.8rem; }
  .nav { padding: 0 1rem; }
  .category-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-tab { flex-shrink: 0; }
  .profile__avatar { width: 90px; height: 90px; }
  .preprod-banner { font-size: 0.6rem; padding: 0.25rem 0.5rem; }
  .preprod-banner__text { letter-spacing: 0.04em; }
  .container { padding: 0 0.75rem; }
  .terminal-card__body { padding: 0.75rem; }
  .threat-section__frame iframe { min-height: 350px; height: 400px; }
}

/* Extra small for admin modal */
@media (max-width: 600px) {
  .admin-modal__content { width: 100%; max-width: 100%; margin: 0; border-radius: 0; max-height: 100vh; }
  .admin-modal__actions { flex-wrap: wrap; padding: 0.75rem 1rem; }
}

/* ── Stat cards + Infographic responsive ── */
@media (max-width: 768px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stat-card { padding: 1rem 0.75rem; }
  .stat-card__value { font-size: 1.6rem; }
  .arch-diagram { padding: 0.5rem; }
  .arch-diagram__svg { min-height: 380px; }
}
@media (max-width: 480px) {
  .stat-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .stack-layer { grid-template-columns: 1fr; gap: 0.3rem; }
  .stack-layer__cols { grid-template-columns: 1fr; }
  .infographic-timeline { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .infographic-timeline::before { display: none; }
  .radar-chart__axis { grid-template-columns: 80px 1fr; }
  .salary-bar__level { width: 55px; font-size: 0.6rem; }
  .article-table { font-size: 0.7rem; }
  .article-sources__item { font-size: 0.7rem; padding-left: 2rem; }
  .infographic { padding: 1rem; }
}

/* Wide */
@media (min-width: 1440px) {
  .container { max-width: 1400px; }
}