/* ==========================================================
   SMARTONES UI FRAMEWORK
   Version: 1.0
   Author: ChatGPT + SmartOnes
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --primary: #0066cc;
    --primary-dark: #0b4d8c;

    --secondary: #f4b400;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;

    --text: #222;
    --text-light: #666;
    --border: #e5e7eb;
    --bg: #ffffff;
    --bg-light: #f8f9fb;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .05);
    --shadow: 0 8px 25px rgba(0, 0, 0, .08);
    --shadow-lg: 0 15px 40px rgba(0, 0, 0, .12);

    --transition: .3s ease;

    --container: 1200px;

}


/* ==========================================================
   GLOBAL
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    transition: var(--transition);
}

button {
    transition: var(--transition);
}


/* ==========================================================
   CONTAINER
========================================================== */

.so-container {

    width: 100%;
    max-width: var(--container);

    margin: auto;

    padding: 0 20px;

}


/* ==========================================================
   GRID
========================================================== */

.so-grid {

    display: grid;

    gap: 30px;

}

.so-grid-2 {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.so-grid-3 {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}

.so-grid-4 {

    grid-template-columns: repeat(4, minmax(0, 1fr));

}


/* ==========================================================
   CARD
========================================================== */

.so-card {

    background: #fff;

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: var(--transition);

}

.so-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);

}


/* ==========================================================
   BUTTON
========================================================== */

.so-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 28px;

    border-radius: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: var(--transition);

}

.so-btn-primary {

    background: var(--secondary);

    color: #111;

}

.so-btn-primary:hover {

    transform: translateY(-2px);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px) {

    .so-grid-4 {

        grid-template-columns: repeat(2, 1fr);

    }

    .so-grid-3 {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .so-grid-2,
    .so-grid-3,
    .so-grid-4 {

        grid-template-columns: 1fr;

    }

}