/* Compact media carousel using the existing ASAP palette and orbit motion. */
.media-concept {
  --media-line: rgba(255,255,255,.14);
  position: relative;
  overflow: hidden;
  padding: 24px 0 12px;
  background:
    radial-gradient(circle at 82% 45%, rgba(204,0,0,.18), transparent 24%),
    linear-gradient(135deg, #17164A 0%, #0D0D1A 72%);
  color: var(--white);
  scroll-margin-top: 96px;
}
.media-concept-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(var(--max), calc(100% - var(--pad-h) * 2));
  min-height: 36px;
  margin-inline: auto;
  scroll-margin-top: 116px;
}
.media-eyebrow {
  padding-inline: 44px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}
.media-carousel-viewport {
  --carousel-item-width: 184px;
  --carousel-gap: 34px;
  --carousel-speed: 27;
  --carousel-arc: -24;
  --carousel-tilt: 27;
  position: relative;
  width: min(1480px, 100%);
  margin: 4px auto 0;
}
.media-carousel-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  list-style: none;
  padding: 20px 24px;
  margin: 0;
}
.media-carousel-item { width: var(--carousel-item-width); flex: 0 0 var(--carousel-item-width); }
.is-animated .media-carousel-viewport {
  height: 190px;
  overflow: hidden;
  perspective: 1000px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}
.is-animated .media-carousel-track { display: block; position: relative; padding: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
.is-animated .media-carousel-item { position: absolute; top: 50%; left: 0; transform-origin: center; will-change: transform, opacity; }
@media (hover: hover) and (pointer: fine) {
  .is-animated .media-carousel-viewport { cursor: grab; -webkit-user-select: none; user-select: none; }
  .is-animated .media-carousel-viewport .media-brand { cursor: inherit; }
  .is-animated.is-dragging .media-carousel-viewport { cursor: grabbing; }
}
.media-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 126px;
  padding: 16px 12px;
  color: inherit;
  text-decoration: none;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.12);
}
.media-logo-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 62px; }
.media-logo { display: block; width: auto; height: auto; max-width: 140px; max-height: 57px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); }
/* Preserve the contrasting lettering inside Radio 1's two diamonds. */
.media-logo--radio1 { max-width: 120px; filter: grayscale(1); }
.media-logo--funx { max-width: 128px; }
.media-logo--duic { width: 38px; max-height: 38px; }
.media-duic-name { margin-left: 6px; font-size: 29px; font-weight: 850; letter-spacing: -.06em; }
.media-brand--collab {
  min-height: 146px;
  gap: 14px;
  border-color: rgba(255,74,74,.58);
  background: linear-gradient(135deg, rgba(204,0,0,.2), rgba(43,42,127,.2)), #171627;
  box-shadow: 0 12px 32px rgba(204,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.media-collab-badge { font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #ff7777; }
.media-collab-lockup { display: flex; align-items: center; justify-content: center; gap: 10px; }
.media-collab-lockup .asap-wordmark { --wordmark-size: 29px; --wordmark-width: 50px; color: var(--white); }
.media-collab-times { font-size: 17px; font-weight: 300; color: rgba(255,255,255,.45); }
.media-ssh-logo { width: 62px; height: 62px; object-fit: contain; border-radius: 10px; }
.media-carousel-controls { display: none; position: absolute; right: 0; }
.is-animated .media-carousel-controls { display: flex; }
.media-carousel-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--media-line); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; }
.media-carousel-toggle::before { content: ''; height: 9px; width: 7px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.media-carousel-toggle[aria-pressed="true"]::before { border: 0; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid currentColor; }
.media-carousel-toggle:hover { background: rgba(255,255,255,.08); }
.media-carousel-toggle[hidden] { display: none; }
.media-brand:focus-visible, .media-carousel-toggle:focus-visible { outline: 2px solid #ff4a4a; outline-offset: 4px; }
.media-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
  .media-concept { padding: 18px 0 8px; }
  .media-eyebrow { font-size: 9px; letter-spacing: .17em; }
  .media-carousel-viewport { --carousel-item-width: 146px; --carousel-gap: 14px; --carousel-arc: -14; --carousel-tilt: 18; }
  .is-animated .media-carousel-viewport { height: 174px; }
  .media-brand { min-height: 110px; padding-inline: 10px; border-radius: 16px; }
  .media-logo { max-width: 116px; max-height: 49px; }
  .media-logo--duic { width: 31px; max-height: 31px; }
  .media-duic-name { font-size: 25px; }
  .media-brand--collab { min-height: 128px; gap: 12px; }
  .media-collab-lockup { gap: 7px; }
  .media-collab-lockup .asap-wordmark { --wordmark-size: 26px; --wordmark-width: 44px; }
  .media-collab-times { font-size: 15px; }
  .media-ssh-logo { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .media-carousel-controls { display: none !important; } }