/* ===========================================================================
   lg.listening-text — the listening exercise page
   ---------------------------------------------------------------------------
   Step one of bringing listening in line with the reading text: the player.
   The panel, white bar and speaker cards are css/lg.player.css, shared with
   reading; this file is only where listening puts them.

   THE PLAYER IS THE PAGE. A listening text is not shown by default, so unlike
   reading - where the player sits under the text inside its card - here it is
   the main block above the questions: the title, the bar and the speakers in
   the band at the top of the panel (.panel-header), at full width with the
   speakers four to a row (mockups/listening-exercise-player.jpg shows the
   page before this, in the old grey).

   a.css draws that band in the panel's grey border colour, pulled out over
   the padding with negative margins. The band takes reading's warm panel
   tone instead. Dark mode follows through the tokens; two classes beat
   a-dark.css's single-class .panel-header and .panel.
   =========================================================================== */

/* The old card around the whole exercise goes: no white ground, no border.
   The class stays, because .panel-header's negative margins are written
   against .panel's 2rem padding - drop the class and the band shifts.

   margin-top: the head bar above (lg.text-head.css) ends in a hairline, and
   the panel would otherwise sit flush against it. Reading gets the same air
   from #exercise's own padding-top. */
.panel.exercise-listening {
	border: 0;
	background-color: transparent;
}

