/*
 * Academy Founder story (/academy/the-founder-story/) — section styles
 * Same grid as the rest of the site: 5 columns inside the container, 16px gap, c = (100% - 64px) / 5.
 * Desktop positions follow the Figma layout; tablet / mobile stack in reading order.
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */
.fs-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.fs-head--wide { max-width: 80%; }
.fs-title { margin: 0; font-size: clamp(56px, 6.111vw, 88px); }
.fs-title--xl { font-size: clamp(72px, 7.222vw, 104px); }

.fs-block { display: flex; flex-direction: column; gap: 72px; }

.fs-intro__grid,
.fs-journey__grid,
.fs-arch__grid,
.fs-intl__grid,
.fs-lead__grid,
.fs-why__grid,
.fs-principles__grid,
.fs-name__grid,
.fs-values__top,
.fs-values__grid,
.fs-academy__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap:            16px;
    align-items:           start;
    margin:                0;
    padding:               0;
    list-style:            none;
}
.fs-journey__grid p, .fs-arch__grid p, .fs-intl__grid p, .fs-lead__grid p,
.fs-why__grid p, .fs-name__grid p, .fs-academy__grid p, .fs-intro__text p { margin: 0; }

.fs-fig { margin: 0; overflow: hidden; }
.fs-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-quote { font-family: var(--font-mono); color: var(--color-muted); }

.fs-dark { position: relative; padding-bottom: 300px; margin-top: 300px; }
.fs-dark > section { position: relative; z-index: 1; }
.fs-dark > section + section { padding-top: 300px; }

/* Cards (principles, values) */
.fs-card { display: flex; flex-direction: column; gap: 16px; height: 300px; }
.fs-card__figure { flex: 1; min-height: 0; }
.fs-card__info { display: flex; flex-direction: column; gap: 8px; }
.fs-card__info p { margin: 0; }
.fs-card__name {
    margin:         0;
    font-size:      var(--fs-lead);
    font-weight:    var(--fw-medium);
    line-height:    var(--line-height);
    letter-spacing: var(--ls-tight);
}

/* ── Intro ──────────────────────────────────────────────────────────────── */
.fs-intro { padding: 48px 0 0; }
.fs-intro__head   { grid-column: 1 / 3; grid-row: 1; }

/* The longest word ("boundaries") is as wide as the 2-column head at the design size (104px on a 256px column).
   Our columns are narrower (1360 container), so the title scales with the head width instead of wrapping mid-word. */
@media (min-width: 1024px) {
    .fs-intro__head { container-type: inline-size; }
    .fs-intro .fs-title--xl { font-size: min(104px, 19.2cqw); }
}
.fs-intro__figure { grid-column: 3 / 5; grid-row: 1; height: 600px; }
.fs-intro__text {
    grid-column:     5;
    grid-row:        1;
    align-self:      stretch;
    display:         flex;
    flex-direction:  column;
    gap:             16px;
    justify-content: flex-end;
}

/* ── Journey ────────────────────────────────────────────────────────────── */
.fs-journey { padding: 300px 0 0; }
.fs-journey__grid { grid-template-rows: 600px; }
.fs-journey__text-1   { grid-column: 1; grid-row: 1; }
.fs-journey__text-2   { grid-column: 2; grid-row: 1; align-self: end; }
.fs-journey__figure-1 { grid-column: 3; grid-row: 1; height: 600px; }
.fs-journey__figure-2 { grid-column: 4; grid-row: 1; height: 600px; }
.fs-journey__quote    { grid-column: 5; grid-row: 1; }

/* ── Dark: architecture + international ─────────────────────────────────── */
.fs-arch { padding-top: 300px; }
.fs-arch__grid { grid-template-rows: 344px 474px; }
.fs-arch__text-1   { grid-column: 3; grid-row: 1; }
.fs-arch__figure-1 { grid-column: 1 / 3; grid-row: 1 / 3; height: 474px; }
.fs-arch__figure-2 { grid-column: 4 / 6; grid-row: 2; height: 474px; }
.fs-arch__note     { grid-column: 1; grid-row: 1 / 3; align-self: end; }
.fs-arch__text-2   { grid-column: 3; grid-row: 1 / 3; align-self: end; }

.fs-intl__grid { grid-template-rows: 124px 474px auto; }
.fs-intl__text-1 { grid-column: 1 / 3; grid-row: 1; }
.fs-intl__text-2 { grid-column: 3; grid-row: 1; }
.fs-intl__figure { grid-column: 1 / 6; grid-row: 2; height: 474px; }
.fs-intl__quote  { grid-column: 5; grid-row: 3; margin-top: 24px !important; }

/* ── Leadership ─────────────────────────────────────────────────────────── */
.fs-lead { padding: 300px 0 0; }
.fs-lead__grid { grid-template-rows: auto auto 1fr; row-gap: 32px; }
.fs-lead__figure-1 { grid-column: 1; grid-row: 1; height: 240px; }
.fs-lead__figure-2 { grid-column: 2; grid-row: 1 / 4; height: 480px; }
.fs-lead__text-1   { grid-column: 5; grid-row: 1; }
.fs-lead__text-2   { grid-column: 5; grid-row: 2; }
.fs-lead__btn      { grid-column: 5; grid-row: 3; align-self: end; display: flex; justify-content: center; }

