/*
 * SIA Blog Posts — LAYOUT only. One card design arranged three ways:
 *   .sia-bp--list      vertical stack of horizontal cards
 *   .sia-bp--grid      responsive column grid (--sia-bp-cols)
 *   .sia-bp--carousel  Swiper slides (shared carousel-base)
 *
 * The card itself — media, body, title, meta, excerpt, read-more, hover
 * lift/zoom, icon animations — lives in assets/css/card-base.css (handle
 * `sia-card-base`), shared with the Content Cards widget. This file declares
 * it as a dependency, so `sia-blog-posts` always drags it in.
 */

/* ─── Layout: Grid ─── */
.sia-bp--grid {
	display: grid;
	grid-template-columns: repeat(var(--sia-bp-cols, 3), minmax(0, 1fr));
	gap: 28px;
}

/* ─── Layout: List ─── */
.sia-bp--list {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.sia-bp--list .sia-bp__card {
	height: auto;
	align-items: center;
}
.sia-bp--list.sia-bp--img-left  .sia-bp__card { flex-direction: row; }
.sia-bp--list.sia-bp--img-right .sia-bp__card { flex-direction: row-reverse; }
.sia-bp--list.sia-bp--img-top   .sia-bp__card { flex-direction: column; align-items: stretch; }
.sia-bp--list.sia-bp--img-left  .sia-bp__media,
.sia-bp--list.sia-bp--img-right .sia-bp__media {
	flex: 0 0 var(--sia-bp-img-w, 38%);
	align-self: stretch;
}
.sia-bp--list.sia-bp--img-top .sia-bp__media { width: 100%; }

/* Narrow screens — always stack the list for readability */
@media (max-width: 600px) {
	.sia-bp--list .sia-bp__card { flex-direction: column; align-items: stretch; }
	.sia-bp--list .sia-bp__media { flex-basis: auto; width: 100%; }
}

/* ─── Layout: Carousel ─── */
.sia-bp--carousel .sia-bp__slide { height: auto; }
.sia-bp--carousel .swiper-slide { display: flex; }
.sia-bp--carousel .sia-bp__card { width: 100%; }