/*
 * works-teaser.css — Works teaser (236:546-562). Spec: 01-home.md §11. Tre card 432x550 (gap 24):
 * immagine 381 con angoli superiori 20, pannello testo 169 con angoli inferiori 20 su tre blu.
 * Mobile: card in colonna; 640: due colonne; 900: tre. Pari altezza (grid stretch).
 */
.works-teaser .container { display: grid; justify-items: center; }
.works-teaser__cards { display: grid; gap: var(--space-md); width: 100%; }
.segment-card { display: grid; border-radius: var(--radius-lg); overflow: hidden; color: var(--color-ink-inverse); background: var(--color-blue-1); }
.segment-card--blue-2 { background: var(--color-blue-2); }
.segment-card--blue-3 { background: var(--color-blue-3); }
.segment-card__link { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; }
.segment-card__media { aspect-ratio: 432 / 381; overflow: hidden; background: var(--color-cyan-050); }
.segment-card__img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; transition: transform var(--dur-header) var(--ease-out); }
.segment-card__link:hover .segment-card__img { transform: scale(1.03); }
.segment-card__body { display: grid; gap: var(--space-xs); padding: var(--space-lg) 30px; min-height: 169px; align-content: start; }
.segment-card__title { font-size: clamp(28px, 24.7887px + 0.8451vw, 40px); line-height: 0.9; }
.segment-card__text { line-height: var(--line-height-lead-figma); }
.works-teaser__note { margin: var(--space-2xl) auto 0; text-align: center; line-height: var(--line-height-lead-figma); max-width: 676px; }
.works-teaser__cta { margin-top: var(--space-lg); }
@media (min-width: 640px) {
  .works-teaser__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .works-teaser__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}