/*
 * Display Posts custom block — fresh card design (PhotoWorkout 2026).
 *
 * Self-contained styles using prefixed `.pw-dp-*` class names so the block
 * doesn't fight legacy `.listing-item` rules in astra-child/style.css.
 *
 * The default layout is a responsive grid that adapts to its parent:
 *   - Bare `.pw-display-posts` (no wrapper_class)  → auto-fit grid, min 280px columns
 *   - `wrapper_class="cat-grid-layout"`            → inherits the legacy 3-column
 *                                                    grid + 60px gap from
 *                                                    astra-child/style.css
 *
 * Card structure:
 *   <article class="pw-dp-card">
 *     <a class="pw-dp-thumb">           ← aspect-ratio 3:2 image container
 *       <img class="pw-dp-img wp-post-image">
 *     </a>
 *     <div class="pw-dp-body">          ← padded content area
 *       <h3 class="pw-dp-title"><a>Title</a></h3>
 *       <div class="pw-dp-meta">
 *         <time class="pw-dp-date">May 4, 2026</time>
 *       </div>
 *       <p class="pw-dp-excerpt">…</p>
 *     </div>
 *   </article>
 */

/* === Wrapper === */

.pw-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", the legacy grid
 * (3 cols, 60px gap, !important via the migrated MT rules) wins. The
 * .pw-display-posts grid above gets overridden by .cat-grid-layout's
 * `grid-template-columns: 1fr 1fr 1fr !important`. That's intentional —
 * gives editors two layout modes via a single field. */

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

/* === Card === */

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

.pw-dp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
	border-color: #d1d5db;
}

.pw-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 === */

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

.pw-dp-thumb .pw-dp-img,
.pw-dp-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

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

/* === Body === */

.pw-dp-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem 1.25rem 1.25rem;
}

/* === Title === */

.pw-dp-title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -0.005em;
}

.pw-dp-title a {
	color: #0f172a;
	text-decoration: none;
	background: none;
}

.pw-dp-title a:hover {
	color: #0170b9;
	text-decoration: none;
}

/* === Meta (date) === */

.pw-dp-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.pw-dp-date {
	color: #6b7280;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* === Excerpt === */

.pw-dp-excerpt {
	margin: 0.25rem 0 0;
	color: #4b5563;
	font-size: 0.9375rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* === Mobile === */

@media (max-width: 640px) {
	.pw-display-posts {
		gap: 1.25rem;
	}

	.pw-dp-body {
		padding: 0.875rem 1rem 1.125rem;
	}

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

	.pw-dp-excerpt {
		font-size: 0.875rem;
		-webkit-line-clamp: 2;
	}
}

/* ===========================================================================
 * Sidebar context (#secondary) — compact horizontal-row list.
 *
 * Auto-applies whenever the block is rendered inside Astra's #secondary
 * sidebar wrapper. Editor doesn't need to pass any wrapper_class. Mirrors the
 * shape of the existing #secondary .display-posts-listing .listing-item rules
 * in astra-child/style.css so the widget feels consistent with the older
 * shortcode styling.
 * =========================================================================== */

#secondary .pw-display-posts {
	display: block;
	margin: 0 0 1rem;
	gap: 0;
}

#secondary .pw-dp-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	border-bottom: 1px solid #f0f0f0;
}

#secondary .pw-dp-card:last-child {
	border-bottom: none;
}

#secondary .pw-dp-card:hover {
	transform: none;
	box-shadow: none;
	background: #f8f9fb;
	border-color: #f0f0f0;
}

#secondary .pw-dp-card .pw-dp-thumb {
	flex-shrink: 0;
	width: 72px;
	height: 48px;
	aspect-ratio: auto;
	border-radius: 6px;
}

#secondary .pw-dp-card:hover .pw-dp-img {
	transform: none;
}

#secondary .pw-dp-card--no-thumb {
	background: transparent;
}

#secondary .pw-dp-body {
	padding: 0;
	flex: 1;
	min-width: 0;
}

#secondary .pw-dp-title {
	margin: 0 0 2px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0;
}

#secondary .pw-dp-title a {
	color: #333;
}

#secondary .pw-dp-title a:hover {
	color: #0170b9;
}

#secondary .pw-dp-meta {
	margin: 0;
	gap: 0;
}

#secondary .pw-dp-date {
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #9ca3af;
}

/* Sidebar excerpts are usually too noisy — keep them off by default; the
 * editor can still toggle show_excerpt true and the rule below will style
 * the rare case neatly. */
#secondary .pw-dp-excerpt {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.45;
	-webkit-line-clamp: 2;
}

/* Sidebar mobile — slightly tighter padding. */
@media (max-width: 640px) {
	#secondary .pw-dp-card {
		padding: 10px 12px;
		gap: 10px;
	}

	#secondary .pw-dp-card .pw-dp-thumb {
		width: 60px;
		height: 40px;
	}

	#secondary .pw-dp-title {
		font-size: 12px;
	}
}