/* Help and guides page, and the video drawer. */
@layer components {
  .help-page {
    margin-inline: auto;
    max-inline-size: 64rem;
    padding: var(--space-8) var(--space-5);

    @media (max-width: 768px) { padding: var(--space-5) var(--space-3); }
  }
  .help-header {
    margin-block-end: var(--space-10);

    h1 {
      color: oklch(var(--oklch-ink-darkest));
      font-size: 2rem;
      font-weight: 700;
      margin-block-end: var(--space-2);

      @media (max-width: 768px) { font-size: 1.75rem; }
      @media (max-width: 640px) { font-size: 1.5rem; }
    }
  }
  .help-intro {
    color: oklch(var(--oklch-ink-mid));
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0;
  }
  .help-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }
  .help-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);

    h2 {
      color: oklch(var(--oklch-ink-darkest));
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0;

      @media (max-width: 768px) { font-size: 1.25rem; }
    }
  }
  .help-section-description {
    color: oklch(var(--oklch-ink-mid));
    font-size: 1rem;
    margin: 0;
  }

  .guides-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    @media (max-width: 768px) { grid-template-columns: 1fr; }
  }
  .guide-card {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;

    &:hover {
      border-color: oklch(var(--oklch-primary) / 0.5);
      box-shadow: 0 12px 28px oklch(var(--oklch-ink-darkest) / 0.08);
      transform: translateY(-4px);
    }
  }
  .guide-thumbnail {
    aspect-ratio: 16 / 9;
    background: oklch(var(--oklch-canvas));
    inline-size: 100%;
    overflow: hidden;
  }

  .video-embed {
    background: none;
    block-size: 100%;
    border: none;
    cursor: pointer;
    display: block;
    inline-size: 100%;
    padding: 0;
    position: relative;

    iframe,
    video {
      block-size: 100%;
      border: none;
      display: block;
      inline-size: 100%;
      pointer-events: none;
    }
    &:hover .video-play-overlay {
      background: oklch(var(--oklch-ink-darkest) / 0.8);
      transform: translate(-50%, -50%) scale(1.08);
    }
  }
  .video-play-overlay {
    align-items: center;
    background: oklch(var(--oklch-ink-darkest) / 0.55);
    block-size: 3.5rem;
    border-radius: var(--radius-full);
    color: oklch(var(--oklch-canvas));
    display: flex;
    inline-size: 3.5rem;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    justify-content: center;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: background 150ms ease, transform 150ms ease;
  }

  /* Video drawer. Opening it pads the body so the page reflows beside it. */
  html {
    --video-drawer-width: min(28rem, 100vw);

    &.video-drawer-wide { --video-drawer-width: min(48rem, 100vw); }
    &.video-drawer-open body {
      padding-inline-end: var(--video-drawer-width);
      transition: padding-inline-end 200ms ease;
    }
  }
  .video-drawer {
    background: oklch(var(--oklch-canvas-raised));
    block-size: 100vh;
    border-inline-start: 1px solid oklch(var(--oklch-border));
    box-shadow: -12px 0 28px oklch(var(--oklch-ink-darkest) / 0.15);
    display: flex;
    flex-direction: column;
    inline-size: var(--video-drawer-width);
    inset-block-start: 0;
    inset-inline-end: 0;
    position: fixed;
    transition: inline-size 200ms ease;
    z-index: 100;

    &[hidden] { display: none; }
  }
  .video-drawer-header {
    align-items: center;
    border-block-end: 1px solid oklch(var(--oklch-border));
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    padding: var(--space-4);

    h2 {
      color: oklch(var(--oklch-ink-darkest));
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
    }
  }
  .video-drawer-header-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--space-1);
  }
  .video-drawer-expand,
  .video-drawer-close {
    align-items: center;
    background: transparent;
    block-size: 2rem;
    border: none;
    border-radius: var(--radius-md);
    color: oklch(var(--oklch-ink-mid));
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    inline-size: 2rem;
    justify-content: center;

    &:hover { background: oklch(var(--oklch-canvas)); }
  }
  .video-drawer-close {
    font-size: 1.5rem;
    line-height: 1;
  }
  .video-drawer-body {
    flex: 1;
    padding: var(--space-4);

    video,
    iframe {
      aspect-ratio: 16 / 9;
      block-size: auto;
      border: none;
      border-radius: var(--radius-md);
      display: block;
      inline-size: 100%;
    }
  }

  .guide-placeholder {
    align-items: center;
    background: linear-gradient(135deg, oklch(var(--oklch-primary) / 0.08), oklch(var(--oklch-canvas)));
    block-size: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    inline-size: 100%;
    justify-content: center;

    p {
      color: oklch(var(--oklch-ink-mid));
      font-size: 0.875rem;
      margin: 0;
    }
  }
  .placeholder-icon {
    font-size: 3rem;
    opacity: 0.5;
  }
  .guide-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .guide-header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;

    h3 {
      color: oklch(var(--oklch-ink-darkest));
      font-size: 1.0625rem;
      font-weight: 600;
      margin: 0;
    }
  }
  .guide-duration {
    background: oklch(var(--oklch-canvas));
    border-radius: var(--radius-full);
    color: oklch(var(--oklch-ink-mid));
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
  }
  .guide-description {
    color: oklch(var(--oklch-ink-mid));
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
  }
  .guide-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    .btn {
      font-size: 0.875rem;
      padding: var(--space-2) var(--space-3);
      text-align: center;
    }
  }

  .help-footer {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-lg);
    margin-block-start: var(--space-8);
    padding: var(--space-6);
    text-align: center;

    h2 {
      color: oklch(var(--oklch-ink-darkest));
      font-size: 1.25rem;
      font-weight: 600;
      margin: 0 0 var(--space-2);
    }
    p {
      color: oklch(var(--oklch-ink-mid));
      font-size: 1rem;
      line-height: 1.6;
      margin: 0;
    }
  }
}