/* About (/about) in the site reskin preview (15 Oct 2026). Loaded by includes/header.cfm
   only when request.reskin is true. The page is already the new look; this gives its
   hero the photo-hero treatment of the shared .rs-hero--photo block, by CSS alone:
   the registry slot "village" behind it, a dark green shade (top-down on phones,
   dark on the left from 992px), white heading and lead. The quote box keeps its own
   white card and text colours (no colour is set on the hero itself, so nothing in the
   box can inherit white). Words and layout unchanged. */
body.ft-reskin .ft-about .ab-hero {
    position: relative;
    background: #24372B var(--rs-photo-village) center 45% / cover no-repeat;
}
body.ft-reskin .ft-about .ab-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,34,23,0.82) 0%, rgba(12,34,23,0.62) 55%, rgba(12,34,23,0.40) 100%);
}
body.ft-reskin .ft-about .ab-hero > .container { position: relative; }
body.ft-reskin .ft-about .ab-hero h1 { color: #fff; }
body.ft-reskin .ft-about .ab-hero .ab-lead { color: rgba(255,255,255,0.92); }
body.ft-reskin .ft-about .ab-hero .ab-eyebrow { color: #CFE5C5; }

@media (min-width: 992px) {
    body.ft-reskin .ft-about .ab-hero {
        padding: 64px 0;
        min-height: 440px;
        display: flex;
        align-items: center;
    }
    body.ft-reskin .ft-about .ab-hero::before {
        background: linear-gradient(90deg, rgba(12,34,23,0.84) 0%, rgba(12,34,23,0.58) 45%, rgba(12,34,23,0.14) 100%);
    }
    body.ft-reskin .ft-about .ab-hero > .container { width: 100%; }
}

/* ---------- Content as wide as the menu and footer (Rhys 15 Oct) ----------
   about.cfm's own style sets a 1,240px block with 28px sides from 992px; here /about uses
   Bootstrap's .container widths and sides, the same as the menu and footer. */
@media (min-width: 992px) {
    body.ft-reskin .ft-about .container { max-width: 960px; padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1200px) {
    body.ft-reskin .ft-about .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    body.ft-reskin .ft-about .container { max-width: 1320px; }
}

/* ---------- One alignment, and no column beside a shorter one (Rhys 15 Oct) ----------
   about.cfm centres the numbers strip and the closing help line while the headings and text
   around them are left-aligned, and sets "Who runs it" / "How it makes money" as a heading
   column beside a much taller text column. Here the strip and the help line read from the
   left, and the heading sits ABOVE its content, as on the other pages. Preview only. */
body.ft-reskin .ft-about .ab-fact { text-align: left; padding: 16px 12px 16px 20px; }
body.ft-reskin .ft-about .ab-fact:nth-child(odd) { padding-left: 0; }
body.ft-reskin .ft-about .ab-fact:nth-child(-n+2) { border-top: none; }
body.ft-reskin .ft-about .ab-help { text-align: left; }

body.ft-reskin .ft-about .row:has(> .ab-side) > * { flex: 0 0 100%; width: 100%; max-width: 100%; }
body.ft-reskin .ft-about .row:has(> .ab-side) { --bs-gutter-y: 0; row-gap: 20px; }
body.ft-reskin .ft-about .row:has(> .ab-side) > :not(.ab-side) > p:not(.ab-note) { max-width: 72ch; }
body.ft-reskin .ft-about .ab-side h2 { margin-bottom: 0; }

@media (min-width: 768px) {
    body.ft-reskin .ft-about .ab-fact { padding: 20px 12px 20px 24px; }
    body.ft-reskin .ft-about .ab-fact:nth-child(odd) { padding-left: 24px; }
    body.ft-reskin .ft-about .ab-fact:first-child { padding-left: 0; }
    /* The three steps across, under the heading (not one tall column) */
    body.ft-reskin .ft-about .ab-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
    body.ft-reskin .ft-about .ab-steps li { display: block; padding: 16px 0 0; border-bottom: none; border-top: 1px solid #D8E0D2; }
    body.ft-reskin .ft-about .ab-steps li:first-child { padding-top: 16px; }
    body.ft-reskin .ft-about .ab-num { display: block; margin-bottom: 6px; }
}

/* ---------- No empty right-hand side (Rhys 15 Oct round 2) ----------
   "Who runs it": the phone line becomes a card in a right-hand column beside the heading and
   the three paragraphs. The words and the markup are the live page's; the row becomes a grid and
   the text block stops being a box of its own (display: contents), so each paragraph and the phone
   line are placed directly. Phones and tablets keep the single column, the phone line as a card
   under the text. */
body.ft-reskin .ft-about .ab-phone {
    background: #fff;
    border: 1px solid var(--ab-hair);
    border-radius: var(--ab-radius);
    padding: 20px 22px;
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ab-ink);
}
/* The number sits mid-sentence with a comma after it, so it is only a little bigger than the words
   around it (20px against 16px): at 30px it pushed "Ring" and "Friday" onto lines of their own.
   Never split inside the number. */
body.ft-reskin .ft-about .ab-phone a {
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #224D30;
    text-decoration: none;
    white-space: nowrap;
}
@media (min-width: 992px) {
    body.ft-reskin .ft-about .row:has(> .ab-side + .ab-copy) {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: 64px;
        row-gap: 0;
        align-items: start;
        margin-left: 0;
        margin-right: 0;
    }
    body.ft-reskin .ft-about .row:has(> .ab-side + .ab-copy) > * { padding-left: 0; padding-right: 0; width: auto; }
    body.ft-reskin .ft-about .row:has(> .ab-side + .ab-copy) > .ab-side { grid-column: 1; margin-bottom: 20px; }
    body.ft-reskin .ft-about .row:has(> .ab-side + .ab-copy) > .ab-copy { display: contents; }
    body.ft-reskin .ft-about .ab-copy > p { grid-column: 1; }
    /* the card is about 120px tall beside about 320px of text: centred against the text, not hung from the top */
    body.ft-reskin .ft-about .ab-copy > .ab-phone { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; padding: 28px 30px; }
}

/* "How it makes money": the "Worth knowing" note spans the full row under the three steps, its label
   in a left column and the text beside it, so a long line never runs on under the label. */
@media (min-width: 768px) {
    body.ft-reskin .ft-about .ab-note {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 20px;
        align-items: baseline;
        padding: 18px 24px;
        font-size: 15px;
    }
}