/* =============================================================================
   RESPONSIVE.CSS — All breakpoint overrides
   Structure: one @media block per breakpoint, sections labeled inside each.
   Breakpoints:
     ≤ 900px  Tablet
     ≤ 540px  Mobile
     ≤ 360px  Narrow safety net (iPhone SE, older Androids)
   ============================================================================= */


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

  /* ── Nav ── */
  nav            { padding: 16px 28px; }
  .nav-links     { display: none; }
  .hamburger     { display: flex; }
  .mobile-nav    { top: 57px; }   /* match actual nav bar height */

  /* ── Hero ── */
  .hero-card {
    padding: 48px 40px 56px;
    border-radius: 200px;
  }

  /* Blur halos — tighten spread on tablet */
  .blur-halo-4 { inset: -135px -165px; }
  .blur-halo-3 { inset: -90px -113px; }
  .blur-halo-2 { inset: -48px -63px; }
  .blur-halo-1 { inset: -18px -24px; }

  /* ── Work ── */
  #work, #about, #contact { padding-left: 28px; padding-right: 28px; }
  .project-inner           { grid-template-columns: 1fr; }
  .project-desc            { border-right: none; border-bottom: 1px solid var(--black); }

  /* ── About ── */
  .about-grid        { grid-template-columns: 1fr; gap: 40px; }
  .about-label-block { margin: 0 auto; }
  .about-text-block  { text-align: left; }   /* left-align reads better when stacked */

  /* ── Footer ── */
  footer { padding: 24px 28px; }
}


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

  /* ── Nav ── */
  nav         { padding: 14px 20px; }
  .mobile-nav { top: 53px; }   /* shorter mobile bar */

  /* ── Hero ── */
  .hero-card {
    padding: 36px 16px 44px;
    border-radius: 40px;
    max-width: calc(100vw - 32px);
  }

  .hero-greeting-text {
    font-size: clamp(22px, 7vw, 32px);
    padding: 8px 14px;
    white-space: normal;
    text-align: center;
  }

  .hero-name {
    font-size: clamp(44px, 13vw, 72px);
    letter-spacing: 0.04em;   /* ease tracking at small sizes */
  }

  .hero-subtitle {
    font-size: clamp(10px, 2.8vw, 14px);
    letter-spacing: 0.18em;   /* reduced so text doesn't overflow */
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    padding: 0 8px;
  }

  /* Star deco — shrink & pull in so it doesn't bleed off screen */
  .star-deco {
    width: 60px;
    top: 20%;
    left: 4%;
  }

  /* Blur halos — tighten spread on mobile */
  .blur-halo-4 { inset: -90px -105px; }
  .blur-halo-3 { inset: -54px -72px; }
  .blur-halo-2 { inset: -30px -39px; }
  .blur-halo-1 { inset: -12px -15px; }

  /* ── Work ── */
  #work                { padding: 72px 20px 56px; }
  .section-label       { font-size: clamp(26px, 8vw, 36px); }
  .project-title-row   { flex-direction: column; gap: 6px; }
  .project-title       { font-size: clamp(16px, 5vw, 22px); }
  .meta-row            { flex-direction: column; gap: 4px; }
  .meta-value          { font-size: 14px; }

  /* ── About ── */
  #about { padding: 56px 20px 72px; }

  /* ── Contact ── */
  #contact {
    padding: 56px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* Email: allow wrap & prevent overflow on narrow screens */
  .contact-text {
    font-size: clamp(13px, 4vw, 18px);
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  .contact-link-wrap  { flex-wrap: wrap; }
  .contact-underline  {
    position: static;
    height: 1px;
    width: 100%;
    margin-top: 4px;
  }

  /* ── Footer ── */
  footer {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* ── Decorations ── */
  .semicircle-deco { display: none; }



/* =============================================================================
   NARROW  ≤ 360px  (iPhone SE, older Androids)
   ============================================================================= */
@media (max-width: 360px) {

  /* ── Nav ── */
  .nav-logo { font-size: 16px; }

  /* ── Hero ── */
  .hero-card          { padding: 28px 12px 36px; border-radius: 24px; }
  .hero-greeting-text { font-size: 20px; }
  .hero-name          { font-size: 38px; }
  .hero-subtitle      { font-size: 10px; letter-spacing: 0.1em; }

  /* ── Work ── */
  .section-label { font-size: 24px; }
}