/*
 * The few rules only the WordPress theme needs, loaded after the site's stylesheet (assets/, built from apps/web).
 * Utilities come from that build, which scans this theme's templates too; what is here is what a utility cannot say.
 */

/*
 * On a touch screen the captions on photos and films are always shown, so their scrim is always there. A flat
 * 85% scrim hid most of the picture; a gradient keeps the text at the bottom legible and lets the photo show.
 */
@media (hover: none) {
  .gallery-caption-plate,
  .reel-overlay.media-scrim,
  .card-overlay.media-scrim {
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--background) 70%, transparent) 0%,
      color-mix(in srgb, var(--background) 35%, transparent) 45%,
      transparent 80%
    );
  }
}

/* The Extras logo tiles grow softly under the pointer, as the producing page's logos do (.producing-logo-tile). */
@media (prefers-reduced-motion: no-preference) {
  .jm-logo-pulse {
    transition:
      transform 0.3s ease-out,
      background-color 0.2s;
  }
  .jm-logo-pulse:hover {
    transform: scale(1.08);
    z-index: 1;
  }
}

/* The producing page's vertical category titles take less room on a phone, so the tiles sit nearer the middle. */
@media (max-width: 639px) {
  .producing-side-title {
    font-size: var(--text-sm);
  }
  .producing-side-titlebar {
    gap: 0.5rem;
  }
}