/* --- Basic Reset & Body for demonstration --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f0f2f5;
    padding: 20px;
    box-sizing: border-box; /* Ensures padding doesn't add to total width */
}

/* --- The KEY Container for the Cards --- */
.cards-wrapper {
    /* These three lines are crucial for horizontal flow and wrapping */
    display: flex;       /* 1. Turns on Flexbox for children */
    flex-wrap: wrap;     /* 2. Allows items to wrap to the next line */
    justify-content: center; /* 3. Centers items horizontally */

    gap: 20px;           /* Space between cards (both horizontal and vertical) */
    max-width: 1200px;   /* Limits the overall width of the card grid */
    margin: 0 auto;      /* Centers the entire wrapper on the page */
    padding: 10px;       /* Inner padding for the wrapper */
}

/* --- Styling for Each Individual Card --- */
.card-item {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    box-sizing: border-box; /* Ensures padding/border is included in width calculation */

    /* The width calculation is vital for "3 in a row" */
    /*
      Explanation:
      100% (total container width)
      - (2 * 20px) = -40px (subtract the total 'gap' space for two gaps between three items)
      / 3 = divide by the number of items per row
    */
    width: calc((100% - (2 * 20px)) / 3);
    min-width: 280px; /* Prevents cards from becoming too narrow before wrapping */

    /* Flexbox for internal content alignment (optional, but good practice) */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if content varies */
}

.card-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #007bff;
}

.card-item p {
    font-size: 0.95em;
    line-height: 1.5;
    flex-grow: 1; /* Allows paragraph to take up available space */
    margin-bottom: 15px;
}

.card-item .btn {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: auto; /* Pushes button to the bottom */
    transition: background-color 0.3s ease;
}

.card-item .btn:hover {
    background-color: #0056b3;
}

/* --- Media Queries for Responsiveness --- */

/* For Tablets: 2 cards per row */
@media (max-width: 992px) {
    .card-item {
        /*
          Explanation:
          100% (total container width)
          - (1 * 20px) = -20px (subtract total 'gap' for one gap between two items)
          / 2 = divide by the number of items per row
        */
        width: calc((100% - 20px) / 2);
    }
}

/* For Mobile: 1 card per row */
@media (max-width: 768px) {
    .card-item {
        /* Takes full width, no gaps to subtract as there's only one item */
        width: 100%;
        max-width: 400px; /* Keep individual card from being too wide on large phones */
    }
    .cards-wrapper {
        padding: 0 10px; /* Adjust wrapper padding for smaller screens */
    }
}

/* Optional: Very small screens adjustments */
@media (max-width: 480px) {
    .card-item h3 {
        font-size: 1.3em;
    }
    .card-item p {
        font-size: 0.9em;
    }
    .card-item .btn {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}