/*
 * Media landing — choose Audio or Video. Two outlined cards centered in the
 * viewport, floating on the shared starfield (background.css).
 *
 * The card outline mirrors the public contact form (assets/css/contact.css
 * .contact-card): 1px border, 12px radius, transparent fill, soft floating
 * shadow. The label reacts on hover/focus like the contact submit button
 * (.contact-submit): text turns Steel Pink with an accent border + glow.
 *
 * Each card is an <a class="media-card warp-link">, so a click plays the shared
 * site page transition (assets/js/nav-warp.js recognises .warp-link) and then
 * navigates to the matching subfolder: /media/audio, /media/video.
 */

.media {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 140px; /* bottom clears the 100px fixed nav */
}

.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 720px;
}

/* Card ------------------------------------------------------------------- */
.media-card {
  position: relative; /* anchors the injected .nav-fx border overlay */
  flex: 1 1 260px;
  max-width: 320px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 24px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-primary);
  text-decoration: none;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

/* Hover/focus: the SAME effect as the site nav — the animated drawn border
   (assets/js/nav-hover.js injects the SVG; assets/css/nav-fx.css line-draws it)
   plus the label turning Steel Pink. No fill/glow change, matching the nav. */
.media-card:hover,
.media-card:focus-visible {
  outline: none;
  color: #cb3ed4;
}
.media-card:active {
  transform: translateY(1px);
}

/* Align the injected nav-fx border to the card's rounded outline (the nav
   default insets it for packed cells; a standalone card traces its own edge). */
.media-card .nav-fx {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.media-card .nav-fx-rect {
  rx: 12px;
  ry: 12px;
}

/* Label: the SoL brand display face (Ethnocentric), matching the nav + card
   titles. Inherits the card colour so it turns Steel Pink on hover. */
.media-card__label {
  position: relative; /* above the injected .nav-fx border overlay */
  z-index: 1;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Phone: stack the two cards. */
@media (max-width: 480px) {
  .media-grid {
    flex-direction: column;
    align-items: center;
  }
  .media-card {
    width: 100%;
    max-width: 360px;
    min-height: 200px;
  }
}