/*
 * Section rhythm: one vertical spacing scale for the home page and the service
 * pages (template-services.php), loaded after the theme stylesheets
 * (inc/page-sections.php). It only overrides the margins/paddings that
 * separate sections; nothing inside the blocks changes.
 *
 *   --rhythm-gap   white space between two sections, measured from the last
 *                  visible element (text, image or card edge) to the next title,
 *                  and on the white side of a dark band
 *   --rhythm-band  padding inside a dark band (title / last element to the edge)
 *
 * Some values below are --rhythm-* minus a spacing the block already adds
 * itself (card margins, image whitespace…); each is noted next to it.
 */

:root {
	--rhythm-gap: 7rem;
	--rhythm-band: 6rem;
}

@media (min-width: 700px) {

	/* =========================================================================
	   Home page
	   ========================================================================= */

	/* "不仅仅是外贸建站" dark band: the caped astronaut already sits ~5rem below the text */
	.home section.slider {
		margin-top: calc(var(--rhythm-gap) - 2rem); /* + 2rem bottom padding of the "why choose us" card row */
		padding-top: var(--rhythm-band);
		padding-bottom: calc(var(--rhythm-band) - 5.25rem);
	}

	/* Cases band */
	.home section.casesgallery {
		margin-top: var(--rhythm-gap);
		margin-bottom: var(--rhythm-gap);
		padding-top: var(--rhythm-band);
		padding-bottom: var(--rhythm-band);
	}

	/* Video -> "网站建设流程" */
	.home section.howitworks {
		padding-top: var(--rhythm-gap);
	}

	/* "关于我们" dark band */
	.home section.aboutus div.skybackground h2 {
		margin-top: var(--rhythm-band);
	}

	/* Height follows the text instead of a fixed 850px (decorations are absolute and clipped) */
	.home section.aboutus .skybackground {
		height: auto;
		padding-bottom: var(--rhythm-band);
	}

	.home section.aboutus div.textcontainer {
		margin-bottom: 0;
	}

	/* Advantages cards -> blog */
	.home section.avantages ul {
		padding-top: var(--rhythm-gap);
	}

	.home section.avantages {
		margin-bottom: calc(var(--rhythm-gap) - 2rem); /* + 2rem bottom margin of each card */
	}

	/* Blog cards -> "了解更多知识" button: the button belongs to the cards
	   (was 8rem + 3rem below them). 2rem + 1rem card margin = 48px. */
	.home section.article {
		margin-bottom: 0;
	}

	.home section.load_article {
		padding-top: 2rem;
	}

	/* Blog -> footer banner */
	.home section.load_article {
		margin-bottom: var(--rhythm-gap);
	}

	/* =========================================================================
	   Service pages
	   ========================================================================= */

	/* Image + text blocks (the two built-in "Content" blocks and the page sections) */
	.page-template-template-services .content_description {
		padding-bottom: var(--rhythm-gap);
	}

	/* Dark tab panel after the first Content block */
	.page-template-template-services section.tabscontainer {
		margin-bottom: var(--rhythm-gap);
	}

	/* Page sections (inc/page-sections.php) */
	.page-template-template-services .ps-section,
	.page-template-template-services .ps-band {
		margin-bottom: var(--rhythm-gap);
	}

	.page-template-template-services .ps-band {
		padding-top: var(--rhythm-band);
		padding-bottom: var(--rhythm-band);
	}

	.page-template-template-services .ps-figures {
		margin-bottom: var(--rhythm-gap);
		padding-top: var(--rhythm-band);
		padding-bottom: var(--rhythm-band);
	}

	/* Pricing grid -> FAQ: the gap belongs to the block above, not to the FAQ title */
	.page-template-template-services section.service_pricing {
		margin-bottom: var(--rhythm-gap);
	}

	/* MG animation page: its pricing block adds its own space below the cards */
	.page-template-template-services section.mcpricing {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.page-template-template-services section.service_faq div.heading {
		margin-top: 0;
	}

	.page-template-template-services section.service_faq {
		margin-bottom: var(--rhythm-gap);
	}

	/* Related posts -> footer banner */
	.page-template-template-services section.article {
		margin-bottom: calc(var(--rhythm-gap) - 1rem); /* + 1rem bottom margin of each post card */
	}
}

/* =========================================================================
   Phones: same rules, tighter scale (offsets are those of style-mobile.css)
   ========================================================================= */
@media (max-width: 699px) {
	:root {
		--rhythm-gap: 3rem;
		--rhythm-band: 3rem;
	}

	/* Home */
	.home section.slider {
		padding-top: var(--rhythm-band);
		padding-bottom: var(--rhythm-band);
	}

	.home section.casesgallery {
		margin-top: var(--rhythm-gap);
		margin-bottom: var(--rhythm-gap);
		padding-top: var(--rhythm-band);
		padding-bottom: var(--rhythm-band);
	}

	.home section.video_ab {
		padding-bottom: var(--rhythm-gap);
	}

	.home section.howitworks .collaboration_steps {
		margin-bottom: var(--rhythm-gap);
	}

	.home section.aboutus {
		margin-bottom: 0;
	}

	.home section.aboutus div.skybackground h2 {
		margin-top: var(--rhythm-band);
	}

	.home section.aboutus .skybackground {
		height: auto;
		padding-bottom: var(--rhythm-band);
	}

	.home section.aboutus div.textcontainer {
		margin-bottom: 0;
	}

	/* On phones the advantages get a title (div.avantages_title, mobile only): the gap goes above it */
	.home .avantages_title {
		padding-top: var(--rhythm-gap);
	}

	.home section.avantages {
		margin-top: 0;
	}

	.home section.avantages ul {
		padding-top: 1.5rem;
	}

	/* Service pages */
	.page-template-template-services section.topservice {
		margin-bottom: -2rem; /* the icon card is pulled up 3rem into the hero but still takes its room below */
	}

	.page-template-template-services .content_description {
		padding-bottom: var(--rhythm-gap);
	}

	.page-template-template-services section.tabscontainer {
		margin-bottom: var(--rhythm-gap);
	}

	.page-template-template-services section.mcpricing {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	/* Stacked plan cards: the last one keeps no bottom margin */
	.page-template-template-services section.service_pricing ul.pricelist > li:last-child {
		margin-bottom: 0;
	}

	.page-template-template-services section.service_pricing {
		margin-bottom: var(--rhythm-gap);
	}

	.page-template-template-services section.service_faq div.heading {
		margin-top: 0;
	}

	.page-template-template-services section.service_faq {
		margin-bottom: var(--rhythm-gap);
	}

	.page-template-template-services section.article {
		margin-bottom: calc(var(--rhythm-gap) - 1rem); /* + 1rem bottom margin of each post card */
	}

	.page-template-template-services section.contactban {
		margin-top: 0;
	}
}