/* ============================================================
   work.css — Section 04 · Projets
============================================================ */

.work__header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  padding-left:    var(--space-14);
  margin-bottom:   var(--space-16);
}

.work__header-left {
  display:        flex;
  flex-direction: column;
}

.work__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap:            var(--space-7);
  padding-left:          var(--space-14);
}

.project__link {
  display:        flex;
  flex-direction: column;
  width:          100%;
  color:          inherit;
}

.project__image-wrapper {
  width:         100%;
  aspect-ratio:  6 / 5;
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: var(--space-6);
  background:    var(--ivory-card);
  position:      relative;
}

.project__image-wrapper::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to bottom, transparent 50%, rgba(176, 125, 82, 0.18) 100%);
  opacity:    0;
  transition: opacity 400ms ease;
}

.project__link:hover .project__image-wrapper::after { opacity: 1; }

.project__image {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  filter:          saturate(0.88);
  transition:
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
    filter    450ms ease;
}

.project__link:hover .project__image { transform: scale(1.05); filter: saturate(1); }

.project__num {
  position:       absolute;
  top:            var(--space-4);
  left:           var(--space-4);
  z-index:        var(--z-sticky);
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--bg-on-ink-heavy);
}

.project__body {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-3);
}

.project__body-text {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1-5);
}

.project__category {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--caramel);
}

.project__name {
  font-family:    var(--font-display);
  font-size:      clamp(1.375rem, 1.8vw, 1.75rem);
  font-weight:    400;
  letter-spacing: -0.01em;
  line-height:    1.1;
  color:          var(--ink-deep);
}

.project__desc {
  font-family: var(--font-body);
  font-size:   var(--text-md);
  font-weight: 400;
  color:       var(--ink-mid);
  line-height: 1.75;
  margin-top:  0.125rem;
}

.project__arrow {
  flex-shrink: 0;
  margin-top:  var(--space-7);
  color:       var(--ink-mid);
  transition:
    color     200ms ease,
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project__arrow svg { width: 18px; height: 18px; }

.project__link:hover .project__arrow { color: var(--caramel); transform: translateX(5px); }


/* ── Responsive ── */

@media (max-width: 1024px) {
  .work__header,
  .work__grid          { padding-left: var(--space-10); }
  .work__grid          { column-gap: var(--space-5); }
}

/* 3 cartes sur une grille 2 colonnes laisse un 3e élément seul
   sur sa ligne : on l'élargit pour qu'il occupe la moitié de la
   largeur plutôt que de rester collé à gauche. */
@media (max-width: 900px) {
  .work__grid           { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-10); }
  .project:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 0.625rem); }
}

@media (max-width: 768px) {
  .work__header         { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .work__header,
  .work__grid           { padding-left: 0; }
  .work__grid            { grid-template-columns: 1fr; row-gap: var(--space-10); }
  .project:nth-child(3) { grid-column: auto; max-width: 100%; }

  /* Colonne pleine largeur : le ratio 6/5 des grilles 2-3 colonnes
     donnerait une image trop haute (jusqu'à 600px sur certains
     téléphones). Un cadrage plus large convient mieux à une carte
     qui occupe toute la largeur de l'écran. */
  .project__image-wrapper { aspect-ratio: 3 / 2; }
}