/* Shared responsive rhythm and typography for every editor "How it works"
   section. Loaded after the three key-asset stylesheets and the activity
   CSS. The master/served key-asset CSS is never edited. Rules are scoped
   only to the four How sections. */

/* ---------- illustration containment at every width ----------
   The key-asset per-step scale can exceed its 100% media slot. The image
   is sized inversely to --art-scale using the visual's own container units,
   then centered. Its transformed box finishes exactly at the slot edges, so
   the complete artwork stays inside the illustration area and can never
   reach the title below. The <picture> wrapper is layout-transparent. */
.quiz-how .quiz-how__visual,
.gtp-how .gtp-how__visual,
.reflex-how .reflex-how__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  container-type: size;
}

.quiz-how .quiz-how__visual picture,
.gtp-how .gtp-how__visual picture,
.reflex-how .reflex-how__visual picture {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(100cqw / var(--art-scale, 1) - 2px);
  height: calc(100cqh / var(--art-scale, 1) - 2px);
  transform: translate(-50%, -50%);
}

.quiz-how .quiz-how__image,
.gtp-how .gtp-how__image,
.reflex-how .reflex-how__image {
  width: calc(100cqw / var(--art-scale, 1) - 2px);
  height: calc(100cqh / var(--art-scale, 1) - 2px);
  transform: scale(var(--art-scale, 1));
  transform-origin: center;
  object-fit: contain;
  object-position: center;
}

/* ---------- shared step typography ----------
   Titles match the original Reflex Tap caption: body font 800, 1.22 line
   height and the same responsive size. Descriptions use the Photo
   Dedication supporting-copy treatment. */
.quiz-how .how-step-title,
.gtp-how .how-step-title,
.reflex-how .how-step-title,
.pd-how-panel .how-step-title {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-align: center;
  color: inherit;
}

/* Photo's art and copy are two children of one flex step: the flex gap is
   the illustration-to-title distance, so the title itself needs no top
   margin. A square crop box shows exactly one 200x200 sprite panel, so no
   neighbouring icon can appear at the edges. */
.pd-how-panel .pd-how-step { gap: 18px; }
.pd-how-panel .how-step-title { margin: 0; }
.pd-how-panel .pd-how-art { width: 142px; height: 142px; }

.quiz-how .how-step-desc,
.gtp-how .how-step-desc,
.reflex-how .how-step-desc,
.pd-how-panel .how-step-desc {
  max-width: 15rem;
  margin: 6px auto 0;
  color: rgba(32, 36, 44, 0.62);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 600px) {
  /* One column, one 160px illustration slot, one 16px title gap and the
     same 24px between steps for Quiz, Guess the Price and Reflex. */
  .quiz-how .quiz-how__steps,
  .gtp-how .gtp-how__steps,
  .reflex-how .reflex-how__steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .quiz-how .quiz-how__step,
  .gtp-how .gtp-how__step,
  .reflex-how .reflex-how__step {
    --how-art-height: 160px;
    --art-scale: 1;
    grid-template-rows: 160px auto;
  }

  .quiz-how .quiz-how__visual,
  .gtp-how .gtp-how__visual,
  .reflex-how .reflex-how__visual {
    width: 100%;
    height: 160px;
    overflow: visible;
  }

  .quiz-how .quiz-how__visual picture,
  .gtp-how .gtp-how__visual picture,
  .reflex-how .reflex-how__visual picture {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    height: 100%;
    transform: none;
  }

  /* Size by the artwork's own aspect ratio: height drives the scale, the
     210px width and 145px height caps prevent oversized canvases. */
  .quiz-how .quiz-how__image,
  .gtp-how .gtp-how__image,
  .reflex-how .reflex-how__image {
    position: absolute;
    inset: 0;
    display: block;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 210px;
    max-height: 145px;
    transform: none;
  }

  .quiz-how .how-step-title,
  .gtp-how .how-step-title,
  .reflex-how .how-step-title,
  .pd-how-panel .how-step-title {
    margin-top: 16px;
    font-size: 18px;
  }

  .pd-how-panel .how-step-title { margin-top: 0; }

  /* Photo Dedication keeps its three crops from the single sprite. The
     image box is a 145px square, so object-fit: cover shows exactly one
     panel at the shared visual height and never a neighbouring icon. */
  .pd-how-panel .pd-how-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .pd-how-panel .pd-how-step { gap: 16px; }

  .pd-how-panel .pd-how-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 160px;
    overflow: hidden;
  }

  .pd-how-panel .pd-how-art img {
    display: block;
    width: 145px;
    height: 145px;
    max-width: 210px;
    max-height: 145px;
    object-fit: cover;
  }
}