/* ═══════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Tablet & Mobile
═══════════════════════════════════════════════════════════ */

/* ── Small laptop (≤ 1080px): collapse nav into the menu ── */
@media (max-width: 1080px) {
  .hamburger { display: inline-flex; }
  .nav-actions { margin-left: auto; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 16px 20px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-link { padding: 12px 16px; font-size: 1rem; border-radius: var(--radius-md); }
  .navbar.menu-open { border-bottom-color: var(--line); background: var(--surface); }
}

/* ── Tablet (≤ 960px) ── */
@media (max-width: 960px) {
  .hero { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 80px; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { order: -1; justify-self: start; width: 340px; padding-top: 24px; }
  .hero-band { top: -140px; width: 190px; height: 400px; }
  .profile-frame { width: 250px; }
  .hero-tags { max-width: 250px; }

  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-img-side { flex-direction: row; align-items: flex-start; }
  .about-img-frame { width: 260px; flex: none; }
  .about-terminal { flex: 1; }

  .contact-box { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Mobile (≤ 720px) ── */
@media (max-width: 720px) {
  :root { --nav-h: 62px; }
  .container, .nav-inner { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 32px; }

  .hero-visual { width: 100%; }
  .hero-band { right: -20px; width: 150px; height: 360px; }
  .hero-band::after { right: 10px; width: 56px; height: 28px; }
  .profile-frame { width: 210px; }
  .hero-tags { max-width: none; }
  .hero-stats { gap: 28px; }
  .stat-num { font-size: 1.6rem; }
  .btn { flex: 1 1 auto; justify-content: center; }

  .about-img-side { flex-direction: column; }
  .about-img-frame { width: 100%; max-width: 360px; }

  .skill-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .skill-card { padding: 10px 12px; font-size: .88rem; gap: 10px; }
  .ico { width: 34px; height: 34px; }

  .projects-grid { grid-template-columns: 1fr; }
  .project-card { padding: 24px; }
  .featured .project-title { font-size: 1.45rem; }

  .certs-grid { grid-template-columns: 1fr; }
  .cert-media { height: 190px; }
  .cert-media img { max-height: 142px; }
  .cert-media.doc img { max-height: 158px; }

  .footer-inner { flex-direction: column; text-align: center; }
}

/* ── Small phones (≤ 380px) ── */
@media (max-width: 380px) {
  .skill-grid { grid-template-columns: 1fr; }
  .lang-btn { padding: 0 10px; }
  .nav-actions { gap: 6px; }
}

/* ── Hero on phone/tablet (≤ 960px): no big block, offset terracotta frame on the photo ── */
@media (max-width: 960px) {
  .hero-band { display: none; }
  .hero-visual { padding-top: 0; }
  .profile-frame { box-shadow: 12px 12px 0 0 var(--terracotta); }
  .hero-tags { margin-top: 28px; }
}