/* Section: quiz_result — mockup EXALCO-Quiz "RESULT" (dark recommendation panel). */

.ex-quiz-result {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 3.4vw, 52px);
  background: var(--ex-dark);
  color: var(--ex-white);
}
.ex-quiz-result:not([hidden]) { animation: ex-quiz-result-fade .3s ease both; }
.ex-quiz-result:focus { outline: none; }

.ex-quiz-result__eyebrow { margin-bottom: 14px; }
.ex-quiz-result__title { margin: 0 0 10px; font-size: var(--ex-fs-h2-md); line-height: 1.05; }
.ex-quiz-result__title:empty,
.ex-quiz-result__tagline:empty,
.ex-quiz-result__reasons:empty { display: none; }
.ex-quiz-result__tagline { max-width: 560px; margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--ex-white); }

ul.ex-quiz-result__reasons { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 0 26px; padding: 0; list-style: none; }
.ex-quiz-result__reason { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: .5px solid rgba(255, 255, 255, .25); }
.ex-quiz-result__reason-mark { display: block; flex: none; width: 8px; height: 8px; margin-top: 4px; background: var(--ex-red); }
.ex-quiz-result__reason-text { font-size: 13px; line-height: 1.5; color: var(--ex-white); }

.ex-quiz-result__restart {
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .4);
  background: transparent;
  color: var(--ex-white);
  /* Rendered value: the mockup's `font: … inherit` shorthand is invalid CSS and is dropped, so the control shows the default control font (13.33px / 400). */
  font-family: inherit;
  font-size: var(--ex-fs-control);
  font-weight: 400;
  line-height: normal;
  letter-spacing: .07em;
  cursor: pointer;
  transition: color var(--ex-t-fast), border-color var(--ex-t-fast);
}
.ex-quiz-result__restart:hover,
.ex-quiz-result__restart:focus-visible { border-bottom-color: var(--ex-red); color: var(--ex-red); }

@keyframes ex-quiz-result-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Responsive (proposal — not designed) ---- */
@media (max-width: 899px) {
  .ex-quiz-result__restart { min-height: var(--ex-touch); padding-top: 4px; }
}
@media (max-width: 599px) {
  .ex-quiz-result { padding: 26px 18px; }
  .ex-quiz-result__actions { flex-direction: column; align-items: stretch; }
  .ex-quiz-result__actions .ex-btn { width: 100%; }
  .ex-quiz-result__restart { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-quiz-result:not([hidden]) { animation: none; }
  .ex-quiz-result__restart { transition: none; }
}