/* ============================================================
   JAO PORTFOLIO - responsive.css
   Responsive System: Mobile First Breakpoints
   Author: Joshua Aluaye Ohiole
   Website: jao.jaotechgworld.com

   Breakpoints:
   - xs:  < 480px   (small phones)
   - sm:  < 640px   (phones)
   - md:  < 768px   (large phones / small tablets)
   - lg:  < 1024px  (tablets / small laptops)
   - xl:  < 1280px  (laptops)
   - 2xl: >= 1280px (desktops - base)
   ============================================================ */

/* ============================================================
   TABLET AND BELOW (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* Navbar */
  .navbar__nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-2xl);
  }

  .hero__text-block {
    order: 2;
  }

  .hero__image-block {
    order: 1;
  }

  .hero__tagline {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__stats {
    justify-content: center;
  }

  .hero__eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  /* Bio */
  .bio__inner {
    grid-template-columns: 1fr;
  }

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

  .social-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   TABLET (max 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Spacing */
  :root {
    --space-3xl: 64px;
    --space-2xl: 48px;
  }

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

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

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .social-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .graphics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero avatar */
  .hero__avatar-wrap {
    width: 260px;
    height: 310px;
  }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    align-items: center;
  }

  /* Payment grid */
  .payment-grid {
    grid-template-columns: 1fr;
  }

  /* Section header */
  .section-header {
    margin-bottom: var(--space-xl);
  }
}

/* ============================================================
   MOBILE (max 640px)
   ============================================================ */
@media (max-width: 640px) {

  :root {
    --space-3xl: 48px;
    --space-2xl: 40px;
    --nav-height: 62px;
  }

  /* Container */
  .container {
    padding: 0 var(--space-md);
  }

  /* Typography */
  .hero__name {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  /* Grids - single column */
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

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

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .graphics-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons */
  .btn--lg {
    padding: 13px 28px;
    font-size: 0.9rem;
  }

  .hero__cta {
    flex-direction: column;
    align-items: center;
  }

  .hero__cta .btn {
    width: 100%;
    max-width: 280px;
  }

  /* CTA buttons */
  .cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta__buttons .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Hero avatar */
  .hero__avatar-wrap {
    width: 220px;
    height: 260px;
  }

  /* Stats */
  .hero__stats {
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
  }

  /* Modal */
  .modal {
    margin: var(--space-md);
    max-height: 85vh;
  }

  .modal__body {
    padding: var(--space-lg);
  }

  /* Footer */
  .footer__inner {
    gap: var(--space-sm);
  }

  .footer__links {
    gap: var(--space-md);
    justify-content: center;
  }

  /* Scroll top button */
  .scroll-top {
    bottom: var(--space-lg);
    right: var(--space-md);
    width: 40px;
    height: 40px;
  }

  /* Page hero */
  .page-hero {
    padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-xl);
  }

  /* Lang select */
  .lang-select {
    font-size: 0.72rem;
    padding: 5px 8px;
    padding-right: 20px;
  }

  /* Navbar logo text - hide on very small */
  .navbar__logo-text {
    display: none;
  }

  /* Bio note */
  .bio__note {
    font-size: 0.82rem;
  }

  /* Legal */
  .legal-content h2 {
    font-size: 1.15rem;
  }

  /* Social cards */
  .social-card {
    padding: var(--space-lg) var(--space-sm);
  }

  .social-card img {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   EXTRA SMALL (max 480px)
   ============================================================ */
@media (max-width: 480px) {

  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__stats .stat__number {
    font-size: 1.5rem;
  }

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

  .section-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .footer__copy {
    font-size: 0.7rem;
  }

  .footer__link {
    font-size: 0.7rem;
  }
}

/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
  }

  .hero__avatar-wrap {
    width: 180px;
    height: 220px;
  }
}

/* ============================================================
   LARGE DESKTOP (min 1400px)
   ============================================================ */
@media (min-width: 1400px) {
  .hero__inner {
    grid-template-columns: 1fr 480px;
  }

  .social-grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .navbar,
  .mobile-menu,
  .scroll-top,
  .scroll-progress,
  .devtools-notice,
  .preloader {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding-top: var(--space-xl);
  }
}

/* ============================================================
   END OF responsive.css
   ============================================================ */