/* ===========================================================================
   lg-section-header — the band at the top of a category start page
   ---------------------------------------------------------------------------
   Grammar, reading, listening, dictation, vocabulary: same shape every time.
   Nothing in this file mentions grammar, and nothing in it knows what sits in
   the aside — the score card is passed in as markup, so a category with no
   score to show leaves the slot empty and the text spans the full width
   (.lg-section-header--full, added by the renderer when the aside is "").

   STRUCTURE

     .lg-section-header
       .lg-section-header__main
         .lg-section-header__eyebrow    GRAMMATIK
         .lg-section-header__title      Learn grammar by topic, not by worksheet.
         .lg-section-header__lead       two or three lines of prose
         .lg-section-header__more       <details> Show more
           .lg-section-header__body       the rest of the intro, if any
         .lg-section-header__actions    primary CTA, secondary CTA, count
       .lg-section-header__aside        score card, or nothing

   LAYOUT

   Two columns on a wide screen, one column stacked below 900px. Grid rather
   than float or inline-block: the two columns are different heights and grid
   is the only one of the three that does not need a clearfix or a fixed height
   to cope with that.

   The aside is a fixed 380px rather than a fraction, because the score card
   holds a ring and two stat columns that stop working when squeezed — better
   that the prose column absorbs all the flex.
   =========================================================================== */

.lg-section-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 2.5rem;
	align-items: start;
	padding: 1.5rem 0 1.25rem;
}

/* No aside — no second track. An explicit grid column is created whether or
   not an item lands in it, so dropping the score card without this leaves a
   380px void and a 2.5rem gap that nothing explains.

   The grammar page hits this on every first visit: the score card is held back
   until the visitor has finished an exercise, because a ring at 0% over
   "0 of 43" is a worse use of a third of the band than the CTA is. */
