/* ============================================================
   MY WORK — work/index.html: a área principal dos cases.
   Os cards da home são um atalho; aqui fica a lista completa.
   Carregar depois de style.css e home.css (tokens --blue, --yellow, --hm-*, .hm-tag, .hm-btn).
   Desenho: Figma "My work" (553:73424). Versão anterior: mywork.v1.css + work/index.v1.html.
   Partes: [1] página  [2] título  [3] grade  [4] cards  [5] responsivo
   ============================================================ */

/* ---------- [1] página ---------- */
body.mw { background: var(--hm-sky); color: #fff; }
.mw .page { gap: 80px; }
.mw img { max-width: none; }
.mw .nav { transition: transform .45s var(--hm-ease), opacity .3s; }
.mw .nav.is-hidden { transform: translateY(-120%); opacity: 0; pointer-events: none; }
.mw-main { width: 100%; max-width: 1440px; padding: 123px 56px 0; display: flex; flex-direction: column; gap: 64px; }

/* ---------- [2] título ---------- */
.mw-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 900px; }
.mw-hero .hm-rise { display: block; }
.mw-hero__title { font-family: var(--hm-slab); font-weight: 400; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.12; max-width: 810px; text-wrap: balance; }
.mw-hero__sub { font-size: 20px; line-height: 1.75; }

/* ---------- [3] grade: 3 colunas de 421px com 24px entre elas ---------- */
.mw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 9px; }

/* ---------- [4] cards ----------
   O card inteiro é clicável (o link do título se estende por cima do card), mas só o título é lido como link. */
.mw-card {
  position: relative; background: #fff; color: var(--blue); border-radius: 20px;
  display: flex; flex-direction: column; gap: 24px; padding-bottom: 36px;
  transition: transform .5s var(--hm-ease), box-shadow .4s, opacity .8s var(--hm-ease);
}
.mw-card.reveal.in:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 26px 50px rgba(0,30,80,.22); }
.mw-card__img { display: block; width: 100%; height: auto; aspect-ratio: 421 / 160; object-fit: cover; border-radius: 20px; }
.mw-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 60px; padding: 0 40px; }
.mw-card__text { display: flex; flex-direction: column; gap: 24px; }
.mw-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 500; }
.mw-card__meta .hm-tag { font-weight: 400; }
.mw-card__title { font-family: var(--hm-slab); font-weight: 400; font-size: 24px; line-height: 1.25; }
.mw-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mw-card__title a:focus-visible { outline: none; }
.mw-card:has(.mw-card__title a:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 4px; }
/* o botão é só visual: o clique é do card inteiro, então o hover do card acende o botão */
.mw-card:hover .mw-card__cta { background: var(--blue); color: #fff; }
.mw-card:hover .mw-card__cta img { transform: translateX(6px); filter: brightness(0) invert(1); }

/* ---------- [5] responsivo ---------- */
@media (max-width: 1100px) {
  .mw-main { padding-inline: 40px; }
  .mw-grid { grid-template-columns: repeat(2, 1fr); padding: 0; }
}
@media (max-width: 760px) {
  .mw .page { gap: 64px; }
  .mw-main { padding: 120px 20px 0; gap: 40px; }
  .mw-hero { gap: 16px; }
  .mw-hero__sub { font-size: 16px; }
  .mw-grid { grid-template-columns: 1fr; gap: 20px; }
  .mw-card__body { gap: 36px; padding: 0 24px; }
  .mw-card__title { font-size: 22px; }
  .mw-card__cta { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .mw-card { transition: none; }
}