/**
 * Grid/list view switch and the list-view course layout.
 *
 * Shared by every surface that shows a course grid with a view switch: the
 * catalog and category archive, and My Courses. It lived in catalog.css, which
 * only the catalog loads, so My Courses rendered the same grid with no way to
 * switch it (Basecamp 10346630582). The switch is named for itself
 * (.lrn-view-toggle), not for the catalog filter bar it used to sit in.
 *
 * @package Learnomy
 */

/* Grid/list toggle — a single bordered segmented control so BOTH icons read as
   proper square buttons (not one boxed + one bare), visually consistent with the
   neighbouring select boxes (Basecamp #9972665769). */
.lrn-view-toggle {
	display:       inline-flex;
	gap:           0;
	flex-shrink:   0;
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	overflow:      hidden;
	background:    var(--lrn-bg);
}

/* Each half: icon-only square. Inherits .lrn-btn base; drop its own
   border/radius so the segmented wrapper owns the box. Sized to 40px so the
   1px-bordered wrapper renders at 42px — flush with the neighbouring 42px
   search/category/sort controls (Basecamp #9981880849; the toggle read 46px
   because .lrn-btn's min-height: var(--lrn-touch-min) (~44px) overrode the old
   36px). min-height:0 lets the explicit height win; the ::after extender
   (learnomy.css, inset:-4px) keeps the tap target ≥44px for accessibility. */
.lrn-btn.lrn-view-btn {
	width:           40px;
	height:          40px;
	min-width:       40px;
	min-height:      0;
	padding:         0;
	flex-shrink:     0;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	border:          0;
	border-radius:   0;
	background:      transparent;
	color:           var(--lrn-text-secondary);
}

/* Divider between the two halves. */
.lrn-btn.lrn-view-btn + .lrn-view-btn {
	border-inline-start: 1px solid var(--lrn-border);
}

.lrn-view-btn svg {
	width:       18px;
	height:      18px;
	flex-shrink: 0;
}

.lrn-view-btn:hover:not(.is-active) {
	background: var(--lrn-bg-hover);
	color:      var(--lrn-text);
}

.lrn-view-btn.is-active {
	background: var(--lrn-accent-bg);
	color:      var(--lrn-accent);
}

/* ==========================================================================
   Course grid — three explicit tiers (mobile / tablet / desktop)

   Moved from catalog.css (Basecamp 10350179892): the "Catalog columns"
   setting is site-wide by name, so My Courses has to resolve the same
   modifier class AND load the stylesheet that can act on it. catalog.css
   only ever loads on the catalog/category routes; this sheet already
   loads on catalog, category AND account-courses (see the file header),
   so the column rules belong here, not there.

   Below 640px: 1 column (mobile @media at bottom).
   640px-1023px: 2 columns (base).
   1024px+: 3 columns, or the Catalog columns setting as a maximum, with a
   minimum card width (see the 1024px block).
   ========================================================================== */

.lrn-courses-grid {
	grid-template-columns: repeat(2, 1fr);
}

/* The equal-height rule for `.lrn-courses-grid > li` lives in learnomy.css,
   beside `.lrn-grid`: every page that prints a course grid needs it, and this
   sheet only loads on the catalog, category and My Courses routes. */

@media (min-width: 1024px) {
	/* Wide desktop: 3 columns by default. The previous code had a separate
	   1440px breakpoint; consolidating here keeps this on the canonical
	   breakpoint and still gives most laptops the 3-column layout
	   (1280-1440px range). */
	.lrn-courses-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Site-wide "Catalog columns" setting (2-5, default 3), read as a MAXIMUM.
	   Mobile (<=640px) stays 1 column and 640-1024px stays 2 (the responsive
	   contract); this only sets the desktop count.

	   A card never drops below --lrn-course-card-min: when the grid's OWN
	   width cannot fit N cards that wide, it shows fewer. Viewport breakpoints
	   could not see that My Courses sits beside the account sidebar, so 5
	   columns there made 146px cards whose progress label ran under the
	   Start button. The same rule keeps the catalog's tracks equal. */
	.lrn-courses-grid--cols-2 { --lrn-grid-cols: 2; }
	.lrn-courses-grid--cols-3 { --lrn-grid-cols: 3; }
	.lrn-courses-grid--cols-4 { --lrn-grid-cols: 4; }
	.lrn-courses-grid--cols-5 { --lrn-grid-cols: 5; }

	.lrn-courses-grid[class*="lrn-courses-grid--cols-"] {
		--lrn-course-card-min: 190px;
		grid-template-columns: repeat(
			auto-fill,
			minmax(
				max(
					var(--lrn-course-card-min),
					calc( ( 100% - ( var(--lrn-grid-cols) - 1 ) * var(--lrn-sp-6) ) / var(--lrn-grid-cols) )
				),
				1fr
			)
		);
	}
}

