/* ===========================================================================
   lg-topics — "All topics", with three ways to look at them
   ---------------------------------------------------------------------------
   The full catalogue of a category, grouped three ways. Nothing here is about
   grammar: reading groups its texts by category / level / popularity in
   exactly the same shape, and so do listening and vocabulary.

     by-group   grouped under the existing section names (Verbs, Nouns …)
     by-level   grouped under CEFR bands (Beginner, Elementary …)
     by-popular one flat grid, most used first

   STRUCTURE

     .lg-topics
       input.lg-topics__switch  ×3        (radios, visually hidden)
       .lg-topics__head
         .lg-topics__title                Alle Themen
         .lg-topics__views                the three pills
       .lg-topics__view--group
         .lg-topics__group ×n
           .lg-topics__group-head         Verbs      3 Themen · 37% gelöst
           .lg-topics__grid
             a.lg-topic-card ×n
       .lg-topics__view--level            same again, grouped by band
       .lg-topics__view--popular          one grid, no group heads

   WHY THREE RENDERED VIEWS

   The three differ by GROUPING, and a group heading cannot be produced in
   CSS — only shown or hidden. So the PHP renders all three and the radios
   reveal one. It costs roughly three times the card markup, which for a
   catalogue of this size is a few kilobytes gzipped, and buys an instant
   switch with no script and no reload.

   If a language ever grows a catalogue where that stops being true, the fix
   is to move the switch to a real ?sort= URL and render one view — which is
   also the better answer for crawlers. This markup is deliberately shaped so
   that change is a PHP edit and not a redesign.

   WHICH TAGS APPEAR WHERE

   A tag that repeats the heading above it is noise, so each view drops the
   one it is grouped by. The PHP emits all of them with a class and CSS hides
   the redundant one per view — that way the card renderer stays view-blind.

     by-group     level + popular      (category is the heading)
     by-level     category + popular   (level is the heading)
     by-popular   category + level     (popularity is the order)
   =========================================================================== */

.lg-topics {
	position: relative;
	padding: 2.5rem 0 1rem;
}

/* --- Head: title + view switch ------------------------------------------ */
.lg-topics__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.lg-topics__title {
	margin: 0;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* One pill-shaped track holding three labels, like a segmented control. */
.lg-topics__views {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem;
	border: 1px solid var(--lg-border);
	border-radius: 999px;
	background-color: var(--lg-surface);
}

.lg-topics__view-label {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lg-topics__view-label:hover {
	color: var(--lg-text);
}

.lg-topics__switch {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* The selected pill. Written out per view rather than generated, because a
   radio can only be reached by an id-specific sibling selector. */
#lg-topics-group:checked  ~ .lg-topics__head .lg-topics__view-label[for="lg-topics-group"],
#lg-topics-level:checked  ~ .lg-topics__head .lg-topics__view-label[for="lg-topics-level"],
#lg-topics-popular:checked ~ .lg-topics__head .lg-topics__view-label[for="lg-topics-popular"] {
	background-color: var(--lg-red);
	color: var(--lg-text-inverse);
	text-shadow:  1px 1px #94332f
}

/* A <label> is not focusable; the ring comes from the radio it drives. */
#lg-topics-group:focus-visible  ~ .lg-topics__head .lg-topics__view-label[for="lg-topics-group"],
#lg-topics-level:focus-visible  ~ .lg-topics__head .lg-topics__view-label[for="lg-topics-level"],
#lg-topics-popular:focus-visible ~ .lg-topics__head .lg-topics__view-label[for="lg-topics-popular"] {
	outline: 2px solid var(--lg-red);
	outline-offset: 2px;
}

/* --- Which view is showing ---------------------------------------------- */
.lg-topics__view {
	display: none;
}

#lg-topics-group:checked   ~ .lg-topics__view--group,
#lg-topics-level:checked   ~ .lg-topics__view--level,
#lg-topics-popular:checked ~ .lg-topics__view--popular {
	display: block;
}

/* --- Which tags are showing --------------------------------------------- */
/* Each view hides the dimension it is already grouped by. */
#lg-topics-group:checked   ~ .lg-topics__view .lg-badge--category,
#lg-topics-level:checked   ~ .lg-topics__view .lg-badge--level {
	display: none;
}

/* Popularity is the sort order in the third view, so the tag would be on
   every card and say nothing. */
#lg-topics-popular:checked ~ .lg-topics__view .lg-badge--popular {
	display: none;
}

