/* =========================================================
   RESPONSIVE BEHAVIOR
   Desktop  > 1024px  (base styles in style.css)
   Tablet   768px – 1024px
   Mobile   < 768px
   ========================================================= */

/* ---------- Tablet: 768px – 1024px ---------- */
@media (max-width: 1024px) {
  .hero__title { font-size: 56px; }
  .section__title { font-size: 40px; }
  .contact__title { font-size: 40px; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero__media { justify-self: start; }
  .hero__frame { width: 260px; }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-card--full { grid-column: 1 / -1; }

  .section { padding-block: var(--space-8); }
}

/* ---------- Navigation switch: hamburger below 900px ----------
   Kept slightly above the strict 768px mobile line so cramped
   tablets in portrait never overflow the horizontal nav links. */
@media (max-width: 900px) {
  .navbar__nav { display: none; }
  .menu-toggle { display: flex; }

  .mobile-menu {
    border-top: var(--border-default);
    background: var(--color-bg);
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-base) ease;
  }

  .mobile-menu[data-open="true"] {
    display: block;
    max-height: 400px;
  }
}

/* ---------- Mobile: < 768px ---------- */
@media (max-width: 768px) {
  :root {
    --navbar-height: 64px;
  }

  .section { padding-block: var(--space-8) var(--space-7); }
  .section__inner { padding-inline: var(--space-4); }

  .hero { padding-block: var(--space-7); }
  .hero__inner { padding-inline: var(--space-4); }
  .hero__title { font-size: 44px; }
  .hero__intro { font-size: 16px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .button { text-align: center; }
  .hero__media { justify-self: center; }

  .deco--plus, .deco--circle { display: none; }

  .section__title { font-size: 32px; }

  .card { padding: var(--space-5); }

  .skills__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .projects__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .project-card__links { flex-direction: column; }
  .project-card__links .button { width: 100%; }

  .contact__panel { padding: var(--space-6) var(--space-4); }
  .contact__title { font-size: 30px; }
  .contact__links { flex-direction: column; align-items: stretch; }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- Small mobile safeguard ---------- */
@media (max-width: 380px) {
  .hero__title { font-size: 36px; }
  .navbar__logo { font-size: 20px; }
}