/* ==========================================================================
   MEDIA  ·  Unplugged and the off-plan travel show
   Wide stills over title, text and a link. Until real stills arrive, each
   frame is a composed brand placeholder: a voice waveform for the podcast
   and a drawn flight route for the travel show.
   ========================================================================== */

.media {
  background-color: var(--cream);
}

.media__grid {
  display: grid;
  gap: var(--space-xl) var(--space-md);
}

@media (min-width: 48rem) {
  .media__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.show {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
}

@media (max-width: 47.99rem) {
  .show {
    align-items: center;
    text-align: center;
  }
}

.show__title {
  margin-block-start: var(--space-sm);
  font-size: var(--step-h3);
  font-weight: 400;
}

.show__text {
  margin-block-end: var(--space-2xs);
}

@media (max-width: 47.99rem) {
  .show__text { text-align: start; }
}

/* --- Stills --------------------------------------------------------------------- */
.still {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  isolation: isolate;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

.show:hover .still {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--shadow-lift);
}

.still--podcast {
  background:
    radial-gradient(70% 90% at 30% 40%, rgba(var(--copper-rgb), 0.22), transparent 70%),
    linear-gradient(150deg, var(--forest-raised), var(--forest-ink));
}

.still--travel {
  background:
    radial-gradient(80% 90% at 75% 30%, rgba(var(--cream-rgb), 0.5), transparent 72%),
    linear-gradient(160deg, #E6DFCF, #D7CDB7);
}

/* Podcast waveform: twelve bars breathing at staggered rhythms. */
.still__wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1vw, 9px);
}

.still__wave span {
  inline-size: clamp(4px, 0.7vw, 6px);
  block-size: 18%;
  border-radius: 6px;
  background-color: rgba(var(--cream-rgb), 0.55);
  transform-origin: 50% 50%;
  animation: wave 1.8s ease-in-out infinite;
}

.still__wave span:nth-child(3n)   { block-size: 34%; animation-delay: -0.4s; }
.still__wave span:nth-child(3n+1) { block-size: 24%; animation-delay: -0.9s; }
.still__wave span:nth-child(4n)   { block-size: 44%; animation-delay: -1.3s; background-color: var(--copper); }

@keyframes wave {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.15); }
}

/* Travel route: a dashed flight path between three stops. */
.still__route {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.still__route path {
  stroke: var(--forest);
  stroke-width: 1.6;
  stroke-dasharray: 2 7;
  fill: none;
  opacity: 0.7;
  /* The dots travel slowly along the route, like a flight in progress. */
  animation: route 9s linear infinite;
}

@keyframes route {
  to { stroke-dashoffset: -180; }
}

.still__route circle {
  fill: var(--cream-paper);
  stroke: var(--forest);
  stroke-width: 1.6;
}

.still__route .still__end {
  fill: var(--copper);
  stroke: none;
}

/* Corner badge naming the format, and a centred play mark. */
.still__badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  color: var(--cream);
  background-color: rgba(var(--cream-rgb), 0.12);
  border: 1px solid rgba(var(--cream-rgb), 0.25);
}

.still--travel .still__badge {
  color: var(--forest);
  background-color: rgba(var(--forest-rgb), 0.08);
  border-color: rgba(var(--forest-rgb), 0.2);
}

.still__play {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  color: #fff;
  background-color: var(--copper-strong);
  transition: transform var(--dur-mid) var(--ease-out);
}

.still__play .icon {
  fill: currentColor;
  stroke: currentColor;
}

.show:hover .still__play {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .still__wave span,
  .still__route path { animation: none; }
}