/*
|--------------------------------------------------------------------------
| Sections
|--------------------------------------------------------------------------
*/

.section{
    padding:96px 0;
}

.section-sm{
    padding:64px 0;
}

.section-lg{
    padding:128px 0;
}

.section-light{
    background:#fafaf8;
}

.section-white{
    background:#ffffff;
}

.section-header{
    max-width:760px;
    margin:0 auto 56px;
    text-align:center;
}

.section-title{
    margin-bottom:16px;
}

.section-description{
    max-width:640px;
    margin:0 auto;
    color:var(--color-text-light);
}

/*
| Homepage section-spacing tokens.
|
| One source of truth for vertical rhythm between homepage sections.
| Individual section stylesheets (featured-products.css, health-goals.css,
| etc.) must not declare their own section padding-top/padding-bottom —
| this rule already governs it at higher specificity, and a second,
| conflicting value left in a section-specific file would be dead code.
*/
.home {
    --section-spacing-y: 72px;
    --section-spacing-heading: 32px;
    --section-spacing-gap: 24px;
}

@media (max-width: 1023px) {
    .home {
        --section-spacing-y: 56px;
        --section-spacing-heading: 27px;
        --section-spacing-gap: 21px;
    }
}

@media (max-width: 767px) {
    .home {
        --section-spacing-y: 40px;
        --section-spacing-heading: 22px;
        --section-spacing-gap: 18px;
    }
}

.home .site-main > section:not(.hero-section) {
    padding-block: var(--section-spacing-y);
}

.home .site-main > .discovery-cta {
    padding-block: 0 var(--section-spacing-y);
}

.home .section-heading {
    max-width:760px;
    margin:0 auto var(--section-spacing-heading);
    text-align:center;
}

.home .section-heading .section-title {
    margin:0 0 14px;
    font-size:clamp(28px, 3.6vw, 42px);
    line-height:1.15;
}

.home .section-heading .section-description {
    line-height:1.65;
}

.home :is(.categories-grid, .featured-products-grid, .featured-brands-grid, .health-goals-grid, .buying-guides-grid, .discovery-grid, .certifications-grid) {
    align-items:stretch;
    margin-top:0;
    gap:var(--section-spacing-gap);
}

.home :is(.category-card, .product-card, .brand-card, .health-goal-card, .guide-card, .certification-card) {
    height:100%;
}

.home :is(.category-card-link, .brand-card-link, .health-goal-link, .guide-card-link, .certification-link) {
    display:flex;
    height:100%;
    flex-direction:column;
}

.home :is(.category-card-content, .brand-content, .health-goal-content, .guide-content, .certification-content) {
    display:flex;
    min-width:0;
    flex:1;
    flex-direction:column;
}

.home :is(.category-card-footer, .brand-footer, .health-goal-footer, .guide-footer, .certification-footer) {
    margin-top:auto;
}

.home :is(.featured-products-footer, .featured-brands-footer, .health-goals-footer, .buying-guides-footer) {
    margin-top:var(--section-spacing-heading);
}

.home :is(.category-card-link, .brand-card-link, .health-goal-link, .guide-card-link, .certification-link, .product-title a):focus-visible {
    outline:3px solid var(--color-brand-primary);
    outline-offset:3px;
}