// ---------------------------------------------------------------------------
// VideoTutorialsModal
// Two-panel modal: left list + right player.
// ModalFoundation provides the backdrop, portal, and animation.
// List-panel styles live in VideoList/style.scss.
// Player/skeleton/error styles live in VideoPlayer/style.scss.
// ---------------------------------------------------------------------------

.tutorials-modal {
  display: flex;
  flex-direction: column;
  background: var(--bg-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 30px 0 rgb(0 0 0 / 12%);
  width: 1014px;
  max-width: 95vw;
  height: 625px;
  max-height: 95vh;
  overflow: hidden;
}

// ---------------------------------------------------------------------------
// Header
// ---------------------------------------------------------------------------

.tutorials-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 52px;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-xl);
  border-bottom: var(--border-1) solid var(--border-default);
  flex-shrink: 0;
}

.tutorials-modal-title {
  font: var(--t-body-primary-600);
  color: var(--fg-default);
  margin: 0;
}

.tutorials-modal-close {
  flex-shrink: 0;
}

// ---------------------------------------------------------------------------
// Body: two panels side by side
// ---------------------------------------------------------------------------

.tutorials-modal-body {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: var(--spacing-xl);
  gap: var(--spacing-2xl);
}

// ---------------------------------------------------------------------------
// Right panel: video player + info (fills remaining space)
// ---------------------------------------------------------------------------

.tutorials-modal-player {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  gap: var(--spacing-2xl);
}

// iframe wrapper maintains 16/9 aspect ratio
.tutorials-modal-iframe-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-emphasis);
  flex-shrink: 0;

  iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;

    &:not(.loaded) {
      display: none;
    }
  }
}

// ---------------------------------------------------------------------------
// Video info: title, description, links
// ---------------------------------------------------------------------------

.tutorials-modal-video-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.tutorials-modal-video-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.tutorials-modal-video-title {
  font: var(--t-body-primary-600);
  color: var(--fg-faded);
  margin: 0;
}

.tutorials-modal-video-description {
  font: var(--t-body-sm-400);
  color: var(--fg-muted);
  margin: 0;
}

.tutorials-modal-video-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: 0;
}

.tutorials-modal-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  font: var(--t-body-sm-400);

  .icon path {
    fill: var(--fg-action);
  }

  span {
    color: inherit;
  }

  @include animate(opacity);

  &:hover {
    opacity: 0.8;
  }

  &--internal {
    color: var(--fg-action);
  }

  &--external {
    color: var(--fg-action);
  }
}
