/* File cards in the category list and on the files index: CONTENT only.
   The card frame (borders, corners, spacing, image) is left exactly as the theme draws it.
   SOURCE: ":is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item)" is expanded to the card selector by deploy.ps1 (see theme-work). */

/* The compact blocks of the index ("Highest rated", "Most downloaded") are rows with a tiny thumbnail on the left.
   Make them the same card as the others: image on top, text below. */
.ipsData--mini-grid .ipsData__item:has( .dlCard__meta ) {
	flex-direction: column;
	align-items: stretch;
}
.ipsData--mini-grid .ipsData__item:has( .dlCard__meta ) .ipsData__image {
	flex: 0 0 auto;
	width: 100%;
	height: auto;
	margin: 0 0 4px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.ipsData--mini-grid .ipsData__item:has( .dlCard__meta ) .ipsData__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}
.ipsData--mini-grid .ipsData__item:has( .dlCard__meta ) .ipsData__content { flex: 1 1 auto; width: 100%; }

/* title */
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__title h3,
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__title h4 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* the description, the stock rating row and the author are replaced by the "from ... rating" line */
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__desc,
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__main .ipsRating,
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__main > .i-flex:has( > .ipsRating ),
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__extra .ipsData__last { display: none; }

.dlCard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin-top: 6px;
	font-size: 14px;
	color: color-mix(in srgb, currentColor 62%, transparent);
}
.dlCard__by a { color: inherit; font-weight: 500; }
.dlCard__by a:hover { color: currentColor; }
.dlCard__rating { display: inline-flex; align-items: center; gap: 4px; }
.dlCard__rating i { color: #f5b301; font-size: .95em; }
.dlCard__rating b { font-weight: 700; color: currentColor; }

/* label in the corner of the image: our own tag (hook) and the theme's prefix label (category list) */
.dlCard__tag,
.ipsData--download-file-table > .ipsData__item .ipsData__title .ipsPrefix {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	margin: 0;
	padding: 4px 12px;
	border-radius: 8px;
	background: #b8433f;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* footer: price on the left, downloads and purchases on the right */
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__extra { margin: auto 0 0; width: 100%; }
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li { margin: 0; white-space: nowrap; order: 5; }
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li[data-stattype="price"] { order: 0; }
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li[data-stattype="downloads"] { order: 1; }
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li[data-stattype="purchases"] { order: 2; }
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li[data-stattype="price"] {
	margin-right: auto;
	font-size: 20px;
	font-weight: 800;
	color: currentColor;
}
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li[data-stattype="price"] .ipsData__stats-label { display: inline; }
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li[data-stattype="comments"],
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li[data-stattype="views"] { display: none; }

/* Files index variant: the price is a separate element next to the stats, not a stats item.
   Title + meta on top, a divider, then price on the left and the counters on the right. */
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item):has( .cFilePrice ) .ipsData__main,
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item):has( .cFilePrice ) .ipsData__extra { display: contents; }
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item):has( .cFilePrice ) .ipsData__content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
}
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item):has( .cFilePrice ) .ipsData__title {
	flex: 1 0 100%;
	order: 1;
	margin: 0 0 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item):has( .cFilePrice ) .cFilePrice {
	order: 2;
	flex: 0 1 auto;
	margin-right: auto;
	font-size: 20px;
	font-weight: 800;
	text-transform: none;
	color: currentColor;
}
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item):has( .cFilePrice ) .ipsData__stats {
	order: 3;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	width: auto;
	margin-left: auto;
	padding-top: 0;
	border-top: 0;
}
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item):has( .cFilePrice ) .ipsData__last { display: none; }

/* ---- Promo: struck-through regular price above the red promo price, label on the image ---- */
.dlCard__priceBox { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.dlCard__old {
	font-size: 14px;
	font-weight: 600;
	color: color-mix(in srgb, currentColor 52%, transparent);
	text-decoration: line-through;
}
.dlCard__sale { color: #dc2626; }
/* beats the "display: inline" rule of the price label above, so the old price sits on top of the promo price */
:is(.ipsData__item:has(.dlCard__meta), .ipsData--download-file-table > .ipsData__item) .ipsData__stats > li[data-stattype="price"] .ipsData__stats-label.dlCard__priceBox { display: inline-flex; }
.dlCard__promo {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 8px;
	background: #dc2626;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
