@import url('common.css');

.hero {
    --split-point: 55%;
    --angle: -20deg;
    background:
        linear-gradient(
            var(--angle),
            var(--split-b) 0%,
            var(--split-b) var(--split-point),
            var(--split-a) var(--split-point),
            var(--split-a) 100%
        );
    min-height: min(38rem, 80vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero h1 {
    max-width: 20ch;
    margin-bottom: 0;
}

.hero .intro {
    width: min(42rem, 62%);
    margin: clamp(3rem, 7vw, 7rem) 5% 0 auto;
}

.hero .intro p:last-of-type {
    margin-bottom: 2.5rem;
}

.hero .buttons {
    display: flex;
    gap: 2rem;
    align-items: flex-center;

}

@media (max-width: 1299px) {
    .hero { --split-point: 60%; }
}
@media (max-width: 991px) {
    .hero { --split-point: 58%; --angle: -10deg; }
    .hero .intro { width: min(42rem, 72%) }
    .hero h1 { max-width: 100% }
}
@media (max-width: 767px) {
    .hero { --split-point: 54%; --angle: 0deg; min-height: auto; }
    .hero .intro {
        width: 100%;
        margin: 3rem 0 0;
    }
}
@media (max-width: 575px) {
    .hero { --split-point: 60%; }
}


/**************************** Capabilities ****************************/

.capabilities .section-header { 
    display: grid;
    gap: 0rem;
    max-width: 48rem;
}

.points {
    --row-gap: 1rem;
    --column-gap: 1rem;
}
.point {
    min-height: 10rem;
    padding: clamp(1.5rem, 3vw, 2.8rem);
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    color: var(--text-main);
}
.points > :nth-child(1) {
    grid-column: 1 / span 7;
}
.points > :nth-child(2) {
    grid-column: 8 / -1;
}
.points > :nth-child(3) {
    grid-column: 1 / span 6;
}
.points > :nth-child(4) {
    grid-column: 7 / span 6;
}
.point h3 {
    max-width: 30ch;
    margin-bottom: 2rem;
    transition: color var(--transition-base);
}
.point:hover h3 {
    color: var(--accent-primary);
}
@media (max-width: 991px) {
    .points > :nth-child(1),
    .points > :nth-child(3) {
        grid-column: 1 / span 6;
    }
    .points > :nth-child(2),
    .points > :nth-child(4) {
        grid-column: 7 / -1;
    }
}
@media (max-width: 767px) {
    .points > :nth-child(n) {
        grid-column: 1 / -1;
    }
    .point {
        min-height: 10rem;
    }
}


/**************************** Collaboration ****************************/

.collaboration .section-header {
    max-width: 48rem;
}
.collaboration .points {
    --row-gap: 4rem;
    --column-gap: clamp(2rem, 7vw, 8rem);
}
.collaboration .points article:nth-child(1) {
    grid-column: 1 / span 4;
}
.collaboration .points article:nth-child(2) {
    grid-column: 6 / span 5;
    margin-top: 4rem;
}
.collaboration .points article:nth-child(3) {
    grid-column: 2 / span 5;
}
.collaboration .points article:nth-child(4) {
    grid-column: 8 / span 4;
    margin-top: 3rem;
}
.collaboration .points h3 {
    margin-bottom: 0.75rem;
}
.collaboration .points p {
    margin: 0;
    line-height: 1.7;
}
@media (max-width: 767px) {
    .collaboration .points article:nth-child(n) {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: 0;
    }
}

/**************************** Work ****************************/

.work {
    scroll-margin-top: var(--menu-height);
    .section-header { display: block; }
    .section-header p { margin-top: 1.5rem; }
    .editorial-grid { --column-gap: clamp(2rem, 7vw, 7rem); }
    article:first-child { grid-column: 1 / span 6; }
    article:last-child { grid-column: 8 / span 5; margin-top: 4rem; }
    article p { line-height: 1.7; color: var(--text-secondary); }
    .text-action { display: inline-block; margin-top: 1.5rem; }
}

/**************************** Final ****************************/

.final {
    --split-point: 36%;
    h2 { margin-bottom: 3rem; }
    .copy {
        width: 60%;
        margin-left: auto;
        padding: clamp(2rem, 4vw, 4rem);
        background: var(--bg-main);
    }
    .copy p { margin: 0 0 2.5rem; line-height: 1.6; }
}

@media (max-width: 991px) {
    .work article:last-child { grid-column: 7 / span 6; }
    .final .copy { width: 72%; }
}
@media (max-width: 767px) {
    .work article:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
    .final {
        --split-point: 32%;
        .copy { width: auto; margin-left: 0; }
    }
}