@media (max-width: 640px) {
	/* Mobile: single column. Filter bar stays as flex-wrap, so the
	   search input takes the full row and category/sort/toggle wrap
	   beneath it. */
	.lrn-courses-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   List view — toggled by the grid/list switch.

   Compound selector .lrn-courses-grid.lrn-list-layout intentionally
   wins specificity over the 1440px @media that forces 3 columns. Each
   course renders as a full-width horizontal row: image left (280px),
   content right (flex 1), price pinned to the bottom of the row.
   Mobile collapses back to vertical stack — 280px thumbnails leave no
   room for content on a phone.
   ========================================================================== */

.lrn-courses-grid.lrn-list-layout {
	grid-template-columns: 1fr;
	gap:                   var(--lrn-sp-4);
}

.lrn-courses-grid.lrn-list-layout .lrn-course-card {
	flex-direction: row;
	align-items:    stretch;
	min-height:     180px;
}

.lrn-courses-grid.lrn-list-layout .lrn-course-card__thumbnail-link {
	flex:       0 0 280px;
	display:    block;
	align-self: stretch;
}

.lrn-courses-grid.lrn-list-layout .lrn-course-card__thumbnail {
	width:        100%;
	height:       100%;
	aspect-ratio: auto;
}

.lrn-courses-grid.lrn-list-layout .lrn-course-card__info {
	flex:    1 1 auto;
	padding: var(--lrn-sp-5) var(--lrn-sp-6);
	gap:     var(--lrn-sp-2);
}

.lrn-courses-grid.lrn-list-layout .lrn-course-card__title {
	font-size: var(--lrn-text-lg);
}

.lrn-courses-grid.lrn-list-layout .lrn-course-card__footer {
	margin-top:  auto;
	padding-top: var(--lrn-sp-3);
}

/* Wishlist heart sits at the top-right of the content pane in list
   view so the visual hierarchy mirrors the grid view. */
.lrn-courses-grid.lrn-list-layout .lrn-wishlist-btn {
	top:   var(--lrn-sp-3);
	inset-inline-end: var(--lrn-sp-4);
}

/* My Courses: the tab strip and the switch share one toolbar row. The
   bottom rule moves from the strip to the row so it spans both; the strip
   aligns to the row's bottom so each tab's 2px active underline still sits on
   that rule. min-width: 0 lets the scrolling strip shrink instead of pushing
   the switch off the end on a phone. */
.lrn-courses-toolbar {
	display:          flex;
	align-items:      flex-end;
	gap:              var(--lrn-sp-3);
	border-bottom:    1px solid var(--lrn-border);
	margin-block-end: var(--lrn-sp-6);
}

.lrn-courses-toolbar > .lrn-tab-nav {
	flex:          1 1 auto;
	min-width:     0;
	border-bottom: 0;
	margin-bottom: 0;
}

.lrn-courses-toolbar > .lrn-view-toggle {
	flex:             0 0 auto;
	align-self:       center;
}

@media (max-width: 640px) {

	/* List view collapses to the stacked card below 640px, so the switch
	   has nothing to switch and is hidden. */
	.lrn-view-toggle {
		display: none;
	}

	/* List view on mobile: revert to the same vertical card layout as
	   grid view. 280px-wide thumbnails are too aggressive at this width. */
	.lrn-courses-grid.lrn-list-layout .lrn-course-card {
		flex-direction: column;
		min-height:     0;
	}

	.lrn-courses-grid.lrn-list-layout .lrn-course-card__thumbnail-link {
		flex: 0 0 auto;
	}

	.lrn-courses-grid.lrn-list-layout .lrn-course-card__thumbnail {
		aspect-ratio: 16 / 9;
		height:       auto;
	}
}