.exercise-listening .panel-header {
	background-color: var(--lg-surface-alt);
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* The band is already the warm panel, so the player box adds no second one:
   no background, no padding, just the bar and the cards. Capped so that on a
   wide screen the track stays a length you can aim at, and the bar and the
   row of cards end at the same edge. */
.exercise-listening .player-box.lg-player.lg-listen__player {
	max-width: 64rem;
	padding: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
}

/* a.css caps the old bar at 870px on its own; the box above caps both now. */
.exercise-listening .lg-listen__player .wrapper-lingua-player {
	max-width: none;
}

/* Four to a row: the page has the width reading's half-column does not. Two
   between 601px and 900px, where four would squeeze the names; one below
   that is lg.player.css's own rule. */
.exercise-listening .lg-listen__player .wrapper-lingua-speakers {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}



 .panel.exercise-listening {
    padding-top:0.0rem;
 }

 .panel.exercise-listening .panel-header {
    padding-top:1rem;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
 }

@media (max-width: 900px) {

	.exercise-listening .lg-listen__player .wrapper-lingua-speakers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


}

@media (max-width: 600px) {

   .lg-player .wrapper-lingua-speakers .speaker-box .speaker-box-info {
      font-size: 0.9rem;
   }
   .lg-player .wrapper-lingua-speakers .speaker-box .speaker-box-info-language {
      font-size: 0.8rem !important;
   }

   .lg-player .green-audio-player {
      padding: 0.3rem 1rem;
      min-height: 3.75rem;
   }

   .exercise-listening .panel-header {
      padding-top: 1rem;
      padding-bottom: 1rem;
      margin-bottom: 0.5rem;
   }

}

/* a.css (:3117) pulls .panel out to the screen edges with -1rem side margins
   at 576px and below, against a parent with padding to give back. #exercise
   sits straight in .main .container, which a.css (:2717) leaves with no
   padding there, so the panel ran 2rem wider than the screen and the page
   scrolled sideways. The panel's own 1rem padding is the gutter. */
@media (max-width: 576px) {

	.panel.exercise-listening {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 500px) {

	.exercise-listening .lg-listen__player .wrapper-lingua-speakers {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Below 480px: no total time, so the track keeps a length worth dragging; the
   elapsed time stays. player.css hides it below 540px, but lg.player.css's
   three-class display:inline-block outranks that - as on reading
   (lg.reading-text.css, below 720px), it takes a rule of this weight. */
@media (max-width: 479px) {

	.exercise-listening .green-audio-player .controls__total-time {
		display: none;
	}

	.exercise-listening .green-audio-player .controls .controls__slider {
		margin-right: 0;
	}
}

/* a.css lays the old cards out with fixed widths and nth-child margins, at
   up to three classes. The grid places them now. */
.exercise-listening .lg-listen__player .wrapper-lingua-speakers .speaker-box,
.exercise-listening .lg-listen__player .wrapper-lingua-speakers .speaker-box:nth-child(n) {
	width: auto;
	margin: 0 !important;
}

/* ===========================================================================
   The questions
   ---------------------------------------------------------------------------
   They look like the reading text's - quiz head with the count, progress
   strip, numbered question, pill options, the same marks - all from
   css/lg.quiz.css. What is listening's own is the layout: under the player,
   which keeps the full width, the questions run in two columns on a wide
   screen, as they always have here, and in one below 850px.

     .lg-listen__quiz              the questions area (and the result's place)
       #reading-result             empty until the last answer
       .lg-read__quiz-head         "Did you understand the text?  0 / 6"
       .lg-read__steps
       .lg-listen__questions       the grid
         .questions_line           a pair - display:contents, see below
           .exercise-box           one cell
             .question-box         the question, as on reading
   =========================================================================== */

.exercise-listening .lg-listen__quiz {
	margin-top: 1.75rem;
   padding-left:2rem;
   padding-right:2rem;
}

.exercise-listening .lg-listen__questions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 3.5rem;
   gap:2rem;
   margin-top:3rem;
}

/* The pairs were a.css's table rows. The grid places the cells now, so the
   row wrapper steps out of the way; the markup is kept because lg.result.css
   and the old layout still name it. */
.exercise-listening .lg-listen__questions .questions_line {
	display: contents;
}

/* a.css draws each cell as a table-cell with dotted borders and inner gutters
   on the left/right halves. All of it undone: the gap is the grid's, and the
   line between questions is the .question-box's own hairline (lg.quiz.css).

   display:flex so the question box inside can stretch to the cell's full
   height - the two in a row then end, and draw their hairline, level with
   each other even when one question is a line longer. */
.exercise-listening .lg-listen__questions .exercise-box,
.exercise-listening .lg-listen__questions .exercise-box.exercise-box-left,
.exercise-listening .lg-listen__questions .exercise-box.exercise-box-right {
	display: flex;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	float: none;
}

.exercise-listening .lg-listen__questions .exercise-box > .question-box {
	flex: 1 1 auto;
	align-content: flex-start;
}

@media (max-width: 850px) {

	.exercise-listening .lg-listen__questions {
		grid-template-columns: minmax(0, 1fr);
      gap:0;
	}

   .exercise-listening .lg-listen__questions {
      margin-top:0.5rem
   }

   .exercise-listening .lg-read__steps {
      margin-bottom: 1rem;
   }

	/* ONE QUESTION AT A TIME from here down, as on reading: lgReadStep() in
	   _app/reading-listening.php shows the first open one and hides the rest,
	   moving on after each answer. These are reading's stepped-view rules
	   (lg.reading-text.css, "One question at a time"): the question is the
	   heading of its own screen, and the number goes - the strip above says
	   where you are. Without script every question stays on screen. */
	.exercise-listening .lg-listen__quiz .question {
		font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
	}

	.exercise-listening .lg-listen__quiz .question-number {
		display: none;
	}
}

/* Just above that, the two question columns are at their narrowest and two
   pills across wrap to two lines each: one option per line instead. Below
   850px the questions are one column again and two pills fit. Same weight
   as lg.quiz.css's rule, which loads earlier, so this wins. */
@media (min-width: 851px) and (max-width: 950px) {

	.exercise-listening .lg-listen__quiz .answers,
	.exercise-listening .lg-listen__quiz .answers.long-answers {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The "2 of 6 answered" line under the list: the quiz head carries the same
   count now. Only the line - its wrapper also holds the legacy restart button,
   which the old-modal fallback still shows when it finishes. */
.exercise-listening .lg-read__answered .not-finished {
	display: none;
}

/* ===========================================================================
   Finished
   ---------------------------------------------------------------------------
   lg.result.css hides the questions once .lg-listen--finished is set; the
   quiz head and the strip are new here, so they go too - "6 / 6" over a
   result card that already gives the score is the same fact twice. The
   result is then the only thing in the questions area, centred in it at
   lg.result.css's own width.
   =========================================================================== */
.exercise-listening.lg-listen--finished .lg-read__quiz-head,
.exercise-listening.lg-listen--finished .lg-read__steps {
	display: none !important;
}

.exercise-listening .lg-listen__quiz .lg-reading-result .lg-result {
	margin-left: auto;
	margin-right: auto;
}

/* ===========================================================================
   The result, full width: two columns
   ---------------------------------------------------------------------------
   Listening has no text column beside its questions, so on a wide screen the
   result had the whole width and used 748px of it, centred. From 1200px (the
   container is at its 1150px cap there) it spreads out instead:

     left    the card (score, ring, actions) and "Continue with"
     right   "More for you", the list of further texts

   Below 1200px it is the one centred column it always was. A grid on
   .lg-result rather than new markup: the three blocks are already siblings
   (_components/lg-result.php), so only their places change.
   =========================================================================== */
@media (min-width: 900px) {

	.exercise-listening .lg-listen__quiz .lg-reading-result .lg-result {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		/* Row 1 is only as tall as the card; all the height the right column
		   needs beyond card + "Continue with" goes to row 2. Without this the
		   grid shared it out over both rows it spans, and "Continue with" was
		   pushed down, away from the card. */
		grid-template-rows: auto 1fr;
		column-gap: 2.5rem;
		align-items: start;
		max-width: none;
	}

	.exercise-listening .lg-listen__quiz .lg-reading-result .lg-result__card {
		grid-column: 1;
		grid-row: 1;
	}

	.exercise-listening .lg-listen__quiz .lg-reading-result .lg-result__next {
		grid-column: 1;
		grid-row: 2;
	}

	/* Beside both, from the top. The rule that separated it from the block
	   above becomes a rule beside it, and the gap above it goes. */
	.exercise-listening .lg-listen__quiz .lg-reading-result .lg-result__more {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
		padding-top: 0;
		/* The line sits in the middle of the 2.5rem gap: pulled back half the
		   gap, and the same half given back as padding. */
		margin-left: -1.25rem;
		padding-left: 1.25rem;
		border-top: 0;
		border-left: 1px solid var(--lg-border);
	}
}