@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --heading-font: 'Space Grotesk', sans-serif;
    --alternative-font: 'Manrope', serif; 

    --primary-color: #DF5B2E;

    --border-color: #E2E8F0;
    --bg-light: #F9f9f9;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    background-color: rgba(0, 0, 0, 0.4);
    font-family: var(--alternative-font);
    background-image: url("../assets/roles_bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-x: hidden;
}


.main-content {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    
    .card {
        width: min(100%, 70rem);
        position: relative;
        
        background: #ffffff;
        border-radius: clamp(1.75rem, 5vw, 3rem);
        
        box-shadow: 0 1.5rem 4rem rgba(78, 27, 8, 0.24);
        animation: modal-enter 350ms ease-out;

        padding:
            clamp(5rem, 12vw, 7.25rem)
            clamp(1.5rem, 7vw, 4.75rem)
            clamp(2rem, 7vw, 4.75rem);
        }

    .back-icon {
        position: absolute;
        top: clamp(1.75rem, 6vw, 4.25rem);
        left: clamp(1.5rem, 7vw, 4.75rem);

        width: 2.75rem;
        height: 2.75rem;

        display: grid;
        place-items: center;

        padding: 0;
        border: 0;
        background: transparent;
        appearance: none;

        cursor: pointer; 
        
        .icon {
            fill: #000;
            width: 1.75rem;
            height: 1.75rem;
            transition: transform 180ms ease, fill 180ms ease;
            &:hover{
                fill: var(--primary-color);
                transform: translateX(-0.25rem);
            }

        }
    }
        
    .description {

        width: 100%;
        
        
        h2 {
            color: #0F172A;
            font-family: var(--heading-font);
            font-size: clamp(2.5rem, 8vw, 4rem);
            line-height: 1.05;
            letter-spacing: -0.045em;
            text-wrap: balance;
        }

        p {
            max-width: 62rem;
            margin-top: clamp(1rem, 3vw, 1.25rem);
            font-family: var(--alternative-font);
            font-size:  clamp(1rem, 2.5vw, 1.5rem);
            color: #64748B;
            line-height: 1.45;
        }
    }

    .roles {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: clamp(2rem, 6vw, 3rem);

        
        .role-btn {

            width: 100%;
            min-width: 0;
            min-height: 4.75rem;
            margin: 0;
            padding: 1rem 1.5rem;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;

            border: 0;
            border-radius: 1.4rem;

            background-color: var(--primary-color);
            color: #ffffff;

            font-weight: 700;

            cursor: pointer;

            box-shadow: inset 0 -0.18rem 0 rgba(111, 37, 15, 0.14);
            transition:
                transform 180ms ease,
                background-color 180ms ease,
                box-shadow 180ms ease;
            
            
            svg {
                width: 1.4rem;
                height: 1.4rem;
                flex-shrink: 0;
                color: #fff;
                transition: color 0.2s ease;
            }
            
            span {
                font-family: var(--alternative-font);
                font-size: clamp(1rem, 2.2vw, 1.25rem);
                line-height: 1.25;
            }

            &:hover {
                background-color: #c9471e;
                transform: translateY(-0.22rem);
                box-shadow:
                    inset 0 -0.18rem 0 rgba(85, 23, 7, 0.18),
                    0 0.85rem 1.5rem rgba(201, 71, 30, 0.24);
            }
            
            &.active {
                transform: translateY(0);
                background-color: #b8401a; 
            }
        }
    }
            
        }

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Keyboard Accessibility */
.role-btn:focus-visible,
.back-icon:focus-visible {
    outline: 0.2rem solid #0f172a;
    outline-offset: 0.2rem;
}

/* Responsive Mobile View Layout Rules */

/* Larger screens*/
@media (min-width: 56.25rem) {
    .main-content .roles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1.5rem, 6vw, 5.5rem);
    }
}

/* Smaller screens */
@media (max-width: 23.5rem) {
    .main-content {
        padding: 0.75rem;
    }

    .details {
        padding:
            4.75rem
            1.15rem
            1.5rem;
    }

    .description h2 {
        font-size: 2.25rem;
    }

    .role-btn {
        padding-inline: 0.85rem;
    }

    .role-btn span {
        font-size: 0.95rem;
    }
}