/**
 * 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;
}

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

.pmpro_download {
	margin: var(--pmpro--base--spacing--small, 12px) 0;
}

.pmpro_download_link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pmpro_download_meta {
	color: var(--pmpro--color--border, #777);
	font-size: 0.875em;
}

/* Link template: locked state. */
.pmpro_download.pmpro_download-locked .pmpro_download_link {
	color: var(--pmpro--color--border, #777);
}

/* ==========================================================================
   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);
}

/* Inline icon + text in card action button. */
.pmpro_download_card .pmpro_card_actions .pmpro_btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Card: locked state icon color. */
.pmpro_download_card.pmpro_download-locked .pmpro_card_title svg {
	color: var(--pmpro--color--border, #777);
}


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

/* Two-line CTA button layout. */
.pmpro_download_btn_cta {
	display: inline-flex;
	align-items: center;
	gap: var(--pmpro--base--spacing--small, 12px);
	text-align: left;
	text-decoration: none;
}

.pmpro_download_btn_cta:hover {
	text-decoration: none;
}

.pmpro_download_btn_text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.pmpro_download_btn_text strong {
	font-size: 1em;
}

.pmpro_download_btn_text small {
	font-size: 0.8125em;
	font-weight: 400;
	opacity: 0.85;
}

.pmpro_download_button {
	margin: var(--pmpro--base--spacing--medium, 18px) 0;
}

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

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

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

.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_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_btn_cta {
	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_card {
	flex: 1;
}

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