/* ===========================================================================
   lg-trainer-modes — the trainer cards on a section start page
   ---------------------------------------------------------------------------
   Vocabulary's "Understand words / Recall translations / Write the word".
   Three cards, or two for a language without the writing trainer; auto-fit
   gives two cards half the row each instead of leaving a gap for a third.

   STRUCTURE

     section.lg-trainer-modes
       .lg-trainer-modes__head        title + lead, same type as lg-suggestions
       .lg-trainer-modes__grid
         article.lg-mode  x2..3
           .lg-mode__top              icon circle, flags with an arrow
           h3.lg-mode__title
           p.lg-mode__tags            PASSIVE · MULTIPLE CHOICE
           p.lg-mode__text
           .lg-mode__progress         label + %, gold bar, "x of y words"
           .lg-mode__actions          Start trainer, Statistics
           p.lg-mode__note            why a button is disabled

   Colours are the score card's: gold for progress, coral only for the tags
   and the button, the two things that say what to do.
   =========================================================================== */

.lg-trainer-modes {
	padding: 1.5rem 0 1rem;
}

.lg-trainer-modes__head {
	margin-bottom: 1.5rem;
}

/* Same as .lg-suggestions__title / __lead, so the two section heads on the
   page read as one family. */
.lg-trainer-modes__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-trainer-modes__lead {
	max-width: 52rem;
	margin: 0;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1rem;
	line-height: var(--lg-line-height);
}

.lg-trainer-modes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.25rem;
}

/* --- Card --------------------------------------------------------------- */
.lg-mode {
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.6rem 1.5rem;
	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);
	font-family: var(--lg-font);
}

.lg-mode__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}

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

.lg-mode__icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.lg-mode__direction {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.lg-mode__flag {
	display: block;
	width: 2rem;
	height: auto;
	border-radius: 3px;
}

.lg-mode__arrow {
	width: 1rem;
	height: 1rem;
	color: var(--lg-red);
}

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

.lg-mode__tags {
	margin: 0 0 0.9rem;
	color: var(--lg-red);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

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

/* --- Progress ----------------------------------------------------------- */
/* margin-top:auto pins the bar and the buttons to the bottom, so cards with
   a shorter description still line their bars up across the row. */
.lg-mode__progress {
	margin-top: auto;
	margin-bottom: 1.4rem;
}

.lg-mode__progress-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
}

.lg-mode__progress-label {
	color: var(--lg-text-muted);
}

.lg-mode__progress-value {
	color: var(--lg-text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lg-mode__track {
	display: block;
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background-color: var(--lg-score-ring-track);
}

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

.lg-mode__count {
	display: block;
	margin-top: 0.6rem;
	color: var(--lg-text-muted);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

/* --- Buttons ------------------------------------------------------------ */
.lg-mode__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Without a progress block nothing above has margin-top:auto. */
.lg-mode__text + .lg-mode__actions {
	margin-top: auto;
}

.lg-mode__actions .lg-btn {
	flex: 1 1 9rem;
}

.lg-mode__disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.lg-mode__note {
	margin: 0.75rem 0 0;
	color: var(--lg-text-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}