/* ==========================================================================
   works (gallery + index) & projects (case list) — Figma "İşler"
   ========================================================================== */

@layer pages {
  .works-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-7); }
  .works-bar__filters { flex: 1 1 32rem; }
  .works-bar .seg { margin-left: auto; }
  .works-bar:has(> [hidden]:only-child) { display: none; }

  /* ---- Gallery rhythm: 8+4, 4·4·4, 4+8, 4·4·4, 6·6 ---------------------- */
  .gallery { margin: 0; display: grid; gap: var(--s-7) var(--gutter); }
  @media (min-width: 48em) {
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery > li:nth-child(6n + 1) { grid-column: 1 / -1; }
  }
  @media (min-width: 64em) {
    .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--s-8); }
    .gallery > li { grid-column: span 4; }
    .gallery > li:nth-child(12n + 1) { grid-column: 1 / span 8; }
    .gallery > li:nth-child(12n + 2) { grid-column: 9 / -1; align-self: end; }
    .gallery > li:nth-child(12n + 6) { grid-column: 1 / span 4; align-self: end; }
    .gallery > li:nth-child(12n + 7) { grid-column: 5 / -1; }
    .gallery > li:nth-child(12n + 11) { grid-column: 1 / span 6; }
    .gallery > li:nth-child(12n + 12) { grid-column: 7 / -1; }
    .gallery.is-filtered > li { grid-column: span 6 !important; align-self: start !important; }
  }
  @media (min-width: 48em) and (max-width: 63.99em) {
    .gallery.is-filtered > li { grid-column: auto !important; }
  }
  ::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }

  .card--button { width: 100%; text-align: left; }

  /* ---- Index (list) layout ---------------------------------------------- */
  .gallery[data-layout="index"] { display: block; border-top: 1px solid var(--line); }
  .gallery[data-layout="index"] > li { border-bottom: 1px solid var(--line); }
  .gallery[data-layout="index"] .card {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-radius: var(--radius);
    transition: background-color var(--d-fast) ease, padding-inline var(--d-ui) var(--ease-out);
  }
  .gallery[data-layout="index"] .card__media { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }
  .gallery[data-layout="index"] .card__text { min-height: 0; }
  .gallery[data-layout="index"] .card__title { font-size: var(--fs-lg); font-weight: var(--w-light); letter-spacing: -0.025em; line-height: 1.15; }
  @media (min-width: 64em) {
    .gallery[data-layout="index"] .card { padding-block: var(--s-5); }
    .gallery[data-layout="index"] .card__words { flex: 1; justify-content: space-between; align-items: center; }
    .gallery[data-layout="index"] .card__title { font-size: var(--fs-xl); }
  }
  @media (min-width: 64em) and (hover: hover) and (pointer: fine) {
    .gallery[data-layout="index"] .card { grid-template-columns: minmax(0, 1fr); }
    .gallery[data-layout="index"] .card__media { display: none; }
    .gallery[data-layout="index"] > li:hover { border-bottom-color: transparent; }
    .gallery[data-layout="index"] a.card:hover { background: var(--surface); padding-inline: var(--s-6); }
  }

  /* ---- Projects (case list) --------------------------------------------- */
  .case-list { margin: 0; display: grid; gap: var(--s-7) var(--gutter); }
  @media (min-width: 48em) { .case-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-list__item:first-child { grid-column: 1 / -1; } }
  .card__note { color: var(--ink-2); }
}

@layer pages {
  /* Projects index (shown until a case study is public). */
  .project-index { min-width: 30rem; font-size: var(--fs-label); }
  .project-index th[scope="row"] { font-size: var(--fs-lg); font-weight: var(--w-light); letter-spacing: -0.02em; color: var(--ink); }
  .project-index td { color: var(--ink-2); vertical-align: middle; }
  .project-index tbody th, .project-index tbody td { padding-block: var(--s-5); }
  .project-index__more { margin-top: var(--s-6); }
}