/*
 * Display Posts custom block — Mappr.co editorial card design.
 *
 * Self-contained styles using prefixed `.mp-dp-*` class names so the block
 * doesn't fight legacy `.listing-item` rules in astra-child/style.css or
 * the Bill-Erickson Display Posts plugin's shortcode classes.
 *
 * Brand tokens come from astra-child/style.css's Mappr design-system block
 * (shipped 2026-04-28). All hex values have a CSS-var primary and a fallback
 * literal so the block still looks correct if the tokens aren't loaded yet.
 *
 * The default layout is a responsive grid that adapts to its parent:
 *   - Bare `.mp-display-posts` (no wrapper_class)  → auto-fit grid, min 280px columns
 *   - `wrapper_class="cat-grid-layout"`            → inherits any legacy 3-column
 *                                                    grid rules from astra-child/style.css
 *
 * Card structure:
 *   <article class="mp-dp-card">
 *     <a class="mp-dp-thumb">           ← aspect-ratio 3:2 image container
 *       <img class="mp-dp-img wp-post-image">
 *     </a>
 *     <div class="mp-dp-body">          ← padded content area
 *       <h3 class="mp-dp-title"><a>Title</a></h3>
 *       <div class="mp-dp-meta">
 *         <time class="mp-dp-date">May 4, 2026</time>
 *       </div>
 *       <p class="mp-dp-excerpt">…</p>
 *     </div>
 *   </article>
 */

/* === Wrapper === */

.mp-display-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.75rem;
	margin: 1.5rem 0 2.5rem;
	padding: 0;
	list-style: none;
}

/* When the editor passes wrapper_class="cat-grid-layout", any legacy grid rule
 * in astra-child/style.css overrides via !important. Single source of truth
 * for that layout lives in the child theme. */

.mp-display-posts--empty {
	display: block;
	color: #9ca3af;
	font-style: italic;
	padding: 1rem;
}

/* === Card === */

.mp-dp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mp-dp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(40, 48, 61, 0.10), 0 4px 8px rgba(40, 48, 61, 0.05);
	border-color: #d1d5db;
}

.mp-dp-card--no-thumb {
	/* Cards without a thumbnail get a slightly tighter look so they don't
	 * collapse to text-only awkwardness. */
	background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}

/* === Thumbnail === */

.mp-dp-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #f3f4f6;
}

.mp-dp-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.mp-dp-card:hover .mp-dp-img {
	transform: scale(1.04);
}

/* === Body === */

.mp-dp-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.1rem 1.2rem 1.25rem;
}

.mp-dp-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mappr-fg-1, #28303D);
}

.mp-dp-title a {
	color: inherit;
	text-decoration: none;
	background-image: none;
	transition: color 0.18s ease;
}

