/* about.css - the About page (rebuilt 2026-09-24).
 *
 * It used to be two centre-aligned boxes side by side, one much longer than
 * the other, with every paragraph centred and the two org links as small
 * unlabelled icons at the bottom of the left box. Centred prose is hard to
 * read at any length, and two columns of very different height leave a
 * large empty block on the page.
 *
 * Now it reads top to bottom in sections, on the shared card vocabulary the
 * Supply Chain pages set: --gradient-light panels with a highlight border,
 * .os-btn for anything you can click, body text left-aligned and held to a
 * readable measure. Every link the old page had is still here - the RSI org
 * page, the Discord invite and the referral code - just labelled and
 * somewhere you would look for them.
 */

.about-page {
    /* The measure, not the window: long lines of prose are tiring to read,
       and the site content area is very wide on a desktop. */
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.about-page h2 {
    margin: 0 0 0.9rem;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

.about-page p {
    line-height: 1.6;
}

/* ---------------- Lead ---------------- */

.about-lead {
    text-align: center;
}

.about-lead-text {
    max-width: 62ch;
    margin: 0 auto;
    font-size: 1.2rem;
}

.about-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* The icons keep their old hover, but inside a labelled button now, so
   nobody has to recognise a logo to know where a link goes. */
.about-cta .os-btn img {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.about-cta .os-btn:hover img {
    transform: scale(1.12);
    filter: brightness(130%);
}

/* ---------------- Sections ---------------- */

.about-section > h2,
.about-callout > h2 {
    text-align: left;
}

/* Three equal cards that stack on a narrow screen. auto-fit + minmax rather
   than a fixed column count, so it reflows without a breakpoint per size. */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.about-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background-image: var(--gradient-light);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 12px var(--glow-colour);
}

.about-card i {
    font-size: 1.6rem;
    color: var(--highlight-colour);
}

/* root.css centres every h1/h2/h3 site-wide, which is right for a page
   title and wrong inside a card - the heading floats away from the text
   under it. */
.about-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-align: left;
}

.about-card p {
    margin: 0;
    color: var(--muted);
}

/* ---------------- Point lists ---------------- */

/* list-style none + a font-awesome mark, so the icon carries the meaning
   and the text still lines up under itself when it wraps. */
.about-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Block, not flex. A flex container makes every text run its own item, so
   a <strong> or a full stop in one of these lines would get its own box and
   drift away from the words around it - the trap .sc-offer-line fell into
   (see the site notes' gotchas). The hanging indent keeps a wrapped line
   under the text, not under the icon. */
.about-points li {
    display: block;
    padding-left: 1.9rem;
    text-indent: -1.9rem;
    text-align: left;
}

.about-points li i {
    display: inline-block;
    width: 1.2rem;
    margin-right: 0.7rem;
    text-indent: 0;
    color: var(--highlight-colour);
}

/* ---------------- Call-out ---------------- */

.about-callout {
    padding: 1.5rem;
    background-image: var(--gradient-light);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius2);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
}

.about-callout p {
    max-width: 70ch;
}

.about-contact {
    margin-bottom: 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-colour);
}

/* ---------------- Prose ---------------- */

.about-prose p {
    max-width: 78ch;
}

.about-referral {
    margin-top: 1.5rem;
    padding: 0.9rem 1rem;
    background: var(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
}

/* ---------------- Narrow screens ---------------- */

@media screen and (max-width: 700px) {
    .about-page {
        gap: 2rem;
        padding: 1.5rem 1rem 2.5rem;
    }

    .about-lead-text {
        font-size: 1.05rem;
    }

    /* Full-width buttons read as a proper stack of choices on a phone,
       rather than three ragged pills. */
    .about-cta {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------------- Centred sections (2026-09-28, Matt) ----------------
   Text that sits on the page itself, outside a card or call-out box, is
   centred - the "What we do" and "What we're about" headings and lines and
   the About Star Citizen text - to match the lead at the top. Text INSIDE
   the cards and the "Want to try us out?" box stays left-aligned. */
.about-section > h2 {
    text-align: center;
}

.about-section > .about-points {
    align-items: center;
}

.about-section > .about-points li {
    padding-left: 0;
    text-indent: 0;
    text-align: center;
}

.about-prose p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.about-prose .about-referral {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}