/* =====================================================================
   Checklist (ticked list) — Figma "D - Checklist" 6338:60488 (desktop);
   matching "M -" mobile variant. Tokens only; BEM, .checklist-scoped.

   H2 (Axiforma Medium 32/45) above a vertical list; each row is a fixed
   OneGold-Blue check glyph + body copy (Axiforma Regular 16/normal, gray-8),
   12px gap between rows, 10px gap glyph->text. Optional media column
   (Image=Left/Right) and optional .btn CTA below the list.
   Desktop laid out via flex; mobile stacks the columns and reduces type.
   ===================================================================== */

.checklist {
  padding-block: var(--home-sec-pad-y); /* 80px */
}

.checklist__inner {
  display: flex;
  align-items: center;
  gap: var(--home-hero-gap); /* 80px between media and content */
}

/* Single-column (no image): content fills the locked container width. */
.checklist--image-none .checklist__inner {
  display: block;
}

/* --- Media column (Image=Right default; Image=Left modifier) --------- */
.checklist__media {
  flex: 1 1 0;
  min-width: 0;
}

.checklist__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-10);
  object-fit: cover;
}

/* Image=Left: place the media before the content. */
.checklist--image-left .checklist__media { order: 0; }
.checklist--image-left .checklist__content { order: 1; }
/* Image=Right (default): content first, media second. */
.checklist--has-image:not(.checklist--image-left) .checklist__content { order: 0; }
.checklist--has-image:not(.checklist--image-left) .checklist__media { order: 1; }

/* --- Content column -------------------------------------------------- */
.checklist__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-stack-gap); /* 20px — matches Figma list/heading gap */
}

/* Heading (Axiforma Medium 32/45 — OG Desktop H2) */
.checklist__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45); /* 45px */
  color: var(--gray-8);
  word-break: break-word;
}

/* Optional intro lead (Axiforma Regular 18/25 — OG Desktop Large Body) */
.checklist__intro {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25); /* 25px */
  color: var(--color-text-muted);
  word-break: break-word;
}

/* --- Ticked list ----------------------------------------------------- */
.checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--cb-list-gap); /* 12px between rows */
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--education-guides-link-inner-gap); /* 10px glyph -> text */
}

/* Fixed OneGold-Blue check glyph in a 27px box (Figma Icons frame). */
.checklist__check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;  /* Figma "Icons" frame size */
  height: 27px;
  color: var(--og-blue);
}

.checklist__check svg {
  width: 14px;  /* ~13.75px Figma vector width */
  height: auto;
}

/* Body copy (Axiforma Regular 16/normal — OG Desktop Normal Body) */
.checklist__text {
  flex: 1 1 0;
  min-width: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-8);
  word-break: break-word;
}

/* Optional CTA — sits below the list; visual comes from .btn / .btn--*. */
.checklist__cta {
  margin-top: var(--home-stack-gap); /* 20px */
}

/* --- Tablet (768–1023): Archetype C — stack image|text split, step heading --- */
@media (max-width: 1023.98px) {
  .checklist {
    padding-block: 64px;
  }

  /* Stack the 2-col split on tablet */
  .checklist--has-image .checklist__inner,
  .checklist--image-left .checklist__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-stack-gap); /* 20px */
  }

  .checklist--has-image .checklist__media,
  .checklist--image-left .checklist__media { order: 0; }
  .checklist--has-image .checklist__content,
  .checklist--image-left .checklist__content { order: 1; }

  .checklist__heading {
    font-size: var(--fs-28);
    line-height: 1.3;
  }
}

/* --- Mobile ("M -" variant; 390 frame, stack columns, reduce type) --- */
@media (max-width: 767.98px) {
  .checklist {
    padding-block: var(--ba-pad-y); /* 40px */
  }

  .checklist__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-stack-gap); /* 20px */
  }

  /* Media stacks above the content regardless of left/right on mobile. */
  .checklist--has-image .checklist__media,
  .checklist--image-left .checklist__media { order: 0; }
  .checklist--has-image .checklist__content,
  .checklist--image-left .checklist__content { order: 1; }

  .checklist__heading {
    font-size: var(--fs-26); /* OG Mobile H2 */
    line-height: var(--lh-36); /* 36px */
  }

  .checklist__intro {
    font-size: var(--fs-16);
    line-height: var(--lh-25);
  }
}