/* =====================================================
   MEDIA SHOWCASE  –  featured photo + video player
   Place your files at:
     src/media/img/featured.webp   (hero photo)
     src/media/img/video-poster.webp  (video thumbnail — optional)
     src/media/video/memory.mp4    (video clip)
   ===================================================== */

/* ── Grid wrapper ── */
.media-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin: 1.5rem auto 1.2rem;
  max-width: 360px;
  justify-items: center;
  align-items: start;
  opacity: 0;
  animation: fadeSlideUp .65s ease forwards;
  animation-delay: 2.35s;
}

/* =====================================================
   FEATURED PHOTO
   ===================================================== */
.media-photo-hero {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #fce8ef 0%, #f5d0e0 60%, #eedce8 100%);
  aspect-ratio: 4 / 3;
  margin: 0;
  width: 100%;
  box-shadow:
    0 4px 18px rgba(200, 80, 120, .18),
    0 1px 4px  rgba(0, 0, 0, .08);
  transition:
    box-shadow .38s ease,
    transform  .38s cubic-bezier(.22, 1, .36, 1);
  /* Shimmer border */
  outline: 1.5px solid rgba(220, 140, 170, .2);
}

.media-photo-hero:hover,
.media-photo-hero:focus-visible {
  box-shadow:
    0 0 0 2px rgba(200, 80, 120, .35),
    0 14px 40px rgba(200, 80, 120, .36);
  transform: scale(1.025) translateY(-2px);
  outline: none;
}

.media-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.media-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.media-photo-hero:hover  .media-photo-frame img,
.media-photo-hero:focus-visible .media-photo-frame img {
  transform: scale(1.07);
}

/* Zoom icon overlay */
.media-photo-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(160, 30, 70, 0);
  border-radius: 12px;
  transition: background .3s ease;
}

.media-photo-zoom svg {
  width: 34px;
  height: 34px;
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}

.media-photo-hero:hover  .media-photo-zoom,
.media-photo-hero:focus-visible .media-photo-zoom {
  background: rgba(160, 30, 70, .28);
}

.media-photo-hero:hover  .media-photo-zoom svg,
.media-photo-hero:focus-visible .media-photo-zoom svg {
  opacity: 1;
  transform: scale(1);
}

/* Caption ribbon (slides up on hover) */
.media-photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(90, 15, 45, .72));
  color: rgba(255, 220, 232, .95);
  font-size: .7rem;
  padding: .65rem .55rem .32rem;
  text-align: center;
  letter-spacing: .04em;
  transform: translateY(100%);
  transition: transform .32s ease;
  pointer-events: none;
}

.media-photo-hero:hover  .media-photo-caption,
.media-photo-hero:focus-visible .media-photo-caption {
  transform: translateY(0);
}

/* Placeholder when image is missing / fails */
.media-photo-hero.no-media .media-photo-frame img { display: none; }
.media-photo-hero.no-media .media-photo-frame::before {
  content: '📷';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  opacity: .35;
}
.media-photo-hero.no-media .media-photo-zoom { display: none; }

/* =====================================================
   VIDEO PLAYER
   ===================================================== */
.media-video-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #130810;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, .3),
    0 1px 4px  rgba(0, 0, 0, .14);
  transition: box-shadow .38s ease;
  outline: 1.5px solid rgba(160, 60, 100, .18);
}

.media-video-wrap:hover {
  box-shadow:
    0 0 0 2px rgba(200, 80, 120, .28),
    0 10px 32px rgba(180, 50, 100, .28);
}

.media-video-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* ── Big play overlay (before first play) ── */
.media-video-poster-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 4, 10, .32);
  border-radius: 12px;
  z-index: 5;
  transition: background .3s ease, opacity .35s ease;
}

.media-video-poster-overlay.playing {
  opacity: 0;
  pointer-events: none;
}

.media-big-play-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 58px;
  height: 58px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 18px rgba(210, 50, 90, .65));
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), filter .28s ease;
  animation: bigPlayPulse 2.4s ease-in-out infinite;
}

.media-big-play-btn:hover {
  transform: scale(1.14);
  filter: drop-shadow(0 6px 26px rgba(210, 50, 90, .9));
  animation-play-state: paused;
}

.media-big-play-btn svg {
  width: 58px;
  height: 58px;
}

/* ── Controls bar ── */
.media-video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .32rem .5rem;
  background: linear-gradient(transparent, rgba(16, 4, 12, .82));
  border-radius: 0 0 12px 12px;
  z-index: 10;
  opacity: 0;
  transition: opacity .28s ease;
}

.media-video-inner:hover .media-video-controls,
.media-video-inner.controls-visible .media-video-controls {
  opacity: 1;
}

/* Control buttons */
.vc-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 200, 218, .9);
  transition: color .2s, transform .2s;
  flex-shrink: 0;
  touch-action: manipulation;
}

.vc-btn:hover {
  color: #fff;
  transform: scale(1.18);
}

.vc-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.vc-hidden {
  display: none !important;
}

/* Progress bar */
.vc-progress-wrap {
  flex: 1;
  padding: 6px 0;
  cursor: pointer;
  position: relative;
}

.vc-progress-bg {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .18);
  border-radius: 2px;
  overflow: hidden;
  transition: height .2s ease;
}

.vc-progress-wrap:hover .vc-progress-bg {
  height: 5px;
}

.vc-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff4d78, #c084fc);
  border-radius: 2px;
  transition: width .1s linear;
}

/* Time label */
.vc-time {
  font-size: .6rem;
  color: rgba(255, 200, 218, .8);
  letter-spacing: .04em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}

/* Video caption label (top bar) */
.media-video-label {
  position: absolute;
  top: .42rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .65rem;
  color: rgba(255, 210, 228, .8);
  background: rgba(30, 6, 20, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: .18rem .52rem;
  border-radius: 20px;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}

/* ── Placeholder (no video) ── */
.media-video-wrap.no-media {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 100, 140, .3);
  font-size: 2rem;
}

/* =====================================================
   KEYFRAMES
   ===================================================== */
@keyframes bigPlayPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.07); }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Mobile — stack vertically */
@media (max-width: 520px) {
  .media-showcase {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .media-photo-hero,
  .media-video-wrap {
    aspect-ratio: 1 / 1;
  }

  /* Caption always visible on touch (no hover) */
  .media-photo-caption {
    transform: translateY(0);
  }
}

/* Landscape phone */
@media (max-height: 520px) and (orientation: landscape) {
  .media-showcase {
    gap: .55rem;
    margin: .9rem 0 .8rem;
  }

  .media-photo-hero,
  .media-video-wrap {
    aspect-ratio: 1 / 1;
  }
}