/* ── Why Boötes exists (photos run 150px into the dark block below) ─────── */
.fs-why { position: relative; z-index: 2; padding: 300px 0 0; }
.fs-why__grid { grid-template-rows: 300px 180px 450px; margin-bottom: -150px; }
.fs-why__text-1 { grid-column: 1; grid-row: 1; }
.fs-why__text-2 { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
.fs-why__figure-small { grid-column: 1; grid-row: 2; height: 180px; }
.fs-why__figure-1 { grid-column: 4; grid-row: 1 / 4; height: 930px; }
.fs-why__figure-2 { grid-column: 5; grid-row: 1 / 4; height: 930px; }

/* ── Dark: principles + name ────────────────────────────────────────────── */
.fs-dark--after-why { margin-top: 0; }
.fs-dark--after-why > .fs-principles { padding-top: 300px; }

.fs-principles__card--1 { grid-column: 1; }
.fs-principles__card--2 { grid-column: 2 / 4; height: 480px; }
.fs-principles__card--3 { grid-column: 5; height: 480px; }

.fs-name__grid { grid-template-rows: 124px 370px; }
.fs-name__note     { grid-column: 1; grid-row: 1; }
.fs-name__text-1   { grid-column: 3; grid-row: 1; }
.fs-name__text-2   { grid-column: 4 / 6; grid-row: 1; }
.fs-name__figure-1 { grid-column: 1; grid-row: 2; align-self: end; height: 125px; }
.fs-name__figure-2 { grid-column: 3 / 6; grid-row: 2; height: 370px; }

/* ── Values ─────────────────────────────────────────────────────────────── */
.fs-values { padding: 300px 0 0; }
.fs-values__head { grid-column: 1 / 4; }
.fs-values__text { grid-column: 5; margin: 86px 0 0; }
.fs-values__grid { grid-template-rows: 364px 300px; }
.fs-values__card--1 { grid-column: 1; grid-row: 1; }
.fs-values__card--2 { grid-column: 2; grid-row: 2; }
.fs-values__card--3 { grid-column: 3; grid-row: 1; }
.fs-values__card--4 { grid-column: 4; grid-row: 2; }
.fs-values__card--5 { grid-column: 5; grid-row: 1; }

/* ── Academy ────────────────────────────────────────────────────────────── */
.fs-academy { padding: 300px 0 0; }
.fs-academy__grid { grid-template-rows: auto auto 1fr; row-gap: 16px; }
.fs-academy__text-1 { grid-column: 1; grid-row: 1; }
.fs-academy__text-2 { grid-column: 1; grid-row: 2; }
.fs-academy__btn    { grid-column: 1; grid-row: 3; align-self: end; display: flex; justify-content: center; }
.fs-academy__figure { grid-column: 3 / 6; grid-row: 1 / 4; height: 560px; }

/* ── Tablet / mobile: stacked in reading order ──────────────────────────── */
@media (max-width: 1023px) {
    .fs-title,
    .fs-title--xl { font-size: 64px; }
    .fs-head--wide { max-width: none; }
    .fs-block { gap: 32px; }

    .fs-intro__grid,
    .fs-journey__grid,
    .fs-arch__grid,
    .fs-intl__grid,
    .fs-lead__grid,
    .fs-why__grid,
    .fs-name__grid,
    .fs-academy__grid {
        display:         flex;
        flex-wrap:       wrap;
        gap:             24px 8px;
        align-items:     flex-start;
    }
    .fs-intro__grid > *, .fs-journey__grid > *, .fs-arch__grid > *, .fs-intl__grid > *, .fs-lead__grid > *,
    .fs-why__grid > *, .fs-name__grid > *, .fs-academy__grid > * { flex: 0 0 100%; max-width: 100%; }
    .fs-figure-reset { height: auto; }

    .fs-intro { padding-top: 24px; }
    .fs-intro__grid { gap: 24px; }
    .fs-intro__figure { height: 240px; order: 2; }
    .fs-intro__text { align-self: auto; order: 3; }

    .fs-journey, .fs-lead, .fs-why, .fs-values, .fs-academy { padding-top: 104px; }
    .fs-dark { margin-top: 104px; padding-bottom: 104px; }
    .fs-arch, .fs-dark--after-why > .fs-principles { padding-top: 104px; }
    .fs-dark > section + section { padding-top: 104px; }

    .fs-journey__figure-1, .fs-journey__figure-2 { flex: 1 1 0; height: 361px; }
    .fs-journey__text-2, .fs-journey__text-1 { align-self: auto; }

    .fs-arch__figure-1, .fs-arch__figure-2, .fs-intl__figure,
    .fs-name__figure-1, .fs-name__figure-2, .fs-why__figure-small { height: 180px; }
    .fs-arch__figure-2 { order: 5; }
    .fs-arch__note, .fs-arch__text-2 { align-self: auto; }
    .fs-intl__quote { margin-top: 0 !important; }

    .fs-lead__figure-1, .fs-lead__figure-2 { flex: 1 1 0; }
    .fs-lead__figure-1 { height: 240px; }
    .fs-lead__figure-2 { height: 480px; }
    .fs-lead__btn, .fs-academy__btn { align-self: stretch; }

    .fs-why__grid { margin-bottom: 0; }
    .fs-why__figure-1, .fs-why__figure-2 { flex: 1 1 0; height: 489px; }

    .fs-principles__grid, .fs-values__grid { display: flex; flex-direction: column; gap: 24px; }
    .fs-values__top { display: flex; flex-direction: column; gap: 24px; }
    .fs-values__text { margin: 0; }
    .fs-principles__card--2, .fs-principles__card--3, .fs-card { height: auto; }
    .fs-card__figure { flex: none; height: 180px; }

    .fs-academy__figure { height: 180px; }
}

@media (max-width: 767px) {
    .fs-title { font-size: 48px; }
    .fs-title--xl { font-size: 64px; }
    .fs-dark--after-why { padding-top: 0; }
}