.lg-section-header--full {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* min-width:0 lets a long unbreakable string (a URL in the lead text) shrink
   instead of forcing the whole grid wider than its container. */
.lg-section-header__main {
	min-width: 0;
}

.lg-section-header__aside {
	min-width: 0;
}

/* --- Eyebrow ------------------------------------------------------------ */
/* The category name, above the headline. Coral, because this is the one place
   the brand colour can carry a label without competing with a CTA. */
.lg-section-header__eyebrow {
	margin: 0 0 1rem;
	color: var(--lg-red);
	font-family: var(--lg-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Title -------------------------------------------------------------- */
/* Outfit at 800. This is the heaviest type on the site and the reason the
   family was chosen — at display size its tight apertures read as confident
   rather than shouty, which is not true of DM Sans at the same weight.

   clamp() rather than a media query: the headline is the one element that has
   to shrink continuously, because it is long in German and short in English
   and the breakpoint that suits one strands the other. */
.lg-section-header__title {
	margin: 0 0 1.1rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(1.9rem, 1.15rem + 2.6vw, 2.8rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* The tag after the headline. Everything here is about NOT inheriting the
   heading it sits in: the title is Outfit at 800 and up to 3.05rem, and a badge
   that took any of that would read as a second word in the name rather than as
   a label on it.

   rem, not em, so it stays one size while the headline grows and shrinks with
   its clamp - at 3.05rem an em-sized badge would be nearly as tall as the
   capitals beside it.

   vertical-align against the middle of the lowercase, not the baseline: the
   badge is a box and sitting it on the baseline hangs its rounded bottom below
   the letters. The exact value is eyeballed to the cap height at the middle of
   the clamp; it drifts by a pixel or two at the extremes, which is invisible
   and cheaper than a second clamp. */
.lg-section-header__badge {
	vertical-align: 0.45em;
	margin-left: 0.1rem;
	font-family: var(--lg-font);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	/* The heading is -0.02em; inherited, it would close the gaps in a word this
	   short into a smudge. */
	white-space: nowrap;
}

/* --- Lead --------------------------------------------------------------- */
/* Capped at 52 characters per line. Longer than that and the eye loses the
   start of the next line; the cap is in ch so it tracks the font, not a pixel
   guess that breaks when the type scale moves. */
.lg-section-header__lead {
	margin: 0 0 1.9rem;
	max-width: 52ch;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1.05rem;
	line-height: 1.6;
}

.lg-section-header__lead :last-child {
	margin-bottom: 0;
}

/* A lead with the "Show more" row under it. The link supplies the rest of the
   gap before the buttons, so the two read as one block instead of three pieces
   floating at equal distances.

   0.8rem is the paragraph rhythm from __body below, and once the link is open
   and hidden this gap is what separates the lead from the rest of the intro -
   at which point the two have to look like consecutive paragraphs of one text,
   because that is exactly what they are. */
.lg-section-header__lead--tight {
	margin-bottom: 0.8rem;
}

/* --- More ---------------------------------------------------------------- */
/* The rest of the editorial intro, folded into a <details> between the lead
   and the buttons.

   It used to continue BELOW the buttons, which kept the CTA high but cut the
   intro in half: the reader who wanted the whole text had to step over two
   buttons to find its second half. Collapsed, this keeps the CTA just as high
   - one quiet line is cheaper than four lines of prose - and opening it puts
   the text back where the sentence expects it.

   The toggle is a text link, not a button: it sits inches above two real
   buttons and a third button-shaped thing would blunt both of them. For the
   same reason the label takes the lead's own colour and weight rather than
   coral - coral is the colour of "do this", and this row is not competing for
   the click. It reads as the last line of the paragraph above it, which is
   what it is. The chevron carries the whole signal that the line is
   interactive, which is all the signal it needs. */
.lg-section-header__more {
	margin: 0 0 1.9rem;
	max-width: 52ch;
}

.lg-section-header__more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
	/* Off with the default disclosure triangle, in both spellings - this row
	   draws its own chevron, on the other side of the label. */
	list-style: none;
	user-select: none;
}

.lg-section-header__more > summary::-webkit-details-marker {
	display: none;
}

/* Underline rather than a colour change: the label has no colour to brighten
   into now, and the underline is the plainest way a piece of body text can
   say it is a link. */
.lg-section-header__more > summary:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lg-section-header__more > summary:hover .lg-section-header__more-chevron {
	color: var(--lg-red-hover);
}

/* Keyboard users get a ring. Coral here even though the label is not: a focus
   ring is the one place the accent has to win against the background, and it
   is offset so it clears the glyphs rather than sitting on them. */
.lg-section-header__more > summary:focus-visible {
	outline: 2px solid var(--lg-red);
	outline-offset: 3px;
	border-radius: var(--lg-radius-sm);
}

/* The one coral thing in the row. It takes its stroke from currentColor, so
   the colour has to be set here rather than inherited from the summary. */
.lg-section-header__more-chevron {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	color: var(--lg-red);
}

/* The link is gone once it has done its job, leaving the intro reading as one
   uninterrupted piece of prose - which is what it was before it was split.
   Hiding the summary does not close the <details>: the panel stays open and
   the text stays on screen, there is simply no longer a control to collapse
   it again. That is deliberate, not an oversight - nobody wants to un-read a
   paragraph, and a second link here would put one more thing between the
   reader and the buttons.

   display:none rather than visibility:hidden, or the row would leave a
   one-line hole where the link used to be. */
.lg-section-header__more[open] > summary {
	display: none;
}

/* --- Body --------------------------------------------------------------- */
/* Same size, colour and measure as the lead, because it is the same voice
   carrying on - only its position changed. It used to be printed after the
   whole header as <p class="content_text">, which is a.css styling and read
   as a different piece of the page rather than as the end of this sentence. */
/* No top margin: the link above it has just removed itself, so the spacing
   between the lead and this text is the lead's own 0.8rem - one paragraph gap,
   not a gap plus whatever the vanished row was carrying. */
.lg-section-header__body {
	margin-top: 0;
	max-width: 52ch;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1.05rem;
	line-height: 1.6;
}

.lg-section-header__body p + p {
	margin-top: 0.8rem;
}

/* --- Actions ------------------------------------------------------------ */
/* Wraps rather than scrolls or truncates. Three items at German string lengths
   do not fit one line on a tablet, and a wrapped row is better than either a
   cut-off button or a horizontal scrollbar. */
.lg-section-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

/* The "10 topics · 43 exercises" count. Not a button and not styled as one —
   it is the answer to "is this worth my time", read once before the click. */
.lg-section-header__count {
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   Narrow
   ---------------------------------------------------------------------------
   One column, aside last. The card is capped at 420px and centred rather than
   stretched: full-bleed on a tablet it becomes a wide letterbox with the ring
   marooned at one end.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {

	.lg-section-header {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding: 2.25rem 0 2.5rem;
	}

	.lg-section-header__aside {
		max-width: 420px;
		width: 100%;
	}
}

@media (max-width: 560px) {

	.lg-section-header {
		padding: 1.75rem 0 2rem;
	}

	.lg-section-header__lead,
	.lg-section-header__body {
		font-size: 1rem;
	}

	/* A one-line text toggle is a thin target for a thumb. Padding rather than
	   a taller font: the row has to stay quieter than the two buttons under
	   it, and it is the only thing between them and the lead. */
	.lg-section-header__more > summary {
		padding: 0.45rem 0;
	}

	/* Full-width stacked buttons. Side by side at this width each one is too
	   narrow for its label in German, and a wrapped two-word button reads as
	   broken. The count keeps its own line under them. */
	.lg-section-header__actions .lg-btn {
		width: 100%;
	}

	.lg-section-header__count {
		width: 100%;
	}
}