/* ============================================================
   PROJECTS PAGE
   Eight commercial engagements as animated <details>.
   ============================================================ */

@layer pages {

  /* ==================================================
     PROJECT LIST
     ================================================== */
  .projects-list {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-block: 0;
  }

  .project {
    border-top: 1px solid var(--line);
    transition: padding-inline-start var(--t-med) var(--ease);
  }
  .project:last-of-type { border-bottom: 1px solid var(--line); }
  .project:hover:not([open]) { padding-inline-start: var(--s-3); }

  /* Summary row */
  .project__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 44px;
    gap: clamp(1rem, 3vw, 3rem);
    padding-block: var(--s-4);
    cursor: pointer;
    list-style: none;
    align-items: start;
    transition: padding-block var(--t-med) var(--ease);
  }
  .project__summary::-webkit-details-marker { display: none; }
  .project__summary::marker { content: ''; }

  .project__head {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .project__client {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .project__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .project__date {
    color: var(--mid);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .project__oneliner {
    color: var(--fg);
    line-height: 1.5;
    max-width: 52ch;
    margin: 0;
    padding-top: 2px;
  }

  /* Open/close indicator */
  .project__indicator {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform var(--t-med) var(--ease),
                border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
    margin-top: 4px;
    justify-self: end;
  }
  .project:hover .project__indicator {
    border-color: var(--fg);
    background: var(--tint);
  }
  .project[open] .project__indicator {
    transform: rotate(45deg);
    border-color: var(--fg);
  }

  /* ==================================================
     DETAILS CONTENT (animated)
     Uses ::details-content + interpolate-size for smooth open/close.
     Falls back to immediate open/close where unsupported.
     ================================================== */
  .project::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size 0.5s var(--ease),
      opacity 0.35s var(--ease),
      content-visibility 0.5s allow-discrete;
  }
  .project[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
  @starting-style {
    .project[open]::details-content {
      block-size: 0;
      opacity: 0;
    }
  }

  /* Detail content layout */
  .project__detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 44px;
    gap: clamp(1rem, 3vw, 3rem);
    padding-bottom: var(--s-5);
  }
  .project__description {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-width: 64ch;
  }
  .project__description p {
    line-height: 1.6;
    color: var(--fg);
    margin: 0;
  }

  /* Outcome callout: quiet Young Serif line with rules top and bottom */
  .project__outcome {
    font-family: 'Young Serif', Georgia, serif;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--fg);
    padding-block: var(--s-3);
    border-block: 1px solid var(--line);
    margin-block: var(--s-2);
    max-width: 48ch;
  }

  /* Tech stack chips */
  .project__stack {
    list-style: none;
    margin: var(--s-3) 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .project__stack .tag {
    font-size: 0.75rem;
    color: var(--mid);
  }

  @media (max-width: 800px) {
    .project__summary {
      grid-template-columns: minmax(0, 1fr) 40px;
    }
    .project__oneliner {
      grid-column: 1 / -1;
      order: 3;
    }
    .project__indicator {
      grid-row: 1;
      grid-column: 2;
    }
    .project__detail {
      grid-template-columns: 1fr;
    }
    .project__description {
      grid-column: 1;
    }
  }

  /* ==================================================
     CTA (soft link to pro bono)
     ================================================== */
  .projects-cta {
    padding-block: var(--section);
    max-width: var(--content-max);
    margin-inline: auto;
    text-align: center;
  }
  .projects-cta p {
    color: var(--mid);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 52ch;
    margin-inline: auto;
  }

  /* Reveal for first open – no flash of ::details-content animation
     during entrance */
  @media (prefers-reduced-motion: reduce) {
    .project::details-content {
      transition: none;
    }
  }
}