/* Final launch refinements for Work + Case Study. Presentation only. */

/* Work: surface flagship projects instead of hiding them behind the archive. */
.sr-portfolio-featured {
    display: block !important;
    padding: clamp(78px, 9vw, 130px) 0 !important;
    background: var(--srj-bg) !important;
    border-bottom: 1px solid var(--srj-line) !important;
}

.sr-portfolio-featured .sr-portfolio-section-head h2,
.sr-portfolio-featured .sr-portfolio-card-copy h3 {
    color: var(--srj-ink) !important;
}

.sr-portfolio-featured .sr-portfolio-section-head > p,
.sr-portfolio-featured .sr-portfolio-card-copy > span {
    color: var(--srj-muted) !important;
}

.sr-portfolio-featured-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.85fr) !important;
    gap: 30px !important;
}

.sr-portfolio-featured .sr-portfolio-media {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
}

.sr-portfolio-featured .sr-portfolio-card.is-primary .sr-portfolio-media {
    aspect-ratio: 16 / 10 !important;
}

.sr-portfolio-featured .sr-portfolio-card-copy {
    border-top: 1px solid var(--srj-line) !important;
    padding-top: 15px !important;
}

.sr-portfolio-featured .sr-portfolio-card-copy h3 {
    font-size: clamp(22px, 2.4vw, 36px) !important;
    font-weight: 600 !important;
}

/* Case-study fallback for legacy graphic covers that are not suitable as cinematic heroes. */
.sr-case-hero.is-clean-fallback {
    background:
        radial-gradient(circle at 72% 28%, rgba(36,184,210,.20), transparent 28rem),
        linear-gradient(145deg, #09131f 0%, #10233a 48%, #0a0a09 100%) !important;
}

.sr-case-hero.is-clean-fallback::before {
    content: "360°";
    position: absolute;
    inset-inline-end: 5vw;
    top: 18%;
    color: rgba(255,255,255,.06);
    font-size: clamp(110px, 26vw, 360px);
    font-weight: 800;
    letter-spacing: -.08em;
    line-height: 1;
}

@media (max-width: 900px) {
    .sr-portfolio-featured-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .sr-portfolio-featured .sr-portfolio-card.is-primary {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .sr-portfolio-featured {
        padding: 64px 0 76px !important;
    }
    .sr-portfolio-featured-grid {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
    }
    .sr-portfolio-featured .sr-portfolio-card.is-primary {
        grid-column: auto;
    }
    .sr-portfolio-featured .sr-portfolio-media,
    .sr-portfolio-featured .sr-portfolio-card.is-primary .sr-portfolio-media {
        aspect-ratio: 16 / 10 !important;
    }
}