/* --- Groups ------------------------------------------------------------- */
.lg-topics__group + .lg-topics__group {
	margin-top: 2.75rem;
}

.lg-topics__group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 1.15rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--lg-border);
}

.lg-topics__group-name {
	margin: 0;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
}

.lg-topics__group-meta {
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

/* auto-fill, NOT auto-fit.

   Both make as many 290px-minimum tracks as the row can hold - three at the
   1150px container, two at tablet, one on a phone. The difference is what
   happens to the tracks nothing lands in: auto-fit collapses them to zero and
   the remaining cards grow to swallow the space, so a category with two
   topics rendered two half-width cards directly above a category with three
   third-width ones. auto-fill keeps the empty track, so every card in the
   section is the same width and a short group simply leaves a gap on the
   right - which is what a catalogue should look like.

   (The rule that used to sit here was grid-auto-rows:1fr with a comment
   claiming it prevented that stretching. It did not - it equalised ROW
   HEIGHTS across the whole grid. Removed: within a row, items already
   stretch to the tallest by default, which is the alignment that matters,
   and forcing every row in a twelve-card view to the height of the tallest
   one only adds whitespace.) */
.lg-topics__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 1.15rem;
}

.lg-topics__view--popular .lg-topics__grid {
	margin-top: 0;
}

/* ===========================================================================
   lg-topic-card
   ---------------------------------------------------------------------------
   Taller than .lg-card: it carries a description, which is what makes the
   catalogue browsable rather than a list of names. Its own block for the same
   reason .lg-card is — it will be wanted on a category landing page.
   =========================================================================== */

.lg-topic-card {
	display: flex;
	flex-direction: column;
	padding: 1.3rem 1.4rem 1.25rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-shadow: 0 2px 6px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.05);
	color: inherit;
	font-family: var(--lg-font);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.lg-topic-card:hover {
	transform: translateY(-2px);
	border-color: var(--lg-border-strong);
	box-shadow: 0 10px 24px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.12);
	color: inherit;
	text-decoration: none;
}

a.lg-topic-card:focus-visible {
	outline: 2px solid var(--lg-red);
	outline-offset: 2px;
}

.lg-topic-card__title {
	margin: 0 0 0.45rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
}

.lg-topic-card__teaser {
	margin: 0;
	color: var(--lg-text-muted);
	font-size: 1rem;
	line-height: 1.5;
}

/* --- Tags --------------------------------------------------------------- */
/* margin-top:auto pushes everything from here down to the foot of the card,
   so cards in a row line up on their progress bars however long the
   description runs. */
.lg-topic-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 1.1rem;
}

/* The level tag. Coral, because it is the one piece of metadata a learner
   actually chooses by. */
.lg-badge--level {
	background-color: var(--lg-bad-bg);
	color: var(--lg-bad-text);
}

/* --- Foot --------------------------------------------------------------- */
.lg-topic-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.1rem;
}

.lg-topic-card__count {
	min-width: 0;
	color: var(--lg-text-muted);
	font-size: 0.95rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.lg-topic-card__score {
	flex: 0 0 auto;
	color: var(--lg-text);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lg-topic-card__track {
	display: block;
	height: 7px;
	margin-top: 0.6rem;
	border-radius: 999px;
	background-color: var(--lg-score-track);
	overflow: hidden;
}

.lg-topic-card__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background-color: var(--lg-score);
	/* A topic at 1% still gets a visible sliver: "barely started" and "not
	   started" are different facts and the bar is the only thing saying so. */
	min-width: 3px;
}

/* --- Locked ------------------------------------------------------------- */
/* Same treatment as the locked suggestion card: the whole card faded, chrome
   included. See the longer note in css/lg.suggestions.css. */
.lg-topic-card--locked {
	background-color: var(--lg-surface);
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.lg-topic-card--locked:hover {
	opacity: 0.75;
}

/* --- Narrow ------------------------------------------------------------- */
@media (max-width: 700px) {

	.lg-topics__head {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Three German labels do not fit one line on a phone. The track scrolls
	   rather than wrapping: a segmented control on two lines stops reading as
	   one control. */
	.lg-topics__views {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.lg-topics__view-label {
		padding: 0.5rem 0.85rem;
		font-size: 0.9rem;
	}
}

@media (max-width: 560px) {

	.lg-topics {
		padding: 1.75rem 0 0.5rem;
	}

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

	.lg-topic-card {
		padding: 1.1rem 1.15rem;
	}
}