/*
 * Final shared spacing layer. A major module owns the one 200px space before it;
 * its predecessor owns no bottom space. Card grids, heading-to-card distances,
 * prose and the first page heading/hero remain local component layout.
 * Desktop modules use 200px; compact layouts use the mobile token below.
 */
:root { --jvds-section-gap: 200px; }

/* Homepage: retain the approved sequence and exactly one existing 200px gap. */
body.jvds-home-framed .main > :is(#home-second-screen, .home-client-needs, .home-ai, #services.row-serve, .jvds-testimonial-hanger, .home-partners, #home-blog),
body[class*="-framed"] section.jvds-growth:not(.jvds-growth-hero),
body[class*="-framed"] section.jvds-testimonial-hanger,
body[class*="-framed"] section.home-partners,
body[class*="-framed"] section.row-about-faq,
/* Outrank the legacy four-class service FAQ mobile reset without !important. */
body[class*="-framed"] .service-main > section.row-about-faq.home-faq.service-faq,
body[class*="-framed"] .service-main > :is(.service-section, .service-process, .service-data-section) {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--jvds-section-gap);
  padding-bottom: 0;
}

/* Container-only historical padding must not add another space to the module. */
body.jvds-home-framed .main > :is(.home-ai, #services, .home-partners) > .wp3,
body[class*="-framed"] section.jvds-testimonial-hanger > .wp3,
body[class*="-framed"] section.home-partners > .wp3,
body[class*="-framed"] .service-main > .service-data-section > .wp3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
body[class*="-framed"] section.jvds-growth-hero {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Studio: intro/media, capability group, metrics, feedback, logos and FAQ. */
body.jvds-about-framed .row-about01,
body.jvds-about-framed .row-about01 .m-about01,
body.jvds-about-framed .row-about01 .m-about02 {
  margin-bottom: 0;
  padding-bottom: 0;
}
body.jvds-about-framed .row-about01 > .wp2.wp3,
body.jvds-about-framed .main > .row-about03.wp3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--jvds-section-gap);
  padding-bottom: 0;
}

/* Contact: intro/contact cards form one group; form and globe are later modules. */
body.jvds-contact-framed .row-contact-page,
body.jvds-contact-framed .row-contact-page > .m-contact,
body.jvds-contact-framed .row-contact-page .ul-iconb1,
body.jvds-contact-framed .row-contact-page .m-infob2 {
  margin-bottom: 0;
  padding-bottom: 0;
}
body.jvds-contact-framed .row-contact-page .m-contact-map {
  margin-bottom: 0;
}
body.jvds-contact-framed .row-contact-page > :is(.row-x2, .row-contact) {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--jvds-section-gap);
  padding-bottom: 0;
}
/* The form is a closer follow-up to the contact cards, across all breakpoints. */
body.jvds-contact-framed .row-contact-page > .row-x2 {
  padding-top: 100px;
}

/* Listings: page headings and their first gallery stay one opening module. */
body.jvds-works-framed .main > .row-work-page,
body.jvds-news-framed .main > .row-news-page {
  margin-bottom: 0;
  padding-bottom: 0;
}
body.jvds-works-framed .row-work-page .products-list-1,
body.jvds-works-framed .row-work-page .jvds-works-pagination {
  margin-bottom: 0;
}
/* Featured gallery and the complete archive are separate modules. */
body.jvds-news-framed .row-news-page .news-featured {
  margin-bottom: 0;
}
body.jvds-news-framed .row-news-page .news-featured-wrap + .wp3 > .news-all-list {
  padding-top: 120px;
}
body.jvds-news-framed .news-all-sections > .news-all-section {
  margin-bottom: 0;
}
body.jvds-news-framed .news-all-sections > .news-all-section + .news-all-section {
  margin-top: var(--jvds-section-gap);
}

/* Case detail: separate the cover, project information, artwork and related work. */
body.jvds-work-detail-framed .main > .m-work-detail,
body.jvds-work-detail-framed .main > .row-work-more {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--jvds-section-gap);
  padding-bottom: 0;
}
/* Keep the project introduction close to its cover and artwork, including dialogs. */
body.jvds-work-detail-framed .main > .m-work-detail {
  padding-top: 60px;
}
body.jvds-work-detail-framed .m-work-detail .top {
  margin-bottom: 60px;
}

/* Article/Privacy page shells only; never space editor-authored prose blocks. */
body.jvds-article-framed .main > .news-detail-hero,
body.jvds-article-framed .main > .news-detail-wrap,
body.jvds-article-framed .main > .news-related {
  margin-bottom: 0;
}
body.jvds-article-framed .main > .news-detail-wrap {
  margin-top: 60px;
}
body.jvds-article-framed .main > .news-related {
  margin-top: var(--jvds-section-gap);
}
body.jvds-privacy-framed .privacy-page > .privacy-hero {
  margin-bottom: 0;
  padding-bottom: 0;
}
body.jvds-privacy-framed .privacy-page > .privacy-layout-section {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--jvds-section-gap);
  padding-bottom: var(--jvds-section-gap);
}

/* CTA background stays full-width; its leading content inset carries the gap. */
body[class*="-framed"] .service-cta.site-cta,
body.jvds-home-framed .home-site-cta-wrap > .service-cta.site-cta {
  margin-top: 0;
  padding-top: var(--jvds-section-gap);
}

/* Match the site's existing mobile breakpoint; heading/card spacing stays local. */
@media (max-width: 800px) {
  :root { --jvds-section-gap: 120px; }
  body.page-index.jvds-home-framed { --home-section-gap: var(--jvds-section-gap); }

  /* These opening content modules sit closer to their preceding hero. */
  body.jvds-home-framed .main > #home-second-screen.row-a1,
  body[class*="-framed"] .service-main > .service-section {
    padding-top: 80px;
  }

  /* The Studio-specific sibling rule otherwise retains a hardcoded 200px. */
  body.jvds-about-framed .main > .about-partners + .row-about-faq {
    padding-top: var(--jvds-section-gap);
  }
}