/*
 * The cookbook page (cookbook-landing.html) and the eBook pages (ebook-detail.html), scoped .sp:
 * a few changes that bring them in line with the rest of the site, loaded after their own styles
 * (cookbook_landing_styles.css, ebook_detail_styles_v2.css), which keep each product's colours.
 *  - The top ends in the site's bowl curve (as ix_base.css .ix-forest), in place of the next
 *    section rising into it as an arch.
 *  - The FAQs are the site's (pages/_faq_section.html, pages.css), centred under a heading the
 *    size of the page's others.
 *  - The reviews are the app landing page's (reviews/_marquee.html, reviews.css), on each page's
 *    own colour: the cookbook's cream, the eBook's red or green.
 * A file of its own rather than edits to those two stylesheets, so each keeps only its product's
 * own rules (all three are linked with versioned_static).
 */

/* ---------- The top: the bowl ---------- */

.sp .match-sect-curved-top {
	padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
	border-radius: 0 0 50% 50% / 0 0 36px 36px;
}

.sp .curved-top {
	padding-top: clamp(2.5rem, 6vw, 3.5rem);   /* was 6rem, half of it hidden under the arch */
	clip-path: none;
	transform: none;
}

/* ---------- The FAQs ---------- */

.sp .pg-faq-section {
	padding-top: clamp(3rem, 7vw, 4.5rem);
}

.sp .pg-faq-section .pg-h2 {
	font-size: clamp(2rem, 5vw, 2.7rem);
	text-align: center;
}

/* ---------- The reviews: each page's colour ---------- */

/* #cookbook-reviews and #review-container keep their ids: these win over the old rules for them */
.sp .rv.sp-reviews {
	margin: 0;
	padding: clamp(4rem, 8vw, 6rem) 0 clamp(3.5rem, 7vw, 5rem);
	background: var(--rv-bg);
}

.sp .rv--light.sp-reviews {
	--rv-bg: #f2efea;   /* the cookbook page's cream (--cb-cream-light) */
}

/* The cookbook's readers on the app landing page's forest, with its glows (app_landing.css
   --al-canvas and --al-glows), as the app's testimonials are */
.sp .rv.sp-reviews--forest {
	--rv-bg:
		radial-gradient(85% 60% at 12% 0, rgba(114, 160, 106, .17), transparent 60%),
		radial-gradient(70% 55% at 92% 0, rgba(142, 181, 71, .11), transparent 62%),
		#1A2116;
}

.sp .rv.theme-red {
	--rv-bg: linear-gradient(180deg, #BA654D, #3A231B);   /* the eBook's own, as its reviews had */
}

.sp .rv.theme-green {
	--rv-bg: #1b2017;
}