/*
 * theme-2026-learn.css: the LEARN page group of the pletor-style redesign
 * (spec docs/superpowers/specs/2026-09-29-pletor-style-redesign-design.md, sub-project 3, "learn (45)").
 * Linked ONLY from the 49 templates in app/server/views/frontend/learn/, on the line after the
 * theme-2026-features.css link, which follows theme-2026-channels.css. Those two already style the shared skeleton
 * (bands, hero, how it works, FAQ, buttons, closing CTA); this file holds only what the learn pages add.
 * Learn's three text sections have no picture (.solution.medium-12, where channels and features have .medium-5 beside
 * an image), so the channels typography for those rows (theme-2026-channels.css .solution.medium-5 h2/p/h3) is
 * mirrored here, in one reading column.
 * Every selector starts with .learn-page .pn-page. Uses the --pn-* tokens from theme-2026.css and defines none.
 * Every edit: set ?v= in all 49 learn templates to this file's last git-change date (tests/learn-2026.test.js).
 */

/* ============ Text sections: one left-aligned reading column ============ */
/* The h2 sat at the row's left edge (94px at 1280) while p.content-grey {display:flex; text-align:center; max-width:640px;
 * margin:auto} (theme-2026.css section intro rule) put the paragraph in the middle, and the checklist back at the left. */
.learn-page .pn-page .services .row.columns:has(> .align-left) {
    float: none;
    max-width: 760px;
    margin: 0 auto;
}

.learn-page .pn-page .services .row.columns:has(> .align-left) > .intro-text {
    text-align: left;
}

/* .solution h2 {Roboto; 1.4em; 300} (0,1,1) app-critical; the channels rule for this is scoped to .medium-5. */
.learn-page .pn-page .services .row.columns:has(> .align-left) > h2 {
    margin: 0 0 20px;
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-align: left;
}

.learn-page .pn-page .services .align-left > p.content-grey {
    display: block;
    max-width: none;
    margin: 0 0 20px;
    color: var(--pn-ink-2);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}

.learn-page .pn-page .services .align-left > h3.heading-description-4 {
    align-items: flex-start;
    margin: 12px 0 0;
    color: var(--pn-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.005em;
    text-align: left;
}

.learn-page .pn-page .services .row.columns:has(> .align-left) > .action-button {
    margin-top: 28px;
    text-align: left;
}

/* theme-2026-channels.css .pn-page .solution.medium-12 a.cta-white-black-border {inline-block} (0,4,1) comes after the
 * same file's .pn-page .action-button a.cta-white-black-border.button {inline-flex; gap:10px} (0,4,1) and wins on order.
 * Channel and feature text rows are .medium-5, so only learn's .medium-12 rows hit it: the label touched the chevron. */
.learn-page .pn-page .solution.medium-12 .action-button a.cta-white-black-border.button {
    display: inline-flex;
}

/* ============ Related guides ============ */
/* Nothing styled .learn-related-grid before this file: the cards were bare inline links stacked down the left edge.
 * Now a two-column grid of warm cards (the step cards' surface), one column on phones. The section heading takes the
 * features section-heading rule (theme-2026-features.css .solution.text-center > .row.columns > h2, 0,6,1). */
.learn-page .pn-page .final-cta-section h2 {
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.learn-page .pn-page .learn-related-section .learn-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 960px;
    margin: 32px auto 0;
}

.learn-page .pn-page .learn-related-grid .learn-related-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
    text-align: left;
    text-decoration: none;
}

/* Spec card hover: the title underlines; no border, no lift (as the features hub cards). */
.learn-page .pn-page .learn-related-grid .learn-related-card:hover .learn-related-card-title,
.learn-page .pn-page .learn-related-grid .learn-related-card:focus .learn-related-card-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.learn-page .pn-page .learn-related-grid .learn-related-card:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}

.learn-page .pn-page .learn-related-grid .learn-related-card-title {
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
}

.learn-page .pn-page .learn-related-grid .learn-related-card-descr {
    color: var(--pn-ink-2);
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .learn-page .pn-page .learn-related-section .learn-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============ The /learn hub ============ */
/* .learn-index-grid / .learn-index-card had no rules either: every guide was a bare link in one long column. A
 * three-column grid of the same warm cards, two on tablets, one on phones; the "Read the guide" line sits at the foot. */
/* The hub's hero has no eyebrow, and the eyebrow is what clears the fixed bar on every guide: the H1 sat at y57 under
 * the 73px tab bar at 1280px, against y99 on a guide. */
.learn-page.learn-index .pn-page .hero h1 {
    margin-top: 42px;
}

.learn-page .pn-page .learn-index-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.learn-page .pn-page .learn-index-grid .learn-index-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
    text-align: left;
    text-decoration: none;
}

.learn-page .pn-page .learn-index-grid .learn-index-card:hover .learn-index-card-title,
.learn-page .pn-page .learn-index-grid .learn-index-card:focus .learn-index-card-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.learn-page .pn-page .learn-index-grid .learn-index-card:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}

.learn-page .pn-page .learn-index-card .learn-index-card-title {
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.learn-page .pn-page .learn-index-card .learn-index-card-descr {
    flex: 1;
    color: var(--pn-ink-2);
    font-size: 14px;
    line-height: 1.55;
}

.learn-page .pn-page .learn-index-card .learn-index-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--pn-ink);
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .learn-page .pn-page .learn-index-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .learn-page .pn-page .learn-index-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Published / updated line under the hero subline (common/v3/frontend_learn_article.pug, 2026-10-17). It follows the
 * h2.columns subline, so it takes .columns too and lines up with it. */
.learn-page .pn-page .hero p.learn-article-date {
    margin: 4px 0 0;
    color: var(--pn-ink-2);
    font-size: 14px;
    line-height: 1.5;
}