/* ==========================================================================
   KTP About Page — ktp-about.css
   Scoped to .ktp-about-shell. Design authority: ktp-pkg/templates/about.jsx
   ========================================================================== */

/* --- Shell ---------------------------------------------------------------- */

.ktp-about-shell {
    background: var(--ktp-sand);
    min-height: 100vh;
}

/* --- Hero ----------------------------------------------------------------- */

.ktp-about-hero {
    display: flex;
    min-height: 360px;
}

.ktp-about-hero__left {
    align-items: center;
    background: var(--ktp-parchment);
    display: flex;
    justify-content: flex-end;
    padding: 48px 0;
    width: 45%;
}

.ktp-about-hero__inner {
    max-width: 420px;
    padding: 0 48px 0 32px;
}

.ktp-about-hero__icon-row {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.ktp-about-hero__icon-row img {
    border-radius: 8px;
    height: 32px;
    width: 32px;
}

.ktp-about-hero__eyebrow {
    color: var(--ktp-canopy);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ktp-about-hero__title {
    color: var(--ktp-forest);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 12px;
}

.ktp-about-hero__desc {
    color: var(--ktp-bark);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    max-width: 48ch;
}

.ktp-about-hero__right {
    overflow: hidden;
    position: relative;
    width: 55%;
}

.ktp-about-hero__right img {
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    width: 100%;
}

/* --- Body ----------------------------------------------------------------- */

.ktp-about-body {
    margin: 0 auto;
    max-width: 720px;
    padding: 0 32px;
}

/* --- Section -------------------------------------------------------------- */

.ktp-about-section {
    padding-top: 80px;
}

.ktp-about-section:last-child {
    padding-bottom: 80px;
}

.ktp-about-section__header {
    border-top: 3px solid var(--ktp-canopy);
    margin-bottom: 20px;
    padding-top: 20px;
}

.ktp-about-section--amber .ktp-about-section__header {
    border-top-color: var(--ktp-amber);
}

.ktp-about-section--pages .ktp-about-section__header {
    border-top-color: rgba(139, 175, 126, 0.38);
}

.ktp-about-section__eyebrow {
    color: var(--ktp-canopy);
    display: block;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ktp-about-section--amber .ktp-about-section__eyebrow {
    color: var(--ktp-amber);
}

.ktp-about-section__title {
    color: var(--ktp-forest);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

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

.ktp-about-prose {
    color: var(--ktp-bark);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 16px;
}

.ktp-about-prose:last-of-type {
    margin-bottom: 0;
}

/* --- How It Works stages -------------------------------------------------- */

.ktp-about-stage {
    margin-bottom: 24px;
}

.ktp-about-stage:last-child {
    margin-bottom: 0;
}

.ktp-about-stage__header {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.ktp-about-stage__header img {
    border-radius: 6px;
    flex-shrink: 0;
    height: 28px;
    width: 28px;
}

.ktp-about-stage__label {
    color: var(--ktp-forest);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.ktp-about-stage__desc {
    color: var(--ktp-bark);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    padding-left: 40px;
}

/* --- Data sources --------------------------------------------------------- */

.ktp-about-source {
    border-bottom: 1px solid var(--ktp-sand);
    margin-bottom: 0;
    padding: 14px 0;
}

.ktp-about-source:last-child {
    border-bottom: none;
}

.ktp-about-source__name {
    color: var(--ktp-forest);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
}

.ktp-about-source__desc {
    color: var(--ktp-bark);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    margin: 4px 0 0;
}

/* --- CTA link ------------------------------------------------------------- */

.ktp-about-cta {
    color: var(--ktp-canopy);
    display: inline-block;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-top: 16px;
    text-decoration: none;
}

.ktp-about-cta:hover,
.ktp-about-cta:focus-visible {
    color: var(--ktp-forest);
    text-decoration: underline;
}

/* --- Site pages link rows ------------------------------------------------- */

.ktp-about-page-link {
    align-items: center;
    border-bottom: 1px solid var(--ktp-sand);
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    text-decoration: none;
}

.ktp-about-page-link:last-child {
    border-bottom: none;
}

.ktp-about-page-link:hover .ktp-about-page-link__label,
.ktp-about-page-link:focus-visible .ktp-about-page-link__label {
    color: var(--ktp-canopy);
}

.ktp-about-page-link__info {
    display: grid;
    gap: 2px;
}

.ktp-about-page-link__label {
    color: var(--ktp-forest);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 600;
}

.ktp-about-page-link__desc {
    color: var(--ktp-stone);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 12px;
}

.ktp-about-page-link__arrow {
    color: rgba(139, 134, 120, 0.4);
    font-size: 18px;
    line-height: 1;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 760px) {
    .ktp-about-hero {
        flex-direction: column;
        min-height: auto;
    }

    .ktp-about-hero__left {
        justify-content: flex-start;
        padding: 40px 24px;
        width: 100%;
    }

    .ktp-about-hero__inner {
        max-width: 100%;
        padding: 0;
    }

    .ktp-about-hero__title {
        font-size: 30px;
    }

    .ktp-about-hero__right {
        height: 220px;
        width: 100%;
    }

    .ktp-about-body {
        padding: 0 20px;
    }

    .ktp-about-section {
        padding-top: 56px;
    }

    .ktp-about-section__title {
        font-size: 22px;
    }

    .ktp-about-stage__desc {
        padding-left: 0;
    }

    .ktp-ep-ai-columns {
        flex-direction: column;
    }
}

/* ==========================================================================
   Methodology-specific components
   ========================================================================== */

/* --- Pipeline flow block -------------------------------------------------- */

.ktp-method-pipeline {
    background: var(--ktp-parchment);
    border: 1px solid var(--ktp-sand);
    border-radius: 8px;
    color: var(--ktp-bark);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    padding: 20px 24px;
}

.ktp-method-pipeline strong {
    color: var(--ktp-forest);
}

.ktp-method-pipeline__arrow {
    color: var(--ktp-stone);
    margin: 0 8px;
}

/* --- Example callout ------------------------------------------------------- */

.ktp-method-example {
    border-top: 2px solid var(--ktp-sage);
    margin-top: 20px;
    padding-top: 16px;
}

.ktp-method-example__label {
    color: var(--ktp-canopy);
    display: block;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.ktp-method-example__text {
    color: var(--ktp-ink);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

/* --- Prohibited callout (amber left border) -------------------------------- */

.ktp-method-prohibited {
    border-left: 2px solid rgba(196, 112, 43, 0.25);
    margin-bottom: 16px;
    padding-left: 20px;
}

.ktp-method-prohibited p {
    color: var(--ktp-bark);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* --- Update table rows use .ktp-fam (from design system) ------------------ */

.ktp-method-update-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.ktp-method-update-row__source {
    color: var(--ktp-forest);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 14px;
    font-weight: 600;
}

.ktp-method-update-row__freq {
    color: var(--ktp-stone);
    flex-shrink: 0;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 12px;
}

/* ==========================================================================
   Editorial Policy-specific components
   ========================================================================== */

/* --- Two-column AI disclosure --------------------------------------------- */

.ktp-ep-ai-columns {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.ktp-ep-ai-col__header {
    border-top: 2px solid var(--ktp-canopy);
    padding-top: 14px;
}

.ktp-ep-ai-col--amber .ktp-ep-ai-col__header {
    border-top-color: var(--ktp-amber);
}

.ktp-ep-ai-col__eyebrow {
    color: var(--ktp-canopy);
    display: block;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.ktp-ep-ai-col--amber .ktp-ep-ai-col__eyebrow {
    color: var(--ktp-amber);
}

.ktp-ep-ai-col p {
    color: var(--ktp-bark);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================================================
   Trust page footer nav (methodology ↔ editorial ↔ about)
   ========================================================================== */

.ktp-trust-nav {
    border-top: 1px solid var(--ktp-sand);
    padding-top: 20px;
}

.ktp-trust-nav a {
    color: var(--ktp-canopy);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.ktp-trust-nav a:hover,
.ktp-trust-nav a:focus-visible {
    color: var(--ktp-forest);
    text-decoration: underline;
}

.ktp-trust-nav__sep {
    color: var(--ktp-stone);
    margin: 0 12px;
}