/* Pułapki - [pulapki_moje_kursy]. Wszystko pod prefiksem pmk-.
   Tokeny z makiety "Moje konto i kurs": zieleń var(--e-global-color-accent, #153E1B) / hover var(--e-global-color-b97e696, #1B5123), złoty var(--e-global-color-2d0f187, #E9B665), krem var(--e-global-color-63914dd, #FFFBF7), szałwia #DFE3D9. */

.pmk {
	--pmk-green: var(--e-global-color-accent, #153E1B);
	--pmk-green-h: var(--e-global-color-b97e696, #1B5123);
	--pmk-gold: var(--e-global-color-2d0f187, #E9B665);
	--pmk-cream: var(--e-global-color-63914dd, #FFFBF7);
	--pmk-sage: #DFE3D9;
	--pmk-text: #333333;
	--pmk-muted: #5C6670;
	--pmk-line: #E4E1D6;
	container-type: inline-size;
	font-family: Montserrat, sans-serif;
	color: var(--pmk-text);
	display: flex;
	flex-direction: column;
	gap: 40px;
	text-align: left;
	width: 100%;
}
.pmk [hidden] { display: none !important; }
.pmk h2, .pmk h3, .pmk p { margin: 0; }
.pmk a { text-decoration: none; }

.pmk-empty { font-size: 15px; line-height: 1.6; text-align: center; padding: 24px 0; }
.pmk-empty a { color: var(--pmk-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Okładki ---------- */
.pmk-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pmk-sage); }
.pmk-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pmk-cover__ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #D7DCCB 0 12px, #CBD2BD 12px 24px); }

/* ---------- Kontynuuj ---------- */
.pmk-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5E7A4F; margin-bottom: 14px !important; text-align: left; }
.pmk-resume__box { background: var(--pmk-green); color: var(--pmk-cream); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pmk-resume__cover { aspect-ratio: auto; height: 100%; min-height: 240px; }
.pmk-resume__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .25); }
.pmk-resume__bar > span { display: block; height: 100%; background: var(--pmk-gold); }
.pmk-resume__body { padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: flex-start; }
.pmk-resume__type { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pmk-gold); }
.pmk-resume__title { font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--pmk-cream); text-wrap: balance; }
.pmk-resume__text { font-size: 14px; line-height: 1.6; color: #D9E2D3; }

/* ---------- Przyciski ---------- */
.pmk .pmk-btn { display: inline-block; box-sizing: border-box; padding: 12px 20px; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-align: center; border: 1px solid var(--pmk-green); border-radius: 0; cursor: pointer; transition: background .15s ease, color .15s ease; }
.pmk .pmk-btn--solid { background: var(--pmk-green); color: var(--pmk-cream); }
.pmk .pmk-btn--solid:hover, .pmk .pmk-btn--solid:focus { background: var(--pmk-green-h); color: var(--pmk-cream); }
.pmk .pmk-btn--ghost { background: transparent; color: var(--pmk-green); }
.pmk .pmk-btn--ghost:hover, .pmk .pmk-btn--ghost:focus { background: var(--pmk-green); color: var(--pmk-cream); }
.pmk .pmk-btn--light { background: var(--pmk-cream); color: var(--pmk-green); border-color: var(--pmk-cream); margin-top: 6px; }
.pmk .pmk-btn--light:hover, .pmk .pmk-btn--light:focus { background: #F7EBC8; color: var(--pmk-green); border-color: #F7EBC8; }

/* ---------- Lista ---------- */
.pmk-list__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pmk-title { text-align: left; font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--pmk-green); }
.pmk-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pmk .pmk-filter { appearance: none; cursor: pointer; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; border-radius: 20px; border: 1px solid #C8CFBE; background: transparent; color: var(--pmk-green); }
.pmk .pmk-filter:hover, .pmk .pmk-filter:focus { background: #EEF1EA; color: var(--pmk-green); border-color: #C8CFBE; }
.pmk .pmk-filter.is-active, .pmk .pmk-filter.is-active:hover, .pmk .pmk-filter.is-active:focus { background: var(--pmk-green); color: var(--pmk-cream); border-color: var(--pmk-green); }

.pmk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pmk-card { background: #fff; border: 1px solid #E9E5D9; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.pmk-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(21, 62, 27, .45); }
.pmk-badge { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; line-height: 1.2; z-index: 1; }
.pmk-badge--done { background: var(--pmk-green); color: var(--pmk-cream); }
.pmk-badge--progress { background: var(--pmk-cream); color: #2A2205; }
.pmk-badge--new { background: var(--pmk-gold); color: #2A2205; }

.pmk-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pmk-card__type { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5E7A4F; }
.pmk-card__title { font-size: 17px; font-weight: 500; line-height: 1.35; }
.pmk-card__title a { color: #1F2A1D; }
.pmk-card__title a:hover { color: var(--pmk-green-h); }
.pmk-prog { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pmk-prog__row { display: flex; justify-content: space-between; font-size: 12px; color: #4E554A; }
.pmk-prog__track { height: 5px; background: #EFECE2; }
.pmk-prog__track > span { display: block; height: 100%; background: var(--pmk-gold); }
.pmk-card--done .pmk-prog__track > span { background: var(--pmk-green); }
.pmk-card__access { font-size: 12px; color: #6B7166; }
.pmk-card__actions { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pmk .pmk-cert { font-size: 13px; font-weight: 500; color: var(--pmk-green); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Węższe kolumny (tablet, telefon) ---------- */
@container (max-width: 720px) {
	.pmk-resume__box { grid-template-columns: minmax(0, 1fr); }
	.pmk-resume__cover { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
	.pmk-resume__body { padding: 22px 20px; }
	.pmk-grid { gap: 16px; }
}
@container (max-width: 560px) {
	.pmk { gap: 32px; }
	.pmk-grid { grid-template-columns: minmax(0, 1fr); }
	.pmk-title { font-size: 22px; }
	.pmk-resume__title { font-size: 19px; }
}

/* Widget "Moje konto" ma własny CSS centrujący każde h2 w zakładce (width:100%) - przywracamy układ z makiety. */
.pmk .pmk-eyebrow,
.pmk .pmk-title { text-align: left !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
.pmk .pmk-eyebrow { margin-top: 0 !important; }

/* Elementor ma .elementor img { height:auto; max-width:100% } - bez tego pod zdjęciem zostaje pasek tła. */
.pmk .pmk-cover .pmk-cover__img, .pk .pmk-cover .pmk-cover__img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }