/* Project styles, layered on top of Oat.
 *
 * Everything here is either a pattern Oat has no component for, or a rule that
 * would otherwise be set inline -- from a template's class attribute or from
 * JavaScript. Templates address these with data attributes rather than utility
 * classes, so the markup stays semantic and the styling is defined once and
 * reused across the home, post, category and 404 templates.
 *
 * Uses Oat's own custom properties throughout, so it inherits the theme
 * (including dark mode) instead of hardcoding values.
 */

@layer components {
  /* Post listing, shared by the home index and category pages. */
  ul[data-post-list] {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
  }

  ul[data-post-list] > li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Breadcrumb trail on post and category pages. */
  nav[data-breadcrumbs] ol {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-small, 0.875rem);
  }

  /* Separator on the pseudo-element so it is never selected or read aloud. */
  nav[data-breadcrumbs] li + li::before {
    content: '/';
    margin-inline-end: var(--space-2);
    color: var(--faint-foreground);
  }

  /* The current page is not a link, so mark it as the quieter element. */
  nav[data-breadcrumbs] [aria-current='page'] {
    color: var(--muted-foreground);
  }

  /* Previous/next controls under a paginated listing. */
  nav[data-pagination] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  /* A post's uploaded image. */
  [data-post-media] {
    width: 100%;
    height: auto;
    margin-block: var(--space-4);
  }

  /* Secondary text: taglines, category intros, empty states. */
  [data-muted] {
    color: var(--muted-foreground);
  }

  /* The rendered body of a post. */
  [data-post-body] {
    margin-block-start: var(--space-4);
  }

  /* CodeMirror has no intrinsic height, so one has to be set somewhere.
   * editor.js used to call setSize(), which wrote an inline style onto the
   * wrapper; the size lives here instead and JS only tags which one to use. */
  .CodeMirror {
    height: 16rem;
  }

  .CodeMirror[data-editor-size='tall'] {
    height: 26rem;
  }
}

@layer components {
  /* ---- Video embeds ---------------------------------------------------- */

  /* An aspect-ratio box stops the iframe collapsing to zero height and
   * reserves space before the provider's script runs. */
  [data-embed] {
    margin-block: var(--space-6);
    width: 100%;
    max-width: 100%;
  }

  [data-embed-ratio='landscape'] { aspect-ratio: 16 / 9; }

  /* Reels, Shorts and TikToks are vertical; capping the width stops a portrait
   * video occupying the whole column. */
  [data-embed-ratio='portrait'] {
    aspect-ratio: 9 / 16;
    max-width: 24rem;
    margin-inline: auto;
  }

  [data-embed] iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-medium);
  }

  [data-embed-error] {
    color: var(--muted-foreground);
    border-inline-start: 3px solid var(--border);
    padding-inline-start: var(--space-3);
  }

  /* ---- Media in post bodies -------------------------------------------- */

  [data-post-body] :is(img, picture, video, audio) {
    max-width: 100%;
    height: auto;
  }

  [data-post-body] figure {
    margin-inline: 0;
    margin-block: var(--space-6);
  }

  [data-post-body] figcaption {
    color: var(--muted-foreground);
    font-size: var(--font-size-small, 0.875rem);
    margin-block-start: var(--space-2);
  }

  /* ---- Admin: library and picker --------------------------------------- */

  [data-media-thumb], [data-hero-thumb] {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--radius-small);
    display: block;
  }

  [data-media-grid] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--space-3);
    max-height: 60vh;
    overflow-y: auto;
  }

  [data-media-grid] button {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    cursor: pointer;
    text-align: start;
  }

  [data-media-grid] button:hover { border-color: var(--primary); }

  [data-media-grid] img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-small);
  }

  [data-media-grid] small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-foreground);
  }

  [data-media-kind] {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background-color: var(--muted);
    border-radius: var(--radius-small);
    color: var(--muted-foreground);
  }

  #media-picker { width: min(48rem, 92vw); }

  /* Resizing a large photo takes seconds with nothing else on screen, so the
   * progress panel is deliberately loud rather than a subtle status line. */
  [data-media-progress] {
    margin-block-start: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background-color: var(--muted);
  }

  [data-media-progress] progress {
    width: 100%;
    height: 0.75rem;
    display: block;
  }

  [data-media-progress] p {
    margin-block-start: var(--space-2);
    margin-block-end: 0;
  }

  [data-media-file]:disabled {
    opacity: 0.5;
    cursor: progress;
  }
}

@layer components {
  /* Stands in for the native validation bubble, which cannot be shown on the
   * display:none textarea that CodeMirror leaves behind. */
  [data-editor-error] {
    color: var(--destructive, #b00020);
    margin-block-start: var(--space-2);
  }
}