/* ==========================================================================
   Iguazu Noticias — Landing page composition

   Page-level only: how the sections stack, and the two things the landing
   template does differently from every other page. Component rules belong in
   assets/css/components/.
   ========================================================================== */

/* The site header gives up its stickiness on this page because the section nav
   takes over; that rule now lives with its cause in components/secnav.css. */

/* The gap above the sticky section nav.

   It cannot be margin-top on .ig-secnav, for three reasons. A sticky box is
   constrained by its MARGIN box, so top:0 plus margin-top:32px parks the bar
   32px down the viewport with the page scrolling visibly through the gap, and
   behind a backdrop-filter that gap is a smear rather than air. It would also
   put the bar out of step with section-nav.js, which measures the BORDER box
   (section-nav.js:63) and never sees the margin. And 56px of bar plus 32px of
   margin overruns the 84px --scroll-offset that anchor jumps clear it by, so
   every pill click would tuck its heading under the bar.

   So the space belongs to whatever precedes the nav. Two elements, two
   mechanisms, and the difference is not cosmetic:

   .ig-timing gets PADDING. It carries margin-top:-56px to climb onto the hero
   and it has no background, so padding is invisible here and cannot collapse
   into that negative margin.

   .ig-alert gets MARGIN. It is a filled band, so padding would put the gap
   inside the colour and leave the band visibly bottom-heavy. Margin is safe
   here for the very reason margin-top on the nav is not: the sticky constraint
   reads the sticky element's OWN margin-top, which is zero. This 32px collapses
   against that zero into 32px of flow space, and the bar still sticks flush.

   Only one side of each pair is declared, so there is nothing to collapse
   against and the arithmetic stays legible.

   This replaces `.ig-landing .ig-timing + * { display:block }`, which never did
   anything: the element it matched was the <nav>, already display:block. Its
   comment also had the mechanism wrong, since display:block does not stop
   margin collapsing (display:flow-root does), and there was no margin to
   collapse in the first place. */
.ig-landing .ig-timing {
    padding-bottom: var(--space-8);
}

.ig-landing .ig-alert {
    margin-bottom: var(--space-8);
}

/* First section after the sticky nav: the hero and the timing card already
   supply the top rhythm, so Flights starts on the tint, not on air.

   Unaffected by the alert, which is inserted BEFORE the nav: Flights is still
   `.ig-secnav + section`. Moving the alert below the nav would break this. */
.ig-landing .ig-secnav + section > .ig-section {
    padding-top: 72px;
}

@media (max-width: 960px) {
    .ig-landing .ig-timing {
        padding-bottom: var(--space-6);
    }

    .ig-landing .ig-alert {
        margin-bottom: var(--space-6);
    }

    .ig-landing .ig-secnav + section > .ig-section {
        padding-top: 48px;
    }
}
