/* =========================================================
   Feeding Expert 101 – stage pages (/feeding/<stage>/)
   Builds on fe101-feeding.css (hero, topic buttons, article cards, Load More) and fe101-faq.css (FAQs).
   Desktop (≥1200): Figma 1920 sizes × --u (= viewport ÷ 1920, max 1px), like the Feeding page.
   Tablet 768–1199 and phone ≤767: fixed sizes from the 390 design.
   ========================================================= */
.fe-sp-main { display: block; width: 100%; max-width: none; margin: 0; padding: 0; overflow-x: clip; }
.fe-sp {
	--fe-green: #7aba78; --fe-cream: #faf3e1; --fe-ink: #000000; --fe-text: #222222;
	--u: 0.5px;
	position: relative; font-family: "Mulish", sans-serif; color: var(--fe-text);
}
.fe-sp *, .fe-sp-explore * { box-sizing: border-box; }
.fe-sp a { text-decoration: none; }
.fe-sp__wrap { width: 100%; max-width: 1920px; margin: 0 auto; }
.fe-sp-note { max-width: 900px; margin: 24px auto; padding: 14px 18px; border: 1px dashed #c9a400; border-radius: 10px; background: #fffbe6; font: 14px/1.5 "Mulish", sans-serif; color: #5c4a00; }

/* the design's cream is a touch warmer than the Feeding page's */
.fe-sp-art, .fe-sp-explore { background: #faf3e1; }

/* ---------------------------------------------------------
   Hero (on top of the Feeding page hero): pill above the heading, larger blob
   --------------------------------------------------------- */
.fe-sp-pill {
	display: inline-flex; align-items: center; align-self: flex-start; margin: 0; border-radius: 999px; background: #fcf5bf;
	font-family: "Catamaran", sans-serif; font-weight: 600; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: #111111;
}

/* ---------------------------------------------------------
   Start with the essentials
   --------------------------------------------------------- */
.fe-sp-ess { background: #ffffff; }
.fe-sp-ess__grid { display: grid; align-items: start; }
.fe-sp-ess.is-no-photos .fe-sp-ess__grid { grid-template-columns: minmax(0, 1fr) !important; max-width: 1100px; }
.fe-sp-ess__photos { position: relative; }
.fe-sp-ess__big { width: 91.5%; aspect-ratio: 663 / 562; overflow: hidden; }
.fe-sp-ess__photos:not(.has-small) .fe-sp-ess__big { width: 100%; }
/* small photo: ONE clipped shape (rounded, slanted top); the white border is drawn around that shape with
   drop-shadows on the wrapper, so border and photo always line up at every screen size */
.fe-sp-ess__small {
	--b: 7px;
	position: absolute; right: 0; bottom: 0; width: 49%; aspect-ratio: 355 / 298;
	filter: drop-shadow(var(--b) 0 0 #fff) drop-shadow(calc(var(--b) * -1) 0 0 #fff) drop-shadow(0 var(--b) 0 #fff) drop-shadow(0 calc(var(--b) * -1) 0 #fff);
}
.fe-sp-ess__small-in { position: absolute; inset: 0; overflow: hidden; clip-path: url(#fe-sp-slant); }
.fe-sp-ess__photos img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }

.fe-sp-ess__title { margin: 0; font-family: "Catamaran", sans-serif; font-weight: 700; line-height: 1.1; color: var(--fe-ink); }
.fe-sp-ess__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #dcdcdc; }
.fe-sp-ess__item { margin: 0; border-bottom: 1px solid #dcdcdc; }
.fe-sp-ess__link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; color: inherit; }
a.fe-sp-ess__link:hover .fe-sp-ess__item-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.fe-sp-ess__link:focus-visible { outline: 3px solid var(--fe-green); outline-offset: 4px; border-radius: 6px; }
.fe-sp-ess__num {
	align-self: start; display: grid; place-items: center; border-radius: 50%;
	font-family: "Catamaran", sans-serif; font-weight: 700; line-height: 1; color: #000000;
}
.fe-sp-ess__num--green { background: #aaebb5; }
.fe-sp-ess__num--orange { background: #ffa159; }
.fe-sp-ess__num--yellow { background: #fcf5bf; }
.fe-sp-ess__num--purple { background: #e4dcfd; }
.fe-sp-ess__text { display: grid; min-width: 0; }
.fe-sp-ess__item-title { font-family: "Catamaran", sans-serif; font-weight: 600; line-height: 1.2; color: #111111; }
.fe-sp-ess__item-desc { font-family: "Mulish", sans-serif; color: #222222; }
.fe-sp-arrow {
	flex: 0 0 auto; border: 1.5px solid #000000; border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 50% 50%;
	transition: transform 0.25s ease, background-color 0.25s ease;
}
a.fe-sp-ess__link:hover .fe-sp-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------
   Explore another stage (same cream band as the articles, white line between)
   --------------------------------------------------------- */
.fe-sp-explore__list { display: flex; flex-wrap: wrap; justify-content: center; }
.fe-sp-explore .fe-sp-explore__btn { justify-content: center; }
.fe-sp-explore.is-after-articles::before { content: ""; display: block; height: 2px; background: #ffffff; }

/* ---------------------------------------------------------
   FAQs: one category = a plain list (no tab bar)
   --------------------------------------------------------- */
.fe-sp-faq.is-single .fe101-faq__tabs { display: none; }

/* ---------------------------------------------------------
   Desktop ≥1200: the 1920 design, scaled
   --------------------------------------------------------- */
@media (min-width: 1200px) {
	.fe-sp, .fe-sp-hero, .fe-sp-art, .fe-sp-explore, .fe-sp-faq { --u: min(1px, calc(100vw / 1920)); }

	/* hero: blob 810 × 578 from x = 40; text from x = 184 */
	.fe-sp-hero .fe-fhero__inner { padding: calc(30 * var(--u)) calc(100 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)); }
	.fe-sp-hero .fe-fhero__copy { width: calc(810 * var(--u)); min-height: calc(578 * var(--u)); padding: calc(40 * var(--u)) calc(150 * var(--u)) calc(30 * var(--u)) calc(144 * var(--u)); }
	.fe-sp-hero .fe-fhero__text { max-width: calc(500 * var(--u)); margin-top: calc(26 * var(--u)); line-height: 1.82; }
	.fe-sp-pill { min-height: calc(50 * var(--u)); margin-bottom: calc(16 * var(--u)); padding: calc(4 * var(--u)) calc(28 * var(--u)) 0; font-size: max(13px, calc(22 * var(--u))); }

	/* essentials: photos 725 wide, text column from x = 906 */
	.fe-sp-ess { padding: calc(108 * var(--u)) calc(100 * var(--u)) calc(108 * var(--u)); }
	.fe-sp-ess__grid { grid-template-columns: calc(725 * var(--u)) minmax(0, 1fr); column-gap: calc(81 * var(--u)); }
	.fe-sp-ess__photos.has-small { padding-bottom: 5.5%; }
	.fe-sp-ess__big { border-radius: calc(30 * var(--u)); }
	.fe-sp-ess__body { padding-top: calc(30 * var(--u)); }
	.fe-sp-ess__title { margin-bottom: calc(34 * var(--u)); font-size: calc(56 * var(--u)); }
	.fe-sp-ess__link { column-gap: calc(38 * var(--u)); padding: calc(40 * var(--u)) 0 calc(48 * var(--u)); }
	.fe-sp-ess__num { width: calc(58 * var(--u)); height: calc(58 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(30 * var(--u)); }
	.fe-sp-ess__item-title { max-width: calc(650 * var(--u)); font-size: max(20px, calc(34 * var(--u))); }
	.fe-sp-ess__item-desc { max-width: calc(640 * var(--u)); margin-top: calc(16 * var(--u)); font-size: max(14px, calc(17 * var(--u))); line-height: 1.6; }
	.fe-sp-arrow { width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin-left: calc(20 * var(--u)); }

	/* articles: the Feeding page's latest-articles look; the white line + explore follow */
	.fe-sp-art { padding-bottom: calc(50 * var(--u)); }
	.fe-sp-art .fe-fsec__head { margin-bottom: calc(40 * var(--u)); }
	.fe-sp-art .fe-chips { margin-top: 0; }
	.fe-sp-explore { padding: 0 calc(100 * var(--u)) calc(78 * var(--u)); }
	.fe-sp-explore:not(.is-after-articles) { padding-top: calc(80 * var(--u)); }
	.fe-sp-explore.is-after-articles::before { margin-bottom: calc(56 * var(--u)); }
	.fe-sp-explore .fe-fsec__head { margin-bottom: calc(44 * var(--u)); }
	.fe-sp-explore__list { gap: calc(14 * var(--u)) calc(16 * var(--u)); }
	.fe-sp-explore .fe-sp-explore__btn { min-width: calc(175 * var(--u)); }

	.fe-sp-faq { padding-top: calc(104 * var(--u)); }
	.fe-sp-faq .fe-fsec__head { margin-bottom: calc(26 * var(--u)); }
	.fe-sp-faq .fe101-faq.fe101-faq--v2 { max-width: calc(1420 * var(--u)); }
	/* the stage design's FAQ text is smaller than the homepage FAQ's */
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__panel { border-radius: calc(44 * var(--u)); }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__item { padding: calc(20 * var(--u)) calc(32 * var(--u)) calc(20 * var(--u)) calc(51 * var(--u)); }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__item:last-child { padding-bottom: calc(26 * var(--u)); }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__item--open:first-child { padding: calc(36 * var(--u)) calc(32 * var(--u)) calc(34 * var(--u)) calc(51 * var(--u)); border-radius: calc(44 * var(--u)); }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__item--open:first-child + .fe101-faq__item { padding-top: calc(40 * var(--u)); }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__question { font-size: max(16px, calc(20 * var(--u))) !important; }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__item--open .fe101-faq__question { font-size: max(17px, calc(22 * var(--u))) !important; color: #111111 !important; }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__icon { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__answer-inner { font-size: max(14px, calc(17 * var(--u))); line-height: 1.75; }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__item--open:first-child .fe101-faq__answer-inner { max-width: calc(1160 * var(--u)); padding-top: calc(16 * var(--u)); }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__video { margin-top: calc(22 * var(--u)); }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__video-btn { height: calc(38 * var(--u)); min-height: calc(38 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(22 * var(--u)) !important; font-size: max(13px, calc(15 * var(--u))) !important; }
	.fe-sp-faq .fe101-faq--v2 .fe101-faq__video-icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
}

/* ---------------------------------------------------------
   Tablet 768–1199
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
	.fe-sp-hero .fe-fhero__copy { max-width: 600px; padding: 56px 64px 56px 72px; }
	.fe-sp-pill { min-height: 36px; margin-bottom: 14px; padding: 3px 20px 0; font-size: 15px; }

	.fe-sp-ess { padding: 72px 32px; }
	.fe-sp-ess__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); column-gap: 44px; }
	.fe-sp-ess__photos.has-small { padding-bottom: 5.5%; }
	.fe-sp-ess__big { border-radius: 22px; }
	.fe-sp-ess__title { margin-bottom: 24px; font-size: 38px; }
	.fe-sp-ess__link { column-gap: 20px; padding: 26px 0 30px; }
	.fe-sp-ess__num { width: 44px; height: 44px; font-size: 22px; }
	.fe-sp-ess__item-title { font-size: 22px; }
	.fe-sp-ess__item-desc { margin-top: 10px; font-size: 15px; line-height: 1.55; }
	.fe-sp-arrow { width: 38px; height: 38px; margin-left: 12px; }

	.fe-sp-art { padding-bottom: 44px; }
	.fe-sp-art .fe-chips { margin-top: 0; }
	.fe-sp-explore { padding: 0 24px 64px; }
	.fe-sp-explore:not(.is-after-articles) { padding-top: 64px; }
	.fe-sp-explore.is-after-articles::before { margin-bottom: 48px; }
	.fe-sp-explore .fe-fsec__head { margin-bottom: 28px; }
	.fe-sp-explore__list { gap: 12px; }
	.fe-sp-explore .fe-sp-explore__btn { min-width: 150px; }

	.fe-sp-faq .fe-fsec__head { margin-bottom: 24px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.fe-sp-ess__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; max-width: 640px; margin: 0 auto; }
	.fe-sp-ess__title { text-align: center; }
}

/* ---------------------------------------------------------
   Phone ≤767 (390 design)
   --------------------------------------------------------- */
@media (max-width: 767px) {
	/* hero: photo on top, peach panel */
	.fe-sp-hero.fe-fhero { background: #fae7d6; }
	.fe-sp-hero .fe-fhero__inner { padding: 22px 17px 26px; }
	.fe-sp-pill { min-height: 30px; margin-bottom: 12px; padding: 2px 17px 0; font-size: 11.5px; }
	.fe-sp-hero .fe-fhero__title { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.1; }
	.fe-sp-hero .fe-fhero__text { margin-top: 8px; font-size: 12.5px; line-height: 1.32; }

	/* essentials: photos, then the heading and list */
	.fe-sp-ess { padding: 35px 20px 42px; }
	.fe-sp-ess__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.fe-sp-ess__photos.has-small { padding-bottom: 11%; }
	.fe-sp-ess__big { width: 92.5%; border-radius: 14px; }
	.fe-sp-ess__small { width: 49.7%; aspect-ratio: 172 / 135; }
	.fe-sp-ess__small { --b: 4px; }
	.fe-sp-ess__title { margin-bottom: 24px; font-size: clamp(26px, 7.7vw, 31px); text-align: center; }
	.fe-sp-ess__list { border-bottom: 0; }
	.fe-sp-ess__item:last-child { border-bottom: 0; }
	.fe-sp-ess__link { grid-template-columns: 33px minmax(0, 1fr); column-gap: 19px; padding: 22px 0 34px; }
	.fe-sp-ess__num { width: 33px; height: 33px; margin-top: 1px; font-size: 17px; }
	.fe-sp-ess__item-title { font-size: 19px; line-height: 1.22; }
	.fe-sp-ess__item-desc { margin-top: 6px; font-size: 12.5px; line-height: 1.38; }
	.fe-sp-arrow { grid-column: 2; justify-self: end; width: 31px; height: 31px; margin: 12px 4px 0 0; border-width: 1.2px; }

	/* articles: swipe row (next cards load by themselves, so no button) */
	.fe-sp-art { padding: 38px 0 24px; }
	.fe-sp-art .fe-fsec__head { margin-bottom: 18px; }
	.fe-sp-art .fe-fsec__title { font-size: clamp(26px, 7.2vw, 30px); }
	.fe-sp-art .fe-fsec__text { margin-top: 4px; font-size: 12.5px; }
	.fe-sp-art .fe-chips, .fe-sp-explore__list { gap: 8px 10px; margin: 0 20px 18px; }
	.fe-sp-art .fe-chip, .fe-sp-explore .fe-sp-explore__btn { min-height: 25px; padding: 1px 16px 0; font-size: 11.5px; font-weight: 700; }
	.fe-sp-art .fe-cards { grid-auto-columns: 70.5%; gap: 22px; padding: 0 20px 6px; scroll-padding: 0 20px; }
	.fe-sp-art .fe-fsec__more { margin-top: 22px; padding: 0 20px; }
	.fe-sp-art .fe-sp-viewall { min-width: 157px; min-height: 46px; padding: 10px 26px; font-size: 15px; font-weight: 600; }
	.fe-sp-art .fe-card__more { display: none; } /* no "Read More" button on the cards in the design */

	.fe-sp-explore { padding: 0 0 40px; }
	.fe-sp-explore:not(.is-after-articles) { padding-top: 40px; }
	.fe-sp-explore.is-after-articles::before { height: 1px; margin-bottom: 36px; }
	.fe-sp-explore .fe-fsec__head { margin-bottom: 16px; padding: 0 16px; }
	.fe-sp-explore .fe-fsec__title { font-size: clamp(24px, 6.7vw, 28px); }
	.fe-sp-explore__list { margin-bottom: 0; }
	.fe-sp-explore .fe-sp-explore__btn { min-width: 95px; }

	.fe-sp-faq { padding: 48px 20px 56px; }
	.fe-sp-faq .fe-fsec__head { margin-bottom: 18px; }
	.fe-sp-faq .fe-fsec__title { font-size: clamp(24px, 6.7vw, 28px); }
}

@media (prefers-reduced-motion: reduce) {
	.fe-sp-arrow { transition: none !important; }
}