/* ==========================================================
   LAYOUT.CSS
   Общая структура сайта
   ========================================================== */

/* ---------- Базовая страница ---------- */

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

main{
    flex:1;
    display:block;
}


/* ---------- Контейнер ---------- */

.container{
    width:100%;
    max-width:var(--container-width);
    margin:0 auto;
    padding-left:var(--container-padding);
    padding-right:var(--container-padding);
}


/* ---------- Секции ---------- */

section{
    padding:var(--space-20) 0;
}

section:nth-child(even){
    background:var(--color-surface);
}


/* ---------- Сетки ---------- */

.grid{
    display:grid;
    gap:var(--space-8);
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-8);
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-8);
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-6);
}


/* ---------- Карточки ---------- */

.card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-8);
    box-shadow:var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}


/* ---------- Кнопки ---------- */

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:var(--button-height);
    padding:0 28px;
    border-radius:var(--radius-md);
    font-weight:var(--font-semibold);
    transition:all var(--transition);
    text-align:center;
    white-space:nowrap;
}

.button-primary{
    background:var(--gradient-primary);
    color:#fff;
}

.button-primary:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.button-secondary{
    background:#fff;
    color:var(--color-primary);
    border:1px solid var(--color-primary);
}

.button-secondary:hover{
    background:var(--color-primary);
    color:#fff;
}


/* ---------- Формы ---------- */

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:var(--space-5);
}

.form-group label{
    font-weight:var(--font-medium);
    color:var(--color-secondary);
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    min-height:var(--input-height);
    padding:14px 16px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:#fff;
    transition:border-color var(--transition),
               box-shadow var(--transition);
}

.form-group textarea{
    min-height:140px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}


/* ---------- Сообщения ---------- */

.form-error{
    padding:16px;
    margin-bottom:24px;
    border-radius:var(--radius-md);
    background:#fef2f2;
    color:var(--color-danger);
    border:1px solid #fecaca;
}

.form-success{
    padding:16px;
    margin-bottom:24px;
    border-radius:var(--radius-md);
    background:#ecfdf5;
    color:var(--color-success);
    border:1px solid #bbf7d0;
}


/* ---------- Honeypot ---------- */

.honeypot{
    position:absolute;
    left:-9999px;
    opacity:0;
    pointer-events:none;
}


/* ---------- Отступы ---------- */

.mt-0{margin-top:0;}
.mt-1{margin-top:var(--space-2);}
.mt-2{margin-top:var(--space-4);}
.mt-3{margin-top:var(--space-6);}
.mt-4{margin-top:var(--space-8);}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:var(--space-2);}
.mb-2{margin-bottom:var(--space-4);}
.mb-3{margin-bottom:var(--space-6);}
.mb-4{margin-bottom:var(--space-8);}


/* ---------- Flex ---------- */

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.flex-column{
    display:flex;
    flex-direction:column;
}


/* ---------- Адаптив ---------- */

@media (max-width:992px){

    section{
        padding:var(--space-16) 0;
    }

    .grid-4{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }

    .button{
        width:100%;
    }

    .card{
        padding:var(--space-6);
    }

    section{
        padding:var(--space-12) 0;
    }

}

@media (max-width:480px){

    .container{
        padding-left:16px;
        padding-right:16px;
    }

}