/* ==========================================================================
   Playlist Push — blog
   --------------------------------------------------------------------------
   Loaded only on /blog/* (see BlogPost.astro and BlogArchive.astro), on top of
   main.css. Two jobs:

     1. the blog's own furniture — index grid, post header, archives
     2. the `kg-*` classes that come baked into Ghost's rendered HTML

   Ghost's frontend is no longer served, so nothing else styles those cards. The
   set below is the set actually used across the 201 posts and pages, counted
   from the Content API rather than copied wholesale from a Ghost theme.
   ========================================================================== */

.blog-body { background: #fff; }

.container-narrow { max-width: 760px; }

/* The header is `position: fixed` and 76px tall, so the top padding has to clear
   it before it buys any breathing room — at 56px the content was sliding under
   the nav. The marketing pages do the same thing via `.hero { padding-top: 76px }`. */
.blog-main { padding: 124px 0 96px; }

/* ---- Archive header ---- */
.blog-header { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.blog-title {
  font-size: 46px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}
.blog-intro { margin-top: 14px; font-size: 19px; color: #4a5a72; }
.blog-empty { text-align: center; color: #4a5a72; padding: 48px 0; }

/* ---- Post grid ---- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
}

.post-card { display: flex; flex-direction: column; }
.post-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--gray-bg);
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gray-bg), var(--gray-line));
}
.post-card-body { padding-top: 16px; display: flex; flex-direction: column; flex: 1; }
.post-card-tag {
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.post-card-tag:hover { text-decoration: underline; }
.post-card-title { margin-top: 8px; font-size: 20px; line-height: 1.3; font-weight: 650; }
.post-card-title a { color: var(--navy); text-decoration: none; }
.post-card-title a:hover { color: var(--red); }
.post-card-excerpt {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #4a5a72;
  /* Cards sit on a grid; an unclamped Ghost excerpt runs to 500 characters and
     drags its whole row taller. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-meta { margin-top: auto; padding-top: 12px; font-size: 13.5px; color: #7a879b; }

/* Pagination is styled in main.css — Pagination.astro is shared with /reviews,
   which does not load this stylesheet. */

/* ---- Single post ---- */
.post-header { padding-top: 8px; text-align: center; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.post-tags a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.post-tags a:hover { text-decoration: underline; }
.post-title {
  margin-top: 14px;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}
.post-lede { margin-top: 16px; font-size: 20px; line-height: 1.5; color: #4a5a72; }
.post-meta { margin-top: 18px; font-size: 14.5px; color: #7a879b; }
.post-meta a { color: var(--navy); text-decoration: none; font-weight: 550; }
.post-meta a:hover { color: var(--red); }

.post-feature { margin: 40px auto 0; max-width: 1040px; padding: 0 24px; }
.post-feature img { width: 100%; height: auto; border-radius: var(--r-md); }
.post-feature figcaption,
.post-content figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #7a879b;
}
.post-content figcaption a { color: inherit; }

/* ---- Article body ----
   Everything below styles HTML that Ghost produced, so the selectors follow
   Ghost's markup rather than this site's conventions. */
.post-content { margin-top: 48px; font-size: 18.5px; line-height: 1.65; color: #1b2333; }
.post-content > * + * { margin-top: 1.3em; }

.post-content h2,
.post-content h3,
.post-content h4 {
  color: var(--navy);
  font-weight: 680;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.post-content h2 { margin-top: 1.9em; font-size: 31px; }
.post-content h3 { margin-top: 1.7em; font-size: 24px; }
.post-content h4 { margin-top: 1.5em; font-size: 20px; }

.post-content a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.post-content a:hover { color: var(--navy); }

.post-content ul,
.post-content ol { padding-left: 1.35em; }
.post-content li + li { margin-top: .5em; }

/* `height: auto` is load-bearing. Ghost writes real `width`/`height` attributes
   on its images, and those attributes are presentational hints that set the CSS
   `width` and `height` properties. Overriding only the width below leaves the
   height hint standing, and a 964x739 screenshot renders 712x739 — stretched
   vertically. Ghost's own theme sets this; without its stylesheet we must too. */
.post-content img { border-radius: var(--r-sm); height: auto; }

.post-content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--red);
  font-size: 21px;
  line-height: 1.5;
  color: var(--navy);
}
.post-content .kg-blockquote-alt {
  border-left: 0;
  padding: 0;
  text-align: center;
  font-style: italic;
  color: #4a5a72;
}

.post-content hr { margin: 2.6em 0; border: 0; border-top: 1px solid var(--gray-line); }

.post-content code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--gray-bg);
  border-radius: 6px;
  padding: .15em .4em;
}
.post-content pre {
  background: var(--navy);
  color: #e7edf7;
  padding: 20px 22px;
  border-radius: var(--r-sm);
  overflow-x: auto;
}
.post-content pre code { background: none; padding: 0; color: inherit; }

.post-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.post-content th,
.post-content td { border: 1px solid var(--gray-line); padding: 10px 12px; text-align: left; }
.post-content th { background: var(--gray-bg); font-weight: 600; }

/* ---- Ghost cards ----
   `kg-width-wide` and `kg-width-full` are how an editor breaks an image out of
   the text column. The column is 760px inside a padded container, so the wider
   sizes are done with negative margins rather than a viewport unit — `100vw`
   ignores the scrollbar and causes horizontal scroll on Windows. */
.post-content .kg-card { margin-top: 2em; margin-bottom: 2em; }
.post-content figure { margin-left: 0; margin-right: 0; }

.post-content .kg-width-wide { margin-left: -80px; margin-right: -80px; }
.post-content .kg-width-full { margin-left: -80px; margin-right: -80px; }
.post-content .kg-image { width: 100%; }
.post-content .kg-align-center { text-align: center; }
.post-content .kg-align-left { text-align: left; }

/* Embeds — 165 of them, mostly YouTube and Spotify. Ghost emits a bare iframe
   with width/height attributes, which would otherwise overflow the column. */
.post-content .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.post-content .kg-embed-card iframe { max-width: 100%; border: 0; }
.post-content iframe[src*="youtube"],
.post-content iframe[src*="youtu.be"],
.post-content iframe[src*="vimeo"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: var(--r-sm);
}
.post-content iframe[src*="spotify"] { width: 100%; border-radius: var(--r-sm); }

/* Button card */
.post-content .kg-button-card { display: flex; justify-content: center; }
.post-content .kg-button-card.kg-align-left { justify-content: flex-start; }
.post-content .kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.post-content .kg-btn:hover { background: #ef5d60; color: #fff; transform: translateY(-2px); }

/* Bookmark card */
.post-content .kg-bookmark-card a.kg-bookmark-container {
  display: flex;
  border: 1px solid var(--gray-line);
  border-radius: var(--r-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.post-content .kg-bookmark-container:hover { border-color: var(--navy); }
.post-content .kg-bookmark-content { flex: 1; padding: 20px; min-width: 0; }
.post-content .kg-bookmark-title { font-weight: 650; color: var(--navy); }
.post-content .kg-bookmark-description {
  margin-top: 6px;
  font-size: 15px;
  color: #4a5a72;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-content .kg-bookmark-metadata {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #7a879b;
}
.post-content .kg-bookmark-icon { width: 18px; height: 18px; border-radius: 4px; }
.post-content .kg-bookmark-thumbnail { flex: 0 0 33%; max-height: 200px; }
.post-content .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.post-content .kg-bookmark-author::after { content: "·"; margin: 0 6px; }

/* Gallery — one post uses it, six images. */
.post-content .kg-gallery-container { display: flex; flex-direction: column; gap: 10px; }
.post-content .kg-gallery-row { display: flex; gap: 10px; }
.post-content .kg-gallery-image { flex: 1; }
.post-content .kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }

/* Video card — a single post. Ghost's own player JS is not carried over, so the
   markup falls back to the browser's native controls: the <video> element is
   shown and Ghost's custom chrome is hidden. */
.post-content .kg-video-card video { width: 100%; border-radius: var(--r-sm); }
.post-content .kg-video-overlay,
.post-content .kg-video-player-container,
.post-content .kg-video-hide { display: none !important; }

/* ---- "Read more" ---- */
.post-related {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--gray-line);
}
.post-related-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy);
  margin-bottom: 28px;
}
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.related-grid .post-card-title { font-size: 17.5px; }

/* ---- Reviews under a post ----
   The thread itself (.review-thread / .review-item / .stars-rating) is styled in
   main.css, which /reviews shares. Only the wrapper is blog-specific, and it
   deliberately matches .post-related above rather than the .review-card
   treatment from the marketing sections: that one has a drop shadow, a hover
   lift and a 120px decorative quote glyph, and reads as an advert. Under an
   article these should read as a comment thread. */
.post-reviews {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--gray-line);
}
.post-reviews-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy);
}
.post-reviews-more {
  display: inline-block;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-line);
  padding-bottom: 2px;
}
.post-reviews-more:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .post-grid,
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-title { font-size: 38px; }
  .post-title { font-size: 36px; }
  .post-content .kg-width-wide,
  .post-content .kg-width-full { margin-left: 0; margin-right: 0; }
}

@media (max-width: 640px) {
  .blog-main { padding: 108px 0 64px; }
  .post-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Two-up survives to 640px, but below it each card is ~150px wide and the
     titles wrap to five lines. One column, same as the archives. */
  .related-grid { grid-template-columns: 1fr; gap: 28px; }
  .post-related,
  .post-reviews { margin-top: 56px; padding-top: 40px; }
  .post-reviews-title { font-size: 23px; }
  .review-item-body { font-size: 16px; }
  .blog-title { font-size: 32px; }
  .post-title { font-size: 29px; }
  .post-lede { font-size: 18px; }
  .post-content { font-size: 17.5px; }
  .post-content h2 { font-size: 26px; }
  .post-content h3 { font-size: 21px; }
  .post-content .kg-bookmark-container { flex-direction: column-reverse; }
  .post-content .kg-bookmark-thumbnail { flex: none; max-height: 180px; width: 100%; }
}