/* ==========================================================
   SECTION LAYOUT — one rule for the spacing and width of every
   content section on every page. Loaded after all other CSS.

   Desktop: 6em (96px) top & bottom, content 1200px wide, centred
   Mobile:  2em (32px) top & bottom, 1em (16px) left & right

   Backgrounds still run edge to edge; only the content is held
   to 1200px (via the side padding below).
   Full-width banners/heroes, the home video, the photo slider and
   the "Thinking of a Tour?" banner are left out on purpose — see the :not(...) list.
   ========================================================== */
:root {
    --section-y: 96px;          /* 6em */
    --section-x: 16px;          /* 1em — minimum side gap */
    --content-width: 1200px;
}
@media (max-width: 768px) {
    :root { --section-y: 32px; } /* 2em */
}

body > :not(
    .site-header, .footer, script, .whatsapp-btn-container,
    [class^="header-section"], [class^="hero-section"], #kili,
    #video-container, .image-carousel-section, .action
) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: var(--section-y) max(var(--section-x), calc((100% - var(--content-width)) / 2));
}

/* First section on a page without a banner: clear the fixed header too */
.site-header + :not(
    [class^="header-section"], [class^="hero-section"], #kili,
    #video-container, .image-carousel-section, .action
) {
    padding-top: calc(var(--header-height) + var(--section-y));
}

/* Containers inside a section use the section's width and gaps — no extra side padding */
body > * .container,
body > * .container-fluid {
    width: auto;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Footer lines up with the same 1200px column */
.footer {
    padding-left: max(var(--section-x), calc((100% - var(--content-width)) / 2));
    padding-right: max(var(--section-x), calc((100% - var(--content-width)) / 2));
}

/* Tour / trek / day-trip pages: the two columns line up with the 1200px edges
   (keep the gap between them, drop the extra padding on the outside) */
.left-column  { padding-left: 0; }
.right-column { padding-right: 0; }
@media (max-width: 1024px) {          /* columns stack */
    .left-column,
    .right-column { padding-left: 0; padding-right: 0; }
}