/* ------------------------------------------------- slide grids and lists -- */

/* Every repeating block a slide is built from — the three grid families
   (problem, business, team), the headings and phase labels inside them, and
   the creative-value grid. One file because they share a measure, a gutter
   and a heading scale; change one and the others have to move with it.

   It held five list families, a metric box, two numbered step sequences and a
   funds box as well, for slides the deck no longer has. Those rules matched
   nothing and are gone; the dead-code guard (scripts/check_dead_code.py) is
   what will say so next time. */

.problem-grid,
.business-grid,
.team-grid {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.problem-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.team-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.business-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* The economy runs in four phases, and they read as one sequence only on one
   row. At 13rem a tablet's slide held three, and the fourth fell to a row of
   its own, which made this slide taller than the others and moved the deck's
   controls. */
.business-grid.model-economy {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.problem-column h3,
.business-item h4,
.team-member h4 {
    margin-bottom: 0.45rem;
}

.problem-column h3 {
    margin-bottom: 0.8rem;
}

.business-item,
.team-member {
    padding-top: 1rem;
    border-top: 1px solid var(--day-rule);
}

.business-item p,
.team-member p {
    font-size: var(--step--1);
    color: var(--day-ink-soft);
    margin-bottom: 0;
}

.business-phase {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--copper-ink);
}

/* Slide 5's six beats. They had no rule at all: an <ol> of one-word rows,
   369px tall, which is the whole reason that slide ran past a 700px window.
   They are the six faculties the home page sets as cards, and here they are
   the chain they read as — across the slide where there is width, three
   then two abreast where there is less. Counts that divide six, never
   auto-fit, so no beat is ever left alone on a row. */
.cognition-chain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--deck-air) clamp(1rem, 2.5vw, 2rem);
    margin: 0 0 calc(var(--deck-air) * 1.3);
    padding: 0;
    list-style: none;
    counter-reset: beat;
}

.cognition-chain li {
    counter-increment: beat;
    padding-top: calc(var(--deck-air) * 0.5);
    border-top: 1px solid var(--day-rule);
}

.cognition-chain li::before {
    content: counter(beat, decimal-leading-zero);
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--copper-ink);
}

.cognition-chain strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    line-height: 1.2;
    color: var(--day-ink);
}

/* The faculty is the label and the question is the headline — the order the
   home page sets. The two components had the emphasis reversed, so the
   product's six named parts were the caption in one view and the headline in
   the other; the markup was swapped to agree, and the label's margin moves
   with it. */
.cognition-chain p {
    margin: 0 0 0.2rem;
    font-size: var(--step--1);
    color: var(--day-ink-soft);
}

@media (min-width: 640px) {
    .cognition-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .cognition-chain { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Slide 13 closes the deck with three things: the window, the ask and the
   two doors. Stacked, that was 458px of measure-width text beside an empty
   right half, and the last slide was one of the three that ran past a
   700px window. Where there is width the ask and the doors sit beside the
   argument they follow from; where there is not, they follow it. */
/* Stacked, the window's last paragraph sits on the ask with only line-height
   between them — the base rule zeroes a last child's margin, and inside the
   wrapper that paragraph IS the last child. The gap belongs to the block. */
.threshold-spread > .threshold-call {
    margin-bottom: var(--deck-air);
}

@media (min-width: 900px) {
    .threshold-spread {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        gap: var(--deck-air) clamp(2rem, 4vw, 3.5rem);
        align-items: start;
    }

    .threshold-spread > .threshold-call {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    /* Level with the window's first paragraph, not with its eyebrow. */
    .threshold-spread > .ask-note {
        padding-top: 1.7rem;
    }
}

/* Slide 10's four cards had no layout rule at all and stacked in block flow —
   four articles tall, which made it the one slide whose Next button fell off
   the bottom of the window at six of nine shapes, including 1440x900. Two
   across from 640px, four across from 1100px: the same content at a quarter
   of the height on a desktop, and the slide fits the screen it is on. */
.creative-value-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.6rem, 1.4vw, 1rem) clamp(0.9rem, 2vw, 1.5rem);
    margin: 0 0 clamp(1rem, 2.4vh, 1.5rem);
}

.creative-value-grid article > span {
    display: block;
    font-size: var(--step--1);
    color: var(--day-ink-faint);
    margin-bottom: 0.2rem;
}

.creative-value-grid article > h3 {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    margin: 0 0 0.3rem;
}

.creative-value-grid article > p {
    margin: 0;
}

@media (min-width: 640px) {
    .creative-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .creative-value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}