/* Article pages (app #379).
 *
 * Loaded AFTER landing.css, which supplies the colour tokens and the shared
 * top bar and footer, so every page carries the same furniture without a
 * second copy of it. This file only adds what an article needs.
 *
 * Prefix is pg- so it cannot collide with landing.css's lp- or with the
 * generic selectors style.css owns for /privacy and /terms.
 *
 * Aligned to the landing page redesign: hairlines rather than boxes, the Rose
 * accent used to mark rather than decorate, and --lp-body for long prose so a
 * full article does not read flat.
 *
 * Column width went through three attempts. Centred and narrow left half the
 * frame empty; flush to both edges ran the body to about 110 characters a
 * line, well past comfortable. The answer was neither: keep the prose at a
 * readable measure and give the space on the right to the related links, so
 * the block still aligns with the header and footer at both edges.
 */

.pg-article {
    max-width: 34em;
    padding: 8px 0 0;
}

.pg-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--lp-muted);
    margin-bottom: 16px;
    display: block;
    text-decoration: none;
}

a.pg-eyebrow:hover { color: var(--lp-text); }

.pg-article h1 {
    font-family: 'Outfit', -apple-system, sans-serif;
    font-weight: 300;
    font-size: 34px;
    line-height: 1.16;
    letter-spacing: -.2px;
    margin: 0 0 18px;
    text-wrap: pretty;
}

.pg-standfirst {
    font-size: 18px;
    line-height: 1.6;
    color: var(--lp-muted);
    margin: 0 0 30px;
}

/* Section headings carry the same short Rose rule as the feature rows on the
 * landing page, so an article reads as part of the same site. Static here: the
 * rule marks the section, it does not need to perform. */
.pg-article h2 {
    font-family: 'Outfit', -apple-system, sans-serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 40px 0 12px;
    text-wrap: balance;
}

.pg-article h2::after {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--lp-tint);
}

.pg-article h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 17px;
    margin: 28px 0 8px;
}

.pg-article p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--lp-body);
}

.pg-article ul, .pg-article ol {
    margin: 0 0 16px;
    padding-left: 20px;
}

.pg-article li {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 8px;
    color: var(--lp-body);
}

.pg-article li::marker { color: var(--lp-tint); }

.pg-article a { color: var(--lp-text); text-underline-offset: 3px; }
.pg-article a:hover { color: var(--lp-muted); }

.pg-article strong { color: var(--lp-text); font-weight: 600; }

/* A pulled-out practical point, not a decorative blockquote. Rose rule, to
 * match the section headings and the band. */
.pg-note {
    border-left: 2px solid var(--lp-tint);
    padding: 4px 0 4px 22px;
    margin: 34px 0;
    color: var(--lp-text);
    font-family: 'Outfit', -apple-system, sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5;
}

/* A screenshot part-way down, breaking the column and showing the thing the
 * section is describing. One per article, chosen to match its section rather
 * than decorate. Pulled slightly wider than the text so it registers as a
 * change of pace. */
.pg-figure {
    margin: 40px 0;
    text-align: center;
}

.pg-figure img {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: inline-block;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .22));
}

@media (prefers-color-scheme: dark) {
    .pg-figure img { filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .55)); }
}

.pg-figure figcaption {
    font-size: 14px;
    color: var(--lp-muted);
    margin-top: 16px;
}

/* The soft close. Hairline rules rather than a card, matching the landing
 * page: the article has to stand on its own, and someone who found it useful
 * should feel invited rather than harvested.
 *
 * The call to action reuses .lp-badge from landing.css rather than styling its
 * own button. Apple's guidelines require their supplied artwork for a badge,
 * and a hand-styled one was previously invisible in both themes: the colour
 * rule sat on one class while .pg-article a (class plus element) outranked it,
 * so the text inherited the body colour onto an identical background. */
.pg-cta {
    border-top: 1px solid var(--lp-divider);
    border-bottom: 1px solid var(--lp-divider);
    padding: 24px 0;
    margin: 44px 0 8px;
}

.pg-cta p { font-size: 16px; margin: 0 0 16px; color: var(--lp-body); }
.pg-cta p strong { color: var(--lp-text); }

/* Related reading */
.pg-more {
    border-top: 1px solid var(--lp-divider);
    margin-top: 44px;
    padding-top: 26px;
}

.pg-more h2 { font-size: 18px; margin: 0 0 14px; }
.pg-more h2::after { display: none; }

.pg-more ul { list-style: none; padding: 0; margin: 0; }
.pg-more li { margin-bottom: 10px; font-size: 16px; }

/* The hub's own call to action. Apple's badge rather than the words "App
 * Store" in a sentence, which was the one place on the site where the store
 * was text instead of the supplied artwork.
 *
 * The badge keeps the 4px left margin it carries everywhere else, so it lines
 * up with the badges on the landing page and at the foot of each article
 * rather than sitting flush with the prose. Nothing here touches the image. */
.pg-hub-cta {
    margin: 4px 0 6px;
    line-height: 0;
}

