/* Project page rhythm (Figma "Size 1920", node 6741:9215).
   Breadcrumbs open the page under the 65px header, then the gallery, then the
   H1 block; every section after the hero is 140px apart. Section internals live
   in the per-section files next to this one.

   The mock puts the crumb bar at y=115 and the photo strip at y=235: 50px under
   the header, then 50px between the two. <main> already starts 10px below the
   header, so 40px of padding lands the first row on 115. */

.gst-project-main {
    padding-top: 40px;
}

.gst-project-article > div,
.gst-project-article > section {
    margin-top: 140px;
}

/* the crumb bar is the first row now, so it takes the padding above and no
   margin of its own */
.gst-project-article > .single-project-section-2 {
    margin-top: 0;
}

.gst-project-article > .single-project-section-1 {
    margin-top: 50px;
}

.gst-project-article > .single-project-section-3,
.gst-project-article > .single-project-section-4,
.gst-project-article > .single-project-section-6 {
    margin-top: 50px;
}

.gst-project-article > div:last-child,
.gst-project-article > section:last-child {
    margin-bottom: 140px;
}

@media (max-width: 1470px) {
    .gst-project-article > div,
.gst-project-article > section {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* the strip keeps the left gutter and bleeds off the right */
    .gst-project-article > .single-project-section-1 {
        padding-left: 20px;
        padding-right: 0;
    }
}

/* The two carousel sections run edge to edge. Phones keep what they have:
   their tracks are centred and carry their own gutter. */
@media (min-width: 768px) and (max-width: 1470px) {
    .gst-project-article > .single-project-section-results,
    .gst-project-article > .single-project-section-7-1 {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 991px) {
    .gst-project-main {
        padding-top: 40px;
    }

    .gst-project-article > div,
.gst-project-article > section {
        margin-top: 70px;
    }

    .gst-project-article > div:last-child,
.gst-project-article > section:last-child {
        margin-bottom: 70px;
    }

    .gst-project-article > .single-project-section-2,
    .gst-project-article > .single-project-section-3,
    .gst-project-article > .single-project-section-4,
    .gst-project-article > .single-project-section-6 {
        margin-top: 30px;
    }
}

/* On phones the crumb row owns its spacing and nothing else contributes: the
   wrapper's 40px, the 30px this row inherits with sections 3/4/6, and the
   gallery's 50px used to stack around it, so the crumbs sat 92px under the
   header and 62px above the photo strip. The 20px above and below now comes
   from the row's own padding in breadcrumbs.css. */
@media (max-width: 767px) {
    .gst-project-main {
        padding-top: 0;
    }

    .gst-project-article > .single-project-section-2,
    .gst-project-article > .single-project-section-1 {
        margin-top: 0;
    }

    /* Wider screens let the strip run off the right edge on purpose, which is
       why it carries 20px on the left and nothing on the right. A phone shows
       one photo at a time, so there is nothing to run off to: the strip takes an
       even 10px gutter and the photo sits centred between them. The slide's own
       fixed width is dropped to match in gallery-strip.css. */
    .gst-project-article > .single-project-section-1 {
        padding-left: 10px;
        padding-right: 10px;
    }
}