/*
  Studio 36 — Cartes (design.md §5.2, §4.5).
  Elevation exprimee par superposition de surfaces + bordure hairline,
  jamais par des ombres portees marquees (exception : modales, voir modal.css).
*/

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.card--interactive {
  cursor: pointer;
  transition:
    background-color var(--duration-standard) var(--ease-out),
    border-color var(--duration-standard) var(--ease-out),
    transform var(--duration-standard) var(--ease-out);
}

.card--interactive:hover,
.card--interactive:focus-visible {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-4px);
}

/* ---------- Carte studio (listing) — design.md §5.2, §8.2 ---------- */

.card-studio {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  isolation: isolate;
  --studio-color: var(--accent);
}

@media (min-width: 1024px) {
  .card-studio--hero {
    aspect-ratio: 16 / 10;
  }
}

/*
  Couleur signature par studio (design.md §2.5) via une classe modificateur
  plutot qu'une custom property inline : la liste des studios est fixe et
  connue (4), et la CSP du site interdit style-src 'unsafe-inline'
  (PLAN.md §8.6). Reprises a l'identique dans badges.css.
*/
.card-studio--plateau-show {
  --studio-color: var(--studio-plateau-show);
}

.card-studio--brique-room {
  --studio-color: var(--studio-brique-room);
}

.card-studio--blue-room {
  --studio-color: var(--studio-blue-room);
}

/* Eyebrow superposee a une photo : contraste plus fort que le --text-muted par defaut. */
.card-studio__content .eyebrow {
  color: var(--text-primary);
}

.card-studio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 55%;
  margin-top: auto;
  top: auto;
  background: linear-gradient(to top, var(--overlay-scrim), transparent);
  pointer-events: none;
}

.card-studio::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: var(--studio-color);
  opacity: 0;
  transition: opacity var(--duration-standard) var(--ease-out);
}

.card-studio:hover::after,
.card-studio:focus-visible::after {
  opacity: 1;
}

.card-studio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-expressive) var(--ease-out);
}

.card-studio:hover img,
.card-studio:focus-visible img {
  transform: scale(1.05);
}

.card-studio__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
}

.card-studio:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
  Photo en attente (design.md §17.2, [[Visuel a produire]]) : aucune photo
  reelle des studios n'a ete fournie a ce jour. Degrade teinte couleur
  signature en attendant les vrais medias (Phase 10, App\Models\Media),
  reutilise partout ou une photo de studio devrait apparaitre (carte listing,
  hero studio, module "3 espaces" homepage) — meme traitement que le
  mega-menu (header.css) pour une identite visuelle coherente.
*/
.photo-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--studio-color) 35%, var(--surface-1)), var(--surface-1));
}

/* Media reel (Phase 10) : meme empreinte (position/inset heritee ci-dessus,
   ou reprise par la page si elle redefinit `position`), mais le degrade cede
   la place a une vraie photo/video en `object-fit: cover`. */
img.photo-placeholder,
video.photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: none;
}