/*
 * WP Ember - product bundle: plugin catalog archive + single plugin page.
 */

/* Product card (archive grid) */
.wpe-product-card {
	display: flex;
	gap: var(--wpe-sp-4);
	align-items: flex-start;
	background: var(--wpe-surface);
	border: 1px solid var(--wpe-border-cool);
	border-radius: var(--wpe-radius-card);
	padding: var(--wpe-sp-5);
	box-shadow: var(--wpe-shadow-card);
	text-decoration: none;
	transition: box-shadow var(--wpe-dur), transform var(--wpe-dur);
}
.wpe-product-card:hover { box-shadow: var(--wpe-shadow-lift); transform: translateY(-2px); text-decoration: none; }
.wpe-product-card__icon { flex: none; }
.wpe-product-card__icon img { width: 56px; height: 56px; border-radius: var(--wpe-r-12); display: block; }
.wpe-product-card__body { display: flex; flex-direction: column; gap: var(--wpe-sp-1); min-width: 0; }
.wpe-product-card__head { display: flex; align-items: center; gap: var(--wpe-sp-3); flex-wrap: wrap; }
.wpe-product-card__head strong { font-family: var(--wpe-font-display); font-size: var(--wpe-fs-20); color: var(--wpe-ink); font-weight: 600; }
.wpe-product-card__tagline { color: var(--wpe-text-muted); font-size: var(--wpe-fs-15); }

/* "More coming" teaser: dashed + muted so it reads as a placeholder, not a product */
.wpe-product-card--soon {
	background: transparent;
	border-style: dashed;
	border-color: var(--wpe-border);
	box-shadow: none;
}
.wpe-product-card--soon:hover { box-shadow: none; transform: none; border-color: var(--wpe-ember); }
.wpe-product-card--soon .wpe-product-card__head strong { color: var(--wpe-text-muted); }

/* Single plugin hero */
.wpe-product-hero { background: var(--wpe-paper); border-bottom: 1px solid var(--wpe-border); padding: var(--wpe-sp-16) 0; }
.wpe-product-hero__main { display: flex; gap: var(--wpe-sp-6); align-items: flex-start; }
.wpe-product-hero__icon { flex: none; }
.wpe-product-hero__icon img { width: 88px; height: 88px; border-radius: var(--wpe-r-16); display: block; box-shadow: var(--wpe-shadow-soft); }
.wpe-product-hero__head { display: flex; align-items: center; gap: var(--wpe-sp-4); flex-wrap: wrap; margin-bottom: var(--wpe-sp-2); }
.wpe-product-hero__head h1 { margin: 0; }
.wpe-product-hero__tagline { font-size: var(--wpe-fs-20); color: var(--wpe-text-muted); margin: 0 0 var(--wpe-sp-2); }
.wpe-product-hero__meta { font-size: var(--wpe-fs-14); color: var(--wpe-text-soft); margin: 0 0 var(--wpe-sp-5); }
.wpe-product-hero__actions { display: flex; gap: var(--wpe-sp-3); flex-wrap: wrap; }

/* Feature list */
.wpe-feature-list {
	list-style: none;
	margin: 0 0 var(--wpe-sp-10);
	padding: 0;
	display: grid;
	gap: var(--wpe-sp-3);
}
.wpe-feature-list li {
	position: relative;
	padding-left: var(--wpe-sp-8);
	font-size: var(--wpe-fs-16);
}
.wpe-feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(232, 72, 15, 0.12);
}
.wpe-feature-list li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 7px;
	height: 4px;
	border-left: 2px solid var(--wpe-ember);
	border-bottom: 2px solid var(--wpe-ember);
	transform: rotate(-45deg);
}

/* Screenshots gallery - uniform tiles regardless of source dimensions */
.wpe-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wpe-sp-6); }
.wpe-gallery figure { margin: 0; }
.wpe-gallery .wpe-shot { aspect-ratio: 16 / 10; }
.wpe-gallery .wpe-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 700px) {
	.wpe-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.wpe-product-hero__main { flex-direction: column; }
}

/* Changelog (single plugin page) - pulled + cached from WordPress.org */
.wpe-changelog-title { margin: 0 0 var(--wpe-sp-8); }
.wpe-changelog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wpe-sp-8); }
.wpe-changelog__item { border-left: 2px solid var(--wpe-border); padding: 0 0 0 var(--wpe-sp-6); }
.wpe-changelog__head { display: flex; align-items: baseline; gap: var(--wpe-sp-3); flex-wrap: wrap; margin-bottom: var(--wpe-sp-3); }
.wpe-changelog__version { font-family: var(--wpe-font-display); font-size: var(--wpe-fs-20); font-weight: 600; color: var(--wpe-ink); }
.wpe-changelog__date { color: var(--wpe-text-muted); font-size: var(--wpe-fs-14); }
.wpe-changelog__changes { margin: 0; padding-left: var(--wpe-sp-5); color: var(--wpe-text); }
.wpe-changelog__changes li { margin: 0 0 var(--wpe-sp-2); }
.wpe-changelog__more { margin: var(--wpe-sp-8) 0 0; }