/* ===========================================================================
   lg-suggestions — "Recommended for you"
   ---------------------------------------------------------------------------
   A heading, a lead line, a grid of cards and a show-more toggle. Nothing in
   here knows what a card points AT, so the same block serves:

     grammar     practice sheets      "Übung 2"        gold progress bar
     reading     texts                "Text 4"         same
     listening   audio texts          "Hörtext 2"      same
     vocabulary  word lists           "Liste 3"        same

   A category varies by passing different strings and a different icon; it does
   not get its own stylesheet. Where a real structural difference turns up, add
   a --modifier here rather than forking the file.

   STRUCTURE

     .lg-suggestions
       .lg-suggestions__head
         .lg-suggestions__title       Empfohlen für dich
         .lg-suggestions__lead        one line of why
       input.lg-suggestions__switch   (visually hidden checkbox)
       .lg-suggestions__grid
         a.lg-card  ×6 … ×12
       .lg-suggestions__more
         label.lg-btn                 Mehr anzeigen / Weniger anzeigen

   WHY A CHECKBOX AND NOT JAVASCRIPT

   The extra six cards are already in the HTML; the toggle only reveals them.
   A hidden checkbox with a <label> does that in CSS alone, which means it
   works before any script has loaded, cannot be broken by a JS error
   elsewhere on the page, and is still keyboard-operable because a checkbox is
   a real control. The trade is that a screen reader announces it as a
   checkbox rather than an expander; the label text says exactly what it does,
   which is the part that matters.

   The input sits BEFORE the grid because CSS can only look forwards: the
   ~ sibling combinator is what lets :checked reach the cards and the label.
   =========================================================================== */

.lg-suggestions {
	padding: 2.5rem 0 1rem;
}

/* --- Head --------------------------------------------------------------- */
.lg-suggestions__head {
	margin-bottom: 1.5rem;
}

.lg-suggestions__title {
	margin: 0 0 0.5rem;
	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;
}

.lg-suggestions__lead {
	margin: 0;
	max-width: 82ch;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1rem;
	line-height: 1.5;
}

/* --- Grid --------------------------------------------------------------- */
/* A floor rather than a fixed 3, so the row reflows on its own between the
   breakpoints instead of jumping from three to one.

   auto-fill, not auto-fit, for the same reason as the topics grid: when the
   engine returns fewer cards than fill the last row - or four rather than
   six - the survivors must keep their width instead of stretching across the
   gap. Cards of two different widths in one section read as two different
   kinds of card. */
.lg-suggestions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
	gap: 1.15rem;
}

/* --- Show more / show less ---------------------------------------------- */
.lg-suggestions__switch {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* Everything past the sixth card, until the switch is on. nth-child(n+7)
   rather than a class on the extras: the cut is a property of the list, not
   of any one card, so the PHP does not have to know where it falls. */
.lg-suggestions__switch:not(:checked) ~ .lg-suggestions__grid > .lg-card:nth-child(n+7) {
	display: none;
}

.lg-suggestions__more {
	display: flex;
	justify-content: center;
	margin-top: 1.6rem;
}

.lg-suggestions__more label {
	/* A <label> is not focusable, so the ring has to come from the input it
	   controls. Without this the keyboard path is invisible. */
	user-select: none;
}

.lg-suggestions__switch:focus-visible ~ .lg-suggestions__more label {
	outline: 2px solid var(--lg-red);
	outline-offset: 2px;
}

/* One label, two texts, so the button never disagrees with the grid. */
.lg-suggestions__switch:not(:checked) ~ .lg-suggestions__more .lg-suggestions__less,
.lg-suggestions__switch:checked ~ .lg-suggestions__more .lg-suggestions__expand {
	display: none;
}

.lg-suggestions__chevron {
	width: 1em;
	height: 1em;
	transition: transform 0.2s ease;
}

.lg-suggestions__switch:checked ~ .lg-suggestions__more .lg-suggestions__chevron {
	transform: rotate(180deg);
}

/* ===========================================================================
   lg-card — one suggestion
   ---------------------------------------------------------------------------
   Its own block, not .lg-suggestions__card, because it is the piece most
   likely to be wanted somewhere else — a topic page, a search result, a
   "recently finished" strip — and a name tied to its current parent would
   have to be renamed the first time that happens.
   =========================================================================== */

.lg-card {
	display: flex;
	flex-direction: column;
	padding: 1.15rem 1.25rem 1.1rem;
	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-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);
	text-decoration: none;
	color: inherit;
}

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

/* --- Head: icon + reason ------------------------------------------------ */
.lg-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}

.lg-card__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--lg-surface-alt);
	color: var(--lg-text-muted);
}

.lg-card__icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* --- Title -------------------------------------------------------------- */
/* Both are <span>, because the whole card is an <a> and a block-level tag
   inside an inline anchor is not worth the markup argument. A span defaults to
   inline, though, so without display:block these two sit on the SAME line -
   "Present Tense Exercise 2" - and their margins are ignored into the bargain,
   inline boxes having no vertical margin.

   Everything under them (__progress, __foot) is block or flex and breaks on
   its own, which is why this was the only pair in the card that ran together.

   Blockified anyway in the wide card, where __body is a flex column, so this
   costs that layout nothing. */
