/* Show card — used on the Shows hub grid and the homepage's "番組一覧"
   section. A horizontal row (thumbnail left, text right) rather than a big
   square tile: at just 2-3 shows, a vertical card grid blows up to
   oversized, awkwardly empty-looking tiles (especially for a show like
   nonobi with only a placeholder cover) — a compact row stays proportional
   regardless of how many shows exist. A plain <div>, not an <a>: the whole
   row is clickable via the "stretched link" title anchor inside it
   (position: relative + the title's ::after covering the row). Markdown
   content can't safely start a raw HTML block with an inline tag like <a>
   wrapping block-level children, so every card-style component here uses
   this pattern instead — see macros/main.py's show_card()/episode_card(). */
.pod-show-card {
  position: relative;
  display: flex;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--pod-border);
}

.pod-show-card:first-child {
  padding-top: 0;
}

.pod-show-card:last-child {
  border-bottom: none;
}

.pod-show-card__cover {
  width: 8rem;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--pod-bg-sunken);
}

.pod-show-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pod-show-card__title {
  margin: 0;
  font-family: var(--pod-font-serif);
  font-size: 1.2rem;
  font-weight: 600;
}

.pod-show-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pod-show-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pod-show-card:hover .pod-show-card__title a {
  color: var(--pod-accent);
}

.pod-show-card__tagline,
.pod-show-card__cadence {
  color: var(--pod-ink-soft);
  font-size: 0.85rem;
}

@media screen and (max-width: 34.9375em) {
  .pod-show-card {
    gap: var(--space-3);
  }

  .pod-show-card__cover {
    width: 5rem;
  }
}

/* Blog feed — a plain vertical list of posts (thumbnail + title + excerpt),
   the main reading surface on the homepage and every show page. Deliberately
   NOT a card grid: a single scannable column is the note.com/Medium-style
   list the site's design was rebuilt around. */
.pod-feed {
  display: flex;
  flex-direction: column;
}

.pod-feed .pod-episode-card {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--pod-border);
}

.pod-feed .pod-episode-card:first-child {
  padding-top: 0;
}

.pod-feed .pod-episode-card:last-child {
  border-bottom: none;
}

/* Episode card — a single row (thumbnail + text). Used in the blog feed
   above, related episodes, and category/tag hubs. */
.pod-episode-card {
  position: relative;
  display: flex;
  gap: var(--space-5);
  align-items: stretch;
}

/* The class from episode_card()/_picture() lands on the <img>, but the
   actual flex child is the <picture> wrapping it — size/pin *that*, then
   let the <img> fill it. Combined with `align-items: stretch` above, the
   thumbnail's height always matches the title+meta+excerpt column next to
   it, instead of a fixed aspect-ratio that can look mismatched. */
.pod-episode-card > picture {
  display: block;
  width: 17rem;
  flex-shrink: 0;
}

.pod-episode-card__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--pod-bg-sunken);
}

.pod-episode-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pod-episode-card__meta {
  display: flex;
  gap: var(--space-3);
  font-size: 0.78rem;
  color: var(--pod-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Specificity note: typography.css's `.md-typeset h3` rule (element + class)
   otherwise outranks a plain `.pod-episode-card__title` (one class) and
   wins its 2rem top-margin — hence the compound selector here. */
.pod-episode-card .pod-episode-card__title {
  margin: 0;
  font-family: var(--pod-font-serif);
  font-size: 1.1rem;
  line-height: 1.5;
}

.pod-episode-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pod-episode-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pod-episode-card:hover .pod-episode-card__title a {
  color: var(--pod-accent);
}

.pod-episode-card__body p {
  margin: 0;
  color: var(--pod-ink-soft);
  font-size: 0.92rem;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 34.9375em) {
  .pod-episode-card {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Stacked layout: "match the text column's height" no longer applies
     (cross-axis stretch now affects width, not height), so fall back to a
     fixed, predictable aspect ratio instead of a full-height image. */
  .pod-episode-card > picture {
    width: 100%;
  }

  .pod-episode-card__cover {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Related-episode card — vertical (big cover on top), used only in the
   "関連エピソード" block (overrides/partials/related-episodes.html). Title is
   clamped to 2 lines so a run of cards stays the same height regardless of
   title length. */
.pod-related-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pod-related-card__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--pod-bg-sunken);
  margin-bottom: var(--space-3);
}

.pod-related-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Specificity note: typography.css's `.md-typeset h3` rule (element + class)
   otherwise outranks a plain `.pod-related-card__title` (one class) and wins
   its 2rem top-margin — hence the compound selector here. */
.pod-related-card .pod-related-card__title {
  margin: 0;
  font-family: var(--pod-font-serif);
  font-size: 1.1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pod-related-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pod-related-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pod-related-card:hover .pod-related-card__title a {
  color: var(--pod-accent);
}

.pod-related-card__show {
  font-size: 0.85rem;
  color: var(--pod-ink-soft);
}

.pod-related-card__date {
  font-size: 0.78rem;
  color: var(--pod-ink-faint);
}

/* Show index pages (docs/shows/<slug>/index.md) don't hand-list episodes —
   the blog plugin auto-appends every post in that show as an excerpt right
   after the page's own content (see mkdocs.yml's `- blog:` instances). This
   restyles that auto-generated feed to match the site's editorial look
   instead of Material's default blog styling. */
.md-post {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--pod-border);
}

.md-post:last-child {
  border-bottom: none;
}

.md-post__header {
  margin-bottom: var(--space-3);
}

.md-post__content h2:first-child {
  font-family: var(--pod-font-serif);
  font-size: 1.4rem;
  margin: 0 0 var(--space-4);
  padding-top: 0;
  border-top: none;
}

.md-post__content h2:first-child a {
  color: inherit;
  text-decoration: none;
}

.md-post__content h2:first-child a:hover {
  color: var(--pod-accent);
}

/* The header above already shows the publish date — hide the in-content
   date chip (post_meta() macro output) to avoid showing it twice here. */
.md-post__content .pod-post-meta {
  display: none;
}

.md-post__action a {
  font-weight: 700;
  color: var(--pod-accent);
  text-decoration: none;
}

.md-post__action a:hover {
  text-decoration: underline;
}