/* ===== Engraved Edition — media page polish (desktop-only) =====
   Pairs with /assets/css/edition.25ad1e04.css. Brings the Featured Videos card into
   the printed-plate system used on the music catalog. */
@media (min-width: 1025px) {
  /* The glass panels keep their own translucent background — deliberately
     not overridden. Only the edge is made crisp. */
  .featured-primary.featured-hero {
    border-radius: 10px !important;
    box-shadow: 0 0 0 1px var(--ee-edge), var(--ee-lift-lg) !important;
  }
  .featured-primary .panel-header {
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  /* Category badge: small-caps stamp, video keeps its red identity */
  .featured-primary .badge {
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    padding: 0.35rem 0.65rem !important;
    border: 1px solid rgba(2, 6, 23, 0.25) !important;
  }
  .featured-primary .badge.video {
    background: hsl(0, 45%, 94%) !important;
    color: hsl(0, 55%, 38%) !important;
    border-color: hsl(0, 40%, 80%) !important;
  }

  /* Thumb rail: crisp ink frames; the active plate gets mat + ring + offset.
     The base sheet uses a red outline + blurred inactive thumbs — both are
     overridden so every still stays legible and the selection reads as print. */
  /* No tray around the selector — the thumbs sit directly on the card, and
     overflow stays visible so the selected plate's ring/offset isn't clipped */
  .video-carousel {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* the base sheet also gives this a drop shadow and a blur layer, which is
       what still read as a panel around the selector */
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* scroll-snap aligns tiles to the padding edge, which scrolls the gutter
     away and leaves the first tile flush against the edge. scroll-padding
     moves the snapport inside the padding so the gutter survives. */
  .video-carousel .rail {
    gap: 0.9rem !important;
    padding: 10px 10px 12px !important;
    scroll-padding-inline: 10px !important;
  }
  /* Frames are drawn INSIDE each tile (outline with a negative offset), so the
     scrolling rail can never slice them and there is no mat or drop shadow. */
  .video-thumb {
    border-radius: 8px !important;
    overflow: hidden;
    border: 0 !important;
    box-shadow: none !important;
    outline: 1px solid rgba(2, 6, 23, 0.30) !important;
    outline-offset: -1px !important;
    transform: none !important;
    transition: outline-color 0.16s ease;
  }
  .video-thumb:hover {
    box-shadow: none !important;
    outline-color: rgba(2, 6, 23, 0.6) !important;
    transform: none !important;
  }
  .video-thumb.active {
    box-shadow: none !important;
    outline: 3px solid var(--ee-ink, hsl(221, 39%, 13%)) !important;
    outline-offset: -3px !important;
    transform: none !important;
  }
  /* No blur/dimming on unselected stills — quieted, still readable */
  .video-thumb:not(.active) img {
    filter: saturate(0.9) brightness(0.94) !important;
    transform: none !important;
  }
  .video-thumb > div:first-child,
  .video-thumb img {
    border-radius: 8px 8px 0 0 !important;
  }

  /* Player: printed plate edges */
  .featured-primary .featured-player,
  .featured-primary .featured-player iframe {
    border-radius: 8px !important;
    overflow: hidden;
  }
  /* Hairline only — an offset here collides with the meta strip below */
  .featured-primary .featured-player {
    box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.40) !important;
  }

  /* Meta strip: hairline sheet; chips become small-caps stamps (keep tints) */
  .featured-primary .featured-meta {
    border: 1px solid rgba(2, 6, 23, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .featured-primary .featured-meta .tag,
  .featured-primary .featured-meta .pill,
  .featured-primary .featured-meta .chip {
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    border-width: 1px !important;
    border-style: solid !important;
  }
  /* Buttons: navy primary + white/ink secondary, same as the catalog hero */
  .featured-primary .featured-meta .btn.primary {
    background: hsl(221, 45%, 22%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 0 var(--ee-cast) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .featured-primary .featured-meta .btn.primary:hover {
    background: hsl(221, 45%, 17%) !important;
    transform: translate(-1px, -1px);
    box-shadow: var(--ee-lift-sm-hover) !important;
  }
  .featured-primary .featured-meta .btn:not(.primary) {
    background: #ffffff !important;
    color: hsl(221, 39%, 13%) !important;
    border: 1px solid rgba(2, 6, 23, 0.45) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .featured-primary .featured-meta .btn:not(.primary):hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--ee-lift-sm-hover) !important;
  }

  /* Rail arrows: white plates with ink edges, pulled off the stills so they
     sit in the card margin instead of covering the first and last thumbnail */
  .featured-primary .related-works-nav-btn {
    background: #ffffff !important;
    color: hsl(221, 39%, 13%) !important;
    border: 1px solid rgba(2, 6, 23, 0.5) !important;
    border-radius: 6px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--ee-lift-sm) !important;
    opacity: 1 !important;
    width: 30px !important;
    height: 30px !important;
  }
  .video-carousel .related-works-nav-btn.prev { left: -13px !important; }
  .video-carousel .related-works-nav-btn.next { right: -13px !important; }
  .featured-primary .related-works-nav-btn:hover {
    background: var(--secondary-100, hsl(45, 42%, 96%)) !important;
  }
  .featured-primary .related-works-nav-btn .rw-icon {
    color: hsl(221, 39%, 13%) !important;
    text-shadow: none !important;
  }
  .featured-primary .related-works-nav-btn svg path { fill: currentColor !important; }

  /* ---------- Lower panels: glass kept, edges made crisp ---------- */
  .panel.backdrop-glass {
    border: 2px solid #ffffff !important;
    border-radius: 10px !important;
    box-shadow: var(--ee-lift-lg) !important;
  }

  /* Each streaming embed sits in a 3px white frame. The iframe inside is an
     inline element, so it sat on a text baseline leaving a ~6px gap at the
     bottom; the container's near-white background showed through that gap as
     a second ring just inside the frame. display:block closes the gap, and a
     transparent container removes the light band entirely — one frame only. */
  .streaming-embed iframe,
  .streaming-embed-inner iframe,
  #spotifyReleasesSection .streaming-embed-container iframe,
  #spotifyReleasesSection .spotify-embed-container iframe,
  .streaming-embed-stack iframe {
    display: block !important;
    box-shadow: none !important;
    vertical-align: top !important;
  }
  .streaming-embed-container,
  .streaming-embed-inner,
  #spotifyReleasesSection .streaming-embed-container,
  #spotifyReleasesSection .spotify-embed-container {
    background: transparent !important;
    box-shadow: none !important;
    line-height: 0 !important;
  }
  .panel .panel-header {
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  /* Every category badge becomes a small-caps stamp, keeping its own hue */
  .badge {
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    padding: 0.32rem 0.6rem !important;
    border: 1px solid rgba(2, 6, 23, 0.22) !important;
  }
  .badge.audio { border-color: hsl(220, 35%, 78%) !important; }
  .badge.spotify,
  .badge.streaming { border-color: hsl(150, 35%, 65%) !important; }

  /* Featured Audio rows: ink-edged plates that lift on hover */
  .audio-item {
    border: 1px solid rgba(2, 6, 23, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }
  .audio-item:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: var(--ee-lift-sm-hover) !important;
  }
  .audio-item-title { font-weight: 800 !important; letter-spacing: -0.01em; }
  .audio-item-performer { font-style: italic; }
  .audio-item-tag {
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-size: 0.63rem !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
  }

  /* Streaming embeds keep their own white mats — an ink ring on top of those
     reads as a doubled border. Deliberately not restyled. */

  /* ---------- Results grid: consistent plates, no dead space ---------- */
  /* Cards stretched to the tallest in their row, so anything with a short
     player carried a large empty band. Let each card end where its content
     ends; they still align along the top of each row. */
  .results .grid { align-items: start !important; }

  /* A blanket 420px min-height was sized for Spotify's album player, so short
     embeds (Bandcamp tracks, single Spotify tracks) sat in a mostly empty box.
     Each iframe already carries its correct height attribute — honour it. */
  /* Each embed carries its own inline height; only the blanket floor is
     dropped. (Forcing height:auto here would make the iframe fall back to the
     150px CSS default and ignore that height entirely.) */
  .results .card.streaming .media-cover iframe,
  .results .card.spotify .media-cover iframe {
    min-height: 0 !important;
  }

  /* One card treatment: crisp ink edge and a hard offset instead of a soft
     blur, matching the covers and folios elsewhere on the site. */
  .results .card {
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow:
      0 0 0 1px var(--ee-edge),
      var(--ee-lift-md) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }
  .results .card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow:
      0 0 0 1px rgba(2, 6, 23, 0.55),
      var(--ee-lift-lg-hover) !important;
  }
  .results .card .media-cover {
    border-radius: 8px !important;
    overflow: hidden;
  }
  .results .card .card-body > *:first-child,
  .results .card .card-body h3,
  .results .card .card-body .item-title {
    font-weight: 800 !important;
    letter-spacing: -0.012em !important;
  }
  /* Tags read as the same small-caps stamps used in the catalog and elsewhere */
  .results .card .tag,
  .results .card .chip,
  .results .card .pill {
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-size: 0.63rem !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    border-width: 1px !important;
    border-style: solid !important;
  }

  /* Stat cards (50+ / 3): small ink-edged plates */
  .site-card {
    border: 1px solid rgba(2, 6, 23, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: var(--ee-lift-md) !important;
  }
}