/* LMS Theme — katalog kursow i strona kategorii
   Szablon: tutor/archive-course.php */

/* ---------- Naglowek strony (katalog, kategoria) ---------- */

.lms-page-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: 40px;
	background:
		radial-gradient(55% 90% at 100% 10%, rgba(131, 58, 180, 0.08), transparent 70%),
		radial-gradient(40% 70% at 75% 100%, rgba(247, 119, 55, 0.06), transparent 70%);
}

.lms-page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: 40px;
	padding-top: 8px;
}

.lms-page-hero__title {
	margin: 0 0 20px;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* Druga linia tytulu: gradient obejmuje samo slowo, nie cala szerokosc kolumny. */
.lms-page-hero__title .lms-grad {
	display: table;
	padding-bottom: 0.08em;
}

.lms-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.lms-page-hero__count {
	font-size: 14px;
	color: var(--lms-text-2);
}

.lms-page-hero__count strong {
	color: var(--lms-text);
	font-weight: 800;
}

.lms-page-hero__visual .lms-hero-visual {
	max-width: 520px;
	aspect-ratio: 16 / 11;
}

.lms-page-hero__visual .lms-hero-visual__photo {
	inset: 0 20% 0 22%;
	border-radius: 48px 160px 48px 48px;
}

/* ---------- Popularne obszary ---------- */

.lms-areas {
	padding-block: 20px;
	border-block: 1px solid var(--lms-border);
	background: var(--lms-surface);
}

.lms-areas__inner {
	display: flex;
	align-items: center;
	gap: 16px 40px;
}

.lms-areas__title {
	flex: none;
	max-width: 180px;
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
}

.lms-areas .lms-cats--chip {
	flex: 1;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-block: 4px;
	scrollbar-width: none;
}

.lms-areas .lms-cats--chip::-webkit-scrollbar {
	display: none;
}

.lms-areas .lms-cat-chip {
	flex: none;
}

/* ---------- Tresc katalogu ---------- */

.lms-catalog__body {
	padding-top: 24px;
}

/* Polecany kurs */

.lms-featured {
	display: grid;
	grid-template-columns: minmax(240px, 380px) minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px 36px;
	margin-bottom: 40px;
	padding: 14px 32px 14px 14px;
}

.lms-featured__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	border-radius: 14px;
	background: var(--lms-gradient-soft);
}

.lms-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lms-featured__media .lms-badge {
	position: absolute;
	top: 12px;
	left: 12px;
}

.lms-featured .lms-eyebrow {
	margin-bottom: 6px;
}

.lms-featured__title {
	margin: 0 0 8px;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.3;
}

.lms-featured__title a {
	color: var(--lms-text);
}

.lms-featured__title a:hover {
	color: var(--lms-purple);
}

.lms-featured__text {
	max-width: 520px;
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--lms-text-2);
}

/* Lista */

.lms-listing {
	scroll-margin-top: calc(var(--lms-header-h) + 24px);
}

.lms-listing__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-bottom: 20px;
}

.lms-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 6px 0 16px;
	border: 1px solid var(--lms-border);
	border-radius: var(--lms-radius-control);
	background: var(--lms-surface);
	font-size: 14px;
}

.lms-sort label {
	color: var(--lms-muted);
}

.lms-sort select {
	width: auto;
	height: 40px;
	padding: 0 28px 0 4px;
	border: 0;
	background-color: transparent;
	color: var(--lms-text);
	font-family: var(--lms-font);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.lms-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
}

.lms-filters__dropdowns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.lms-filters__clear {
	margin-left: 4px;
}

/* ---------- FAQ + inne kategorie ---------- */

.lms-help {
	display: grid;
	grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--lms-gap);
}

.lms-help--no-faq {
	grid-template-columns: minmax(0, 1fr);
}

.lms-help__faq {
	padding: 8px 24px;
}

.lms-help__cats {
	padding: 20px 24px;
}

.lms-help__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.4;
}

.lms-help__cats ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lms-help__cats a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	color: var(--lms-text);
	font-size: 15px;
	font-weight: 500;
}

.lms-help__cats a > span:nth-child(2) {
	flex: 1;
}

.lms-help__cats a:hover {
	color: var(--lms-purple);
}

.lms-help__icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
}

/* ---------- Responsywnosc ---------- */

@media (max-width: 1023px) {
	.lms-page-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lms-page-hero__visual {
		order: 2;
	}

	.lms-featured {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		padding-right: 14px;
	}

	.lms-featured__cta {
		grid-column: 1 / -1;
	}

	.lms-help {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.lms-areas__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.lms-areas__title {
		max-width: none;
	}

	.lms-areas .lms-cats--chip {
		width: calc(100% + (2 * var(--lms-gutter)));
		margin-inline: calc(var(--lms-gutter) * -1);
		padding-inline: var(--lms-gutter);
	}

	.lms-featured {
		grid-template-columns: minmax(0, 1fr);
		padding: 10px 10px 16px;
	}

	.lms-featured__body {
		padding-inline: 8px;
	}

	.lms-filters .lms-pills {
		flex-wrap: nowrap;
		width: calc(100% + (2 * var(--lms-gutter)));
		margin-inline: calc(var(--lms-gutter) * -1);
		padding-inline: var(--lms-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.lms-filters .lms-pills::-webkit-scrollbar {
		display: none;
	}

	.lms-page-hero__actions .lms-btn {
		width: 100%;
	}
}