/* What we build: a section head over two worlds side by side. The worlds share a top rule and are divided by
   a hairline; their rows (number, name, sentence, pills, topics) line up across both (subgrid), so the eye
   can compare them. One column on phones. Reveals once on scroll. */

.offer {
  padding: var(--space-10) var(--space-page);
}
.offer__title {
  margin-top: var(--space-5);
}

.offer__worlds {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  margin-top: var(--space-9);
}
/* The rule above both worlds. */
.offer__worlds::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline-strong);
  transform-origin: left;
}
.offer__world {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  padding: var(--space-7) var(--space-8) 0 0;
}
.offer__world + .offer__world {
  padding-right: 0;
  padding-left: var(--space-8);
  border-left: 1px solid var(--hairline);
}

.offer__n {
  color: var(--accent-strong);
}
.offer__name {
  margin-top: var(--space-4);
}
.offer__text {
  max-width: 36ch;
  margin-top: var(--space-5);
  font-size: var(--text-body-l);
  color: var(--ink-muted);
}

/* What the world covers, as the kit's pills (the same as on the topic cards). */
.offer__items {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.offer__items li {
  padding: 7px 12px 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  line-height: 1.2;
  white-space: nowrap;
}

/* Topics: thumbnail, name, an arrow that leans forward. The name turns gold italic on hover, like the
   founder's credentials. */
.offer__examples {
  margin-top: var(--space-8);
}
.offer__examples-label {
  color: var(--ink-muted);
}
.offer__examples ul {
  display: grid;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.offer__example {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
}
.offer__example img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--hairline);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.offer__example-name {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-title);
  transition: color var(--dur-base) var(--ease-standard);
}
.offer__example .glyph {
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.offer__example:hover .offer__example-name,
.offer__example:focus-visible .offer__example-name {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
}
.offer__example:hover img,
.offer__example:focus-visible img {
  transform: scale(1.08);
}
.offer__example:hover .glyph,
.offer__example:focus-visible .glyph {
  transform: translateX(4px);
}

/* ── Reveal ── */

.offer [data-reveal] {
  opacity: 0;
}
.offer .is-visible[data-reveal],
.offer .is-visible [data-reveal] {
  animation: offer-in 1100ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
.offer__worlds::before {
  transform: scaleX(0);
}
.offer__worlds:has(.is-visible)::before {
  animation: offer-rule 1400ms var(--ease-out-expo) both;
  animation-delay: 160ms;
}
@keyframes offer-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(18px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes offer-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .offer [data-reveal] {
    opacity: 1;
  }
  .offer__worlds::before {
    transform: none;
  }
  .offer .is-visible[data-reveal],
  .offer .is-visible [data-reveal],
  .offer__worlds:has(.is-visible)::before {
    animation: none;
  }
}

@media (max-width: 900px) {
  .offer {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
  .offer__worlds {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin-top: var(--space-8);
  }
  .offer__world {
    display: block;
    grid-row: auto;
    padding-right: 0;
  }
  .offer__world + .offer__world {
    margin-top: var(--space-8);
    padding-left: 0;
    border-top: 1px solid var(--hairline-strong);
    border-left: 0;
  }
  .offer__examples {
    margin-top: var(--space-6);
  }
}