/* Section: fit columns. A centred heading over numbered columns split by soft
   purple rules; tablets pair the columns up and phones stack them. */

.fit-columns {
    /* One Figma pixel of the 1352 content box, shrinking with the viewport. */
    --u: min(1px, (100vw - 2 * var(--container-pad)) / 1352);
    /* Where the site's content column starts and ends; the section is its own
       inline-size container so this ignores the page scrollbar. */
    --edge: max(var(--container-pad), (100cqi - var(--container-max)) / 2);

    position: relative;
    overflow: clip;
    isolation: isolate;
    container-type: inline-size;
    background: var(--color-light-purple);
    color: var(--color-dark-purple);
}

.fit-columns__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(850.5 * var(--u));
    padding: calc(80 * var(--u)) var(--edge) 0;
}

/* ── Heading ─────────────────────────────────────────────── */

.fit-columns__title {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    text-align: center;
}

/* Display/H-Display: Philosopher Bold Italic 80/88. */
.fit-columns__title em {
    font-size: var(--text-display);
    font-style: italic;
    line-height: var(--lh-display);
}

/* Headings/H2: Philosopher Bold 56/64. */
.fit-columns__title span {
    font-size: var(--text-h2);
    line-height: var(--lh-h2);
}

/* ── Columns ─────────────────────────────────────────────────
   The rules between the columns sit 24px outside the content box's quarters,
   so the grid runs 24px past it on both sides and each column pads back in.
   The columns take their rows from the list (subgrid), which keeps the rules
   under the numbers and the titles level across them when a title wraps, and
   the last row stretches so the dividers run down to the section's edge. */
.fit-columns__list {
    flex: 1 0 auto;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(var(--fit-count, 4), minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    margin: calc(108 * var(--u)) calc(-24 * var(--u)) 0;
    padding: 0;
    list-style: none;
}

.fit-columns__item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-width: 0;
    margin: 0;
    padding: calc(4 * var(--u)) calc(24 * var(--u)) calc(80 * var(--u));
}

.fit-columns__item + .fit-columns__item {
    border-left: 1px solid var(--color-soft-purple);
}

.fit-columns__number {
    margin: 0;
    padding-bottom: calc(35 * var(--u));
    border-bottom: 1px solid var(--color-soft-purple);
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: 0;
}

.fit-columns__item-title {
    margin: 0;
    padding: calc(32 * var(--u)) 0 calc(31 * var(--u));
    border-bottom: 1px solid var(--color-soft-purple);
    font-family: var(--font-display);
    font-size: var(--text-title4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title4);
    letter-spacing: -1px;
}

.fit-columns__desc {
    margin: 0;
    padding-top: calc(36 * var(--u));
    font-family: var(--font-body);
    font-size: var(--text-copy);
    font-weight: var(--fw-regular);
    line-height: var(--lh-copy);
    letter-spacing: 0;
}

/* ── Decor ───────────────────────────────────────────────────
   Placed as drawn at 1512: the circle half off the left edge, one star left of
   the heading, one cut by the top-right corner, and the blob right of the
   heading. Each box is the shape's own frame from the design, turned about its
   centre, so its rotated bounds land where the design's do. */
.fit-columns__decor {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.fit-columns__ellipse,
.fit-columns__star,
.fit-columns__union {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.fit-columns__ellipse {
    top: calc(76 * var(--u));
    left: calc(-44 * var(--u));
    width: calc(87 * var(--u));
    height: calc(88 * var(--u));
}

/* The star's frame is 90px with the shape inset 6.42% inside it. */
.fit-columns__star {
    box-sizing: border-box;
    width: calc(90 * var(--u));
    height: calc(90 * var(--u));
    padding: calc(5.778 * var(--u));
    transform: rotate(-17.76deg);
}

.fit-columns__star--left {
    top: calc(141.58 * var(--u));
    left: calc(var(--edge) + 147.58 * var(--u));
}

.fit-columns__star--corner {
    top: calc(-41.42 * var(--u));
    right: calc(-44.58 * var(--u));
}

.fit-columns__union {
    top: calc(70.09 * var(--u));
    right: calc(var(--edge) + 80.64 * var(--u));
    z-index: -1;
    width: calc(98.084 * var(--u));
    height: calc(99.733 * var(--u));
    transform: rotate(-11.97deg);
}

/* Tablet: the columns pair up, two to a row. */
@media (max-width: 1024px) {
    .fit-columns__inner {
        min-height: 0;
        padding-bottom: 4rem;
    }

    .fit-columns__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        margin-top: 3.5rem;
    }

    .fit-columns__item {
        padding-bottom: 0;
    }

    .fit-columns__item:nth-child(odd) {
        border-left: 0;
    }

    .fit-columns__item:nth-child(n + 3) {
        padding-top: 3rem;
    }
}

/* Phones: one column led by the blob, with a rule between the items. The
   circle and the stars have no heading to frame at this width, so they go. */
@media (max-width: 768px) {
    .fit-columns__decor {
        display: none;
    }

    .fit-columns__inner {
        align-items: flex-start;
        gap: 2rem;
        padding: 3.75rem var(--edge);
    }

    /* 60px rotated bounds from the design: the shape's frame plus the margin
       its turn takes up. */
    .fit-columns__union {
        position: static;
        width: 50.485px;
        height: 51.333px;
        margin: 4.68px 4.78px;
    }

    .fit-columns__title {
        gap: 0;
        text-align: left;
    }

    .fit-columns__title em {
        font-size: 2rem;
        line-height: 1.25;
        letter-spacing: -1px;
    }

    .fit-columns__title span {
        font-size: 1.5rem;
        line-height: 1.3333;
        letter-spacing: -0.75px;
    }

    .fit-columns__list {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin: 0;
    }

    .fit-columns__item,
    .fit-columns__item:nth-child(n + 3) {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0;
    }

    .fit-columns__item + .fit-columns__item {
        padding-top: 2rem;
        border-top: 1px solid var(--color-soft-purple);
        border-left: 0;
    }

    .fit-columns__number,
    .fit-columns__item-title,
    .fit-columns__desc {
        padding: 0;
        border: 0;
    }

    .fit-columns__number {
        font-size: 2rem;
        line-height: 1.1875;
        letter-spacing: -1px;
    }

    .fit-columns__item-title {
        font-size: 1.25rem;
        line-height: 1.4;
        letter-spacing: -0.5px;
    }

    .fit-columns__desc {
        font-size: 1.125rem;
        line-height: 1.6667;
        letter-spacing: -0.25px;
    }

    .fit-columns__desc:empty {
        display: none;
    }
}