/* Herbawell — quiz doboru produktów (page-quiz.php). 1:1 z makiety Premium (widok isQuiz).
   Wartości/kolory przez var(--hw-*); zero zaokrągleń i cieni. */

.hw-quiz { max-width: 1440px; margin-inline: auto; }

.hw-quiz__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 640px;
}

.hw-quiz__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 72px;
}

.hw-quiz__eyebrow span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hw-brass-dark);
}

.hw-quiz__progress { display: flex; gap: 6px; }
.hw-quiz__bar { flex: 1; height: 3px; background: rgba(16, 38, 28, .16); }
.hw-quiz__bar.is-active { background: var(--hw-green); }
.hw-quiz__bar.is-done { background: var(--hw-brass); }

.hw-quiz__asking,
.hw-quiz__done { display: flex; flex-direction: column; gap: 22px; }

.hw-quiz__question { display: flex; flex-direction: column; gap: 22px; }
.hw-quiz__question[hidden] { display: none; }

.hw-quiz__h1 {
  margin: 0;
  font-family: var(--hw-font);
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--hw-green);
  line-height: 1.02;
}
.hw-quiz__hint { margin: 0; font-size: 15px; line-height: 1.7; color: var(--hw-text-soft); }

.hw-quiz__opts { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hw-quiz__opt {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(16, 38, 28, .18);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.hw-quiz__opt:hover { border-color: var(--hw-brass-dark); }
.hw-quiz__opt.is-active { border-color: var(--hw-brass); background: #EFE8DB; }
.hw-quiz__opt-num { font-family: var(--hw-font); font-size: 14px; font-weight: 500; color: var(--hw-brass-dark); }
.hw-quiz__opt-label { font-size: 17px; font-weight: 500; color: var(--hw-green); }
.hw-quiz__opt-arrow { margin-left: auto; font-size: 15px; color: var(--hw-text-muted); }

.hw-quiz__back {
  align-self: flex-start;
  margin-top: 8px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hw-text-muted);
  cursor: pointer;
}

/* Wynik */
.hw-quiz__result-text { margin: 0; font-size: 16px; line-height: 1.8; color: var(--hw-text-soft); }
.hw-quiz__answers { display: flex; flex-direction: column; margin-top: 4px; }
.hw-quiz__answer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--hw-line);
}
.hw-quiz__answer-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--hw-text-muted);
}
.hw-quiz__answer-v { font-size: 14px; font-weight: 500; color: var(--hw-green); text-align: right; }
.hw-quiz__done-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

/* Kafelek zestawu na ekranie wyniku. Wygląd karty dziedziczy z bundles.css — tutaj tylko
   pełna szerokość kolumny wyniku i obwódka, którą na /zestawy/ daje siatka kart. */
.hw-quiz__result-card { margin-top: 8px; }
.hw-quiz__card { width: 100%; border: 1px solid var(--hw-line); }

/* Aside — kadr */
.hw-quiz__aside { position: relative; background: var(--hw-sage); }
.hw-quiz__aside-frame { position: absolute; inset: 56px; }
.hw-quiz__aside-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-quiz__aside-note {
  position: absolute;
  bottom: 26px;
  right: 32px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hw-green);
}

/* Pasek zaufania */
.hw-quiz__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(16, 38, 28, .14);
  border-bottom: 1px solid rgba(16, 38, 28, .14);
}
.hw-quiz__trust-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px;
  border-right: 1px solid rgba(16, 38, 28, .1);
}
.hw-quiz__trust-cell:first-child { padding-left: 56px; }
.hw-quiz__trust-cell:last-child { padding-right: 56px; border-right: 0; }
.hw-quiz__trust-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hw-brass-dark);
}
.hw-quiz__trust-v { font-size: 13.5px; color: var(--hw-text-soft); }

/* ================= MOBILE 390 ================= */
@media (max-width: 768px) {
  .hw-quiz__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hw-quiz__panel { padding: 26px 22px 0; gap: 18px; order: 2; }
  .hw-quiz__h1 { font-size: 34px; line-height: 1.05; }
  .hw-quiz__hint { font-size: 14px; }
  .hw-quiz__opt { padding: 19px 18px; gap: 14px; }
  .hw-quiz__opt-label { font-size: 15.5px; }

  .hw-quiz__aside { order: 1; height: 220px; }
  .hw-quiz__aside-frame { inset: 22px; }
  .hw-quiz__aside-note { display: none; }

  .hw-quiz__trust { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
  .hw-quiz__trust-cell { border-right: 0; border-bottom: 1px solid rgba(16, 38, 28, .1); }
  .hw-quiz__trust-cell:first-child { padding-left: 22px; }
  .hw-quiz__trust-cell:last-child { padding-right: 22px; border-bottom: 0; }

  .hw-quiz__done-actions .hw-btn { width: 100%; }
}

/* 🔑 guard [hidden] vs display (gotcha projektu) */
.hw-quiz__done[hidden] { display: none; }
.hw-quiz__asking[hidden] { display: none; }
.hw-quiz__result-card[hidden] { display: none; }