/* ===========================================================
   LEAK blog — listing and article styles
   Same layout as the original portfolio blog (single-column
   reading layout, divided post list, prose column), restyled
   with the shadcn tokens defined in site.css.
   =========================================================== */

:root {
  --blog-ink: hsl(var(--foreground));
  --blog-muted: hsl(var(--muted-foreground));
  --blog-line: hsl(var(--border));
  --blog-bg-soft: hsl(var(--muted));
  --blog-accent: hsl(var(--foreground));
}

/* Push content below the fixed header */
.blog-page {
  padding-top: 9rem;
  color: var(--blog-ink);
}

/* Navigation / meta chrome shouldn't be text-selectable
   (article title, lead and body stay selectable for copying). */
.main-header,
.main-footer,
.post-header__back,
.post-header__meta,
.post-footer {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ---------- Shared narrow reading container ---------- */
.blog-container {
  max-width: 78rem;
  width: 90%;
  margin: 0 auto;
}

/* ===========================================================
   LISTING PAGE
   =========================================================== */

.blog-hero {
  padding: 7rem 0 4rem 0;
  border-bottom: 1px solid var(--blog-line);
}

.blog-hero__eyebrow {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blog-muted);
  display: block;
  margin-bottom: 1.6rem;
}

.blog-hero__title {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.blog-hero__subtitle {
  margin-top: 2rem;
  font-size: 2rem;
  line-height: 1.6;
  color: var(--blog-muted);
  max-width: 56rem;
}

/* ---------- Post list ---------- */
.blog-list {
  padding: 5rem 0 8rem 0;
  min-height: 85vh;
}

/* A card is a self-contained surface: bordered, padded, and it lifts on hover.
   Text column left, framed thumbnail right; stacks image-first on phones. */
.blog-post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30rem;
  gap: 3rem;
  align-items: center;
  padding: 1.8rem;
  border: 1px solid var(--blog-line);
  border-radius: calc(var(--radius) + 0.6rem);
  background: hsl(var(--card));
  transition: transform 0.2s ease, border-color 0.2s ease,
    background-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-post-card + .blog-post-card {
  margin-top: 2rem;
}

.blog-post-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--foreground) / 0.22);
  background: hsl(var(--accent) / 0.5);
  box-shadow: 0 8px 24px -14px hsl(0 0% 0% / 0.3);
}

.blog-post-card__body {
  min-width: 0;
  padding: 0.8rem 0.6rem 0.8rem 1.4rem;
}

/* Thumbnail. Border and radius live on the wrapper so the hover zoom stays
   clipped inside the rounded frame. */
.blog-post-card__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--blog-bg-soft);
}

.blog-post-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.blog-post-card:hover .blog-post-card__media img {
  transform: scale(1.05);
}

/* Category chip, laid over the image so it reads on any artwork */
.blog-post-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  color: #fafafa;
  background: hsl(0 0% 0% / 0.6);
  border: 1px solid hsl(0 0% 100% / 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.blog-post-card__meta {
  font-size: 1.35rem;
  color: var(--blog-muted);
  letter-spacing: 0.3px;
  margin-bottom: 1.1rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
}

.blog-post-card__dot {
  opacity: 0.6;
}

/* Card footer: who wrote it on the left, the call to action on the right */
.blog-post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.blog-post-card__author {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--blog-ink);
}

.blog-post-card__author img {
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--blog-bg-soft);
  border: 1px solid var(--blog-line);
}

.blog-post-card__title {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.8px;
  margin-bottom: 1.1rem;
}

.blog-post-card__excerpt {
  font-size: 1.7rem;
  line-height: 1.65;
  color: var(--blog-muted);
  /* Clamped so every card keeps the same rhythm regardless of lead length */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-post-card__more {
  display: inline-block;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.blog-post-card__more::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.2s ease;
}

.blog-post-card:hover .blog-post-card__more::after {
  transform: translateX(3px);
}

/* Empty state (no published posts yet) */
.blog-empty {
  padding: 7rem 2.4rem;
  border: 1px dashed var(--blog-line);
  border-radius: calc(var(--radius) + 0.6rem);
  text-align: center;
}

.blog-empty__title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--blog-ink);
}

