/* ── The /about/ page ──
   Rendered from inc/page-about.php. Plan: roadmaps/Implemented/about-redesign.md.

   Two grounds: the hero on the homepage hero's dark ground, the story on the
   plain page ground, then the homepage's closing call to action on the dark
   ground again (css/closing-cta.css, loaded before this file). The page's
   own selectors are `pp-about-page-*`; the closing band keeps the homepage's
   classes, since it is the homepage's.

   One breakpoint, the tablet one, as on the homepage: up to `1024px` the
   hero is one column, from `1025px` the portrait sits beside the heading. */

.pp-about-page-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

/* The documented outer clamp. The page carries Blocksy's
   `content_area_spacing: none`, so nothing else spaces the hero from the
   header. */
.pp-about-page-section {
    padding: clamp(32px, 5vw, 64px) 0;
}

/* ── Hero ──
   The homepage hero's ground and dark-ground text set (STYLING.md > A hero
   over a looping video): `--theme-palette-color-4`, title `#fff` with
   `text-wrap: balance`, everything else `rgba(255, 255, 255, 0.9)`. The
   band itself is what holds the portrait and the heading together. Stacked:
   the portrait, then the copy, `24px` apart. */
.pp-about-page-section--hero {
    background: var(--theme-palette-color-4);
}

.pp-about-page-hero {
    display: grid;
    row-gap: 24px;
}

/* The homepage Pedro photo's treatment: the `14px` card radius as a clip,
   nothing else. The image keeps its own 820×900 shape. */
.pp-about-page-hero__photo {
    overflow: hidden;
    border-radius: 14px;
    line-height: 0;
}

.pp-about-page-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

/* The documented eyebrow (`.pp-ts-dashboard__eyebrow`): `0.85rem` / `700`,
   uppercase, `0.08em` tracking, in the dark ground's secondary text. */
.pp-about-page-hero__eyebrow {
    margin: 0 0 12px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.pp-about-page-hero__title {
    margin: 0;
    color: #fff;
    text-wrap: balance;
}

/* STYLING.md > A hero with a portrait: `20px` stacked, `22px` from `1025px`. */
.pp-about-page-hero__lead {
    margin: 16px 0 0;
    font-size: 20px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

/* ── Story ──
   The reading column, `660px`, centred (STYLING.md > The reading column on
   a prose page), paced by an opening paragraph a step larger, two subheads,
   a pull quote and a sign-off. Body text is the theme's. */
.pp-about-page-story {
    max-width: 660px;
    margin: 0 auto;
}

.pp-about-page-story > :last-child,
.pp-about-page-story__sign > :last-child {
    margin-bottom: 0;
}

/* STYLING.md > A paced reading column: the opening paragraph, `22px`
   stacked, `24px` from `1025px`, in `--pp-steel-7`. */
.pp-about-page-story__opening {
    font-size: 22px;
    line-height: 1.6;
    color: var(--pp-steel-7);
}

/* The subhead: `24px` / `700` / `1.3`, in `--pp-steel-7`, `40px` above. */
.pp-about-page-story__heading {
    margin: 40px 0 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pp-steel-7);
}

/* The pull quote. It carries `wp-block-pullquote` so its face is the
   customizer's pullquote face (STYLING.md > `font-family` is not a
   per-component decision); Blocksy's frame for that class (a `10px`
   palette-1 border, `70px` padding, a quote glyph) is cleared, and size,
   style and weight are set through the theme's own variables, which
   Blocksy's rule for the class reads. Between two standard hairlines,
   centred, wider than the reading column (`880px`).
   `28px` stacked, `38px` from `1025px`, italic `400`, line-height `1.35`;
   `40px` / `56px` vertical spacing. */
.pp-about-page figure.pp-about-page-quote {
    --theme-font-size: 28px;
    --theme-font-style: italic;
    --theme-font-weight: 400;
    --theme-line-height: 1.35;
    max-width: 880px;
    margin: 40px auto;
    padding: 40px 0;
    border: 0;
    border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
    text-align: center;
    color: var(--pp-steel-7);
}

.pp-about-page figure.pp-about-page-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.pp-about-page figure.pp-about-page-quote blockquote::before {
    display: none;
}

.pp-about-page figure.pp-about-page-quote p {
    max-width: 22ch;
    margin: 0 auto;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-wrap: balance;
}

/* The sign-off, under a standard hairline, signed with the name alone. */
.pp-about-page-story__sign {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-about-page-story__name {
    font-weight: 600;
    color: var(--pp-steel-7);
}

/* Desktop: the portrait on the left at `440px`, the copy beside it,
   centred against it, `64px` apart. */
@media (min-width: 1025px) {
    .pp-about-page-hero {
        grid-template-columns: 440px minmax(0, 1fr);
        column-gap: 64px;
        align-items: center;
    }

    .pp-about-page-hero--no-photo {
        grid-template-columns: minmax(0, 660px);
    }

    /* `56px` / `1.1`; the theme's `h1` (`32px`) stacked. */
    .pp-about-page-hero__title {
        font-size: 56px;
        line-height: 1.1;
    }

    .pp-about-page-hero__lead {
        font-size: 22px;
    }

    .pp-about-page-story__opening {
        font-size: 24px;
    }

    .pp-about-page figure.pp-about-page-quote {
        --theme-font-size: 38px;
        margin: 56px auto;
        padding: 56px 0;
    }
}

/* ── Scroll reveal ──
   STYLING.md > A section revealed on scroll, over every band: the hero, the
   story and the closing CTA. js/page-about.js adds `.pp-about-page--reveal`
   to the root once it runs, after marking what is already on screen, so
   nothing is painted hidden and a page without the script is static. */
@media (prefers-reduced-motion: no-preference) {
    .pp-about-page--reveal > section {
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .pp-about-page--reveal > section:not(.is-revealed) {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* ── The stacked column ──
   STYLING.md > The stacked column: up to `1024px` every band's content is
   capped at the `480px` panel measure, centred (`512px` with the gutters).
   Phones never reach the cap. */
@media (max-width: 1024px) {
    .pp-about-page .pp-about-page-grid {
        max-width: 512px;
    }
}