/*
 * WPDM Lite — layout for package listings.
 *
 * WP Download Manager shipped a full Bootstrap 4 build namespaced under
 * .w3eden, and the listing markup depends on its grid. Rather than carry ~200 KB
 * of framework for a dozen rules, this reproduces only what the templates use,
 * with the same breakpoints (576 / 768 / 992) and the same 15px gutter, so
 * listings render exactly as they did.
 *
 * Everything is scoped to .w3eden. Nothing here can affect the rest of the theme.
 */

/* ---------------------------------------------------------------------------
 * Grid
 * ------------------------------------------------------------------------- */

.w3eden .row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.w3eden [class*="col-"] {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	box-sizing: border-box;
}

/* Widths that apply at every viewport size. */
.w3eden .col-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.w3eden .col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.w3eden .col-3  { flex: 0 0 25%;        max-width: 25%; }
.w3eden .col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.w3eden .col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.w3eden .col-6  { flex: 0 0 50%;        max-width: 50%; }
.w3eden .col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.w3eden .col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.w3eden .col-9  { flex: 0 0 75%;        max-width: 75%; }
.w3eden .col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.w3eden .col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.w3eden .col-12 { flex: 0 0 100%;       max-width: 100%; }

/* Tablet and up. */
@media (min-width: 768px) {
	.w3eden .col-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
	.w3eden .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.w3eden .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
	.w3eden .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.w3eden .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.w3eden .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
	.w3eden .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.w3eden .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.w3eden .col-md-9  { flex: 0 0 75%;        max-width: 75%; }
	.w3eden .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.w3eden .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.w3eden .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* Desktop and up. */
@media (min-width: 992px) {
	.w3eden .col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
	.w3eden .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.w3eden .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
	.w3eden .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.w3eden .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.w3eden .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
	.w3eden .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.w3eden .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.w3eden .col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
	.w3eden .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.w3eden .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.w3eden .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* Each card fills its column so neighbours in a row line up. */
.w3eden .row > [class*="col-"] > .panel,
.w3eden .row > [class*="col-"] > .preview-x {
	height: 100%;
}

/* Vertical rhythm between rows of cards. */
.w3eden .row > [class*="col-"] {
	margin-bottom: 30px;
}

/* ---------------------------------------------------------------------------
 * Card and media helpers the link templates rely on
 * ------------------------------------------------------------------------- */

.w3eden .panel {
	box-shadow: none !important;
}

.w3eden .panel-default {
	background: #fff;
}

.w3eden .media {
	display: flex;
	align-items: flex-start;
}

.w3eden .media-body {
	flex: 1;
}

.w3eden .pull-left {
	float: left !important;
	margin-right: 10px;
}

.w3eden .pull-right {
	float: right !important;
}

.w3eden .panel-footer {
	padding: 10px 15px;
}

.w3eden .panel-footer::after {
	content: "";
	display: table;
	clear: both;
}

.w3eden .wpdm_icon {
	max-width: 40px;
	height: auto;
}

/* Preview images must never overflow their column. */
.w3eden .panel img,
.w3eden .preview-x img {
	max-width: 100%;
	height: auto;
}

.w3eden .text-center { text-align: center; }
.w3eden .text-right  { text-align: right; }

/* ---------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------- */

.w3eden .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-left: 0;
	margin: 15px 0;
	list-style: none;
}

.w3eden .pagination li {
	margin: 0 2px;
	list-style: none;
}

.w3eden .pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #dee2e6;
	border-radius: 3px;
	line-height: 1.25;
	text-decoration: none;
}

.w3eden .pagination .page-numbers.current {
	background: #4a8eff;
	border-color: #4a8eff;
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Small screens: one card per row, and let long titles wrap rather than clip.
 * ------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
	.w3eden .row {
		margin-right: -8px;
		margin-left: -8px;
	}

	.w3eden [class*="col-"] {
		padding-right: 8px;
		padding-left: 8px;
	}

	.w3eden .row > [class*="col-"] {
		margin-bottom: 20px;
	}

	/* The `exclusive` template caps titles at 250px, which overflows narrow
	   phones; let them use the space actually available. */
	.w3eden .title-css {
		max-width: calc(100% - 30px);
	}
}