.lg-card__title {
	display: block;
	margin: 0 0 0.2rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
}

.lg-card__sub {
	display: block;
	margin: 0;
	color: var(--lg-text-muted);
	font-size: 0.95rem;
	line-height: 1.3;
}

/* --- Progress ----------------------------------------------------------- */
/* display:block is what makes the padding below do anything. This is a <span>
   - the card is an <a> and everything inside it is inline markup - and an
   inline box ignores vertical padding, so the gap this rule has always asked
   for between the sheet name and the bar was never drawn. The bar sat tight
   under the sub-line instead.

   margin-top:auto pins the progress and foot to the bottom so cards in a row
   line up on their feet even when one title wraps. That only resolves where
   the parent is a flex column, which today is the wide card alone: in the grid
   .lg-card__body is a plain inline span, so it computes to 0 and the padding
   is the whole spacing. Making __body a flex column would switch the grid over
   too - deliberately not done here, because it redistributes the vertical
   space in every card and that is a bigger change than a gap.

   FLEX rather than block now, because the bar has a label beside it on the
   wide card. It behaves identically where that label is hidden: one flexible
   child in a row is the same box a block would have drawn. */
.lg-card__progress {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1.1rem;
}

/* --- What the bar amounts to -------------------------------------------- */
/* The percentage, or "Nicht gestartet" until there is one. Hidden by default:
   the grid card says this in its foot, two lines under a bar two inches long,
   and a second copy beside it would be noise. The wide card turns it on - see
   the .lg-card--wide block, which also drops the copy that used to sit on the
   far right of the row. */
.lg-card__progress-value {
	display: none;
	flex: 0 0 auto;
	color: var(--lg-text);
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* An unstarted sheet says so in words rather than in figures, and the words
   are a state and not a score - so they are quieter, and not bold. */
.lg-card__progress--empty .lg-card__progress-value {
	color: var(--lg-text-muted);
	font-weight: 400;
}

/* The ring's track, not the cream one. Gold-on-cream is a low-contrast pair,
   and on a 7px bar sitting inside an already-warm card the unfilled part read
   as a second, paler fill rather than as the empty remainder - so a card at
   30% looked closer to done than it was. The grey reads as "not yet" at any
   width, and it is the same value the score card's ring uses, so the two
   figures on this page describe progress in the same two colours.

   A card with no score shows this track with nothing in it. That state carries
   .lg-card__progress--empty, which is deliberately unstyled: the empty track is
   already the right picture. The class is there so an empty bar can be dimmed
   or dashed later without having to reach back into the renderer for a hook. */
/* flex:1 1 auto so the bar takes the row and the label beside it takes only
   what it needs. min-width:0 because a flex item will not shrink below its
   content by default, and a bar has none - without it a long label could push
   the track past the card's edge instead of squeezing it. */
.lg-card__track {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	height: 7px;
	border-radius: 999px;
	background-color: var(--lg-score-ring-track);
	overflow: hidden;
}

.lg-card__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background-color: var(--lg-score);
}

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

/* Every card has a bar above the foot now - an untouched sheet gets an empty
   track rather than nothing - so this is the only case left, and it matches
   the base rule above. Kept as its own selector because it is the one that
   documents the intended relationship.

   The rule that used to follow this one, .lg-card__foot:first-of-type, is
   gone: it was meant to catch a card with no bar, but every child of __body is
   a <span> and __title is always the first of them, so a foot could never be
   :first-of-type. It matched nothing on the day it was written and there is no
   longer a case for it to describe. */
.lg-card__progress + .lg-card__foot {
	margin-top: 0.8rem;
}

