/* =============================================================
   Responsive — adjustments for tablet, mobile, and reduced motion.
   Class names match the rest of the stylesheet.

   Breakpoint scale:
     >1200px   large desktop (default styles)
     961-1200  small desktop / large laptop
     641-960   tablet (portrait + landscape iPad)
     481-640   large phone (landscape phone, small tablet portrait)
     <=480     phone
     <=360     small phone (iPhone SE 1st gen, etc.)
   ============================================================= */

@layer responsive;
@layer responsive {

/* ---- Global overflow safety -------------------------------------------
   Two issues we guard against site-wide:
   1. CSS Grid: a track of `1fr` won't shrink below its content's intrinsic
      min-size, so a long word or wide image inside a grid item can blow
      the grid out wider than the viewport. `min-width: 0` on grid items
      lets the track actually shrink to its share. We narrow this to the
      grids that actually contain potentially-wide content.
   2. Long URLs / emails / no-space tokens overflowing their container.
      `overflow-wrap: anywhere` is the modern safety net.
   ----------------------------------------------------------------------- */
.section-inner,
.project-card__head > *,
.project-card__body > *,
.about__layout > *,
.skills__grid > *,
.highlights__grid > *,
.apps__grid > *,
.approach-grid > * {
  min-width: 0;
}

.hero__bio,
.about__body,
.project-text,
.project-card__desc,
.timeline-points li,
.fact-value,
.app-card__desc,
.skill-card,
.section-subtitle,
.contact__sub {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* =============================================================
   Small desktop / large laptop  (961px - 1200px)
   ============================================================= */
@media (min-width: 961px) and (max-width: 1200px) {
  section            { padding: 90px 40px; }
  .hero              { padding: 110px 40px 70px; gap: 56px; }
  .highlights__grid  { grid-template-columns: repeat(3, 1fr); }
  .apps__grid        { grid-template-columns: repeat(2, 1fr); }
  .about__layout     { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
}


/* =============================================================
   Tablet  (641px - 960px)
   Hamburger nav appears here. Most multi-col grids drop to 2.
   ============================================================= */
@media (max-width: 960px) {
  /* Nav */
  .nav {
    padding: 0 24px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    background: rgba(7, 10, 19, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px 28px;
    background: rgba(7, 10, 19, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-default);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(-110%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease,
      visibility 0s linear 0.35s;
    z-index: 400;
    display: flex;
  }
  .nav[data-open="true"] .nav-menu {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition:
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease,
      visibility 0s linear 0s;
  }
  .nav-menu .nav-link {
    font-size: 13px;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: left;
  }

  /* Hero — stack to single column */
  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: calc(100px + env(safe-area-inset-top)) 24px 60px;
    min-height: auto;
  }
  .hero__featured { margin-top: 8px; }
  .hero__bio { max-width: 100%; }

  /* Featured card */
  .featured-card { padding: 24px; }
  .featured-card__title { font-size: 19px; }
  .featured-card__metric { padding: 12px 10px; }
  .featured-card__metric-value { font-size: 20px; }
  .card-shadow-stack,
  .card-shadow-stack--deep { display: none; }

  /* Section frame */
  section { padding: 72px 24px; }
  .section-subtitle { margin-bottom: 44px; }

  /* Project cards — stack columns, tighten padding */
  .project-card__head {
    grid-template-columns: 1fr;
    padding: 28px 24px 0;
  }
  .project-card__body { grid-template-columns: 1fr; }
  .project-col { padding: 28px 24px; }
  .project-col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }
  .project-links { justify-content: flex-start; }

  /* Tablet keeps two columns where it makes sense */
  .approach-grid    { grid-template-columns: repeat(2, 1fr); }
  .approach-cell    { padding: 32px 28px; }
  .skills__grid     { grid-template-columns: 1fr; }
  .highlights__grid { grid-template-columns: repeat(2, 1fr); }
  .apps__grid       { grid-template-columns: repeat(2, 1fr); }
  .highlights       { padding: 72px 24px; }

  /* About — stack, drop sticky */
  .about__layout { grid-template-columns: 1fr; gap: 40px; }
  .about-card    { position: static; }
  .about__body   { max-width: none; }
  .about__body p:first-of-type {
    font-size: 16.5px;
    padding-left: 14px;
  }

  /* Timeline */
  .timeline { padding-left: 32px; }
  .timeline-item::before { left: -36px; }

  /* Footer */
  .footer {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* Contact */
  .contact {
    padding: 72px 24px;
    padding-bottom: max(72px, env(safe-area-inset-bottom) + 24px);
  }
}


/* =============================================================
   Large phone / small tablet portrait  (<=640px)
   Single column for everything that was 2-col on tablet.
   ============================================================= */
@media (max-width: 640px) {
  .approach-grid   { grid-template-columns: 1fr; }
  .apps__grid      { grid-template-columns: 1fr; }
  .approach-cell   { padding: 28px 24px; }
}


/* =============================================================
   Phone  (<=480px)
   ============================================================= */
@media (max-width: 480px) {
  .nav {
    padding: 0 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    height: 64px;
  }
  .nav-menu     { top: calc(64px + env(safe-area-inset-top)); }
  .nav-logo     { font-size: 16px; }
  .nav-logo span{ font-size: 20px; }
  .nav-cta      { padding: 10px 16px; font-size: 11.5px; line-height: 1; }
  .nav-actions  { gap: 16px; }
  .nav-toggle   { width: 38px; height: 38px; }

  section { padding: 56px 16px; }
  .section-subtitle { margin-bottom: 36px; }

  .hero {
    padding: calc(96px + env(safe-area-inset-top)) 16px 48px;
    gap: 36px;
  }
  .hero__name { font-size: 40px; }
  .hero__actions {
    width: 100%;
  }
  .hero__actions .btn--primary,
  .hero__actions .btn--ghost {
    padding: 12px 20px;
    font-size: 12.5px;
  }

  .highlights,
  .contact {
    padding: 56px 16px;
    padding-bottom: max(56px, env(safe-area-inset-bottom) + 16px);
  }

  .featured-card { padding: 20px; }
  .featured-card__metric { padding: 10px 6px; }
  .featured-card__metric-value { font-size: 18px; }
  .featured-card__metric-label { font-size: 8px; letter-spacing: 0.04em; }

  .highlights__grid { grid-template-columns: 1fr; }
  .contact__headline { font-size: 36px; }
  .section-title    { font-size: 28px; }

  .project-col       { padding: 24px 18px; }
  .project-card__head{ padding: 24px 18px 0; }
  .project-card__title { font-size: 22px; }
  .approach-cell     { padding: 24px 18px; }
  .approach-grid     { border-radius: 10px; }
  .skill-card        { padding: 22px 20px; }

  /* Timeline tightened on phone */
  .timeline { padding-left: 26px; }
  .timeline-item { margin-bottom: 40px; }
  .timeline-item::before { left: -30px; width: 8px; height: 8px; }
  .timeline-item__role { font-size: 17px; }
  .timeline-points li { font-size: 13px; }

  .fact-row { padding: 12px 18px; gap: 12px; }
  .fact-key { min-width: 68px; }
  .about-card__head { padding: 20px; }

  .footer-links {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer {
    padding: 20px 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}


/* =============================================================
   Tiny phone  (<=360px)  iPhone SE 1st gen, older Androids.
   The featured-card metric grid is the tightest spot on this site,
   so we drop its 3-up grid to 2-up + 1 to stop label truncation.
   ============================================================= */
@media (max-width: 360px) {
  section { padding: 48px 14px; }
  .hero   { padding: calc(92px + env(safe-area-inset-top)) 14px 40px; }

  .featured-card__metrics { grid-template-columns: repeat(2, 1fr); }
  .featured-card__metric:last-child { grid-column: 1 / -1; }
  .featured-card__metric-label { font-size: 9px; }

  .hero__name        { font-size: 34px; }
  .contact__headline { font-size: 30px; }
  .section-title     { font-size: 24px; }

  .project-col        { padding: 22px 16px; }
  .project-card__head { padding: 22px 16px 0; }
  .approach-cell      { padding: 22px 16px; }

  .project-link,
  .featured-card__store { padding: 5px 10px; }

  .fact-row { padding: 10px 14px; }
  .fact-key { min-width: 56px; font-size: 9px; }
}


/* =============================================================
   Short / landscape phones — keep hero from feeling cramped.
   When the viewport is shorter than ~520px, drop the hero's
   100dvh minimum so it sizes to content instead of forcing a
   full-screen scroll.
   ============================================================= */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(88px + env(safe-area-inset-top));
    padding-bottom: 40px;
  }
}


/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track,
  .eyebrow-dot { animation: none; }
  .reveal { opacity: 1; transform: none; }
  #cursor,
  #cursor-ring { display: none; }
  body { cursor: auto; }
}

}