.blog-empty__hint {
  margin-top: 1rem;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--blog-muted);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================================================
   SINGLE POST
   =========================================================== */

/* Back link sits above the cover, so navigation still comes first */
.post-topbar {
  padding: 1.5rem 0 2.6rem 0;
}

.post-header {
  padding: 3.5rem 0 3.5rem 0;
}

.post-header__back {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--blog-muted);
  letter-spacing: 0.2px;
  transition: color 0.15s ease;
}

.post-header__back::before {
  content: "\2190 ";
}

.post-header__back:hover {
  color: var(--blog-ink);
}

.post-header__meta {
  font-size: 1.4rem;
  color: var(--blog-muted);
  letter-spacing: 0.3px;
  margin-bottom: 1.8rem;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}

.post-header__tag {
  display: inline-flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 500;
  padding: 0.3rem 1.1rem;
  border: 1px solid var(--blog-line);
  background: hsl(var(--secondary));
  color: var(--blog-ink);
  border-radius: 100px;
}

.post-header__title {
  font-size: 4.6rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.post-header__subtitle {
  margin-top: 1.4rem;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: hsl(var(--foreground) / 0.75);
}

.post-header__lead {
  margin-top: 2.2rem;
  font-size: 2.1rem;
  line-height: 1.6;
  color: var(--blog-muted);
}

/* ---------- Byline (who wrote it) ---------- */
.post-byline {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.8rem;
  width: -moz-fit-content;
  width: fit-content;
}

.post-byline__avatar {
  width: 4.4rem;
  height: 4.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--blog-bg-soft);
  border: 1px solid var(--blog-line);
}

.post-byline__meta {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.post-byline__name {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--blog-ink);
}

.post-byline__handle {
  font-size: 1.4rem;
  color: var(--blog-muted);
}

a.post-byline:hover .post-byline__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.post-byline:hover .post-byline__avatar {
  border-color: hsl(var(--foreground) / 0.35);
}

/* Lead image: the first thing on the article. The horizontal `auto` is
   restated here because a shorthand `margin` in this rule would otherwise
   override the centring from .blog-container, pushing the image out of
   the reading column while the text stays centred. */
.post-cover {
  margin: 0 auto;
}

.post-cover img {
  width: 100%;
  /* height:auto keeps the ratio — the width/height attributes on the tag are
     there to reserve space and avoid layout shift, not to size the image. */
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border: 1px solid var(--blog-line);
  border-radius: calc(var(--radius) + 0.4rem);
  display: block;
}

/* ---------- Article prose ----------
   Spacing follows the shadcn/ui typography scale: 24px between blocks
   (their mt-6), 40px before an h2 (mt-10), 32px before an h3 (mt-8).
   The selector has to reach into .blog-container, because that is where the
   content blocks actually live. */
.post-body {
  padding: 1rem 0 5rem 0;
  font-size: 1.8rem;
  line-height: 1.75;
  color: hsl(var(--foreground) / 0.9);
}

.post-body .blog-container > * + * {
  margin-top: 2.4rem;
}

.post-body .blog-container > *:first-child {
  margin-top: 0;
}

/* Headings need more air than the general rhythm gives them. These carry the
   same specificity as the rule above, so they have to be spelled out at this
   depth to win. */
.post-body .blog-container > h2 {
  margin-top: 4rem;
}

.post-body .blog-container > h3 {
  margin-top: 3.2rem;
}

.post-body h2 {
  position: relative;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.9px;
  color: var(--blog-ink);
  margin-top: 4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--blog-line);
}


.post-body h3 {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--blog-ink);
  margin-top: 3.2rem;
}

.post-body a {
  color: var(--blog-accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--muted-foreground) / 0.6);
}

.post-body a:hover {
  text-decoration-color: currentColor;
}

.post-body ul,
.post-body ol {
  padding-left: 2.4rem;
}

.post-body ul {
  list-style: disc;
}

.post-body ol {
  list-style: decimal;
}

.post-body li::marker {
  color: var(--blog-muted);
}

