/**
 * Cuivro Outils Musicaux - Encart « Installez les applications » ([cuivro_apps]).
 *
 * L'encart reprend la carte et le bandeau des outils (cuivro-common.css, couleurs
 * de l'onglet Apparence comprises) ; seules la liste des applications et la hauteur
 * de la carte sont propres à l'encart.
 */

/* La carte d'un outil prend toute la hauteur de l'écran sur téléphone : pas l'encart. */
.cu-apps .cu-card {
	height: auto;
	min-height: 0;
	max-height: none;
}

.cu-apps .cu-apps-title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	line-height: inherit;
}

.cu-apps-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
}

.cu-apps .cu-apps-intro {
	margin: 0;
	padding: 0;
	color: var(--cu-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cu-apps .cu-apps-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cu-apps .cu-apps-item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--cu-control-border);
	border-radius: var(--cu-radius);
	background: var(--cu-control-bg);
	list-style: none;
}

.cu-apps .cu-apps-icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 14px;
	box-shadow: none;
}

.cu-apps-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.cu-apps-name {
	color: var(--cu-text);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
}

.cu-apps-desc {
	color: var(--cu-text-muted);
	font-size: 0.8rem;
	line-height: 1.4;
}

/* Lien présenté en bouton : les thèmes (Enfold) imposent leur couleur et leur soulignement aux liens. */
.cu-apps a.cu-apps-install,
.cu-apps a.cu-apps-install:hover,
.cu-apps a.cu-apps-install:focus,
.cu-apps a.cu-apps-install:visited {
	flex: 0 0 auto;
	color: var(--cu-on-accent);
	text-decoration: none;
}

.cu-apps a.cu-apps-install {
	min-width: 104px;
	padding-inline: 1.1rem;
}

/* Encart étroit (téléphone) : icône et texte côte à côte, bouton dessous sur toute la largeur. */
@container cuivro (max-width: 459.98px) {
	.cu-apps .cu-apps-item {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 12px 14px;
	}

	.cu-apps a.cu-apps-install {
		grid-column: 1 / -1;
	}
}

@container cuivro (min-width: 640px) {
	.cu-apps-body {
		padding: 20px 24px 24px;
	}
}

/* Large : les deux applications côte à côte. */
@container cuivro (min-width: 860px) {
	.cu-apps .cu-apps-list {
		grid-template-columns: 1fr 1fr;
	}
}