/* Desktop banner — sits below the breadcrumbs, fills the page padding rhythm
   (60px gutters, matching .categories-container), and caps at 1850×385 via
   aspect-ratio so the banner scales down proportionally on narrower viewports
   instead of squashing. object-fit: cover crops gracefully when an uploaded
   image's aspect ratio doesn't match the rendered box. */
.banner-container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 60px;
    margin-top: 8px;
}

.banner {
    display: block;
    width: 100%;
    max-width: 1850px;
    aspect-ratio: 1850 / 385;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 24px;
}

@media (max-width: 768px) {
    /* Mobile: edge-to-edge. <main> applies 20px horizontal padding on mobile,
       so we bleed the banner past it via a 40px-wider box and -20px side
       margins. global.css sets overflow-x: hidden on the page so this can't
       trigger horizontal scroll. margin-top: 12px gives the breadcrumbs row
       above some breathing room. */
    .banner-container {
        width: calc(100% + 40px);
        padding: 0;
        margin: 12px -20px 0;
    }

    .banner {
        width: 100%;
        max-width: none;
        height: 212px;
        aspect-ratio: auto;
        border-radius: 24px;
    }
}

/* <main> uses default block flow on the category page — each direct child
   (breadcrumbs, banner, chip rail, benefit sections, categories grid) owns
   its own outer margin. Replaces an earlier flex layout that imposed a 40px
   gap between siblings; that rule made the categories grid sit further from
   the previous section than on the homepage and made it impossible for the
   component to control its own spacing (flex gap stacks on top of margins).
   Desktop top breathing room now lives on main > .breadcrumbs in
   breadcrumbs.css so search/module pages get it too. */
@media (max-width: 768px) {
    main {
        padding: 0 20px;
    }
}

/* Benefit sections own their top spacing on this page (mirrors the 12px gap
   the homepage gets via .sections { gap: 12px }). Scoped to direct children
   of main to avoid leaking into nested layouts. */
main > section.benefit-section {
    margin-top: 12px;
}

/* Desktop: align the benefit section with the category banner above —
   same max-width (1850px) and 60px gutters, both centered. With border-box,
   the 60px padding lives inside the 1850 max-width, so the section's content
   area lines up with the banner image's edges at every viewport width.
   No mobile counterpart — on mobile the section sits inside <main>'s 20px
   gutter, which is what the homepage's .sections also uses. */
@media (min-width: 769px) {
    main > section.benefit-section {
        max-width: 1850px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 60px;
        box-sizing: border-box;
    }
}