/* ===========================================================================
   sections-snap.css  —  ALL SCREENS (phone, tablet, laptop, desktop, ultra-wide)

   Four sections are each exactly ONE screen tall, measured BELOW the fixed navbar:
     • About MADDS            (.about-section)
     • Idea behind MADDS      (.main-parallax)
     • WHAT WE SPECIALISE IN  (.madds-specialisation)
     • Managed IT services    (.managed)

   Section height = viewport height − navbar height. The navbar height is measured by
   header-glass.js and published as --hdr-compact (64px fallback), so nothing is hard-coded.
   Content is centred vertically with equal padding above and below it.

   `min-height` (never a fixed height) is used on small / short screens, so if the content
   is genuinely taller than one screen the section grows instead of clipping anything.
   (sections-snap.js lets the page scroll normally through such a tall section, then
   snaps on to the next one.)

   Scrolling is completely NORMAL (no script, no jumping). The browser only gently settles a
   section into view (CSS scroll-snap "proximity") when you stop scrolling close to it, so a
   section never rests half-hidden under the navbar. OUR COMPLIANCE (.madds-trusted) is NOT
   touched by this file: it keeps its original height and padding from style.css.

   Loaded LAST in layout/base.html so it wins over style.css / mobile-fixes.css.
   =========================================================================== */

/* gentle settle: proximity = only snaps when you stop near a section's top, never forces a
   jump and never blocks normal scrolling through a section taller than the screen.
   (the navbar offset comes from `html { scroll-padding-top: var(--hdr-compact) }` in
   header-glass.css) */
html {
    scroll-snap-type: y proximity;
}

.about-section,
.main-parallax,
.madds-specialisation,
.customized,
.managed.managed-arc {
    scroll-snap-align: start;
}

:root {
    --snap-nav: var(--hdr-compact, 64px);
    --snap-h: calc(100vh - var(--snap-nav));
    --snap-h: calc(100svh - var(--snap-nav));
    --snap-pad: clamp(1rem, 3.2vh, 2.75rem);   /* breathing room above / below the content */
}

/* ---------- shared: one screen under the navbar, anchor links stop under it --- */
.about-section,
.main-parallax,
.madds-specialisation,
.managed.managed-arc {
    box-sizing: border-box;
    min-height: var(--snap-h) !important;
    /* NO scroll-margin-top here: html already has scroll-padding-top = navbar height
       (header-glass.css). Having both doubled the offset and made sections rest too low. */
}

/* ---------- About MADDS ---------------------------------------------------------
   about-glass.css already makes it a full-height flex panel; just make sure the
   panel's own padding (not the section) provides the top / bottom breathing room. */
.about-section .ag-panel__inner {
    padding-top: var(--snap-pad);
    padding-bottom: var(--snap-pad);
    box-sizing: border-box;
}

/* ---------- Idea behind MADDS --------------------------------------------------- */
.main-parallax {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;              /* the old navbar-clearance padding is not needed:
                                           the section now STARTS under the navbar */
}

/* tablet + laptop + desktop: tabs / rail layout fills the exact one-screen box */
@media (min-width: 769px) {
    .main-parallax {
        height: var(--snap-h) !important;
        align-items: stretch;
    }

    .main-parallax .wrapper {
        padding-top: var(--snap-pad);
        padding-bottom: var(--snap-pad);
    }
}

/* phone: card + dots stack, so the section is centred and may grow if needed */
@media (max-width: 768px) {
    .main-parallax {
        height: auto !important;
        padding: var(--snap-pad) 0 !important;
    }

    .main-parallax .wrapper {
        flex: 1 1 100%;
    }
}

/* ---------- WHAT WE SPECIALISE IN ---------------------------------------------- */
.madds-specialisation {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: var(--snap-pad) 0 !important;
    overflow-x: clip;
    overflow-y: visible;
}

.madds-specialisation__inner {
    flex: 0 1 auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* laptops / short desktop screens: trim the tall parts so everything fits one screen */
@media (min-width: 769px) and (max-height: 860px) {
    .madds-specialisation__item {
        height: auto !important;
        min-height: 0 !important;
        padding-top: clamp(.5rem, 1.6vh, .85rem) !important;
        padding-bottom: clamp(.5rem, 1.6vh, .85rem) !important;
    }

    .madds-specialisation__preview-media {
        height: clamp(200px, 38vh, 380px) !important;
        min-height: 0 !important;
    }

    .madds-specialisation__inner {
        gap: clamp(.9rem, 2.4vh, 1.5rem) !important;
    }
}

/* ---------- Managed IT services -------------------------------------------------
   managed-arc.css already centres its content in a flex column; only the padding is
   unified here so it matches the other sections. */
.managed.managed-arc {
    padding-top: var(--snap-pad);
    padding-bottom: var(--snap-pad);
}