/* Site-wide section rhythm. Loaded after page and responsive styles so
   bespoke layouts use the same spacing at every viewport width.
   Hero frames retain their sizing and clearance for the fixed navigation.
   Nested sections (such as blog widgets) retain their component spacing. */
:root {
    --section-y: clamp(2.5rem, 4vw, 3.5rem);
}

@media (max-width: 1080px) {
    :root {
        --section-y: 2.75rem;
    }
}

@media (max-width: 720px) {
    :root {
        --section-y: 2.25rem;
    }
}

@media (max-width: 420px) {
    :root {
        --section-y: 1.75rem;
    }
}

#main section:not(section section):not(:is(.nx-hero, .nx-subhero, .nx-mens-hero, .nx-blog-hero)) {
    padding-block: var(--section-y);
    margin-block: 0;
}

/* The scroll cue already separates the hero from the first section. */
.nx-scrollcue {
    padding-top: 1.5rem;
}

#main .nx-scrollcue + section:not(section section) {
    padding-top: 1rem;
}

/* Inner gaps that previously stacked on top of the section padding. */
#main .nx-challenge--seq .nx-challenge__topband {
    margin-bottom: var(--section-y);
}

#main #standard-intro .nx-lead {
    padding-bottom: 0;
}

/* Each research video panel owns the shared vertical spacing. */
#main section#innovation-videos {
    padding-block: 0;
}

/* Painted heading bands own the top inset; avoid padding them twice.
   Keep their bottom padding and overlapping cards as part of the layout. */
#main section:is(.nx-standard-showcase, .nx-core-values, .nx-glance):not(section section) {
    padding-top: 0;
}

#main :is(.nx-standard-showcase__band, .nx-core-values__head, .nx-glance__panel) {
    padding-top: var(--section-y);
}

#main section.nx-glance:not(section section) {
    padding-bottom: 0;
}

#main .nx-glance__panel {
    padding-bottom: var(--section-y);
}

/* The outer section owns spacing for these formerly padded wrappers. */
#main .nx-challenge {
    --nx-challenge-pad: var(--section-y);
}

#main .nx-challenge__topband {
    padding-top: 0;
}

#main .nx-careers__panel {
    padding-block: 0;
}

#main :is(.nx-about-careers__inner, .nx-about-nisce__inner) {
    min-height: 0;
    padding-block: 0;
}

/* Keep certification badges in normal flow so they cannot overlap the
   next section or footer when the banner's extra margin is removed. */
#main .nx-commitbanner__inner {
    position: relative;
    inset: auto;
    padding-block: 0;
    gap: var(--section-y);
}

#main .nx-commitbanner__certs {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    align-self: center;
}

#main .nx-blog-article {
    padding-bottom: var(--section-y);
}

/* Full-bleed statistics images reach both section edges. Padding here
   exposes the navy backing as empty bands above and below the image. */
#main section.nx-mens-support:not(section section) {
    padding-block: 0;
}

/* Match the illustration to the adjacent carousel. Its intrinsic image
   height previously stretched the grid below the cards on wide screens. */
@media (min-width: 768px) {
    #main .nx-mens-topics__video {
        min-height: 0;
        height: clamp(420px, 40vw, 580px);
    }
}
