/* ==========================================================
   responsive.css — Media Queries (Mobile First)
   Optimized for Instagram in-app browser (≤480px)
   ========================================================== */

/* --- Extra Small Devices (under 360px) --- */
@media (max-width: 359px) {
  :root {
    --container-padding: var(--space-4);
  }

  .hero-socials {
    gap: var(--space-2);
  }

  .social-link {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .tab-btn {
    font-size: var(--fs-xs);
    padding: var(--space-3) var(--space-1);
  }
}

/* --- Small Devices (360px to 480px — IG in-app browser sweet spot) --- */
@media (min-width: 360px) and (max-width: 480px) {
  :root {
    --container-padding: var(--space-5);
  }

  .hero-socials {
    gap: var(--space-3);
  }
  
  .social-link {
    width: 48px;
    height: 48px;
  }
  
  .tab-btn {
    min-height: 48px;
    padding: var(--space-4) var(--space-3);
  }
}

/* --- Medium Devices & Tablets (768px and up) --- */
@media (min-width: 768px) {
  /* Design Tokens Scale Adjustments */
  :root {
    --container-padding: var(--space-8);
  }

  /* Hero Section scaling */
  #hero {
    padding-block: var(--space-16) var(--space-10);
  }

  .hero-avatar-wrapper {
    width: 112px;
    height: 112px;
    margin-bottom: var(--space-8);
  }

  .hero-meta h1 {
    font-size: var(--fs-3xl);
  }

  .hero-nickname {
    font-size: var(--fs-base);
  }

  .hero-quote {
    max-width: 480px;
  }

  .hero-quote p {
    font-size: var(--fs-base);
  }

  /* Projects Layout */
  .featured-card {
    flex-direction: row !important;
    min-height: 280px;
  }

  .featured-card .project-thumbnail-wrapper {
    width: 45%;
    height: auto;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }

  .featured-card .project-content {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-6);
  }

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

  /* Creative Section */
  .creative-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

/* --- Large Devices & Desktops (1024px and up) --- */
@media (min-width: 1024px) {
  :root {
    --container-max: 768px; /* Maintain standard narrow minimal content focus */
  }
  
  #hero {
    padding-block: 5rem 3rem;
  }
}

/* --- Ultra Large Desktop / Full HD (1440px and up) --- */
@media (min-width: 1440px) {
  :root {
    --container-max: 820px; /* Marginally wider for large displays while keeping it minimal */
  }

  #hero {
    padding-block: 6rem 4rem;
  }
}