@import '../colors.css';

/* Angled section layouts (oblique/slanted) */

.layout-max-1400 {
    max-width: min(1200px, 100%);
    margin: 0 auto;
    width: 100%;
}

/* Background utilities */
.bg-blue {
    background: var(--brand-blue);
    color: var(--bg-white);
}

.bg-black {
    background: var(--brand-black);
    color: var(--bg-white);
}

.bg-white {
    background: var(--bg-white);
    color: var(--text-primary);
}

.bg-gray {
    background: var(--bg-soft);
    color: var(--text-primary);
}
.bg-purplegradient {
    background: var(--gradient-bluepurple);
    color: var(--bg-white);
}

.layout-section-oblique {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 1000px;
    padding: 500px 50px;
    padding-bottom: 600px;
    clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);
    margin-top: -80px;
    z-index: 10;
}

@media (max-width: 1024px) {
    .layout-section-oblique {
        height: auto;
        padding: 40px 30px;
        clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    }
}

@media (max-width: 768px) {
    .layout-section-oblique {
        margin-top: -130px;
        padding: 76px 20px 92px;
        height: auto;
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        z-index: 20;
    }
}

.layout-section-slanted {
    position: relative;
    transform: skewY(-1deg) translateY(-70px);
    height: 300px;
    overflow: hidden;
    padding-top: 0px;
    z-index: 10;
}