/* ==========================================================================
   MaltaByte — Responsive Stylesheet
   Breakpoints: tablet ≤1024px | small ≤768px | mobile ≤480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet — max-width: 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  .hero__title    { font-size: var(--text-5xl); }
  .section__title { font-size: var(--text-3xl); }

  .hero__orb {
    width: 420px;
    height: 420px;
    right: -15%;
  }

  /* Services: 2 columns */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About: stack */
  .about__layout {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .about__visual { height: 300px; }

  /* Contact: stack */
  .contact__layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* --------------------------------------------------------------------------
   Small — max-width: 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Nav */
  .nav__links     { display: none; }
  .nav__hamburger { display: flex; }

  .nav__mobile {
    display: block;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(13, 13, 26, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-6) var(--space-6);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
    pointer-events: none;
    z-index: 99;
  }

  .nav__mobile.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .nav__mobile-link {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
  }

  .nav__mobile-link:hover {
    color: var(--color-white);
    background: var(--color-surface);
  }

  /* Hero */
  .hero__title    { font-size: var(--text-4xl); max-width: none; }
  .hero__subtitle { font-size: var(--text-base); }

  .hero__cta-group {
    flex-direction: column;
    max-width: 280px;
  }

  .hero__orb {
    width: 280px;
    height: 280px;
    right: -20%;
    top: 15%;
    filter: blur(60px);
  }

  /* Sections */
  .section         { padding-block: var(--space-16); }
  .section__header { margin-bottom: var(--space-10); }

  /* Services: 1 column */
  .services__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Portfolio: 1 column */
  .portfolio__grid {
    grid-template-columns: 1fr;
  }

  /* Always show portfolio overlay on touch devices */
  .portfolio-card__overlay { opacity: 1; }
  .portfolio-card:hover .portfolio-card__img,
  .portfolio-card:hover .portfolio-card__placeholder { transform: none; }

  /* About stats */
  .about__stats {
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .about__stat { flex: 1 1 120px; }

  /* Footer */
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer__links { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Mobile — max-width: 480px
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

  :root {
    --container-pad: var(--space-4);
  }

  .hero__title    { font-size: var(--text-3xl); }
  .section__title { font-size: var(--text-2xl); }
  .section__subtitle { font-size: var(--text-base); }

  .hero__subtitle { font-size: var(--text-sm); }
  .hero__cta-group { max-width: none; }

  .btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
  }

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

  .about__stat-number { font-size: var(--text-3xl); }

  .section__label { font-size: 0.65rem; }

  .portfolio-card { aspect-ratio: 4 / 3; }

  .footer__links {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}