/* ===================================
   Section scroll snapping
   ===================================

   "Never see half of one section and half of another." The CSS feature is
   Scroll Snap; done section-by-section at viewport height it is usually
   called full-page or one-page scrolling (fullPage.js is the library that
   popularised it). No library needed - this is native CSS now.

   MANDATORY, not proximity.

   `proximity` was tried first and is too soft here: a gesture that ended 216px
   short of the hero/gallery boundary simply stayed there, resting with the
   bottom of the hero and the top of the gallery both on screen - the exact
   thing this is meant to prevent. Chrome's proximity threshold is small, so it
   only engages once you are nearly on the boundary anyway.

   Two objections to `mandatory` were checked and neither holds:

     - It does not trap you inside sections taller than the viewport, which
       matters because the cover grid measures 2339px and About 1878px against
       a ~900px viewport. Where a snap area is larger than the snapport the
       spec relaxes the requirement and Chrome honours it: a scroll into the
       middle of the cover grid rested at 700px and carried on normally.

     - It does not break the anchor nav. Clicks on "Acerca de Mi" and
       "Contactame" both land on their sections with mandatory active.

   The honest limit is that same relaxation: snap only bites hard where a
   section is about viewport height. The hero is (100dvh) so its boundary
   snaps crisply; between two sections that are each several screens tall
   there is little for the browser to snap to. Making the guarantee hold
   everywhere means giving every section its own viewport and paging the cover
   grid - a layout decision worth taking deliberately, not a keyword change.
====================================== */

html {
    scroll-snap-type: y mandatory;
    /* The nav's own smooth scroll is a jQuery animation on scrollTop (script.js);
       this makes ordinary anchor jumps and keyboard paging ease as well, so the
       snap has something to settle out of rather than arriving instantly. */
    scroll-behavior: smooth;
}

#banner,
#portfolio,
#about-us,
#contact {
    scroll-snap-align: start;
    /* Never let a snap skip a section outright when someone flicks hard. */
    scroll-snap-stop: normal;
}

/* The header floats over the top of whatever is snapped into place, so a
   section snapped to `start` would tuck its first line under the bar once the
   sticky state kicks in. This is the bar's height plus its padding. */
#portfolio,
#about-us,
#contact {
    scroll-margin-top: 0;
}

/* Someone who has asked for reduced motion has asked not to be moved around;
   snapping is exactly that, and smooth scrolling doubly so. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }
}

/* Off on very short viewports only - a landscape phone, or a heavily chromed
   window - where a section cannot fill the screen in any useful way.

   The height cut-off is deliberately low. An earlier draft used 700px, which
   sounds harmless until you notice a 1366x768 laptop has about a 660px
   viewport: that would have quietly switched the feature off for a large
   share of ordinary desktop users. 520px only catches genuinely tiny ones.

   There used to be a `max-width: 767px` clause here as well, which switched
   snapping off on every phone. Its reason was that About was content-driven
   and ran to about a screen and a half on a phone, so there was nothing for
   the snap to settle onto and it mostly got in the way. That stopped being
   true when About was rebuilt to fill exactly one viewport on small screens
   (larger-about-me.css): hero, About and Contact are now all 100dvh at every
   width, so a phone has the same three clean snap targets a desktop does and
   the clause was disabling a feature that had started working.

   The cover grid is still several screens tall on a phone. That is fine and is
   the same behaviour as on desktop - a snap area larger than the snapport does
   not trap the reader inside it, it just scrolls normally until the next
   boundary comes into range. */
@media (max-height: 520px) {
    html {
        scroll-snap-type: none;
    }
}

/* ===================================
   Section heights

   Snapping only reads cleanly if the section being snapped to actually fills
   the screen. Contact was ~600px tall, so landing on it still left the bottom
   of About showing above; About is tall enough already, but centring its
   content keeps it clear of the floating header.

   min-height rather than height: About's content is taller than the viewport
   on narrow windows and must be free to grow. The vh line is the fallback for
   browsers without dvh - dvh keeps mobile browser chrome from clipping.

   #portfolio joins the two for the same reason, on the opposite problem: the
   cover grid is usually several screens tall (see the note above, ~2339px),
   but on a tall narrow viewport - a phone in portrait, mostly - four covers in
   two columns can be shorter than the screen. Without a floor the section then
   sat at its content height with About's photo already visible underneath it,
   which is the exact "half of one section, half of the next" scroll-snap is
   meant to prevent. min-height keeps it a full screen when content is short
   and lets it grow past that when the grid is tall, same as About. */

#portfolio,
#about-us,
.contact-us {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
}

/* All three sections' inner blocks are the flex item now, so they need to
   claim the full width they previously had as block children. */
#portfolio > .gallery-covers,
#about-us > .container,
.contact-us > .contact-block {
    width: 100%;
}