/* Section: quiz_teaser — image with headline (left) + text and CTA (right). Mockup "Quiz". */

.ex-quiz-teaser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 500px;
  background: var(--ex-white);
  scroll-margin-top: var(--ex-scroll-offset);
}
.ex-quiz-teaser--no-media { grid-template-columns: minmax(0, 1fr); min-height: 0; }

.ex-quiz-teaser__media {
  position: relative;
  overflow: hidden;
  background: var(--ex-dark);
  color: var(--ex-white);
}
.ex-quiz-teaser__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.ex-quiz-teaser__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 31, 32, .2), rgba(35, 31, 32, .85));
  pointer-events: none;
}
.ex-quiz-teaser__image-title {
  position: absolute;
  left: var(--ex-gutter);
  right: var(--ex-gutter);
  bottom: clamp(28px, 3.4vw, 48px);
  margin: 0;
  font-size: clamp(28px, 2.7vw, 42px);
  font-weight: var(--ex-fw-title);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ex-white);
}

.ex-quiz-teaser__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(36px, 4vw, 64px) var(--ex-gutter);
}
.ex-quiz-teaser__eyebrow { gap: 10px; margin-bottom: 20px; }
.ex-quiz-teaser .ex-tool-icon { color: var(--ex-red); }
.ex-quiz-teaser__title {
  margin-bottom: 16px;
  font-size: clamp(26px, 2.5vw, 42px);
  line-height: 1;
  letter-spacing: -.01em;
}
.ex-quiz-teaser__text { max-width: 460px; }
/* Mockup: 14px under the text; CTA 48px high (16px 28px), 13.5px / 700 (.ex-btn--bold) / .07em. */
.ex-quiz-teaser__actions { margin-top: 14px; }
.ex-quiz-teaser__actions .ex-btn { --ex-btn-px: 28px; padding-block: 16px; letter-spacing: .07em; }

/* ≤1199: image above the text (proposal) */
@media (max-width: 1199px) {
  .ex-quiz-teaser { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ex-quiz-teaser__media { min-height: clamp(260px, 44vw, 420px); }
}

@media (max-width: 599px) {
  .ex-quiz-teaser__actions .ex-btn { width: 100%; }
}