/* EX REDESiGN — assets/css/blog.css
 * Post listing pages (blog / archive / search) — cards, featured image, excerpt, tags, pagination, search form.
 *
 * Selectors: .ex-archive-title, .ex-card-body, .ex-card-date, .ex-card-tags, .ex-card-title, .ex-search-form, .ex-single-image, .exr-main, .exr-widget-search
 * Variables consumed: --color-border, --color-border-subtle, --color-surface, --color-surface-raised, --color-text-muted, --color-text-primary, --color-text-secondary, --shadow-soft
 *
 * Sections (search anchors — grep `@section <name>`):
 *   @section post-card                  L26-L41  Post card
 *   @section featured-image             L42-L76  Featured image
 *   @section post-title                 L77-L84  Post title
 *   @section post-meta                  L85-L91  Post meta
 *   @section post-excerpt               L92-L105  Post excerpt
 *   @section tag-chips                  L106-L127  Tag chips
 *   @section pagination                 L128-L151  Pagination
 *   @section grid-layout-fse-newer-class-names L152-L161  Grid layout (FSE newer class names)
 *   @section card-element-spacing       L162-L210  Card element spacing
 *   @section post-cards-shared-structure L211-L222  Post cards: shared structure
 *   @section archive-header-home-html   L223-L225  Archive header (home.html)
 */

/* ── Post list: 2-col grid ── */
.wp-block-post-template.is-flex-container {
  gap: 2rem;
}

/* ── Post card ── */
/* The post card sits inside .exr-main which already provides a white card
   background by default. Stacking another white background here would create
   "card-in-card" with invisible boundaries, so the post itself stays flat
   (transparent) and only the thumbnail keeps its rounded corners as the
   visual handle that signals "this is a card-like item". */
.wp-block-post {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
/* No hover effect on post cards — keep them flat at all states. */
/* v1.6.3+: リストモードはカラム vertical-align: center で縦中央寄せに変更。
   旧 padding: 0.75rem 0 0 は中央寄せを微妙に下にずらす要因だったため削除。
   グリッドモードは別クラス (.ex-feature-card) を使うので影響なし。 */

/* ── Featured image ── */
.wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.wp-block-post-featured-image a { display: block; }

/* Single post featured image — fills the full inner width of the .exr-main
   card (above the title). The wrapper sits as the first child of .exr-main
   so it's constrained to the main column width; we just remove the previous
   480px max-width cap. */
.ex-single-image {
  margin: 0 0 2rem;
}
/* Hide the wrapper entirely when the post has no featured image, so the
   2rem bottom margin doesn't leave a phantom gap above the title. */
.ex-single-image:empty {
  display: none;
}
.ex-single-image .wp-block-post-featured-image {
  margin: 0;
  width: 100%;
}
.ex-single-image .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ── Post title ── */
.wp-block-post-title a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 200ms;
}
.wp-block-post-title a:hover { color: var(--color-text-secondary); }

/* ── Post meta ── */
.wp-block-post-date time {
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* ── Post excerpt ── */
.wp-block-post-excerpt__excerpt {
  font-size: var(--exr-fs-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
}
.wp-block-post-excerpt__more-link {
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  transition: color 200ms;
}
.wp-block-post-excerpt__more-link:hover { color: var(--color-text-primary); }

/* ── Tag chips ── */
.wp-block-post-terms a,
.wp-block-tag-cloud a {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: 9999px;
  font-size: var(--exr-fs-xs);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color 200ms, color 200ms;
  margin: 0.15rem 0.15rem 0.15rem 0;
}
.wp-block-post-terms a:hover,
.wp-block-tag-cloud a:hover {
  border-color: var(--color-border);
  color: var(--color-text-primary);
}


/* ── Pagination ── */
.wp-block-query-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 3rem; }
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
  display: inline-flex;
  align-items: center;
  font-size: var(--exr-fs-xs);
  color: var(--color-text-secondary);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  transition: border-color 200ms, color 200ms;
  text-decoration: none;
}
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover,
.wp-block-query-pagination-numbers .page-numbers.current {
  border-color: var(--color-border);
  color: var(--color-text-primary);
}


/* ── Grid layout (FSE newer class names) ── */
.wp-block-post-template.is-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
@media (max-width: 600px) {
  .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
}

/* ── Card element spacing ── */
.ex-card-date { margin-bottom: 0.35rem; }
.ex-card-title { margin-top: 0.25rem; margin-bottom: 0.5rem; font-size: var(--exr-fs-base); line-height: 1.45; }
.ex-card-tags { margin-top: 0.75rem; }


/* ── Search form on search.html (.ex-search-form) ──
   The wp:search block in the search-results header. Styled to match the
   header CTA button (rounded, primary text-color background) so the page
   reads as one coherent design system. The sidebar widget search has its
   own scoped rules under .exr-widget-search; this is for the main one. */
.ex-search-form {
  margin: 1.5rem 0 0;
  /* No max-width — the form fills its container (= main column width). The
     constrained layout cap on .exr-main children is already lifted in the
     sidebar-none rule above; with a sidebar, it naturally spans the main
     grid column. */
}
.ex-search-form .wp-block-search__inside-wrapper { gap: 0.5rem; }
.ex-search-form .wp-block-search__input {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.65rem 0.9rem;
  font-size: var(--exr-fs-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 200ms;
}
.ex-search-form .wp-block-search__input:focus {
  outline: none;
  border-color: var(--color-text-primary);
}
.ex-search-form .wp-block-search__button {
  background-color: var(--color-text-primary);
  color: var(--color-surface) !important;
  border: none;
  border-radius: 6px;
  padding: 0.65rem 1.5rem;
  font-size: var(--exr-fs-sm);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 200ms;
  white-space: nowrap;
}
.ex-search-form .wp-block-search__button:hover {
  background-color: var(--color-text-secondary);
}


/* ── Post cards: shared structure ──
   The post-template emits each post as <li class="wp-block-post"> with two
   direct children: <figure class="wp-block-post-featured-image"> and
   <div class="ex-card-body">. Grid mode stacks them vertically (image on top,
   body below). List mode — turned on by dynamic.php for the chosen tab —
   redeclares .wp-block-post as a 2-column grid (240px + 1fr) so the figure
   becomes the left column and the body becomes the right. The .ex-card-body
   padding rule lives further down with the other card chrome. */
.wp-block-post .wp-block-post-featured-image { margin: 0; }
.wp-block-post .wp-block-post-featured-image img { display: block; }


/* ── Archive header (home.html) ── */
.ex-archive-title { font-size: var(--exr-fs-xl) !important; letter-spacing: var(--exr-ls-xl, -0.01em); line-height: var(--exr-lh-xl, 1.4); margin: 0.25rem 0 0 !important; }