/* ==========================================================================
   Product design page — styles nothing else uses.
   Screens are 1440×1080 mockups with their own colored backgrounds.
   ========================================================================== */

/* hero buttons sit in the right column, flush right */
@media (min-width:1024px){.hero__aside .hero__actions{justify-content:flex-end;}}

/* featured project: screen beside its description, on blue */
.feature{background:var(--c-blue);color:var(--c-white);}
.feature__shot{width:100%;aspect-ratio:4 / 3;object-fit:cover;}
.feature__text{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:20px;}
.feature__title{
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);
}
@media (min-width:1024px){
  .feature{display:grid;grid-template-columns:7fr 5fr;}
  .feature__text{padding:32px;}
}

/* project cards: screenshot over company, title and summary */
.cards{display:grid;gap:12px;}
.card{background:var(--c-card-dark);}
.card__shot{width:100%;aspect-ratio:16 / 9;object-fit:cover;object-position:top;}
.card__text{display:flex;flex-direction:column;gap:8px;padding:16px 16px 20px;}
.card__company{color:var(--accent);}
.card__title{font-size:20px;line-height:1.15;letter-spacing:-0.01em;}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .card__text{padding:20px 20px 24px;}
}

/* case study: full-width screen */
.case-shot{width:100%;aspect-ratio:16 / 10;object-fit:cover;object-position:top;}
.case-note{color:var(--fg);}