/* ==========================================================
   Passions : mosaïque de photos à l'heure dorée
   ========================================================== */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 320px; border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; color: var(--on-photo);
  box-shadow: var(--shadow);
}
.tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(60, 25, 10, 0) 30%, rgba(60, 25, 10, .82)); }
.tile:hover > img { transform: scale(1.06); }
.tile .label { color: #ffd9a8; }
.tile h3 { font-size: var(--step-2); margin-top: 4px; }
.tile p { margin-top: 6px; max-width: 46ch; color: #fbeee0; font-size: .98rem; }
.t-music { grid-column: span 7; min-height: 420px; }
.t-sport { grid-column: span 5; min-height: 420px; }
.t-meca  { grid-column: span 5; }
.t-job   { grid-column: span 7; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  appearance: none; cursor: pointer; font: inherit; font-size: .88rem;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255, 248, 239, .16); color: var(--on-photo); border: 1px solid rgba(255, 248, 239, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, transform .1s;
}
.chip:hover { background: rgba(255, 248, 239, .3); }
.chip.hit { transform: scale(.94); background: var(--honey); color: #3b2416; }
.chip svg { width: 16px; height: 16px; }
.licences { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.licences span { padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(255, 248, 239, .5); font-size: .82rem; }
.licences span small { opacity: .75; margin-left: 6px; }

@media (max-width: 900px) {
  .t-music, .t-sport, .t-meca, .t-job { grid-column: span 12; min-height: 340px; }
}