/* ===========================================
   Blog index, category pages and post header.
   Every post card leads with its feature image (title, logo, category drawing).
   =========================================== */

@layer pages {
  .blog-nav {
    margin-bottom: var(--space-10);

    .tabs__list {
      margin-bottom: 0;
    }
  }

  .post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-12) var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
      margin: 0;
    }
  }

  /* The title link covers the whole card, so the image and text are one click target */
  .post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    .post-card__image {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1200 / 630;
      margin-bottom: var(--space-2);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
    }

    .post-card__category,
    .post-card__meta {
      margin: 0;
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    .post-card__title {
      margin: 0;
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
      line-height: 1.3;
      letter-spacing: -0.01em;
      text-wrap: balance;

      a {
        color: var(--color-text);
        text-decoration: none;

        &::after {
          content: "";
          position: absolute;
          inset: 0;
        }

        &:focus-visible {
          outline: none;
        }
      }
    }

    .post-card__excerpt {
      margin: 0;
      color: var(--color-text-muted);
    }

    .post-card__status {
      font-weight: var(--font-semibold);
      color: var(--color-warning);
    }

    &:hover .post-card__title a {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }

    &:focus-within {
      outline: 3px solid var(--color-focus);
      outline-offset: 6px;
    }
  }

  .blog-empty {
    margin: 0;
    color: var(--color-text-muted);
  }

  /* Single post */
  .post-header {
    margin-bottom: var(--space-8);

    .breadcrumbs {
      margin-bottom: var(--space-8);
    }

    .post-header__admin {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-4);
      margin-bottom: var(--space-6);
      font-size: var(--text-sm);
    }

    .post-header__title {
      margin: 0;
      font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
      font-weight: 750;
      line-height: 1.12;
      letter-spacing: -0.025em;
      text-wrap: balance;
    }

    .post-header__subtitle {
      margin: var(--space-4) 0 0;
      font-size: var(--text-xl);
      line-height: 1.5;
      color: var(--color-text-muted);
      text-wrap: pretty;
    }

    .post-header__meta {
      margin: var(--space-4) 0 0;
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }
  }

  .post-feature {
    margin: 0 0 var(--space-10);

    img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1200 / 630;
      border: 1px solid var(--color-border);
    }
  }

  /* Post page body and "Keep reading". Scoped to .post-page so it wins over the older rules in marketing.css
     (same layer, loaded later) until that file is split up. */
  .post-page {
    padding: var(--space-8) var(--space-6) var(--space-16);

    .blog-post__content {
      max-width: none;
      margin: 0 0 var(--space-12);

      :not(pre) > code {
        padding: 0.12em 0.35em;
        font-size: 0.875em;
        color: var(--color-text);
        background: var(--color-gray-100);
        border-radius: var(--radius-sm);
      }
    }

    .blog-related {
      max-width: none;
      margin: 0;
      padding-top: var(--space-8);
      border-top: 2px solid var(--color-text);
    }

    .blog-related__title {
      margin: 0 0 var(--space-2);
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
      text-align: left;
    }

    .blog-related__list {
      margin: 0 0 var(--space-8);
    }

    .blog-related__item,
    .blog-related__item:last-child {
      padding: var(--space-4) 0;
      border-bottom: 1px solid var(--color-border);
    }

    .blog-related__category {
      margin: 0 0 var(--space-1);
      font-size: var(--text-sm);
      font-weight: var(--font-normal);
      letter-spacing: normal;
      text-transform: none;
      color: var(--color-text-muted);
    }

    .blog-related__link {
      text-decoration: underline;
      text-underline-offset: 0.2em;

      &:hover {
        color: var(--color-text);
        text-decoration-thickness: 2px;
      }
    }

    .blog-pagination {
      gap: var(--space-6);
      margin-top: 0;
    }

    .blog-pagination__item {
      padding: 0;
      border: 0;
      border-radius: 0;
      transition: none;

      &:hover {
        transform: none;
      }
    }

    .blog-pagination__label {
      margin-bottom: var(--space-1);
      font-size: var(--text-sm);
      letter-spacing: normal;
      text-transform: none;
    }

    .blog-pagination__title {
      color: var(--color-text);
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  @media (max-width: 640px) {
    .post-page {
      padding: var(--space-4) var(--space-4) var(--space-12);
    }
  }

  /* Code samples themselves live in components/code_blocks.css; posts give them more room */
  .post-page .code-sample {
    margin: var(--space-8) 0;
  }
}