.academy-native { margin: clamp(54px, 8vw, 96px) 0 34px; }
.academy-native__tabs { display: flex; gap: 8px; margin: 24px 0 22px; border-bottom: 1px solid var(--aidc-border-subtle); }
.academy-native__tab { min-height: 40px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--aidc-text-secondary); font: inherit; font-weight: 700; cursor: pointer; }
.academy-native__tab + .academy-native__tab { margin-left: 20px; }
.academy-native__tab:hover, .academy-native__tab.is-active { color: var(--aidc-text-primary); }
.academy-native__tab.is-active { border-bottom-color: var(--aidc-pink-500); }
.academy-native__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); gap: 18px; }
.academy-native-card { min-width: 0; color: var(--aidc-text-primary); text-decoration: none; }
.academy-native-card__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--aidc-border-subtle); border-radius: 12px; background: radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--aidc-pink-500) 28%, transparent), transparent 35%), linear-gradient(145deg, color-mix(in srgb, var(--aidc-pink-500) 8%, var(--aidc-bg-page)), var(--aidc-bg-page)); box-shadow: var(--aidc-shadow-card); }
.academy-native-card__cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(8, 10, 18, .52)); opacity: 0; transition: opacity .18s ease; }
.academy-native-card:hover .academy-native-card__cover::after { opacity: 1; }
.academy-native-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .24s ease; }
.academy-native-card:hover .academy-native-card__cover img { transform: scale(1.025); }
.academy-native-card__duration { position: absolute; right: 8px; bottom: 8px; z-index: 1; min-height: 23px; padding: 3px 7px; border-radius: 6px; background: rgba(10, 12, 18, .82); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; }
.academy-native-card__body { padding: 10px 2px 2px; }
.academy-native-card__tag { display: block; color: var(--aidc-pink-500); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.academy-native-card h3 { display: -webkit-box; margin: 5px 0 0; overflow: hidden; font-size: 15px; line-height: 1.28; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.academy-native-card__meta { min-height: 16px; margin-top: 5px; color: var(--aidc-text-secondary); font-size: 12px; }
@media (max-width: 640px) { .academy-native__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .academy-native-card h3 { font-size: 14px; } }

/* Keep the video library visible from first paint; show a small, stable loading line. */
.academy-native__status { margin: 12px 0 20px; color: var(--aidc-text-secondary); font-size: 14px; }
.academy-native__status[hidden], .academy-native__grid[hidden] { display: none; }
.academy-native-card__cover--missing { display: grid; place-items: center; }
.academy-native-card__preview-state { max-width: 80%; padding: 12px; color: var(--aidc-text-secondary); font-size: 12px; line-height: 1.35; text-align: center; }

/* The landing page previews exactly two resolved CSS grid rows. The complete
   catalog uses the same cards and data contract at /academy/videos/. */
.academy-native-card[hidden] { display: none !important; }
.academy-native__more[hidden] { display: none !important; }
.academy-native__more {
  display: table;
  margin: 26px auto 0;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid var(--aidc-pink-500);
  border-radius: 12px;
  background: color-mix(in srgb, var(--aidc-pink-500) 9%, transparent);
  color: var(--aidc-pink-500);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.academy-native__more:hover,
.academy-native__more:focus-visible {
  background: color-mix(in srgb, var(--aidc-pink-500) 15%, transparent);
  outline-offset: 3px;
}
.academy-native__back {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--aidc-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.academy-native__back:hover { color: var(--aidc-pink-500); }
.academy-video-catalog-page .academy-native { margin-top: clamp(30px, 5vw, 68px); }