.post-body li + li {
  margin-top: 0.8rem;
}

.post-body blockquote {
  border-left: 2px solid var(--blog-line);
  padding-left: 2.4rem;
  color: var(--blog-muted);
  font-style: italic;
}

/* In-body images / screenshots */
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  margin: 2.6rem auto;
  border: 1px solid var(--blog-line);
}

.post-body figure {
  margin: 2.6rem 0;
  text-align: center;
}

.post-body figure img {
  margin: 0 auto;
}

.post-body figure figcaption {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: var(--blog-muted);
  text-align: center;
}

/* Inline code */
.post-body code {
  font-family: "Geist Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", Menlo, monospace;
  font-size: 0.85em;
  background: var(--blog-bg-soft);
  border: 1px solid var(--blog-line);
  border-radius: calc(var(--radius) - 0.4rem);
  padding: 0.2rem 0.6rem;
}

/* Code block — dark in both themes, as in the shadcn docs */
.post-body pre {
  background: hsl(var(--code-bg));
  color: hsl(var(--code-fg));
  border: 1px solid hsl(var(--code-border));
  border-radius: var(--radius);
  padding: 2.2rem 2.4rem;
  overflow-x: auto;
  font-size: 1.55rem;
  line-height: 1.6;
}

.post-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Copy button (injected by blog.js, wraps each <pre> in .code-block) */
.post-body .code-block {
  position: relative;
}

.code-copy-btn {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d6d6d6;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(var(--radius) - 0.3rem);
  padding: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.code-copy-btn svg {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
}

.post-body .code-block:hover .code-copy-btn,
.code-copy-btn:focus-visible {
  opacity: 1;
}

.code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.code-copy-btn.copied {
  opacity: 1;
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.5);
}

/* Touch devices have no hover — keep the button visible */
@media (hover: none) {
  .code-copy-btn {
    opacity: 1;
  }
}

/* Tables — the wrapper scrolls so a wide table never widens the page */
.post-body .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.6rem;
}

.post-body th,
.post-body td {
  border: 1px solid var(--blog-line);
  padding: 1.1rem 1.4rem;
  text-align: left;
}

.post-body th {
  background: var(--blog-bg-soft);
  font-weight: 600;
}

/* Supporting line under a section heading: sits close to it, not adrift
   halfway between the heading and the content below. */
.post-heading-sub {
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--blog-muted);
}

.post-body .blog-container > h2 + .post-heading-sub,
.post-body .blog-container > h3 + .post-heading-sub {
  margin-top: 1rem;
}

/* Deliberate blank space between blocks */
.post-space {
  height: 3rem;
}

.post-space--sm {
  height: 1rem;
}

.post-space--lg {
  height: 6rem;
}

/* ---------- Post footer ---------- */
.post-footer {
  border-top: 1px solid var(--blog-line);
  padding: 4rem 0 7rem 0;
}

.post-footer__back {
  font-size: 1.6rem;
  font-weight: 600;
}

.post-footer__back::before {
  content: "\2190 ";
}

/* Translation notice shown when a post exists in the other language */
.post-footer__translation {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  color: var(--blog-muted);
}

.post-footer__translation a {
  color: var(--blog-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===========================================================
   Responsive
   =========================================================== */
/* Tablet: a narrower thumbnail keeps the text column readable */
@media (max-width: 56.25em) {
  .blog-post-card {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 2.2rem;
  }

  .blog-post-card__body {
    padding-left: 1rem;
  }

  .blog-post-card__title {
    font-size: 2.5rem;
  }
}

@media (max-width: 37.5em) {
  /* Stack, image first */
  .blog-post-card {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 1.4rem;
  }

  .blog-post-card__media {
    order: -1;
  }

  .blog-post-card__body {
    padding: 0 0.6rem 0.8rem 0.6rem;
  }

  .blog-post-card__excerpt {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .blog-hero__title {
    font-size: 3.8rem;
  }

  .post-header__title {
    font-size: 3.4rem;
  }

  .blog-post-card__title {
    font-size: 2.6rem;
  }

  .post-body {
    font-size: 1.75rem;
  }
}