/* ==========================================================================
   PROJEK — before/after gallery
   Ported verbatim from the scoped <style> block of src/pages/projek.astro.

   Enqueued ONLY on this page. That is load-bearing, not an optimisation:
   several class names here (.project, .explain, .benefit, .step, .cta,
   .prose, .faq-aside) are reused across pages with conflicting rules, and
   Astro's per-file scoping is what kept them apart. Keeping each page's
   rules in a file that loads on that page alone reproduces that isolation.
   Do not merge these into one stylesheet.
   ========================================================================== */

  /* --- Projects --- */
  .projects {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-2xl);
  }

  @media (min-width: 64rem) {
    .projects {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .project__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .project__pair figure {
    margin: 0;
  }

  .project__pair figcaption {
    margin-top: 0.5rem;
    font-size: var(--step--4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--graphite-500);
  }

  .project__meta {
    margin-top: var(--space-m);
  }

  .project h3 {
    font-size: var(--step-2);
  }

  .project dl {
    margin: var(--space-s) 0 0;
    display: grid;
    gap: 0.625rem;
  }

  .project dt {
    font-size: var(--step--4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--graphite-500);
  }

  .project dd {
    margin: 0.125rem 0 0;
    font-size: var(--step--1);
    color: var(--graphite-700);
    line-height: 1.5;
  }

  /* --- Categories --- */
  .cats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .cats li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--stone-000);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--graphite-700);
  }

  .cats svg {
    color: var(--brand-700);
    flex: none;
  }

  /* --- Ask block --- */
  .ask {
    text-align: center;
    display: grid;
    justify-items: center;
  }

  .ask__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-m);
    background: var(--brand-100);
    color: var(--brand-700);
    margin-bottom: var(--space-m);
  }

  .ask .lede {
    margin-top: var(--space-s);
    margin-bottom: var(--space-l);
  }