/*
 * Cartel — dark glass label panel for an artwork or a book (3D gallery)
 *   <div class="cartel dark visible" role="dialog" aria-labelledby="…">
 *     <button class="btn btn-ghost btn-icon btn-sm cartel-close">✕</button>
 *     <div class="cartel-with-image">
 *       <img class="cartel-image" …>                       (optional)
 *       <div class="cartel-inner">
 *         <header class="cartel-header">
 *           <p class="cartel-kicker">…</p>                  (book: section name)
 *           <p class="cartel-artiste">…</p>                 (artwork: before the title)
 *           <h2 class="cartel-titre">…</h2>
 *           <p class="cartel-artiste">…</p>                 (book: author after the title)
 *           <p class="cartel-details">…</p>
 *         </header>
 *         <p class="cartel-description">…</p>
 *         <div class="cartel-actions">price · sold badge · buy button</div>
 *         <div class="qr-panel cartel-ar">…</div>          (augmented reality QR code)
 *         <div class="cartel-player">…</div>              (audio)
 *         <details class="cartel-transcription">…</details>
 *       </div>
 *     </div>
 *   </div>
 *   state : .visible (hidden by default, slides + fades in)
 *   Below 768px it becomes a full-width bottom sheet with the image above the text.
 *
 * Pinned bottom right, like the label next to an artwork. Solid background:
 * text never sits on the gallery's white wall.
 * Museum hierarchy: artist → title (italic serif) → technique,
 * then text, price / purchase, QR code, audio.
 */
.cartel {
  --cartel-pad: var(--space-8);
  --cartel-max-h: min(80vh, 720px);

  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 20;
  /* Sizes to its content: narrow for a bare title, 760px at most */
  width: max-content;
  min-width: 360px;
  max-width: min(760px, calc(100vw - 2 * var(--space-6)));
  padding: var(--cartel-pad);
  border-radius: 24px;
  background: var(--card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    var(--shadow-md),
    inset 0 0 0 1px var(--border);
  color: var(--foreground);

  /* Hidden: slight slide + fade, interruptible */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.2, 0, 0, 1),
    transform 0.3s cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear 0.3s;
}
.cartel.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: all;
  transition-delay: 0s;
}


.cartel-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
}

.cartel-with-image {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.cartel-image {
  flex: none;
  width: 200px;
  height: auto;
  max-height: calc(var(--cartel-max-h) - 2 * var(--cartel-pad));
  object-fit: contain;
  object-position: top;
  border-radius: var(--radius-md);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  box-shadow: var(--shadow-sm);
}

.cartel-inner {
  flex: 1;
  min-width: 0;
  max-height: calc(var(--cartel-max-h) - 2 * var(--cartel-pad));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  scrollbar-width: thin;
  scrollbar-color: var(--input) transparent;
}

.cartel-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-right: var(--space-10);   /* keeps clear of the close button */
}

.cartel-kicker,
.cartel-artiste {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.cartel-kicker  { color: var(--accent); }
.cartel-artiste { color: var(--accent); }
.cartel-artiste a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--input);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition-fast);
}
.cartel-artiste a:hover { text-decoration-color: currentColor; }
/* Book: the author follows the title, in roman */
.cartel-titre + .cartel-artiste { text-transform: none; letter-spacing: var(--tracking-normal); font-size: var(--text-sm); }

.cartel-titre {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
  text-wrap: balance;
}

.cartel-details {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.cartel-description {
  max-width: 60ch;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--foreground);
  text-wrap: pretty;
}

/* Price · Sold · Buy — the row disappears when all of its items are hidden */
.cartel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.cartel-actions:not(:has(> :not([style*="none"]))) { display: none; }

.cartel-prix {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.cartel-vendu {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--destructive);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--destructive);
}

.cartel-ar .qr-panel-code svg { width: 88px; height: 88px; }
.cartel-ar .qr-panel-title { color: var(--foreground); }
.cartel-ar .qr-panel-text  { color: var(--foreground); }

/* Audio players (cartel, HUD, pause menu, audio guide): .btn-ghost.btn-icon.btn-sm,
   the stop button stays subdued */
.player-stop { --btn-fg: var(--muted-foreground); }

.cartel-player {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-radius: calc(var(--radius-lg) + var(--space-2));   /* concentric with the buttons */
  background: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.cartel-player-label {
  padding-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.cartel-player-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cartel-player-progress {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--secondary);
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
}
.cartel-player-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--foreground);
  cursor: pointer;
  margin-top: -4.5px;
}
.cartel-player-progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--foreground);
  border: none;
  cursor: pointer;
}
.cartel-player-time {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.cartel-transcription summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition-fast);
}
.cartel-transcription summary::-webkit-details-marker { display: none; }
.cartel-transcription summary::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}
.cartel-transcription[open] summary::before { transform: rotate(45deg); }
.cartel-transcription summary:hover { color: var(--foreground); }
.cartel-transcription p {
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  box-shadow: inset 1px 0 0 var(--input);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.75;
  color: var(--foreground);
}

@media (max-width: 768px) {
  /* Full-width bottom sheet, image as a thumbnail above the text */
  .cartel {
    --cartel-pad: var(--space-6);
    --cartel-max-h: 75vh;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(var(--cartel-pad) + env(safe-area-inset-bottom, 0px));
  }
  .cartel-with-image { flex-direction: column; gap: var(--space-5); }
  .cartel-image { width: auto; max-width: 60%; max-height: 28vh; }
  .cartel-inner { max-height: none; overflow: visible; }
  .cartel { max-height: var(--cartel-max-h); overflow-y: auto; overscroll-behavior: contain; }
}