/* Shared portfolio responsive fixes — desktop + mobile pages */

/* --- Desktop portfolio page at narrow widths --- */
@media (max-width: 1023px) {
    .portfolio-page main {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 6rem;
    }

    .portfolio-page .portfolio-hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.05;
    }

    .portfolio-page .portfolio-hero-aside {
        text-align: left;
        border-left-width: 4px;
        border-right: none;
        padding-left: 1rem;
        padding-right: 0;
        margin-top: 1.5rem;
    }

    .portfolio-page .portfolio-nav-cta {
        display: none;
    }

    .portfolio-page .portfolio-nav-logo:not(.site-logo-link) {
        font-size: clamp(0.875rem, 3.5vw, 1.25rem);
        line-height: 1.2;
        max-width: 55vw;
    }

    .portfolio-page .masonry-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .portfolio-page .masonry-grid > [class*='col-span'] {
        grid-column: 1 / -1 !important;
        margin-top: 0 !important;
    }

    .portfolio-page .masonry-grid .portfolio-shot {
        height: clamp(220px, 55vw, 360px) !important;
    }

    .portfolio-page .masonry-grid .portfolio-caption-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .portfolio-page .masonry-grid .portfolio-caption-meta {
        text-align: left;
    }

    .portfolio-page .masonry-grid .portfolio-stat-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-page .portfolio-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .portfolio-page .portfolio-stats-grid .font-display-lg {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.1;
    }

    .portfolio-page .portfolio-footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .portfolio-page .portfolio-footer-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .portfolio-page .portfolio-footer-copy p {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .portfolio-page .portfolio-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Mobile portfolio page --- */
.mobile-portfolio main {
    padding-top: 5.5rem;
}

.mobile-portfolio .portfolio-page-header h1 {
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1.05;
}

.mobile-portfolio .portfolio-stats-row .stat-num {
    font-size: clamp(2rem, 9vw, 2.5rem);
    line-height: 1.1;
}

.mobile-portfolio .editorial-grid {
    column-count: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mobile-portfolio .mirror-card {
    margin-bottom: 0;
    width: 100%;
}

.mobile-portfolio .mirror-card img {
    transform: none !important;
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
}

.mobile-portfolio .clients-section--light {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 2.5rem;
    border-top: 2px solid #e5e2e1;
}

.mobile-portfolio .clients-section--light .clients-section__header h2 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.05;
}

.mobile-portfolio footer .footer-brand:not(.site-footer-logo) {
    font-size: clamp(2rem, 12vw, 3rem);
    line-height: 1.05;
}

.mobile-portfolio #nav-drawer .drawer-title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.1;
}