/* ==========================================================================
   responsive.css — Breakpoints: 320px (base), 768px, 1024px, 1440px
   Base styles in main.css / components.css target phones from 320px up;
   everything below progressively enhances the layout.
   ========================================================================== */

/* ---------- 320px: smallest phones ---------- */
@media (min-width: 320px) {
  .hero-headline { font-size: clamp(1.75rem, 7.2vw, 2.1rem); }
  .section-title { font-size: clamp(1.55rem, 6.4vw, 1.9rem); }
}

@media (max-width: 359px) {
  :root { --gutter: 0.85rem; }
  .brand-text { font-size: 1.05rem; }
  .nav-actions { gap: 0.5rem; }
  .hero-badge { right: -2px; padding: 0.4rem 0.65rem; max-width: calc(100% - 8px); }
  .skill-item { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .timeline-date { font-size: 0.74rem; }
}

/* ---------- 480px: large phones / small landscape ---------- */
@media (min-width: 480px) {
  .hero-cta { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .hero-cta .btn { min-width: 190px; }
  .cv-actions { flex-direction: row; flex-wrap: wrap; }
  .project-actions { flex-direction: row; flex-wrap: wrap; }
  .about-stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- 768px: tablets ---------- */
@media (min-width: 768px) {
  :root { --gutter: 1.75rem; --header-h: 74px; }

  .section { padding-block: 5rem; }
  .section-header { margin-bottom: 3rem; }
  .section-title { font-size: 2.25rem; }
  .section-subtitle { font-size: 1.05rem; }

  /* Navigation switches to the desktop bar */
  .brand { font-size: 1.35rem; gap: 0.75rem; }
  .brand-mark { width: 36px; height: 36px; font-size: 1.05rem; }
  .desktop-nav { display: flex; align-items: center; gap: 1.1rem; }
  .hamburger-btn, .mobile-drawer, .drawer-overlay { display: none; }

  .hero { padding: calc(var(--header-h) + 3rem) 0 4.5rem; }
  .hero-headline { font-size: 2.6rem; }
  .hero-intro { font-size: 1.08rem; }
  .hero-frame { max-width: 300px; padding: 8px; border-radius: var(--radius-lg); }
  .hero-image { border-radius: calc(var(--radius-lg) - 6px); }
  .hero-badge { right: -10px; bottom: -15px; padding: 0.75rem 1.2rem; }
  .hero-badge-value { font-size: 0.95rem; }

  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  .project-head { padding: 1.5rem 1.5rem 0.5rem; }
  .project-body { padding: 1rem 1.5rem 1.5rem; }
  .project-title { font-size: 1.3rem; }

  .about-card { padding: 2.5rem; gap: 2.5rem; }
  .about-title { font-size: 1.7rem; }
  .direction-box { padding: 2rem; }

  .skills-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .skill-card { padding: 2rem; }

  .timeline { padding-left: 2.5rem; }
  .timeline::before { left: 7px; }
  .timeline-dot { left: -2.5rem; width: 16px; height: 16px; }
  .timeline-card { padding: 1.75rem; }
  .timeline-role { font-size: 1.2rem; }

  .certs-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .cv-card { padding: 2.5rem; }
  .contact-panel { padding: 2.25rem; }
  .cv-title { font-size: 1.7rem; }

  .footer-top, .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- 1024px: laptops ---------- */
@media (min-width: 1024px) {
  .desktop-nav { gap: 1.75rem; }

  .hero { min-height: 90vh; }
  .hero-grid { display: grid; grid-template-columns: 1.25fr 0.85fr; align-items: center; gap: 4rem; text-align: left; }
  .hero-intro { margin-inline: 0; }
  .hero-cta { justify-content: flex-start; }
  .hero .socials { justify-content: flex-start; }
  .hero-headline { font-size: 3.1rem; line-height: 1.15; }
  .hero-frame { max-width: 380px; }

  .projects-grid { gap: 2.25rem; }

  .about-card { grid-template-columns: 1fr 1fr; gap: 3.5rem; padding: 3.5rem; }
  .about-stats { margin-top: 2rem; }

  .skills-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .skill-card { padding: 2.25rem; }

  .certs-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }

  .cv-card { grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3rem; }

  .contact-grid { grid-template-columns: 1fr 1.25fr; gap: 3rem; }
  .contact-panel { padding: 2.75rem; }
}

/* ---------- 1440px: large desktops ---------- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }

  .section { padding-block: 6rem; }
  .hero-headline { font-size: 3.5rem; }
  .hero-intro { font-size: 1.15rem; max-width: 620px; }
  .hero-frame { max-width: 420px; }
  .section-title { font-size: 2.5rem; }
  .project-title { font-size: 1.4rem; }
}

/* ---------- Print: keep it readable on paper ---------- */
@media print {
  .site-header, .mobile-drawer, .drawer-overlay, .hero-cta, .contact-grid form, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  .card { box-shadow: none; break-inside: avoid; }
}