/* Index listing. Hairline-separated rows, same idiom as the landing page's
 * feature rows, rather than a stack of bordered cards.
 *
 * Layout lives on .pg-index-row, never on `.pg-index a`. A class-plus-element
 * selector outranks a bare class, so an element selector here silently beats
 * the row rule. That has now caused three separate bugs in this stylesheet:
 * an invisible call-to-action, stacked App Store badges, and a row that
 * refused to go horizontal. Keep element selectors out of layout. */
.pg-index {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--lp-divider);
    margin-top: 30px;
}

.pg-index a {
    border-bottom: 1px solid var(--lp-divider);
    text-decoration: none;
}

.pg-index-row {
    display: block;
    padding: 22px 0;
}

/* A device thumbnail per row, showing the screen the article is about. Hidden
 * on phones, where the row is already full width and a small phone picture
 * inside a phone adds nothing. */
.pg-index-shot { display: none; }

/* Text left, a small device thumbnail right. Flex rather than grid: the grid
 * version needed a row span to sit the tall image beside two text elements,
 * and a span that stretched its rows apart. Flex just puts two boxes in a row.
 */
@media (min-width: 720px) {
    .pg-index-row {
        display: flex;
        align-items: center;
        gap: 44px;
        padding: 30px 0;
    }

    .pg-index-text { flex: 1 1 auto; min-width: 0; }

    .pg-index-shot {
        display: block;
        flex: 0 0 auto;
        width: 124px;
        height: auto;
        filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .20));
        transition: transform .45s cubic-bezier(.2, .7, .3, 1);
    }

    .pg-index-row:hover .pg-index-shot { transform: translateY(-4px); }
}

@media (prefers-color-scheme: dark) {
    .pg-index-shot { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .5)); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-index-shot { transition: none; }
    .pg-index-row:hover .pg-index-shot { transform: none; }
}

.pg-index h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
    color: var(--lp-text);
}

.pg-index h2::after {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin-top: 9px;
    border-radius: 2px;
    background: var(--lp-tint);
    transition: width .55s cubic-bezier(.2, .7, .3, 1);
}

.pg-index a:hover h2::after { width: 46px; }

.pg-index p { margin: 10px 0 0; font-size: 15px; color: var(--lp-body); max-width: 56ch; }

@media (min-width: 720px) {
    .pg-article {
        max-width: 46em;
        padding-top: 24px;
    }

    /* The hub is an index, not an article: no aside to fill the right, so it
     * spans the wrap and each row carries its own thumbnail instead. Its
     * intro runs the full width too, so the top of the page lines up with the
     * rows below it rather than stopping two thirds of the way across. */
    .pg-article:not(:has(.pg-more)) { max-width: none; }
    .pg-article h1 { font-size: 42px; max-width: 18ch; }
    .pg-standfirst { font-size: 19px; }

    /* Direct child only. `.pg-article h2` also matches the headings inside
     * .pg-index rows and .pg-more, both of which zero their own margin earlier
     * in this file, so a bare descendant selector here silently reinstated a
     * 48px top margin on them. In the index rows that pushed the text down
     * inside a row that is otherwise vertically centred. */
    .pg-article > h2 { margin-top: 48px; }
}

/* Two columns once there is room for them. This is the resolution of the
 * width problem: the prose keeps a readable measure while the related links
 * occupy the space to the right, so the block still lines up with the header
 * and footer without running to 110 characters a line.
 *
 * The article stays one element and the aside is placed by grid rather than
 * by restructuring the markup, so the reading order in the HTML, and for a
 * screen reader, is unchanged: article first, related links after. */
@media (min-width: 980px) {
    /* :has, so the hub, which has no aside, does not inherit a two-column grid
     * with nothing in the second column. That was the empty right half. */
    .pg-article:has(.pg-more) {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 44em) minmax(190px, 1fr);
        column-gap: 60px;
    }

    /* :not(.pg-more), because `.pg-article:has(.pg-more) > *` scores two
     * classes and the bare `.pg-more` rule below scores one, so without the
     * exclusion this rule wins on specificity regardless of source order and
     * drops the aside into column 1, row 1: on top of the article, above the
     * headline, with the right column left empty. */
    .pg-article:has(.pg-more) > *:not(.pg-more) { grid-column: 1; }

    .pg-more {
        grid-column: 2;
        /* span, not 1 / -1: with no explicit rows declared, -1 resolves to the
         * end of the EXPLICIT grid, which is row 1, so the aside occupied a
         * single row and stretched it to its own height, leaving a gap between
         * the eyebrow and the headline. Every row here is implicit, so the
         * span has to be a number. */
        grid-row: 1 / span 100;
        align-self: start;
        position: sticky;
        top: 34px;
        margin-top: 8px;
        padding-top: 0;
        border-top: 0;
    }

    .pg-more h2 {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: var(--lp-muted);
        font-family: 'Hanken Grotesk', sans-serif;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .pg-more li { margin-bottom: 16px; font-size: 15px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-more { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-index h2::after { transition: none; }
}