/**
 * The test bank on the page: a grid of subject cards.
 *
 * This block lives in the page rather than in a popup, so it takes the theme's
 * typography as it finds it and claims only what a card is made of.
 *
 * The card is two equal halves. The drawing fills the left one; the number and
 * the name fill the right. The boundary between two equal halves is the middle
 * of the card, so the number begins exactly on the card's centre line -- that
 * is a consequence of the structure rather than a value anybody tuned, and it
 * holds at every card size by itself.
 *
 * The card carries no padding of its own. Padding on the card would come out of
 * both halves at once and cost the drawing the room it is there to have, so
 * each half insets only the side that needs it: the drawing keeps a margin
 * around itself, the text keeps one on the right, and neither pays for the
 * other.
 *
 * Only the first two rows are shown. The column count is written out per width
 * rather than left to the grid, because the fold has to land exactly where the
 * second row ends and nothing in CSS can ask a grid how many columns it worked
 * out -- see the media queries below.
 */

.etest-stats {
	/* between cards, not inside one */
	--etest-card-gap: 20px;
	--etest-card-radius: 6px;
	/* wider than tall: a square left the halves standing in empty room */
	--etest-card-ratio: 4 / 3;

	/* breathing room inside a card, applied by each half to its own outer side */
	--etest-card-inset: 10px;
	/* the drawing fills its half up to this */
	--etest-card-icon: 96px;

	/* eight across leaves a narrow text column; these are what to turn if it
	   turns out too narrow for a subject's name */
	--etest-card-count: 26px;
	--etest-card-name: 14px;

	--etest-card-ink: #444;
	/* the badge is asked to be this blue specifically, so it does not follow
	   the theme's accent the way the rest of the plugin does */
	--etest-badge-bg: #318fff;
}

.etest-stats__grid {
	display: grid;
	gap: var(--etest-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Three widths, three column counts -- and each one states its own second row.
 *
 * The count is written out rather than left to `auto-fill` because the fold has
 * to land exactly at the end of the second row, and nothing in CSS can ask a
 * grid how many columns it worked out. Naming the columns is what lets the next
 * rule say "from the eleventh card on" and mean "from the third row on". The
 * price is that the block now follows the window rather than the box it sits
 * in: dropped into a half-width column it keeps the wide layout until the
 * window itself narrows.
 *
 * `:has()` on the second rule asks whether there is anything past the fold at
 * this width at all. Twelve subjects fold on a phone and not on a desktop, so
 * the control appears and disappears with the width, and a bank small enough to
 * fit everywhere never shows it.
 */
@media (min-width: 1000px) {
	.etest-stats__grid { grid-template-columns: repeat(8, 1fr); }
	.etest-stats:not(.etest-stats--open) .etest-stats__card:nth-child(n + 17) { display: none; }
	.etest-stats:not(:has(.etest-stats__card:nth-child(17))) .etest-stats__actions { display: none; }
}

@media (min-width: 600px) and (max-width: 999px) {
	.etest-stats__grid { grid-template-columns: repeat(4, 1fr); }
	.etest-stats:not(.etest-stats--open) .etest-stats__card:nth-child(n + 9) { display: none; }
	.etest-stats:not(:has(.etest-stats__card:nth-child(9))) .etest-stats__actions { display: none; }
}

@media (max-width: 599px) {
	.etest-stats {
		--etest-card-inset: 8px;
		--etest-card-icon: 72px;
	}
	.etest-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.etest-stats:not(.etest-stats--open) .etest-stats__card:nth-child(n + 5) { display: none; }
	.etest-stats:not(:has(.etest-stats__card:nth-child(5))) .etest-stats__actions { display: none; }
}

/*
 * Four by three, with its contents in the middle. `aspect-ratio` gives way to
 * content that will not fit, which is the right way round: a subject with a long
 * name grows its card rather than having the name cut off, and the grid row
 * keeps the rest of them level with it.
 *
 * No column gap: a gap would push the number off the centre line the two equal
 * halves put it on.
 */
.etest-stats__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	align-content: center;
	column-gap: 0;
	aspect-ratio: var(--etest-card-ratio);
	margin: 0;
	padding: 0;
	background: #fff;
	border-radius: var(--etest-card-radius);
	/* the shadow the pickers in the forms use, so the two read as one plugin */
	box-shadow: rgba(0, 0, 0, 0.11) 0 0 10px;
	/* the theme sets this globally, but the block should not depend on it */
	box-sizing: border-box;
}

/*
 * Spanning both rows and centred in its half, against the pair rather than
 * against either of them. The size is a cap, not a fixed width: the drawing
 * takes its whole half minus its own inset, and only stops growing at the cap.
 * On a card too narrow to reach it, the drawing shrinks with its column instead
 * of spilling into the number.
 */
.etest-stats__icon {
	grid-row: 1 / 3;
	grid-column: 1;
	place-self: center;
	width: min(100% - var(--etest-card-inset) * 2, var(--etest-card-icon));
	height: auto;
	aspect-ratio: 1;
	color: #000; /* the bundled drawings stroke in currentColor */
	/* an uploaded image is rarely square; better letterboxed than squashed */
	object-fit: contain;
}

/* what the card is read by. Its left edge is the card's centre line. */
.etest-stats__count {
	grid-column: 2;
	align-self: end;
	padding-right: var(--etest-card-inset);
	font-size: var(--etest-card-count);
	font-weight: 600;
	line-height: 1.1;
	color: #000;
}

.etest-stats__subject {
	grid-column: 2;
	align-self: start;
	padding-right: var(--etest-card-inset);
	font-size: var(--etest-card-name);
	line-height: 1.25;
	color: var(--etest-card-ink);
	/* half a card is not much for "Informacinės technologijos": let a word that
	   cannot fit break rather than run out past the card's edge */
	overflow-wrap: break-word;
	hyphens: auto;
}

/* A reason to come back rather than something to study, so it sits in the
   corner, outside the grid, and stays small. Being out of the flow is also what
   lets a subject that gained nothing leave no gap where it would have been. */
.etest-stats__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	color: #fff;
	background: var(--etest-badge-bg);
	border-radius: 100px;
}

