/*
    Enchanted Garden Shop
    css/home.css
    Homepage-specific overrides. Most styling comes from shared.css.

    shared.css is loaded first on every page and defines the full design
    system (colors, type, spacing, buttons, cards, forms, header/footer).
    Only page-specific adjustments belong here.
*/

/* The three "Find Your Way In" cards use the shared .card default,
   which was sized for a taller card with more content. Tighten padding
   and internal spacing so things read as compact rather than spread
   out, same treatment as the counseling page's package cards, and add
   the same light outline. */
.find-your-way-in .card {
    padding: 24px 22px;
    border: 1px solid rgba(53, 71, 44, 0.12);
}

.find-your-way-in .card h3 {
    margin-bottom: 8px;
}

.find-your-way-in .card p {
    margin-bottom: 10px;
}

.find-your-way-in.card-grid {
    gap: 18px;
}

/* Class cards (the .class-card variant, photo + tag + price) already
   have their own internal padding per section, so they only need the
   light outline here, not the padding/spacing tightening above. */
.next-class-grid .card.class-card {
    border: 1px solid rgba(53, 71, 44, 0.12);
}

.next-class-grid.card-grid {
    gap: 18px;
}

/* "Next Up in the Garden" shows up to two upcoming classes side by
   side. A single upcoming class, or the "stay tuned" placeholder, is
   centered in a narrower single column so it doesn't stretch full
   width and look sparse. */
.next-class-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 680px;
}

.next-class-grid.single {
    grid-template-columns: 1fr;
    max-width: 380px;
}

.next-class-empty {
    color: var(--cream);
    text-align: center;
}

@media (max-width: 780px) {
    .next-class-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
    }
}