/* ==========================================================================
   MP ZERTIFIZIERUNGEN · mp-certifications.css
   Ablage: generatepress-child/assets/css/mp-certifications.css
   Wird vom Snippet "MP Zertifizierungen" automatisch auf UM-Profilseiten
   geladen (kein Eintrag in functions.php nötig).
   ---------------------------------------------------------------------
   Bausteine:
     .mp-repeatable-list--grid   Grid-Variante der Repeatable List
                                 (Header/Titel/"+" = bestehende Klassen)
     .mp-cert-grid__*            Kachel (Icon, Titel, Meta, Badge, PDF-Link,
                                 Bearbeiten-Stift)
     .mp-cert-upload             PDF-Auswahlfeld im Modal
                                 -> Kandidat für eine allgemeine
                                    ui-file-Komponente in ui-form.css
   Ausschließlich Tokens aus mp-tokens.css.
   ========================================================================== */

/* ---------- Grid (mobile-first: 1 Spalte, ab 601px: 2 Spalten) ---------- */
.mp-repeatable-list--grid .mp-cert-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mp-space-4);
}
@media (min-width: 601px) {
	.mp-repeatable-list--grid .mp-cert-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Kachel ---------- */
.mp-cert-grid__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--mp-space-3);
	min-width: 0;
	padding: var(--mp-space-4);
	border: 1px solid var(--mp-ink-200);
	border-radius: var(--mp-radius-md);
	background: var(--mp-surface);
}

/* Icon-Badge - gleiche Optik wie die Timeline-Icons bei Berufserfahrung/
   Bildungsweg (Primary-Tint-Kreis, Primary-Icon). */
.mp-cert-grid__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--mp-btn-height-sm);
	height: var(--mp-btn-height-sm);
	border-radius: var(--mp-radius-pill);
	background: var(--mp-primary-tint);
	color: var(--mp-primary);
	font-size: var(--mp-fs-h5);
}
.mp-cert-grid__item--verified .mp-cert-grid__icon {
	background: var(--mp-success-bg);
	color: var(--mp-success);
}

/* Logo-Variante (z. B. SecAware): neutrale weiße Fläche mit Rahmen,
   damit das Markenlogo in seinen eigenen Farben steht. */
.mp-cert-grid__item .mp-cert-grid__icon--logo {
	border: 1px solid var(--mp-ink-200);
	background: var(--mp-surface);
}
.mp-cert-grid__icon--logo img {
	display: block;
	width: 65%;
	height: 65%;
	object-fit: contain;
}

.mp-cert-grid__body {
	flex: 1 1 auto;
	min-width: 0;
}
/* Platz für den Stift oben rechts, damit lange Titel nicht darunter laufen */
.mp-cert-grid__item--editable .mp-cert-grid__body {
	padding-right: calc(var(--mp-size-icon-btn) - var(--mp-space-2));
}

.mp-cert-grid__title {
	margin: 0;
	font-size: var(--mp-fs-body-m);
	line-height: var(--mp-lh-body-m);
	font-weight: 600;
	color: var(--mp-ink-900);
	overflow-wrap: anywhere;
}
.mp-cert-grid__meta {
	margin: var(--mp-space-1) 0 0;
	font-size: var(--mp-fs-body-s);
	line-height: var(--mp-lh-body-s);
	color: var(--mp-ink-500);
}

.mp-cert-grid__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mp-space-2) var(--mp-space-3);
	margin-top: var(--mp-space-3);
}
.mp-cert-grid__footer:empty {
	display: none;
}

/* "Verifiziert" = bestehendes .mp-tag (mp-base.css), hier nur die Farbe. */
.mp-tag.mp-cert-grid__verified {
	gap: var(--mp-space-1);
	background: var(--mp-success-bg);
	color: var(--mp-success);
}

/* PDF-Link = .ui-button--tertiary, hier nur kompakt ohne Mindesthöhe. */
.mp-cert-grid__file.ui-button {
	gap: var(--mp-space-1);
	height: auto;
	min-height: 0;
	padding: 0;
	font-size: var(--mp-fs-body-s);
}

/* Stift oben rechts - Klassen wie jeder andere Stift im Profil. */
.mp-cert-grid__edit.ui-button {
	position: absolute;
	top: var(--mp-space-2);
	right: var(--mp-space-2);
}

/* ---------- Modal: PDF-Auswahlfeld ---------- */
.mp-cert-upload {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--mp-space-3);
	padding: var(--mp-space-4);
	border: 1.5px dashed var(--mp-ink-300);
	border-radius: var(--mp-radius-md);
	background: var(--mp-surface-subtle);
	cursor: pointer;
}
.mp-cert-upload:hover {
	border-color: var(--mp-primary);
}
.mp-cert-upload:focus-within {
	border-color: var(--mp-primary);
	box-shadow: var(--mp-shadow-focus);
}
.mp-cert-upload[aria-invalid="true"],
.mp-cert-upload:has(input[aria-invalid="true"]) {
	border-color: var(--mp-error);
}
/* Natives Datei-Feld bleibt fokussier-/bedienbar, liegt unsichtbar über der Fläche */
.mp-cert-upload__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.mp-cert-upload__icon {
	flex: 0 0 auto;
	color: var(--mp-primary);
	font-size: var(--mp-fs-h3);
}
.mp-cert-upload__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mp-cert-upload__action {
	font-size: var(--mp-fs-body-s);
	font-weight: 700;
	color: var(--mp-primary);
	text-decoration: underline;
}
.mp-cert-upload__filename {
	font-size: var(--mp-fs-caption);
	line-height: var(--mp-lh-caption);
	color: var(--mp-ink-500);
	overflow-wrap: anywhere;
}

/* ---------- Modal-Footer: Löschen links, Aktionen rechts ---------- */
.mp-cert-modal-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mp-space-3);
	width: 100%;
}
.mp-cert-modal-footer__delete.ui-button--tertiary,
.mp-cert-modal-footer__delete.ui-button--tertiary:hover {
	gap: var(--mp-space-2);
	margin-right: auto;
	color: var(--mp-error);
}
.mp-cert-modal-footer__actions {
	display: flex;
	gap: var(--mp-space-3);
	margin-left: auto;
}