/*
 * The control under the grid.
 *
 * The button is the theme's, written the way the theme writes it (see Button),
 * and nothing here touches it: no size, no colour, no font, no border. That is
 * the whole point -- whatever the site does to its buttons it does to this one,
 * today and after the next settings change.
 *
 * What is left is only what belongs to standing under a grid: where the row
 * sits, and the chevron in front of the word.
 */
.etest-stats__actions {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

/* It leads visually but comes second in the markup, because the word has to be
   the button's first span -- that is the one EtestWave empties and refills.
   18 by 20 and ten away from the word: measured off the button in the menu. */
.etest-stats__chevron {
	order: -1;
	flex: 0 0 auto;
	width: 18px;
	height: 20px;
	transition: transform 0.2s ease;
}

/*
 * The button, measured against the one in the menu rather than guessed.
 *
 * Everything it does not name is still the theme's: the accent, the 200px
 * radius, the lift under the pointer. What is named here is what the menu
 * button has and `.nectar-button` in page content does not.
 *
 * The size is `inherit` and not 17px on purpose. The menu button is 17 because
 * that is the site's text size, not because anyone set it there -- the rule
 * `.nectar-button` carries says 16. Inheriting keeps the two moving together
 * when the site's typography changes.
 */
.etest-stats__actions .nectar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 0 var(--etest-button-pad, 1em);
	min-height: var(--etest-button-height, 44px);

	font-size: inherit;
	letter-spacing: -0.02em;

	/*
	 * Three line boxes on one baseline -- the theme's 20px on the button, the
	 * text's own, and `line-height: 1` on the wave's letters -- is what left
	 * the word sitting low in the padding. One line-height for both boxes
	 * makes centring exact.
	 */
	line-height: 1;
}

.etest-stats__actions .nectar-button > span {
	line-height: 1;
}

/*
 * Two properties claimed back, and only because this button stands in page
 * content. The site styles the links there --
 *
 *   .wpb_text_column a, p a, ... { color: inherit; text-decoration: underline }
 *
 * -- and that selector outranks `.nectar-button { color: #fff }`, so the button
 * would carry the body's black text with a line under it. In the header, where
 * the theme's own buttons live, the rule never reaches them.
 *
 * Two classes here, so it outranks that rule without !important. `:hover` is
 * spelled out because the theme hands links `color: inherit` there as well.
 */
.etest-stats__actions .nectar-button,
.etest-stats__actions .nectar-button:hover,
.etest-stats__actions .nectar-button:focus {
	color: #fff;
	text-decoration: none;
}

.etest-stats--open .etest-stats__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.etest-stats__chevron { transition: none; }
}