/* MILO spacing system
   One shared rhythm for sections, headings and card grids. */
:root {
    --milo-space-1: 8px;
    --milo-space-2: 12px;
    --milo-space-3: 16px;
    --milo-space-4: 24px;
    --milo-space-5: 32px;
    --milo-space-6: 48px;
    --milo-section-space: clamp(56px, 5vw, 80px);
    --milo-card-gap: clamp(16px, 1.5vw, 24px);
    --milo-heading-gap: 10px;
}

/* Keep heading copy visually grouped. */
.content-head h2,
.home-live-head h2,
.calendar-toolbar h2,
.milo-filter-results-title h2,
.coffee-head h2,
.rec-heading h2,
.milo-curated-head h2,
.topic-head h2 {
    margin-top: 0;
    margin-bottom: var(--milo-heading-gap);
}

.content-head p,
.home-live-head p,
.calendar-toolbar p,
.milo-filter-results-title p,
.coffee-head p,
.rec-heading p,
.milo-curated-head p,
.topic-head p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Home: consistent space between the main content sections. */
.milo-home-mosaic,
.container.together,
.container.section,
.container.cta {
    margin-top: var(--milo-section-space);
}

.container.section.home-shop,
.container.section.home-giveaway-carousel,
.container.section.home-community,
.container.section.home-live {
    padding-top: 0 !important;
}

.content-head,
.home-live-head,
.listing-head {
    margin-bottom: var(--milo-space-4);
}

.milo-home-mosaic,
.home-shop-grid,
.listing-grid,
.question-grid,
.home-live-layout,
.live-mini-list,
.steps {
    gap: var(--milo-card-gap);
}

.home-shop-benefits {
    margin-top: var(--milo-space-5);
}

/* Events: calendar, filters, cards and the coffee section. */
.live-wrap > .calendar-toolbar {
    margin-bottom: var(--milo-space-4);
}

.live-wrap > .calendar {
    margin-bottom: var(--milo-section-space);
}

.live-wrap > .upcoming-head {
    margin-bottom: var(--milo-space-4);
}

.milo-filter-section .milo-filter-form {
    margin-bottom: var(--milo-space-3);
}

.milo-filter-section .milo-quick-filters {
    margin-bottom: var(--milo-space-5);
}

.live-grid,
.coffee-grid {
    gap: var(--milo-card-gap);
}

.live-pagination,
.rec-pagination,
.community-pagination {
    margin-top: var(--milo-space-5);
}

.coffee-section {
    margin-top: var(--milo-section-space);
}

.coffee-head {
    margin-bottom: var(--milo-space-4);
}

/* Recommendations: filter, results and curated selection. */
.rec-wrap > .rec-filters {
    margin-bottom: var(--milo-space-3);
}

.rec-wrap > .milo-quick-filters {
    margin-bottom: var(--milo-space-6);
}

.rec-heading,
.milo-curated-head {
    margin-bottom: var(--milo-space-4);
}

.rec-grid,
.milo-curated-grid {
    gap: var(--milo-card-gap);
}

.milo-curated-recommendations {
    margin-top: var(--milo-section-space);
}

/* Community: filter, title, cards and sidebar. */
.community-wrap > .topic-filters {
    margin-bottom: var(--milo-space-6);
}

.topic-head {
    margin-bottom: var(--milo-space-4);
}

.topic-layout {
    gap: var(--milo-card-gap);
}

.topic-list {
    gap: var(--milo-card-gap);
}

/* Tablet and mobile use a tighter but still even rhythm. */
@media (max-width: 900px) {
    :root {
        --milo-section-space: 48px;
        --milo-card-gap: 16px;
    }

    .rec-wrap > .milo-quick-filters,
    .community-wrap > .topic-filters {
        margin-bottom: var(--milo-space-5);
    }
}

@media (max-width: 640px) {
    :root {
        --milo-section-space: 36px;
        --milo-card-gap: 14px;
        --milo-heading-gap: 6px;
    }

    .content-head,
    .home-live-head,
    .listing-head,
    .calendar-toolbar,
    .milo-filter-results-title,
    .coffee-head,
    .rec-heading,
    .milo-curated-head,
    .topic-head {
        margin-bottom: var(--milo-space-3);
    }

    .live-wrap > .calendar {
        margin-bottom: var(--milo-section-space);
    }

    .milo-filter-section .milo-quick-filters,
    .rec-wrap > .milo-quick-filters,
    .community-wrap > .topic-filters {
        margin-bottom: var(--milo-space-4);
    }

    .live-pagination,
    .rec-pagination,
    .community-pagination,
    .home-shop-benefits {
        margin-top: var(--milo-space-4);
    }
}