/*
 * template-query-loop pattern — STACK list layout only.
 * Card internals (media, body, tags, title, excerpt, meta, read-more) live in
 * blog-card.css. This file adds the stack list container + the row shell that
 * blog-card.css deferred ("no stack / featured / highlight / @container row
 * shells — add those when a second layout exists"). Ported from
 * ui/blog-item.html "Variant 1 · Stack list".
 */

/* --- List: single-column stack --------------------------------------- */
.wp-block-post-template--stack {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 760px;
  padding: 0;
  margin: 0 auto;
}

.wp-block-heading {
  max-width: 760px;
}

.wp-block-post:not(.type-post) .wp-block-avatar,
.wp-block-post:not(.type-post) .wp-block-post-time-to-read,
.wp-block-post:not(.type-post) .wp-block-post-comments-count {
  display: none;
}

.wp-block-post:not(.type-product) .wp-block-woocommerce-product-price {
  display: none;
}

/* --- Card: row shell at all widths --------------------------------- */
.wp-block-post-template--stack .blog-card {
  /* blog-card.css sets container-type but no name; @container card needs it */
  container-name: card;
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 450px) {
  .wp-block-post-template--stack .blog-card {
    flex-direction: row;
  }
}

.wp-block-post-template--stack .blog-card__media {
  flex: 0 0 clamp(120px, 32vw, 240px);
  align-self: stretch;
}

.wp-block-post-template--stack .blog-card__media .wp-block-post-featured-image {
  width: 100%;
  height: 100%;
}

.wp-block-post-template--stack .blog-card__body {
  min-width: 0;
}

.wp-block-post-template--stack .blog-card .wp-block-post-excerpt__excerpt {
  -webkit-line-clamp: 3;
}

/* --- Container-query shells (follow card width, not viewport) ------- */

/* very narrow: rail would starve the text → drop to column */
@container card (max-width: 360px) {
  .wp-block-post-template--stack .blog-card {
    flex-direction: column;
  }

  .wp-block-post-template--stack .blog-card__media {
    flex-basis: auto;
  }
}

@container card (min-width: 520px) {
  .wp-block-post-template--stack .blog-card__body {
    padding: 1.5rem;
  }
}

@container card (min-width: 720px) {
  .wp-block-post-template--stack .blog-card__media {
    flex-basis: 300px;
  }
}

/* --- Fallback: no container-query support → viewport mirrors ------- */
@supports not (container-type: inline-size) {
  @media (min-width: 640px) {
    .wp-block-post-template--stack .blog-card__body {
      padding: 1.5rem;
    }

    .wp-block-post-template--stack .blog-card__media {
      flex-basis: 300px;
    }
  }

  @media (max-width: 400px) {
    .wp-block-post-template--stack .blog-card {
      flex-direction: column;
    }

    .wp-block-post-template--stack .blog-card__media {
      flex-basis: auto;
    }
  }
}