/* ============================================================
   RESPONSIVE — my proposal for tablet + phone (no Figma frames yet).
   Desktop (≥1024px) is the Figma design and is untouched here.
   Sizes/spacing come from the breakpoint tokens in tokens.css;
   this file only changes LAYOUT, per component.
   ============================================================ */

/* Menu button: phone only */
.nav__menu-btn { display: none; }

/* ================= SMALL DESKTOP  ≤ 1279px ================= */
@media (max-width: 1279px) {
  /* Below the 1280 Figma frame: YEAR needs little, give the room to ROLE */
  .project-table col:nth-child(1) { width: 25%; }
  .project-table col:nth-child(2) { width: 22%; }
  .project-table col:nth-child(3) { width: 11%; }
  .projects { --detail-media: 47%; }   /* = PROJECT + ARTIST: Spotify player width */
}

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

  /* Hero: blue tags drop under the name, side by side */
  .hero__title-row { flex-wrap: wrap; }
  .hero__roles { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px; }

  /* Project list: filters become a row above the table */
  .projects { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .filters { flex-direction: row; flex-wrap: wrap; column-gap: 1rem; }

  /* Columns: give ROLE more room, YEAR needs little */
  .project-table col:nth-child(1) { width: 30%; }
  .project-table col:nth-child(2) { width: 24%; }
  .project-table col:nth-child(3) { width: 12%; }
  .projects { --detail-media: 54%; }   /* = PROJECT + ARTIST: Spotify player width */
}

/* ================= PHONE  ≤ 767px ================= */
@media (max-width: 767px) {

  /* ---- Nav: logo + MENU; links open as a full-screen panel ---- */
  .nav__menu-btn {
    all: unset;
    display: block;
    cursor: pointer;
    font-size: var(--fs-nav);
    line-height: var(--lh-body);
    text-transform: uppercase;
  }
  .nav__menu-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  .nav__links {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1.5rem var(--gutter);
    border-top: var(--line);
    background: var(--color-bg);
    font-size: 2.5rem;
    font-weight: var(--fw-medium);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s 0.5s;
  }
  .nav.is-menu-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s;
  }
  /* While the menu is open the panel sits above the flying name, so the
     nav shows its own (normally invisible) copy of the logo instead. */
  .is-menu-open .nav { z-index: calc(var(--z-logo) + 1); }
  .is-menu-open .nav__logo-slot { visibility: visible; }

  /* ---- Section title: link can wrap under the tag ---- */
  .section-title { flex-wrap: wrap; row-gap: 0.5rem; }

  /* ---- Project list: each row = big title + "Artist · Role · Year" ---- */
  .project-table,
  .project-table tbody { display: block; }
  .project-table colgroup { display: none; }
  .project-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .project-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: var(--row-pad) 0;
    border-bottom: var(--line-thin);
    transition: border-color 0.25s ease;
  }
  .project-table .project-row td { padding: 0; border: 0; }
  .project-row.is-dimmed { border-bottom-color: var(--color-muted); }
  .project-row.is-open { border-bottom-color: transparent; }

  .project-row td:nth-child(1) { flex: 1 0 calc(100% - 2rem); font-size: 1.125rem; }
  .project-row td:nth-child(5) { flex: 0 0 2rem; }
  /* Under the title: one flowing line, written by the list generators —
     "Artist · Role · Year" (music) / "Type · Role · Year" (film, brief).
     The separate cells stay in the page for screen readers, hidden visually. */
  .project-row .row-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--fs-small);
  }
  .project-table .project-row td:nth-child(2),
  .project-table .project-row td:nth-child(3),
  .project-table .project-row td:nth-child(4) {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .row-toggle, .row-plus { padding-right: 0; }

  /* Detail: Spotify player full width, then text, then "Spotify ↗" */
  .project-table .detail-row,
  .project-table .detail-row > td { display: block; }
  .detail__inner { grid-template-columns: 1fr; row-gap: 1rem; padding-top: 0.5rem; }
  .detail__inner .spotify-embed,
  .detail__inner .youtube-embed { margin-right: 0; }
  .detail__body { grid-column: 1; gap: 0.75rem; }

  .showreel { width: 100%; }
}