/* What's in the trial box: the simple version (trial-box/kit-photos, 3 Nov 2026)
   ---------------------------------------------------------------------------
   Ryan's review round 2: "'See what's in the trial box' section is too
   complex. Two digital versions of the kit are unnecessary. Replace with
   simple photos of pre-made Orlis and what to expect in the box."

   Two real photos of Orlis children made (img/, cropped so no child's face
   shows), then one plain list of what's in the box and what you bring. No 3D,
   no kit switch. Two partials, paths for a page in site/:
     kit-photos.html        a whole section (title, lead, photos, list, the ask)
     kit-photos-inset.html  the photos and the list only, for a column inside
                            another card (the home page's offer card)
   It lays itself out by the width it is given (container queries on .kp__in),
   so it fits a full-width section or a half-width column. System tokens and
   components only.
   ------------------------------------------------------------------------- */

.kp__head { margin-block-end: var(--o-space-7); }
.kp__head .o-lead { max-inline-size: 40em; }

.kp__in { container: kp / inline-size; }
.kp__grid {
  display: grid; gap: var(--o-space-6) var(--o-grid-gap);
  grid-template-columns: minmax(0, 1fr);
}
.kp__photo { display: grid; gap: var(--o-space-2); margin: 0; min-width: 0; }
.kp__frame {
  position: relative; overflow: clip; aspect-ratio: 4 / 3;
  border-radius: var(--o-r-card); background: var(--o-warm);
}
.kp__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.kp__photo--two .kp__frame img { object-position: 50% 45%; }

/* The list: one card, what's in the box in two groups, then the rest. */
.kp__list {
  display: grid; gap: var(--o-space-5) var(--o-grid-gap);
  padding: var(--o-space-5) var(--o-space-4);
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
.kp__group { display: grid; align-content: start; gap: var(--o-space-3); min-width: 0; }
.kp__h {
  margin: 0; font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading);
}
.kp__items { display: grid; gap: var(--o-space-2); margin: 0; padding: 0; list-style: none; }
.kp__items li { position: relative; padding-inline-start: 30px; text-wrap: pretty; }
.kp__items li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .15em; width: 20px; height: 20px;
  background: var(--o-action);
  -webkit-mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat;
          mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat;
}
.kp__more { margin: 0; color: var(--o-ink-2); text-wrap: pretty; }
.kp__end { display: grid; align-content: start; gap: var(--o-space-3); }
.kp__end .o-cluster { margin-block-start: var(--o-space-2); }

/* Inside another card: no card in the card, and a little tighter. */
.kp--inset .kp__grid { gap: var(--o-space-5) var(--o-space-4); }
.kp--inset .kp__list { padding: 0; background: none; border: 0; box-shadow: none; }

/* Room for two across: the two photos side by side, the list's groups across. */
@container kp (min-width: 34rem) {
  .kp__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .kp__photo--class .kp__frame { aspect-ratio: 3 / 2; }
  .kp__photo--two .kp__frame { aspect-ratio: auto; height: 100%; min-height: 0; }
  .kp__photo--two { grid-template-rows: minmax(0, 1fr) auto; }
  .kp__list { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp__end { grid-column: 1 / -1; padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line); }
}
@container kp (min-width: 44rem) {
  .kp:not(.kp--inset) .kp__list { padding: var(--o-space-6); }
}
@container kp (min-width: 64rem) {
  .kp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kp__end { grid-column: auto; padding-block-start: 0; border-block-start: 0; padding-inline-start: var(--o-grid-gap); border-inline-start: 1px solid var(--o-line); }
}

@media (forced-colors: active) {
  .kp__list { border-color: CanvasText; }
  .kp__items li::before { forced-color-adjust: none; background: CanvasText; }
}