/* =========================================================
   Work page — all case studies as cards, two per row on desktop and tablet (one on phones under 600px).
   ========================================================= */


.work { padding-top: 64px; }
.work__title { max-width: var(--text-max); }
.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 64px; }

/* Card: the whole card is the link; colours repeat pink, purple, green at 25% */
.work-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: var(--card-pad); border-radius: var(--radius-lg); transition: box-shadow 0.25s var(--ease); }
.work-card:nth-child(3n+1) { --card-rgb: var(--pink-rgb); }
.work-card:nth-child(3n+2) { --card-rgb: var(--purple-rgb); }
.work-card:nth-child(3n) { --card-rgb: var(--green-rgb); }
.work-card { background: rgba(var(--card-rgb), var(--tint)); }
.work-card:hover { box-shadow: inset 0 0 0 2px rgb(var(--card-rgb)); }   /* hover: 2px stroke in the card's own colour at full strength (same on every clickable card) */
.work-card:has(a:focus-visible) { outline: 2px solid var(--black); outline-offset: 2px; }
.work-card__image { aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 8px; }
.work-card__image img { width: 100%; height: 100%; object-fit: contain; }
.work-card__label { color: var(--gray); }
.work-card__title { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: 500; max-width: var(--text-max); }
.work-card__title a { color: inherit; }
.work-card__title a:focus-visible { outline: none; }
.work-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.work-card__more { margin-top: auto; }

@media (max-width: 1199px) {
  .work { padding-top: 40px; }
  .work__grid { gap: 24px; margin-top: 40px; }
}
@media (max-width: 809px) {
  .work { padding-top: 32px; }
}
/* Two cards per row down to 600px (tablets in portrait); one per row on phones */
@media (max-width: 599px) {
  .work__grid { grid-template-columns: 1fr; }
}