/* S3 · How it works (SITE-22). SITE-20's lab bento as the founder liked it (founder/liked-lab-bento-four-cards.webp):
   the lab's grid and compositions (assets/v2/lab/lab.css, .lab-bento), ported to this section's own classes. */

/* No section numeral (founder, 2026-10-31: "I do not like the 01 02 03"): a pixel eyebrow label over a one-column
   heading. Remove once SITE-20's .sec-head makes the numeral column opt-in. */
.hw .sec-head:not(:has(.sec-head__num)) { grid-template-columns: minmax(0, 1fr); }
.hw .sec-head:not(:has(.sec-head__num)) > * { grid-column: 1; }
.hw .sec-head__eyebrow { margin-bottom: 18px; }

/* The lab's bento: 01 wide over 03 and 04, 02 the tall A/B card on the right. */
.hw__grid { display: grid; grid-template-columns: 1fr 1fr minmax(300px, 340px); gap: 16px; margin-top: clamp(40px, 24px + 3vw, 64px); }
.hw__grid > .hw-card { min-height: 380px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hw__grid > .hw-b1 { grid-column: 1 / 3; }
.hw__grid > .hw-b2 { grid-column: 3; grid-row: 1 / 3; min-height: 0; align-self: start; }
.hw-on-dark { color: #fff; }

/* 01 Strategy: persona chips with photo avatars */
.hw-b1 .t-small { max-width: 30em; }
.hw-personas { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; }
.hw-personas .chip { transition: box-shadow .5s var(--ease-out), border-color .5s var(--ease-out); }
/* The persona being researched: an orange hairline ring and a live dot (the JS moves it along, one at a time). */
.hw-personas .chip.is-lit { border-color: color-mix(in oklab, var(--orange) 55%, #fff); box-shadow: 0 0 0 3px rgb(255 90 36 / .12), var(--shadow-xs); }

/* 02 Content: Jurni's A/B card (SITE-20 .ab-card), with B's carousel able to swipe to its payoff slides */
.hw-b2__body { margin-top: 12px; max-width: 26em; }
.hw-slides { display: flex; width: 100%; height: 100%; will-change: transform; }
.hw-slides picture { display: contents; }
.hw-slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
/* The story, driven by the JS loop, by hover on a mouse and by a tap on touch (.is-decided). */
.hw-b2.is-decided .ab__a { opacity: .2; }
.hw-b2.is-decided .ab__b { scale: 1.04; }
.hw-b2.is-decided .ab__left { rotate: -7.5deg; translate: -50% calc(-50% + 7.9cqw); }
.hw-b2.is-decided .ab__chip { opacity: 1; }
/* On touch, :hover sticks after a tap; only .is-decided may show the result there. */
@media (hover: none) {
  .hw-b2.ab-card:hover:not(.is-decided) .ab__a, .hw-b2.ab-card:focus-within:not(.is-decided) .ab__a { opacity: 1; }
  .hw-b2.ab-card:hover:not(.is-decided) .ab__b, .hw-b2.ab-card:focus-within:not(.is-decided) .ab__b { scale: 1; }
  .hw-b2.ab-card:hover:not(.is-decided) .ab__left, .hw-b2.ab-card:focus-within:not(.is-decided) .ab__left { rotate: -14.4deg; translate: -50% -50%; }
  .hw-b2.ab-card:hover:not(.is-decided) .ab__chip, .hw-b2.ab-card:focus-within:not(.is-decided) .ab__chip { opacity: 0; }
}
.hw-b2 { -webkit-tap-highlight-color: transparent; }

/* 03 Distribution: the Mon–Fri posting strip on a dot grid */
.hw-b3__dots { position: absolute; inset: 0; z-index: -1; }
.hw-cal { margin-top: auto; width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding-top: 24px; }
.hw-cal__day { position: relative; display: grid; gap: 8px; justify-items: start; padding-top: 10px; border-top: 1px solid var(--hairline); }
.hw-cal .chip { font-size: 11px; padding: 0 8px; }
/* The day that's posting: its hairline lights orange from the left, as Replo's lines do. */
.hw-cal__day::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; transform: scaleX(var(--lit, 0)); transform-origin: left; background: var(--orange); }

/* 04 Review: the dithered sage textured card, bars and a lime winner */
.hw-b4 { padding: 24px; }
.hw-bars { margin-top: auto; width: 100%; height: 150px; display: flex; align-items: flex-end; gap: 10px; }
.hw-bars span { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: rgb(255 255 255 / .55); transform-origin: bottom; }
.hw-bars span.is-win { background: var(--lime); box-shadow: 0 0 24px rgb(212 242 90 / .45); }

/* 1100 and down: two columns; 01 full width, then 02 beside 03, and 04 full width */
@media (max-width: 1100px) {
  .hw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw__grid > .hw-b1 { grid-column: 1 / -1; }
  .hw__grid > .hw-b2 { grid-column: 1; grid-row: 2; }
  .hw__grid > .hw-b3 { grid-column: 2; grid-row: 2; }
  .hw__grid > .hw-b4 { grid-column: 1 / -1; grid-row: 3; min-height: 340px; }
}
/* 640 and down (390, 430): one column, as the lab stacks it */
@media (max-width: 640px) {
  .hw__grid { grid-template-columns: minmax(0, 1fr); }
  .hw__grid > .hw-b1, .hw__grid > .hw-b2, .hw__grid > .hw-b3, .hw__grid > .hw-b4 { grid-column: 1; grid-row: auto; }
  .hw__grid > .hw-card { min-height: 0; }
  .hw__grid > .hw-b3 { min-height: 300px; }
  .hw__grid > .hw-b4 { min-height: 320px; }
  .hw-cal { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
}