.lg-card__meta {
	min-width: 0;
	color: var(--lg-text-muted);
	font-size: 0.95rem;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

/* ===========================================================================
   .lg-card--wide — the same card, one per row
   ---------------------------------------------------------------------------
   Used by the result page, where the cards run the full width of the column
   instead of three abreast. The icon circle moves from above the title to
   beside it: at this width it would otherwise sit alone over a lot of empty
   space, and the text has nowhere to go but a single long line.

   Everything below only re-flows what the grid card already renders. No new
   markup, no second renderer.
   =========================================================================== */

/* TWO ROWS, and the badge owns the top of the right-hand one.

   It used to be placed at column 2 / row 1 - the same cell as .lg-card__body,
   which is also column 2 / row 1. Two grid items in one cell do not push each
   other apart, they stack; and because .lg-card__head comes before .lg-card__body
   in the DOM, the body painted second and the badge disappeared underneath the
   title. The "margin-bottom" on it was written expecting a flow it never had.

   So: the badge goes to the top of column 3, the aside sits under it, and the
   icon and the text span both rows so they stay centred against the pair.
   Explicit placement throughout, which is what lets the badge sit at the top
   right while still being written inside .lg-card__head in the markup.

   row-gap is zeroed because "gap" sets both, and 1.1rem of it between the badge
   and the score below would have made the card noticeably taller for nothing.
   The narrow block at the foot of this file re-places all four - there is no
   column 3 down there - and sets its own row-gap. */
.lg-card--wide {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1.1rem;
	row-gap: 0;
	padding: 1.15rem 1.35rem;
}

/* The head loses its job: the icon goes left, the badge goes top right. */
.lg-card--wide .lg-card__head {
	display: contents;
}

.lg-card--wide .lg-card__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.lg-card--wide .lg-badge {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	margin-bottom: 0.35rem;
}

.lg-card--wide .lg-card__body {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-width: 0;
}

/* The topic, over the sheet name. Caps and letterspaced, the same treatment
   the section header gives its eyebrow, so "a location" reads the same way
   wherever it appears. */
.lg-card__eyebrow {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--lg-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* The bar sits under the text rather than pinned to the card foot: in a wide
   card there is no foot to pin it to. */
.lg-card--wide .lg-card__progress {
	margin-top: 0.7rem;
	padding-top: 0;
}

.lg-card--wide .lg-card__track {
	max-width: 16rem;
}

/* The figure, beside the bar it belongs to. */
.lg-card--wide .lg-card__progress-value {
	display: inline-block;
}

.lg-card--wide .lg-card__foot {
	margin-top: 0.35rem;
}

/* The meta line moves above the bar, so the row reads name -> type -> how far.
   order works because .lg-card__body is a flex column. */
.lg-card--wide .lg-card__body {
	display: flex;
	flex-direction: column;
}

.lg-card--wide .lg-card__foot  { order: 3; margin-top: 0.35rem; }
.lg-card--wide .lg-card__progress { order: 4; }

/* The wide card shows its score beside the bar, so the foot's copy of it would
   say the same number twice. */
.lg-card--wide .lg-card__state {
	display: none;
}

/* --- The right-hand column ---------------------------------------------- */
/* Row 2, under the badge. justify-self:end so the score and the badge line up
   on the card's right edge whichever of the two is wider. */
.lg-card--wide .lg-card__aside {
	grid-column: 3;
	grid-row: 2;
	justify-self: end;
	display: flex;
	align-items: baseline;
	gap: 1.1rem;
	white-space: nowrap;
}

/* Coral, and the only coral on the card: it is the one thing here that says
   "this is the move". Not a button - the whole card is the target, and a
   button inside a link cannot be clicked on its own. */
.lg-card--wide .lg-card__action {
	color: var(--lg-red);
	font-size: 1rem;
	font-weight: 600;
}

a.lg-card--wide:hover .lg-card__action {
	color: var(--lg-red-hover);
}

/* The one the page is steering towards. Gold rather than coral: coral is
   already doing the "act on this" job inside the card, and an outline in the
   same colour would flatten the two together. */
.lg-card--wide.lg-card--lead {
	border-color: var(--lg-score);
	box-shadow: 0 0 0 3px var(--lg-score-track);
}

@media (max-width: 620px) {

	/* The score column drops under the text rather than squeezing the name.
	   Three rows now: the badge, the question, the score.

	   Every placement from the wide block has to be redone, not just the
	   aside's. There is no column 3 at this width, and an item still asking for
	   one would be put in an implicit column off the right-hand edge - so the
	   badge would have taken the card's width with it. */
	.lg-card--wide {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 0.75rem;
	}

	/* Across both columns, above everything: at this width the right-hand edge
	   is only as far away as the text, and a badge tucked beside the title
	   would push the name into a second line. */
	.lg-card--wide .lg-badge {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: start;
		margin-bottom: 0;
	}

	.lg-card--wide .lg-card__icon {
		grid-column: 1;
		grid-row: 2;
	}

	.lg-card--wide .lg-card__body {
		grid-column: 2;
		grid-row: 2;
	}

	.lg-card--wide .lg-card__aside {
		grid-column: 2;
		grid-row: 3;
		justify-self: stretch;
		justify-content: space-between;
		width: 100%;
	}

	.lg-card--wide .lg-card__track {
		max-width: none;
	}
}

/* --- Locked ------------------------------------------------------------- */
/* A premium sheet. Rendered as a <span> by the PHP, not a link, because the
   destination is a paywall rather than the exercise — the whole card opens
   the upsell instead. Faded rather than hidden: knowing what is behind the
   wall is the argument for crossing it.

   The whole card is faded, chrome included - not just its contents. The
   background stays --lg-surface rather than becoming --lg-bg, which is the
   page ground and made the card read as a hole in the grid; but at 0.55 that
   white blends with the cream behind it, so the fill lands a little warmer
   than the active cards. That is the intended softness.

   Border and shadow fade with it. On a grid of otherwise crisp cards that is
   what marks this one as not-yet-yours at a glance, before any of the text is
   read. */
.lg-card--locked {
	background-color: var(--lg-surface);
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

/* It is clickable, so it answers the pointer. Lifting the veil is a better
   affordance here than moving the card: the offer is "look closer", not
   "go here". */
.lg-card--locked:hover {
	opacity: 0.75;
}

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

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

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

	.lg-card {
		padding: 1rem 1.05rem;
	}
}