/* =====================================================================
   Responsive refinements — loaded last on purpose so these media
   queries can override page CSS without specificity fights.
   Tested breakpoints: 1440 / 1024 / 900 / 768 / 560 / 480 / 390 / 375 / 360.
   ===================================================================== */

/* No layout in this theme should ever force horizontal scroll. */
html, body{ overflow-x: hidden; }
img, svg{ max-width: 100%; }

/* ---------- Tablet (≤1024px): exam sidebar narrows ---------- */
@media (max-width: 1024px){
	.eqp-exam__body{ grid-template-columns: 250px 1fr; }
}

/* ---------- Small tablet / large phone (≤768px) ---------- */
@media (max-width: 768px){
	.eqp-card{ padding: 30px 24px; }
	.eqp-info-grid{ grid-template-columns: repeat(2, 1fr); }

	/* Exam layout stacks: navigator becomes a short, independently
	   scrollable strip above the question — the question panel still
	   gets the rest of the viewport, and neither one ever forces the
	   whole window to scroll. */
	.eqp-exam__header{ padding: 12px 14px 0; }
	.eqp-exam__header-inner{ padding: 12px 16px; border-radius: var(--eqp-radius); }
	.eqp-exam__body{
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		gap: 12px;
		padding: 12px 14px 14px;
	}
	.eqp-exam__nav{ height: auto; max-height: 20vh; max-height: 20dvh; }
	.eqp-exam__nav-panel{ padding: 16px; border-radius: var(--eqp-radius); }
	.eqp-exam__answered{ margin-bottom: .7em; padding-bottom: .7em; }
	.eqp-nav-group{ margin-bottom: .9em; }
	/* The header's "Submit test" button already opens the same review
	   modal, so the duplicate block button in the drawer just eats
	   vertical space on small screens. */
	#eqp-review-btn{ display: none; }
	.eqp-nav-grid{ grid-template-columns: repeat(10, 1fr); }
	.eqp-question__card{ padding: 22px; border-radius: var(--eqp-radius-lg); }
	.eqp-question__text{ font-size: 1.22rem; }
}

/* ---------- Phones (≤480px) ---------- */
@media (max-width: 480px){
	.eqp-shell{ padding: 24px 14px; }
	.eqp-card{ padding: 24px 20px; border-radius: 18px; }
	.eqp-card__title{ font-size: 1.45rem; }
	.eqp-option input {
    width: 15px;
    height: 15px;}
    .eqp-option__letter {
    width: 1.25em;
    height: 1.25em;}
.eqp-option__text {
    line-height: 1;}
	.eqp-info-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }

	/* Exam header: institution/timer stack instead of crowding a row. */
	.eqp-exam__header-inner{ flex-wrap: wrap; gap: 8px; }
	.eqp-exam__timer{ font-size: 1.05rem; padding: .4em .8em; }

	.eqp-nav-grid{ grid-template-columns: repeat(8, 1fr);}
	.eqp-nav-btn{ min-height: 36px; font-size: .75rem;}

	.eqp-question__card{ padding: 18px; }
	.eqp-question__text{ font-size: 1.1rem;margin-bottom: 1em;}
	.eqp-option{ padding: 11px; }

	/* Question actions become a full-width stack with Next always reachable
	   without scrolling, per "submit button must remain easy to access". */
	.eqp-question__actions{
		position: sticky;
		bottom: 0;
		background: var(--eqp-panel);
		padding: 12px 0 4px;
		margin: 0 -18px -18px;
		padding-left: 18px;
		padding-right: 18px;
		border-top: 1px solid var(--eqp-border);
		border-radius: 0 0 var(--eqp-radius-lg) var(--eqp-radius-lg);
	}
	.eqp-question__actions .eqp-btn{ flex: 1; }
	.eqp-question__actions .eqp-clear-btn{ order: 3; margin-right: 0; flex-basis: 100%; }

	.eqp-review-summary{ grid-template-columns: 1fr; }
	.eqp-review-card{ padding: 26px 22px; }
}

/* ---------- Very small phones (≤360px) ---------- */
@media (max-width: 360px){
	.eqp-nav-grid{ grid-template-columns: repeat(8, 1fr); }
	.eqp-exam__institution{ font-size: .92rem; }
	.eqp-exam__name{ font-size: .68rem; }
}

/* Full-bleed hero & login screens — the background photo always fills
   the viewport; only the centered copy/card scales down on narrow
   screens. Both screens stay pinned to one viewport (set in main.css
   / login.css) and scroll internally if their content ever runs tall. */
@media (max-width: 900px){
	.eqp-hero__title{ max-width: 14ch; }
	.eqp-hero__desc{ max-width: 42ch; }

	.eqp-login-screen__center{ padding: 100px 18px 36px; }
	.eqp-back-link{ margin-bottom: 18px; }
}

@media (max-width: 560px){
	.eqp-hero__frame{ padding: 90px 20px 32px; }
	.eqp-hero__title{ font-size: clamp(2.2rem, 11vw, 3.4rem); }
	.eqp-hero__desc{ font-size: .93rem; }
	.eqp-hero__actions{ width: 100%; }
	.eqp-hero__actions .eqp-btn--large{ width: 100%; }

	.eqp-login-screen__institution{ top: 18px; }
	.eqp-login-screen__institution p{ font-size: 1rem; }
	.eqp-login-card{ padding: 26px 20px; border-radius: 20px; }
	.eqp-login-card .eqp-card__title{ font-size: 1.85rem; }

	.eqp-thankyou-card{ padding: 34px 22px; border-radius: 24px; }

	.eqp-exam__header-actions{ gap: 7px; }
	.eqp-btn--header-submit{ padding: .55em .7em; font-size: .72rem; }
}

/* ---------- Very short viewports (landscape phones, small laptops in
   split-screen): shrink the exam chrome so header + nav strip + a
   question still fit without clipping. ---------- */
@media (max-height: 560px){
	.eqp-exam__header{ padding: 10px 16px 0; }
	.eqp-exam__header-inner{ padding: 9px 18px; }
	.eqp-exam__timer{ font-size: 1rem; padding: .35em .8em; }
	.eqp-exam__body{ padding: 10px 16px 14px; }
	.eqp-question__card{ padding: 18px 22px; }
	.eqp-question__text{ font-size: 1.15rem; margin-bottom: 1em; }
	.eqp-options{ gap: 8px; margin-bottom: 1.2em; }
	.eqp-option{ padding: 10px 14px; min-height: 38px; }
}
@media (max-height: 560px) and (max-width: 768px){
	.eqp-exam__nav{ max-height: 22vh; max-height: 22dvh; }
	.eqp-exam__nav-panel{ padding: 10px 14px; }
}

/* ---------- Touch devices: remove hover-only affordances that can get
   "stuck" after a tap, and give tap targets a touch-friendly minimum. ---------- */
@media (hover: none){
	.eqp-btn:hover, .eqp-option:hover, .eqp-nav-btn:hover, .eqp-info-item:hover{ transform: none; }
}