/* Closing "next case study" row: the home page's index row, in the page's own colours.
   Sits under the Looking back summary on every case study (Amir's convention), replacing the old card.
   Colours come from the page: set --next-ink / --next-mute / --next-line on the wrapper (defaults suit a dark section).
   Markup:
     <a class="next-case" href="../simply-draw-v2/">
       <span class="next-case__kick"><i>Next</i>Case study 02</span>
       <span class="next-case__row">
         <span class="next-case__n">02</span>
         <span class="next-case__win" style="--brand:#330d81"><img src="../simply-draw-v2/img/hero-02.webp" alt=""></span>
         <span class="next-case__t">Simply Draw<small>From research to MVP</small></span>
         <span class="next-case__spec">Tablet &amp; mobile · Learning<br>Simply</span>
         <span class="next-case__arrow" aria-hidden="true">→</span>
       </span>
     </a>
   Needs the DM Mono faces from header.css (every case study page loads it). */

.next-case {
  --next-ink: #fff; --next-mute: rgba(255, 255, 255, .65); --next-line: rgba(255, 255, 255, .25); --next-acc: #e4572e;
  display: block; margin-top: 72px; color: var(--next-ink); text-decoration: none; container-type: inline-size;
  border-top: 1px solid var(--next-line); border-bottom: 1px solid var(--next-line);
}
.next-case--light { --next-ink: #221d17; --next-mute: #8b8176; --next-line: #221d17; }
.next-case__kick { display: flex; gap: 12px; align-items: center; padding-top: 18px; font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--next-mute); }
.next-case__kick i { font-style: normal; color: var(--next-acc); font-weight: 500; }
.next-case__row { display: grid; grid-template-columns: 64px 300px 1fr 260px 48px; gap: 32px; align-items: center; padding: 18px 0 26px; }
.next-case__n { font-family: "DM Mono", ui-monospace, monospace; font-size: 13px; color: var(--next-mute); transition: color .3s ease; }
.next-case:hover .next-case__n { color: var(--next-acc); }
.next-case__win { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--brand, #ddd); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 24px 40px -28px rgba(0, 0, 0, .6); isolation: isolate; }
.next-case__win > * { width: 100%; transition: scale .7s cubic-bezier(.22, 1, .36, 1); }
.next-case:hover .next-case__win > * { scale: 1.05; }
.next-case__t { font-family: "Poppins", system-ui, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--next-ink); text-wrap: balance; }
.next-case__t small { display: block; font-size: 14px; color: var(--next-mute); font-weight: 400; margin-top: 4px; letter-spacing: 0; }
.next-case__spec { font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--next-mute); line-height: 1.8; }
.next-case__arrow { text-align: right; font-size: 22px; color: var(--next-acc); font-weight: 500; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.next-case:hover .next-case__arrow { transform: translateX(6px); }

/* In a narrow column (under ~1000px, e.g. a 760px summary column) the spec moves under the name */
@container (max-width: 999px) {
  .next-case__row { grid-template-columns: 48px 220px 1fr 40px; gap: 16px 24px; }
  .next-case__spec { grid-column: 3; margin-top: 8px; }
  .next-case__t { grid-column: 3; }
  .next-case__n { grid-column: 1; }
  .next-case__win { grid-column: 2; grid-row: 1 / 3; }
  .next-case__t { grid-row: 1; align-self: end; }
  .next-case__spec { grid-row: 2; align-self: start; }
  .next-case__arrow { grid-column: 4; grid-row: 1 / 3; }
}

@media (max-width: 1099.98px) {
  .next-case { margin-top: 48px; }
  /* Window on top, then number | name, then spec under the name (explicit placement: the number
     comes before the window in the markup, so auto-placement would drop the name into the 36px column) */
  .next-case__row { grid-template-columns: 36px 1fr; gap: 12px 16px; padding: 16px 0 22px; align-items: start; }
  .next-case__win { grid-column: 1 / -1; grid-row: 1; }
  .next-case__n { grid-column: 1; grid-row: 2; padding-top: 4px; }
  .next-case__t { grid-column: 2; grid-row: 2; }
  .next-case__spec { grid-column: 2; grid-row: 3; }
  .next-case__arrow { display: none; }
  .next-case__t { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .next-case__win > *, .next-case__arrow { transition: none; } }