.mp-dp-title a:hover,
.mp-dp-title a:focus-visible {
	color: var(--mappr-blue, #0170B9);
}

.mp-dp-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	color: var(--mappr-fg-3, #6b7280);
	letter-spacing: 0.01em;
}

.mp-dp-date {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

.mp-dp-excerpt {
	margin: 0.25rem 0 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--mappr-fg-2, #374151);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* === Responsive === */

@media (max-width: 768px) {
	.mp-display-posts {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.mp-dp-body {
		padding: 1rem 1.1rem 1.15rem;
	}

	.mp-dp-title {
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	.mp-dp-excerpt {
		-webkit-line-clamp: 2;
	}
}

/* === Compact sidebar/widget variant (horizontal row, fixed thumb) ===
 *
 * Activates in five ways:
 *   1. Astra default sidebar wrapper                      → `#secondary`
 *   2. Astra "sidebar-main" wrapper (Mappr's current one) → `.sidebar-main`
 *   3. WP widget block area                               → `.widget_block`
 *   4. Explicit modifier from the block's wrapper_class   → `.is-sidebar`
 *   5. Container-query auto-fallback (<340px container)   → no class needed
 *
 * Mirrors the PhotoWorkout `pw-display-posts` sidebar pattern:
 *   - `align-items: flex-start` on the card so the thumb doesn't
 *     flex-stretch to the body's height. (Default `align-items: stretch`
 *     was making 110-wide thumbs render 183px tall — source-of-truth bug.)
 *   - Explicit `height` + `aspect-ratio: auto` on the thumb so the 3:2
 *     ratio stays fixed even when the flex parent tries to push it taller.
 * =========================================================================== */

/* Establish a containment context so the @container query below can fire on
 * any narrow rendering of the block, not just sidebar/widget areas. */
.mp-display-posts {
	container-type: inline-size;
	container-name: mp-dp;
}

#secondary .mp-display-posts,
.sidebar-main .mp-display-posts,
.widget_block .mp-display-posts,
.mp-display-posts.is-sidebar {
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0.5rem 0;
}

#secondary .mp-dp-card,
.sidebar-main .mp-dp-card,
.widget_block .mp-dp-card,
.mp-display-posts.is-sidebar .mp-dp-card {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 4px 0;
	border-bottom: 1px solid #f0f0f0;
}

#secondary .mp-dp-card:last-child,
.sidebar-main .mp-dp-card:last-child,
.widget_block .mp-dp-card:last-child,
.mp-display-posts.is-sidebar .mp-dp-card:last-child {
	border-bottom: none;
}

#secondary .mp-dp-card:hover,
.sidebar-main .mp-dp-card:hover,
.widget_block .mp-dp-card:hover,
.mp-display-posts.is-sidebar .mp-dp-card:hover {
	transform: none;
	box-shadow: none;
	border-color: #f0f0f0;
}

#secondary .mp-dp-thumb,
.sidebar-main .mp-dp-thumb,
.widget_block .mp-dp-thumb,
.mp-display-posts.is-sidebar .mp-dp-thumb {
	flex: 0 0 110px;
	width: 110px;
	height: 73px;
	aspect-ratio: auto;
	align-self: flex-start;
	border-radius: 6px;
}

#secondary .mp-dp-card:hover .mp-dp-img,
.sidebar-main .mp-dp-card:hover .mp-dp-img,
.widget_block .mp-dp-card:hover .mp-dp-img,
.mp-display-posts.is-sidebar .mp-dp-card:hover .mp-dp-img {
	transform: none;
}

#secondary .mp-dp-body,
.sidebar-main .mp-dp-body,
.widget_block .mp-dp-body,
.mp-display-posts.is-sidebar .mp-dp-body {
	padding: 0;
	gap: 0.25rem;
	justify-content: center;
}

#secondary .mp-dp-title,
.sidebar-main .mp-dp-title,
.widget_block .mp-dp-title,
.mp-display-posts.is-sidebar .mp-dp-title {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	/* Truncate long titles to 3 lines with ellipsis — keeps sidebar tidy
	   when post titles run long (Mapped posts, news headlines). */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

#secondary .mp-dp-title a,
.sidebar-main .mp-dp-title a,
.widget_block .mp-dp-title a,
.mp-display-posts.is-sidebar .mp-dp-title a {
	/* Preserve the line-clamp on the inner <a> tag as well — the link is
	   the block-level container that needs to inherit overflow rules. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#secondary .mp-dp-meta,
.sidebar-main .mp-dp-meta,
.widget_block .mp-dp-meta,
.mp-display-posts.is-sidebar .mp-dp-meta {
	font-size: 0.72rem;
}

#secondary .mp-dp-excerpt,
.sidebar-main .mp-dp-excerpt,
.widget_block .mp-dp-excerpt,
.mp-display-posts.is-sidebar .mp-dp-excerpt {
	display: none;
}

/* Container-query fallback — applies the same compact horizontal layout
 * whenever the block ends up in any narrow column (footer widget, narrow
 * group block in-content, etc.) without needing an explicit wrapper class. */
@container mp-dp (max-width: 340px) {
	.mp-display-posts {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.mp-dp-card {
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
		border: none;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		padding: 4px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	.mp-dp-card:last-child { border-bottom: none; }
	.mp-dp-card:hover { transform: none; box-shadow: none; }
	.mp-dp-thumb {
		flex: 0 0 110px;
		width: 110px;
		height: 73px;
		aspect-ratio: auto;
		align-self: flex-start;
		border-radius: 6px;
	}
	.mp-dp-card:hover .mp-dp-img { transform: none; }
	.mp-dp-body { padding: 0; gap: 0.25rem; justify-content: center; }
	.mp-dp-title { font-size: 0.88rem; font-weight: 600; line-height: 1.35; }
	.mp-dp-meta { font-size: 0.72rem; }
	.mp-dp-excerpt { display: none; }
}