/**
 * Single Project
 * Responsive rules.
 */

@media (max-width: 1100px) {

    .mpc-project-detail__hero {
        grid-template-columns: 1fr;
    }

    .mpc-project-detail__meta-card {
        margin-top: 1rem;
    }

    .mpc-project-detail__bottom-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mpc-project-detail__testimonial {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {

    .mpc-project-detail__story-card {
        grid-template-columns: 1fr;
    }

    .mpc-project-detail__story-sidebar {
        border-right: 0;
        border-bottom:
            1px solid
            var(--color-border, #e4ddd3);
        border-radius: 0.8rem 0.8rem 0 0;
    }

    .mpc-project-detail__story-nav {
        position: static;
        top: auto;
        flex-flow: row wrap;
        gap: 0.3rem;
        overflow: visible;
        border-left: 0;
        border-radius: 0;
    }

    .mpc-project-detail__story-nav a {
        padding: 0.45rem 0.6rem;
        border:
            1px solid
            var(--color-border, #e4ddd3);
        border-radius: 999px;
        background: #ffffff;
    }

    .mpc-project-detail__story-nav a::before,
    .mpc-project-detail__story-nav a.is-active::before {
        display: none;
    }

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

    .mpc-project-detail__story-nav a.is-active::after {
        display: none;
    }

    .mpc-project-detail__pdf {
        max-width: 22rem;
    }

    .mpc-project-detail__columns {
        grid-template-columns: 1fr;
    }

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

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

    .mpc-project-detail__screenshot-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mpc-project-detail__stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mpc-project-detail__stat:nth-child(2n) {
        border-right: 0;
    }

    .mpc-project-detail__stat:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--color-border, #e4ddd3);
    }

    .mpc-project-detail__similar-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mpc-project-detail__cta-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {

    .mpc-project-detail__container {
        width: min(
            calc(100% - 1.4rem),
            var(--container-wide, 82rem)
        );
    }

    .mpc-project-detail__breadcrumb {
        padding-top: 0.75rem;
    }

    .mpc-project-detail__title {
        font-size:
            clamp(1.9rem, 10vw, 2.7rem);
    }

    .mpc-project-detail__meta-card {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mpc-project-detail__meta-item:nth-child(2n) {
        border-right: 0;
    }

    .mpc-project-detail__meta-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--color-border, #e4ddd3);
    }

    .mpc-project-detail__thumbs {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .mpc-project-detail__slider-controls {
        top: 0.55rem;
        right: 0.55rem;
    }

    .mpc-project-detail__story-content {
        padding: 0.9rem;
    }

    .mpc-project-detail__stats,
    .mpc-project-detail__screenshot-grid,
    .mpc-project-detail__bottom-grid,
    .mpc-project-detail__similar-grid {
        grid-template-columns: 1fr;
    }

    .mpc-project-detail__stat {
        border-right: 0;
        border-bottom:
            1px solid
            var(--color-border, #e4ddd3);
    }

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

    .mpc-project-detail__testimonial {
        grid-column: auto;
    }

    .mpc-project-detail__similar-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mpc-project-detail__cta-inner {
        padding: 0.9rem;
    }

    .mpc-project-detail__cta-actions {
        flex-direction: column;
    }

    .mpc-project-detail__cta-actions a {
        width: 100%;
    }

    .mpc-project-detail__video iframe {
        min-height: 15rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mpc-project-detail__button,
    .mpc-project-detail__hero-image,
    .mpc-project-detail__slider-button,
    .mpc-project-detail__similar-card,
    .mpc-project-detail__similar-image,
    .mpc-project-detail__story-nav a {
        transition: none;
    }

    .mpc-project-detail__button:hover,
    .mpc-project-detail__similar-card:hover {
        transform: none;
    }
}