/* Blog list, posts and the 404 page: one readable column instead of the bento grid */
.page {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--spacing-md);
}

.page-card {
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) var(--spacing-lg);

  @media (width >= 640px) {
    padding: var(--spacing-xl);
  }
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);

  & a {
    color: var(--clr-main-text);
    text-underline-offset: 3px;
  }
}

.page-title {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
  line-height: 1.15;
  text-wrap: balance;
}

.post-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--clr-text-muted);
}

.article-back {
  margin-top: 0;
}

.article-lead {
  font-size: 1.15rem;
  color: var(--clr-text-muted);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  font-size: 1.05rem;
  line-height: 1.75;

  & h2,
  & h3,
  & h4 {
    margin-top: var(--spacing-md);
    line-height: 1.3;
    scroll-margin-top: var(--spacing-lg);
  }

  & h2 { font-size: 1.5rem; }
  & h3 { font-size: 1.25rem; }
  & h4 { font-size: 1.05rem; }

  & a {
    color: var(--clr-main-text);
    text-underline-offset: 3px;
  }

  & :not(pre) > code {
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--clr-code-bg);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
  }

  & blockquote {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-style: italic;
    color: var(--clr-text-muted);
    background: var(--clr-main-soft);
    border-left: 4px solid var(--clr-main);
    border-radius: 0 calc(var(--border-radius) - 4px) calc(var(--border-radius) - 4px) 0;
  }

  & ul,
  & ol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: var(--spacing-lg);
  }

  & li::marker {
    color: var(--clr-main-text);
    font-weight: 600;
  }

  & figure {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  & img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--clr-border);
    border-radius: calc(var(--border-radius) - 4px);
  }

  & figcaption {
    font-size: 0.9rem;
    text-align: center;
    color: var(--clr-text-muted);
  }
}

.code-block {
  position: relative;
  background: var(--clr-code-bg);
  border: 1px solid var(--clr-border);
  border-radius: calc(var(--border-radius) - 4px);

  &[data-lang]::before {
    content: attr(data-lang) / "";
    position: absolute;
    top: 6px;
    right: var(--spacing-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
  }

  & pre {
    overflow-x: auto;
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    tab-size: 2;
    color: var(--clr-code-text);
  }

  &[data-lang] pre {
    padding-top: var(--spacing-lg);
  }
}

.hl-comment { color: var(--clr-code-comment); font-style: italic; }
.hl-string { color: var(--clr-code-string); }
.hl-number { color: var(--clr-code-number); }
.hl-keyword { color: var(--clr-code-keyword); }
.hl-type { color: var(--clr-code-type); }
.hl-function { color: var(--clr-code-function); }
.hl-variable { color: var(--clr-code-variable); }
.hl-property { color: var(--clr-code-property); }
.hl-meta { color: var(--clr-code-meta); }
.hl-tag { color: var(--clr-code-tag); }
.hl-attribute { color: var(--clr-code-attribute); }

/* The overview reuses the bento grid: an intro tile, the newest post wide, the rest as single tiles */
.blog-intro {
  margin-block: auto;
  font-size: 1.35rem;
  line-height: 1.4;
  text-wrap: balance;
}

.card--post {
  &:hover,
  &:has(a:focus-visible) {
    border-color: var(--clr-main);
  }

  &:has(a:focus-visible) {
    outline: 2px solid var(--clr-main);
    outline-offset: 2px;
  }

  &.card--latest .post-title {
    font-size: 1.75rem;
  }
}

.post-title {
  font-size: 1.2rem;
  line-height: 1.3;
  text-wrap: balance;

  /* The title link covers the whole tile */
  & a {
    color: inherit;
    text-decoration: none;

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

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

/* Post entries in the blog tile on the home page */
.post-list,
.post-grid {
  display: grid;
  gap: var(--spacing-sm);
  list-style: none;
}

.post-grid {
  @media (width >= 1024px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.post-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: var(--spacing-md);
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--clr-border);
  border-radius: calc(var(--border-radius) - 4px);

  &:hover {
    background: var(--clr-surface-hover);
    border-color: var(--clr-main);
  }

  & .post-date {
    font-size: 0.8rem;
  }

  & strong {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  & span {
    color: var(--clr-text-muted);
  }
}

.card-note {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Legal page: the notice as single tiles, the privacy policy as one wide tile in columns */
.card--legal-intro {
  justify-content: center;
}

.card--legal {
  & .card-title {
    text-wrap: balance;
  }
}

.legal-subtitle {
  margin-top: var(--spacing-xs);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.prose--columns {
  display: block;
  columns: 34em;
  column-gap: var(--spacing-xl);
  font-size: 1rem;

  & > * + * {
    margin-top: var(--spacing-sm);
  }

  & h3 {
    break-after: avoid;
  }

  & h3:not(:first-child) {
    margin-top: var(--spacing-lg);
  }

  & li {
    break-inside: avoid;
  }
}

/* Same idea for the legal page: title tile and six notice tiles always fill whole rows */
@media (width >= 1600px) {
  .main-grid > .card.card--legal-intro {
    grid-column: span 4;
  }
}

@media (width >= 2000px) {
  .main-grid > .card.card--legal-dispute {
    grid-column: span 3;
  }
}

@media (width >= 2400px) {
  .main-grid > .card.card--legal-intro {
    grid-column: span 5;
  }

  .main-grid > .card.card--legal-dispute {
    grid-column: span 4;
  }
}