/* ============================================================
   HomeGeek TV — LearnPress integration styles
   ============================================================ */


/* ── Course grid (archive / listings) ───────────────────────────────────── */

.learn-press-courses {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap:                   1.5rem;
	list-style:            none;
	padding:               0;
	margin:                0;
}

/* Individual course card */
.learn-press-courses li.course {
	background:     var(--wp--preset--color--surface);
	border:         1px solid var(--wp--preset--color--border);
	border-radius:  12px;
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     border-color 0.2s ease, box-shadow 0.2s ease;
}

.learn-press-courses li.course:hover {
	border-color: rgba(108, 59, 255, 0.4);
	box-shadow:   0 0 0 1px rgba(108, 59, 255, 0.2), 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Thumbnail wrapper */
.course-thumbnail {
	line-height: 0;
	overflow:    hidden;
	flex-shrink: 0;
}

.course-thumbnail > a {
	display: block;
}

.course-thumbnail img {
	width:        100%;
	height:       auto;
	aspect-ratio: 16/9;
	object-fit:   cover;
	transition:   transform 0.3s ease;
	display:      block;
}

.learn-press-courses li.course:hover .course-thumbnail img {
	transform: scale(1.03);
}

/* Course title */
.wap-course-title {
	font-family:    var(--wp--preset--font-family--space-grotesk);
	font-size:      var(--wp--preset--font-size--lg);
	font-weight:    700;
	letter-spacing: -0.015em;
	line-height:    1.25;
	margin:         0;
	padding:        1.25rem 1.25rem 0.625rem;
}

.wap-course-title a,
.wap-course-title a.course-permalink {
	color:           var(--wp--preset--color--text-primary);
	text-decoration: none;
	transition:      color 0.18s ease;
}

.wap-course-title a:hover {
	color: var(--wp--preset--color--violet);
}

/* Course excerpt */
.course-excerpt {
	font-family: var(--wp--preset--font-family--inter);
	font-size:   var(--wp--preset--font-size--sm);
	color:       var(--wp--preset--color--text-muted);
	line-height: 1.65;
	padding:     0 1.25rem 1.25rem;
	flex:        1;
}

/* Separator above info bar */
.learn-press-courses .separator {
	height:     1px;
	background: var(--wp--preset--color--border);
	margin:     0;
}

/* Info bar */
.course-info {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0.875rem 1.25rem;
	gap:             0.75rem;
	flex-wrap:       wrap;
}

/* Price */
.course-price {
	font-family:    var(--wp--preset--font-family--space-grotesk);
	font-size:      var(--wp--preset--font-size--md);
	font-weight:    700;
	color:          var(--wp--preset--color--lime);
	letter-spacing: -0.01em;
}

.course-price .free,
.course-price .price-amount {
	color:       var(--wp--preset--color--lime);
	font-weight: 700;
}

.course-price .price ins {
	text-decoration: none;
	color:           var(--wp--preset--color--lime);
}

.course-price .price del {
	font-size:       var(--wp--preset--font-size--sm);
	font-weight:     400;
	color:           var(--wp--preset--color--text-muted);
	text-decoration: line-through;
	margin-right:    0.35rem;
}

/* Students / instructor meta */
.course-students,
.course-instructor {
	font-family:    var(--wp--preset--font-family--jetbrains-mono);
	font-size:      var(--wp--preset--font-size--xs);
	color:          var(--wp--preset--color--text-muted);
	letter-spacing: 0.04em;
}

.course-instructor a {
	color:           var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.course-instructor a:hover {
	color: var(--wp--preset--color--text-primary);
}


/* ── Custom course placeholder (no featured image) ────────────────────── */

.hg-course-placeholder {
	position:     relative;
	width:        100%;
	aspect-ratio: 16/9;
	background:   #0D0D14;
	overflow:     hidden;
	display:      flex;
	align-items:  flex-end;
}

.hg-course-placeholder__glow {
	position:       absolute;
	inset:          0;
	background:     radial-gradient(ellipse 90% 80% at 15% 0%,   rgba(108, 59, 255, 0.5)  0%, transparent 55%),
	                radial-gradient(ellipse 55% 55% at 90% 100%, rgba(45, 226, 255, 0.13)  0%, transparent 50%);
	pointer-events: none;
	transition:     background 0.3s ease;
}

.learn-press-courses li.course:hover .hg-course-placeholder__glow {
	background: radial-gradient(ellipse 90% 80% at 15% 0%,   rgba(108, 59, 255, 0.68) 0%, transparent 55%),
	            radial-gradient(ellipse 55% 55% at 90% 100%, rgba(45, 226, 255, 0.18)  0%, transparent 50%);
}

.hg-course-placeholder__code {
	position:       absolute;
	bottom:         -0.1em;
	right:          -0.05em;
	font-family:    var(--wp--preset--font-family--jetbrains-mono);
	font-size:      6.5rem;
	font-weight:    400;
	color:          rgba(255, 255, 255, 0.055);
	line-height:    1;
	user-select:    none;
	pointer-events: none;
	letter-spacing: -0.05em;
}

.hg-course-placeholder__content {
	position:       relative;
	z-index:        1;
	padding:        1.25rem 1.5rem;
	display:        flex;
	flex-direction: column;
	gap:            0.35rem;
	width:          100%;
}

.hg-course-placeholder__eyebrow {
	font-family:    var(--wp--preset--font-family--jetbrains-mono);
	font-size:      0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color:          var(--wp--preset--color--lime);
}

.hg-course-placeholder__title {
	font-family:    var(--wp--preset--font-family--space-grotesk);
	font-size:      1.05rem;
	font-weight:    700;
	color:          #F2F2F0;
	line-height:    1.2;
	letter-spacing: -0.02em;
}

.hg-course-placeholder__brand {
	font-family:    var(--wp--preset--font-family--space-grotesk);
	font-size:      0.6rem;
	color:          rgba(255, 255, 255, 0.28);
	letter-spacing: -0.01em;
	margin-top:     0.15rem;
}

.hg-course-placeholder__tld {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	color:       rgba(200, 255, 54, 0.45);
}


/* ── LP buttons ──────────────────────────────────────────────────────── */

.lp-button,
.learn-press-button,
a.learn-press-button,
button.learn-press-button,
.lp-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	font-family:      var(--wp--preset--font-family--space-grotesk);
	font-size:        var(--wp--preset--font-size--sm);
	font-weight:      700;
	background-color: var(--wp--preset--color--violet);
	color:            var(--wp--preset--color--text-primary) !important;
	border:           none;
	border-radius:    8px;
	padding:          0.625rem 1.25rem;
	text-decoration:  none;
	cursor:           pointer;
	transition:       background-color 0.18s ease, transform 0.12s ease;
}

.lp-button:hover,
.learn-press-button:hover,
a.learn-press-button:hover,
button.learn-press-button:hover {
	background-color: var(--wp--preset--color--violet-dark);
	color:            var(--wp--preset--color--text-primary) !important;
	transform:        translateY(-1px);
}


/* ── LP misc / global text fixes ───────────────────────────────────────── */

.course-categories a,
.course-tags a {
	font-family:     var(--wp--preset--font-family--jetbrains-mono);
	font-size:       var(--wp--preset--font-size--xs);
	color:           var(--wp--preset--color--text-muted);
	text-decoration: none;
	letter-spacing:  0.04em;
}

.course-categories a:hover,
.course-tags a:hover {
	color: var(--wp--preset--color--lime);
}

/* LP pagination */
.learn-press-pagination a,
.learn-press-pagination span {
	font-family:     var(--wp--preset--font-family--jetbrains-mono);
	font-size:       var(--wp--preset--font-size--xs);
	color:           var(--wp--preset--color--text-muted);
	text-decoration: none;
	padding:         0.4rem 0.75rem;
	border:          1px solid var(--wp--preset--color--border);
	border-radius:   6px;
	transition:      color 0.18s ease, border-color 0.18s ease;
}

.learn-press-pagination a:hover {
	color:        var(--wp--preset--color--text-primary);
	border-color: rgba(108, 59, 255, 0.4);
}

.learn-press-pagination .current {
	color:        var(--wp--preset--color--lime);
	border-color: rgba(200, 255, 54, 0.25);
}


/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.learn-press-courses {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 1099px) {
	.learn-press-courses {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ── LP 4.2+ new card structure ──────────────────────────────────────────────── */

/* Equal-height cards: stretch course-item to fill the li */
.learn-press-courses li.course .course-item {
	display:        flex;
	flex-direction: column;
	height:         100%;
}

/* course-content fills remaining height and stacks children */
.course-content {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        1.25rem 1.25rem 1rem;
}

/* Reset per-element padding that was written for the old template */
.course-content .wap-course-title {
	padding: 0 0 0.625rem;
}

.course-content .course-info {
	padding-top:    0.875rem;
	padding-left:   0;
	padding-right:  0;
	padding-bottom: 0;
	margin-top:     auto; /* pushes info bar to card bottom */
}

/* Short description: flex: 1 so it fills space above the info bar */
.course-short-description {
	font-family: var(--wp--preset--font-family--inter);
	font-size:   var(--wp--preset--font-size--sm);
	color:       var(--wp--preset--color--text-muted);
	line-height: 1.65;
	margin:      0 0 0.5rem;
	flex:        1;
}


/* ── Instructor / category row ──────────────────────────────────────────────── */

.course-instructor-category {
	display:     flex;
	flex-wrap:   wrap;
	gap:         0.25rem 1.25rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size:   var(--wp--preset--font-size--xs);
	color:       var(--wp--preset--color--text-muted);
	margin:      0 0 0.75rem;
}

.course-instructor-category > div {
	display:     flex;
	align-items: baseline;
	gap:         0.3rem;
	flex-wrap:   wrap;
}

.course-instructor-category label {
	color:       var(--wp--preset--color--text-muted);
	font-style:  italic;
	font-weight: 400;
}

.course-instructor-category .course-instructor,
.course-instructor-category .course-categories {
	display:     inline;
	color:       var(--wp--preset--color--text-muted);
}

.course-instructor-category a {
	color:           var(--wp--preset--color--text-muted);
	text-decoration: none;
	transition:      color 0.18s ease;
}

.course-instructor-category a:hover {
	color: var(--wp--preset--color--cyan);
}


/* ── Meta items (Lessons / Quizzes / Students / Duration) ────────────────── */

.course-wrap-meta {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.35rem 1rem;
	margin:    0 0 0.75rem;
}

.meta-item,
.meta-item * {
	font-family:    var(--wp--preset--font-family--jetbrains-mono);
	font-size:      var(--wp--preset--font-size--xs);
	color:          var(--wp--preset--color--text-muted);
	letter-spacing: 0.04em;
}


/* ── Read more / enroll link ────────────────────────────────────────────────── */

.course-readmore a {
	font-family:     var(--wp--preset--font-family--space-grotesk);
	font-size:       var(--wp--preset--font-size--sm);
	font-weight:     700;
	color:           var(--wp--preset--color--lime);
	text-decoration: none;
	letter-spacing:  0.02em;
	transition:      color 0.18s ease;
}

.course-readmore a:hover {
	color: var(--wp--preset--color--text-primary);
}