/**
 * Single Project
 * Compact case-study content.
 */

.mpc-project-detail__story-card {
    display: grid;
    grid-template-columns:
        minmax(11rem, 13rem)
        minmax(0, 1fr);
    overflow: visible;
    margin-top: 0.7rem;
    border: 1px solid var(--color-border, #e4ddd3);
    border-radius: 0.8rem;
    background: var(--color-surface, #ffffff);
    box-shadow:
        0 8px 24px
        rgb(28 36 48 / 5%);
}

/* ==========================================================
   Sidebar
========================================================== */

.mpc-project-detail__story-sidebar {
    position: relative;
    padding: 0.9rem;
    border-right: 1px solid var(--color-border, #e4ddd3);
    border-radius: 0.8rem 0 0 0.8rem;
    background: #fffdfa;
}

.mpc-project-detail__story-nav {
    position: sticky;
    top: 7rem;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border-left: 1px solid var(--color-border, #e4ddd3);
    border-radius: 0 0.45rem 0.45rem 0;
}

.mpc-project-detail__story-nav a {
    position: relative;
    display: block;
    padding: 0.55rem 0.7rem;
    background: transparent;
    color: var(--color-text-strong, #1c2430);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background 160ms ease,
        color 160ms ease,
        padding-left 160ms ease;
}

.mpc-project-detail__story-nav a::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 3px;
    background: transparent;
    content: "";
}

.mpc-project-detail__story-nav a:hover {
    background: var(--color-accent-50, #fff7ed);
    color: var(--color-accent-700, #a94f15);
}

.mpc-project-detail__story-nav a.is-active {
    padding-left: 0.85rem;
    background: var(--color-accent-50, #fff7ed);
    color: var(--color-accent-700, #a94f15);
}

.mpc-project-detail__story-nav a.is-active::before {
    background: var(--color-accent, #d97918);
}

.mpc-project-detail__story-nav a.is-active::after {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: var(--color-accent, #d97918);
    content: "";
    transform: translateY(-50%);
}

/* ==========================================================
   PDF
========================================================== */

.mpc-project-detail__pdf {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);
    gap: 0.55rem;
    margin-top: 0.8rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border, #e4ddd3);
    border-radius: 0.65rem;
    background: #ffffff;
}

.mpc-project-detail__pdf-icon {
    display: inline-flex;
    width: 1.65rem;
    height: 1.65rem;
    align-items: center;
    justify-content: center;
    color: var(--color-accent, #d97918);
    font-size: 1rem;
}

.mpc-project-detail__pdf strong,
.mpc-project-detail__pdf small {
    display: block;
}

.mpc-project-detail__pdf strong {
    color: var(--color-text-strong, #1c2430);
    font-size: 0.62rem;
}

.mpc-project-detail__pdf small {
    margin-top: 0.15rem;
    color: var(--color-text-muted, #8b92a0);
    font-size: 0.54rem;
}

.mpc-project-detail__pdf a {
    grid-column: 1 / -1;
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    border: 1px solid var(--color-accent-300, #eeb47d);
    border-radius: 0.45rem;
    color: var(--color-accent-700, #a94f15);
    font-size: 0.58rem;
    font-weight: 700;
    text-decoration: none;
}

/* ==========================================================
   Story content
========================================================== */

.mpc-project-detail__story-content {
    min-width: 0;
    padding: 1rem 1.1rem;
}

.mpc-project-detail__overview,
.mpc-project-detail__story-column,
.mpc-project-detail__bottom-card,
.mpc-project-detail__screenshots {
    scroll-margin-top: 8rem;
}

.mpc-project-detail__overview h2 {
    margin: 0;
    color: var(--color-heading, #12100e);
    font-family:
        var(--font-family-heading, "DM Serif Display", Georgia, serif);
    font-size: 1.05rem;
    font-weight: 400;
}

.mpc-project-detail__prose {
    color: var(--color-text-default, #344054);
    font-size: 0.68rem;
    line-height: 1.6;
}

.mpc-project-detail__overview
.mpc-project-detail__prose {
    max-width: 46rem;
    margin-top: 0.6rem;
}

.mpc-project-detail__prose > :first-child {
    margin-top: 0;
}

.mpc-project-detail__prose > :last-child {
    margin-bottom: 0;
}

/* ==========================================================
   Challenge / Solution / Outcome
========================================================== */

.mpc-project-detail__columns {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.9rem;
}

.mpc-project-detail__story-column {
    min-width: 0;
    padding-right: 0.85rem;
    border-right: 1px solid var(--color-border, #e4ddd3);
}

.mpc-project-detail__story-column:last-child {
    padding-right: 0;
    border-right: 0;
}

.mpc-project-detail__story-column h3 {
    margin: 0.5rem 0 0.4rem;
    color: var(--color-heading, #12100e);
    font-family:
        var(--font-family-heading, "DM Serif Display", Georgia, serif);
    font-size: 0.9rem;
    font-weight: 400;
}

.mpc-project-detail__round-icon {
    display: inline-flex;
    width: 1.9rem;
    height: 1.9rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.mpc-project-detail__round-icon--orange {
    background: #fff3e7;
    color: #d97918;
}

.mpc-project-detail__round-icon--green {
    background: #eef6ef;
    color: #2d6a4f;
}

.mpc-project-detail__round-icon--pink {
    background: #fff0f4;
    color: #e03a6f;
}

/* ==========================================================
   Statistics
========================================================== */

.mpc-project-detail__stats {
    display: grid;
    overflow: hidden;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    margin-top: 0.9rem;
    border: 1px solid var(--color-border, #e4ddd3);
    border-radius: 0.65rem;
}

.mpc-project-detail__stat {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem;
    border-right: 1px solid var(--color-border, #e4ddd3);
}

.mpc-project-detail__stat:last-child {
    border-right: 0;
}

.mpc-project-detail__stat-icon {
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 1.85rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-100, #e8f0eb);
    color: var(--color-primary, #203f31);
    font-size: 0.7rem;
    font-weight: 700;
}

.mpc-project-detail__stat strong,
.mpc-project-detail__stat small {
    display: block;
}

.mpc-project-detail__stat strong {
    color: var(--color-primary, #203f31);
    font-family:
        var(--font-family-heading, "DM Serif Display", Georgia, serif);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
}

.mpc-project-detail__stat small {
    margin-top: 0.18rem;
    color: var(--color-text-muted, #8b92a0);
    font-size: 0.53rem;
}

/* ==========================================================
   Section focus
========================================================== */

.mpc-project-detail__overview,
.mpc-project-detail__story-column,
.mpc-project-detail__screenshots,
.mpc-project-detail__bottom-card {
    position: relative;
}

.mpc-project-detail__section-focus {
    animation:
        mpc-section-focus
        1.8s
        ease;
}

@keyframes mpc-section-focus {

    0% {
        background: rgb(217 121 24 / 10%);
        box-shadow:
            0 0 0 3px
            rgb(217 121 24 / 14%);
    }

    40% {
        background: rgb(217 121 24 / 6%);
        box-shadow:
            0 0 0 3px
            rgb(217 121 24 / 10%);
    }

    100% {
        background: transparent;
        box-shadow: none;
    }
}

.mpc-project-detail__story-column.mpc-project-detail__section-focus {
    border-radius: 0.65rem;
    padding: 0.65rem;
    margin: -0.65rem;
}