/**
 * Frontend styles for Paid Memberships Pro - Downloads Add On.
 *
 * Uses PMPro core classes where possible. Custom styles only for
 * download-specific elements not covered by core.
 *
 * @since 1.0
 */

/* ==========================================================================
   Shared
   ========================================================================== */

.pmpro_download svg,
.pmpro_download-card svg,
.pmpro_download-button svg {
	vertical-align: middle;
	flex-shrink: 0;
}

.pmpro_download-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%; 
}

.pmpro_download-icon {
	align-items: center;
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   Link Template
   ========================================================================== */

.pmpro_download-link {

	display: flex;
	flex-direction: column;
	gap: var(--pmpro--base--spacing--medium, 18px);

	a {
		align-items: center;
		display: inline-flex;
		gap: var(--pmpro--base--spacing--small, 12px);
		max-width: 100%;
	}

}

/* ==========================================================================
   Card Template
   ========================================================================== */

/* Inline icon + text in card title. */
.pmpro_download-card {

	.pmpro_card_title {
		display: flex;
		align-items: center;
		gap: var(--pmpro--base--spacing--small, 12px);
		max-width: 100%;
	}

	.pmpro_btn {
		display: inline-flex;
		align-items: center;
		gap: var(--pmpro--base--spacing--small, 12px);
	}

}

/* ==========================================================================
   Button Template
   ========================================================================== */

/* Two-line CTA button layout. */
.pmpro.pmpro_download-button {
	display: flex;
	flex-direction: column;
	gap: var(--pmpro--base--spacing--medium, 18px);

	.pmpro_btn-download {
		align-items: center;
		align-self: flex-start;
		display: inline-flex;
		flex-direction: row;
		gap: var(--pmpro--base--spacing--small, 12px);
		text-decoration: none;
		min-width: 200px;
		max-width: 100%; 
	}

}

/* ==========================================================================
   Library Layout
   ========================================================================== */

.pmpro_download_library-list {
	display: flex;
	flex-direction: column;
	gap: var(--pmpro--base--spacing--large, 36px);
}

.pmpro_download_library-grid {
	display: grid;
	gap: var(--pmpro--base--spacing--large, 36px);
}

.pmpro_download_library-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.pmpro_download_library-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Reset individual template margins inside the library so the grid/flex gap controls spacing. */
.pmpro_download_library .pmpro_download,
.pmpro_download_library .pmpro_download-link,
.pmpro_download_library .pmpro_download-button,
.pmpro_download_library .pmpro .pmpro_card {
	margin: 0;
}

/* Grid: buttons stretch to fill cells and center content. */
.pmpro_download_library-grid .pmpro_download-button {
	display: flex;
	flex-direction: column;
}

.pmpro_download_library-grid .pmpro_download-button .pmpro_btn-download {
	flex: 1;
	width: 100%;
	justify-content: center;
}

/* Grid: cards stretch to equal row height and constrain to cell width. */
.pmpro_download_library-grid .pmpro {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}

.pmpro_download_library-grid .pmpro .pmpro_download-card {
	flex: 1;
}

/* Push the card actions to the bottom when cards have different content heights. */
.pmpro_download_library-grid .pmpro_download-card .pmpro_card_content {
	flex: 1;
}