/*
 * SiteOrigin Blog widget — ALTERNATE layout row flex.
 *
 * The ported per-instance CSS (siteorigin-widgets.css) styles the alternate
 * layout assuming each post `article` is a flex row: it sets
 * `.sow-entry-thumbnail{flex:1;width:41.5%}` and flips even rows with
 * `article:nth-of-type(2n){flex-direction:row-reverse}`. But neither the base
 * blog CSS nor the per-instance CSS in this export actually declares
 * `article{display:flex}` (an export gap), so without this the image and text
 * stack instead of sitting side-by-side. This restores live's rendered layout
 * (Rule 1) — image | text alternating rows — and nothing else.
 */
/* Top gap between the hero banner and the first card. Live renders 50px here
   (the space between the banner panel and the blog panel inside `.blog-content`);
   `section#blog`/`.blog-item` are reset to padding:0 by the child theme, so add it
   on the listing's own container. Scoped to `.blog-archive` (only the blog listing
   carries it) so the catch-all marketing pages that share `section#blog >
   .blog-content` are unaffected. */
.blog-archive {
  padding-top: 50px;
}

.sow-blog.sow-blog-layout-alternate .sow-blog-posts article {
  display: flex;
  align-items: stretch;
  /* Live's SiteOrigin outputs an inline `margin-bottom:30px` on each article, so
     the cards sit 30px apart. That inline value isn't in any stylesheet (only the
     rendered DOM), so reproduce it here — without it the cards butt together. */
  margin-bottom: 30px;
}
.sow-blog.sow-blog-layout-alternate .sow-blog-posts article .sow-blog-content-wrapper {
  flex: 1;
}
/*
 * Live serves pre-cropped ~540×513 thumbnails, so every row is a uniform height
 * with the image filling it. Our Sanity images are natural-aspect, so pin the
 * same crop (object-fit:cover + live's thumbnail aspect ratio) to reproduce the
 * even, alternating rows rather than ragged natural-height ones.
 */
.sow-blog.sow-blog-layout-alternate .sow-blog-posts article .sow-entry-thumbnail,
.sow-blog.sow-blog-layout-alternate .sow-blog-posts article .sow-entry-thumbnail a {
  align-self: stretch;
}
.sow-blog.sow-blog-layout-alternate .sow-blog-posts article .sow-entry-thumbnail .wp-post-image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  aspect-ratio: 540 / 513;
}