/* ==========================================
   ОТ СТРАНИЦЫ К ЭКРАНУ
   Зара К. Рид
========================================== */


*{
    box-sizing:border-box;
}


body{
    background:#0d0d0d;
    color:#e0e6ed;
    margin:0;
    padding:40px 20px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.8;
}


/* ==========================================
   HEADER
========================================== */

.page-header{
    max-width:1000px;
    margin:0 auto;
    padding-bottom:45px;
    border-bottom:1px solid #1a1a1a;
}


.back-link{
    color:#ffb703;
    text-decoration:none;
    font-weight:bold;
    transition:.25s;
}


.back-link:hover{
    opacity:.8;
}


.header-content{
    margin-top:45px;
}


.section-label{
    display:inline-block;
    color:#ffb703;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
}


.page-title{
    color:#ffffff;
    font-size:clamp(2.2rem,5vw,3.5rem);
    line-height:1.15;
    margin:0 0 25px;
    font-weight:700;
}


.page-intro{
    color:#a0aec0;
    max-width:760px;
    line-height:1.9;
    margin:0 0 20px;
}


.page-intro:last-child{
    margin-bottom:0;
}


/* ==========================================
   MAIN CONTENT
========================================== */

main{
    max-width:1000px;
    margin:55px auto;
    display:grid;
    gap:30px;
}


/* ==========================================
   CATEGORY CARDS
========================================== */

.category-card{
    position:relative;
    background:#11151d;
    border:1px solid #1a1a1a;
    border-radius:10px;
    padding:35px;
    overflow:hidden;
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.category-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:3px;
    height:100%;
    background:#ffb703;
    opacity:.35;
    transition:.25s;
}


.category-card:hover{
    border-color:#ffb703;
    transform:translateY(-4px);
    background:#131923;
}


.category-card:hover::before{
    opacity:1;
}


/* ==========================================
   CATEGORY TEXT
========================================== */

.category-label{
    color:#ffb703;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:2px;
}


.category-title{
    color:#ffffff;
    font-size:1.8rem;
    margin:12px 0 15px;
    line-height:1.3;
}


.category-text{
    color:#a0aec0;
    max-width:760px;
    margin:0 0 25px;
    line-height:1.9;
}


.category-link{
    color:#ffb703;
    text-decoration:none;
    font-weight:bold;
    display:inline-block;
    transition:.25s;
}


.category-link:hover{
    text-decoration:underline;
    transform:translateX(4px);
}


/* ==========================================
   FOOTER
========================================== */

footer{
    max-width:1000px;
    margin:75px auto 0;
    padding-top:35px;
    border-top:1px solid #1a1a1a;
    text-align:center;
}


.footer-text{
    color:#8892b0;
    max-width:760px;
    margin:0 auto;
    line-height:1.9;
}


.copyright{
    color:#6b7280;
    font-size:.9rem;
    margin-top:30px;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:700px){

    body{
        padding:25px 15px;
    }


    .page-header{
        padding-bottom:35px;
    }


    .header-content{
        margin-top:35px;
    }


    .page-title{
        font-size:2.2rem;
    }


    .page-intro{
        font-size:.95rem;
    }


    main{
        margin:40px auto;
        gap:20px;
    }


    .category-card{
        padding:28px 25px;
    }


    .category-title{
        font-size:1.55rem;
    }


    .category-text{
        font-size:.95rem;
    }


    footer{
        margin-top:55px;
    }

}