* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background: #edf2f8;
    display: flex; /*center content horizontally */
    justify-content: center; /* centers .container */
    padding: 50px;
}


/* GRID */
.container {
    display: grid; /* 2D layout system */
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns & each column takes one fraction (single column) of the available space */
    gap: 20px; /* spacing between cards */
    max-width: 1100px; /* Limits layout width → prevents stretching on big screens */
    align-items: stretch; /* Makes all cards same height in a row */
}

/* CARD BASE */
.card {
    border-radius: 12px;
    /* rounded corners */
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    /* shadow → depth */
}

.card h3 {
    font-size: 18px;
    line-height: 1.3;
}

.card p {
    font-size: 13px;
    opacity: 0.7; /* softer text */
    line-height: 1.5;
}

/* USER */
.user {
    display: flex; /* puts image + text side-by-side */
    align-items: center;
    gap: 10px;
}

.user img {
    width: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.user h4 {
    font-size: 14px;
}

.user span {
    font-size: 12px;
    opacity: 0.6;
}


/* COLORS */
.card-purple {
    background: #733fc8;
    color: white;
}

.card-dark {
    background: #49556b;
    color: white;
}

.card-light {
    background: white;
    color: #333;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* [x-offset] [y-offset] [blur] [color]; */
}

/* SIZES */
.tall {
    grid-row: span 2; /* takes 2 row */
}

.card-light .user img {
    border: 2px solid #0f0101;
}

.wide {
    grid-column: span 2;
}

/* =========================
   CUSTOM BUTTON LINK
========================= */
.custom-btn {
    text-decoration: none;
    background: #3498db;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    display: inline-block;
    transition: 0.3s;
    text-align: center;
    cursor: pointer;
}

/* Hover effect for custom button */
.custom-btn:hover {
    background: #1d6fa5;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr 1fr; /* → switches to 2 columns */
    }
}

@media (max-width: 375px) {
    .container {
        grid-template-columns: 1fr; /* → single column*/
    }
}