/* =========================================================
   Feeding Expert 101 – Feeding page (/feeding/)
   Desktop (≥1200): every size is the Figma 1920 value × --u (= viewport ÷ 1920, max 1px),
   so the page is the design scaled to the screen; small text keeps a readable minimum.
   Tablet 768–1199: stacked hero, 2 card columns. Mobile ≤767: photo on top, swipe rows.
   Headings Catamaran, text Mulish (site fonts).
   ========================================================= */
.fe-fhero, .fe-fsec {
	--fe-green: #7aba78; --fe-yellow: #faf4bc; --fe-cream: #faf3e4; --fe-peach: #fce7d9;
	--fe-ink: #000000; --fe-text: #222222; --fe-muted: #6b6b6b;
	--u: 0.5px; /* tablet/mobile fallback; desktop sets it from the viewport */
}
.fe-fhero *, .fe-fsec * { box-sizing: border-box; }
.fe-fhero a, .fe-fsec a { text-decoration: none; }
.fe-fsec [hidden] { display: none !important; }

/* ---------------------------------------------------------
   Shared look (all screens)
   --------------------------------------------------------- */
/* hero */
.fe-fhero { position: relative; overflow: hidden; background: #f2eee6; }
.fe-fhero__media { position: absolute; inset: 0; z-index: 0; }
/* .fe-fhero prefix: Elementor's ".elementor img { height: auto }" would otherwise win */
.fe-fhero__media picture { display: block; width: 100%; height: 100%; }
.fe-fhero .fe-fhero__img { display: block; width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: center center; }
.fe-fhero__inner { position: relative; z-index: 1; width: 100%; margin: 0 auto; }
.fe-fhero__copy { position: relative; display: flex; flex-direction: column; justify-content: center; }
/* the design's blob (cream, 75% opaque) behind the heading */
.fe-fhero__copy::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("fe101-hero-blob.png") no-repeat center / 100% 100%;
}
.fe-fhero__title { margin: 0; font-family: "Catamaran", sans-serif; font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--fe-ink); }
.fe-fhero__text { font-family: "Mulish", sans-serif; color: var(--fe-text); }

/* stage cards */
.fe-stages { display: grid; flex: 0 0 auto; }
.fe-stage {
	position: relative; display: grid; align-items: center; background: #ffffff; color: var(--fe-ink);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.fe-stage:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12); color: var(--fe-ink); }
.fe-stage:focus-visible { outline: 3px solid var(--fe-green); outline-offset: 3px; }
.fe-stage__icon { display: grid; place-items: center; }
.fe-stage .fe-stage__icon img { object-fit: contain; max-width: none; }
.fe-stage__text { display: grid; }
.fe-stage__name { font-family: "Catamaran", sans-serif; font-weight: 700; line-height: 1.1; }
.fe-stage__desc { font-family: "Mulish", sans-serif; line-height: 1.45; color: #333333; }
.fe-stage__arrow {
	border: 1.5px solid currentColor; 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;
}
.fe-stage:hover .fe-stage__arrow { transform: translateX(3px); }
.fe-stage.is-active { background: var(--fe-green); color: #ffffff; }
.fe-stage.is-active .fe-stage__desc { color: rgba(255, 255, 255, 0.92); }
/* selected card: the stage's own white icon if it has one, otherwise its icon turned white */
.fe-stage .fe-stage__img--active { display: none; }
.fe-stage.is-active.has-active-icon .fe-stage__img { display: none; }
.fe-stage.is-active.has-active-icon .fe-stage__img--active { display: block; }
.fe-stage.is-active:not(.has-active-icon) .fe-stage__icon img { filter: brightness(0) invert(1); }
.fe-stage.is-active .fe-stage__arrow { border-color: #000000; filter: invert(1); } /* the filter flips the black border and the arrow icon to white */

/* sections */
.fe-fsec--latest { background: var(--fe-cream); }
.fe-fsec__head { margin-left: auto; margin-right: auto; text-align: center; }
.fe-fsec__title { margin: 0; font-family: "Catamaran", sans-serif; font-weight: 700; line-height: 1.1; color: var(--fe-ink); }
.fe-fsec__text { margin-left: auto; margin-right: auto; margin-bottom: 0; font-family: "Mulish", sans-serif; line-height: 1.45; color: var(--fe-text); }

/* topic filters */
.fe-chips { display: flex; flex-wrap: wrap; justify-content: center; }
.fe-chip {
	display: inline-flex; align-items: center; border-radius: 999px; background: #ffffff; color: var(--fe-ink);
	font-family: "Catamaran", sans-serif; font-weight: 600; line-height: 1; transition: background-color 0.2s ease, color 0.2s ease;
}
.fe-chip:hover { background: #f1ead6; color: var(--fe-ink); }
.fe-chip.is-active, .fe-chip.is-active:hover { background: #000000; color: #ffffff; }
.fe-chip:focus-visible { outline: 3px solid var(--fe-green); outline-offset: 2px; }

/* cards */
.fe-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; transition: opacity 0.2s ease; }
.fe-cards.is-loading { opacity: 0.45; pointer-events: none; }
.fe-cards__empty { grid-column: 1 / -1; margin: 0; padding: 40px 20px; text-align: center; font-family: "Mulish", sans-serif; font-size: 18px; color: var(--fe-muted); }
.fe-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; font-family: "Mulish", sans-serif; color: var(--fe-text); }
.fe-card__media { position: relative; display: block; overflow: hidden; }
.fe-card .fe-card__img { display: block; width: 100%; height: 100% !important; max-width: none; object-fit: cover; transition: transform 0.5s ease; }
.fe-card__img--empty { background: #e8e4da; }
.fe-card:hover .fe-card__img { transform: scale(1.04); }
.fe-card__time { position: absolute; display: inline-flex; align-items: center; border-radius: 999px; background: var(--fe-green); color: #ffffff; font-weight: 600; line-height: 1.4; }
.fe-card__time::before {
	content: ""; flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.75'/%3E%3Cpath d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fe-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.fe-card__date { margin: 0; color: var(--fe-text); }
.fe-card__byline { margin: 0; color: var(--fe-muted); }
.fe-card__sep { margin: 0 0.55em; color: #b5b5b5; }
.fe-card__title { font-family: "Catamaran", sans-serif; font-weight: 700; line-height: 1.2; }
.fe-card__title a { color: var(--fe-ink); }
.fe-card__title a:hover { color: var(--fe-ink); text-decoration: underline; text-underline-offset: 3px; }
.fe-card__excerpt { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fe-card__more {
	display: none; align-self: flex-start; border: 1.5px solid #000000; border-radius: 999px; color: #000000; font-weight: 600; line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.fe-card__more:hover { background: #000000; color: #ffffff; }
.fe-card--stage { background: var(--fe-yellow); }
.fe-card--stage .fe-card__media { border: 1px solid rgba(0, 0, 0, 0.06); }
.fe-card--latest { background: #ffffff; }
.fe-card--latest .fe-card__byline { color: #8a8a8a; }

/* Load More */
.fe-fsec__more { text-align: center; }
.fe-more-btn {
	display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #000000; color: #ffffff;
	font-family: "Mulish", sans-serif; font-weight: 700; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fe-more-btn:hover { color: #ffffff; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16); }
.fe-more-btn:focus-visible { outline: 3px solid var(--fe-green); outline-offset: 3px; }
.fe-more-btn[aria-busy="true"] { opacity: 0.6; }

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

	.fe-fhero { display: flex; align-items: center; min-height: calc(640 * var(--u)); }
	/* blob 696 × 478, 96 from the left edge; heading 88 inside it (x = 184); stage cards 100 from the right edge */
	.fe-fhero__inner { max-width: 1920px; display: flex; align-items: center; justify-content: space-between; gap: calc(40 * var(--u)); padding: calc(40 * var(--u)) calc(100 * var(--u)) calc(40 * var(--u)) calc(96 * var(--u)); }
	.fe-fhero__copy { flex: 0 0 auto; width: calc(696 * var(--u)); min-height: calc(478 * var(--u)); padding: calc(30 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)) calc(88 * var(--u)); }
	.fe-fhero__title { font-size: calc(74 * var(--u)); }
	.fe-fhero__text { max-width: calc(580 * var(--u)); margin: calc(18 * var(--u)) 0 0; font-size: max(15px, calc(21.5 * var(--u))); line-height: 1.85; }

	/* the card group sits slightly above the middle in the design */
	.fe-stages { grid-template-columns: repeat(2, calc(375 * var(--u))); gap: calc(17 * var(--u)) calc(15 * var(--u)); margin-top: calc(-28 * var(--u)); }
	.fe-stage { grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr) calc(40 * var(--u)); gap: calc(20 * var(--u)); min-height: calc(130 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u)); }
	.fe-stage__icon { width: calc(56 * var(--u)); height: calc(48 * var(--u)); }
	/* the icon files include transparent padding, so they are shown a little larger than the 44px artwork */
	.fe-stage .fe-stage__icon img { width: calc(56 * var(--u)); height: calc(56 * var(--u)) !important; }
	.fe-stage__text { gap: calc(6 * var(--u)); }
	.fe-stage__name { font-size: calc(30 * var(--u)); }
	.fe-stage__desc { max-width: calc(190 * var(--u)); font-size: max(12px, calc(16.5 * var(--u))); }
	.fe-stage__arrow { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }

	.fe-fsec { padding: calc(100 * var(--u)) calc(100 * var(--u)) calc(96 * var(--u)); }
	.fe-fsec--latest { padding-top: calc(60 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.fe-fsec--faq { padding-top: calc(84 * var(--u)); padding-bottom: calc(110 * var(--u)); }
	.fe-fsec__head { max-width: calc(900 * var(--u)); margin-bottom: calc(44 * var(--u)); }
	.fe-fsec__title { font-size: calc(56 * var(--u)); }
	.fe-fsec__text { max-width: calc(660 * var(--u)); margin-top: calc(12 * var(--u)); font-size: max(14px, calc(18 * var(--u))); }
	.fe-fsec--latest .fe-fsec__text { max-width: calc(900 * var(--u)); font-size: max(13px, calc(16 * var(--u))); }

	.fe-chips { gap: calc(12 * var(--u)); margin: calc(-12 * var(--u)) auto calc(40 * var(--u)); }
	.fe-chip { min-height: calc(45 * var(--u)); padding: 0 calc(30 * var(--u)); font-size: max(13px, calc(19 * var(--u))); }

	.fe-cards { gap: calc(38 * var(--u)) calc(35 * var(--u)); }
	.fe-card__time { top: calc(26 * var(--u)); left: calc(28 * var(--u)); gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)); font-size: max(11px, calc(16 * var(--u))); }
	.fe-card__time::before { width: max(11px, calc(16 * var(--u))); height: max(11px, calc(16 * var(--u))); }
	.fe-card__date { margin-bottom: calc(8 * var(--u)); font-size: max(12px, calc(15 * var(--u))); }
	.fe-card__byline { font-size: max(11px, calc(15 * var(--u))); }
	.fe-card__title { margin: calc(14 * var(--u)) 0 calc(10 * var(--u)); font-size: max(18px, calc(28 * var(--u))); }
	.fe-card__excerpt { font-size: max(13px, calc(15.5 * var(--u))); line-height: 1.9; }

	.fe-card--stage { border-radius: calc(30 * var(--u)); }
	.fe-card--stage .fe-card__media { height: calc(365 * var(--u)); border-radius: calc(30 * var(--u)); }
	.fe-card--stage .fe-card__body { padding: calc(30 * var(--u)) calc(35 * var(--u)) calc(36 * var(--u)); }

	.fe-card--latest { border-radius: calc(30 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(34 * var(--u)); }
	.fe-card--latest .fe-card__media { height: calc(298 * var(--u)); border-radius: calc(24 * var(--u)); }
	.fe-card--latest .fe-card__time { top: calc(14 * var(--u)); left: calc(16 * var(--u)); }
	.fe-card--latest .fe-card__body { padding: calc(26 * var(--u)) calc(12 * var(--u)) 0; }
	.fe-card--latest .fe-card__date { margin-bottom: calc(4 * var(--u)); }
	.fe-card--latest .fe-card__byline { font-size: max(10px, calc(13.5 * var(--u))); }
	.fe-card--latest .fe-card__title { margin-top: calc(10 * var(--u)); }

	.fe-fsec__more { margin-top: calc(44 * var(--u)); }
	.fe-more-btn { min-width: calc(214 * var(--u)); min-height: calc(60 * var(--u)); padding: calc(14 * var(--u)) calc(40 * var(--u)); font-size: max(14px, calc(18 * var(--u))); }

	/* FAQ block width (1330px) is set by fe101-faq.css so it matches the homepage FAQ */
}

/* ---------------------------------------------------------
   Tablet 768–1199: heading above the stage cards, 2 card columns
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
	.fe-fhero { min-height: 0; }
	.fe-fhero__inner { padding: 40px 32px; }
	.fe-fhero__copy { max-width: 640px; padding: 48px 56px 48px 60px; }
	.fe-fhero__title { font-size: 52px; }
	.fe-fhero__text { margin: 16px 0 0; font-size: 17px; line-height: 1.7; }
	.fe-stages { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.fe-stage { grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 14px; min-height: 104px; padding: 16px; border-radius: 12px; }
	.fe-stage__icon, .fe-stage .fe-stage__icon img { width: 38px; height: 38px !important; }
	.fe-stage__text { gap: 4px; }
	.fe-stage__name { font-size: 23px; }
	.fe-stage__desc { font-size: 14px; }
	.fe-stage__arrow { width: 36px; height: 36px; }

	.fe-fsec { padding: 64px 24px 72px; }
	.fe-fsec__head { max-width: 760px; margin-bottom: 36px; }
	.fe-fsec__title { font-size: 40px; }
	.fe-fsec__text { max-width: 620px; margin-top: 10px; font-size: 16px; }
	.fe-chips { gap: 10px; margin: -8px auto 32px; }
	.fe-chip { min-height: 40px; padding: 0 22px; font-size: 16px; }
	.fe-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
	.fe-card__time { top: 18px; left: 18px; gap: 6px; padding: 3px 12px 3px 8px; font-size: 13px; }
	.fe-card__time::before { width: 13px; height: 13px; }
	.fe-card__date { margin-bottom: 6px; font-size: 14px; }
	.fe-card__byline { font-size: 13px; }
	.fe-card__title { margin: 12px 0 8px; font-size: 24px; }
	.fe-card__excerpt { font-size: 14.5px; line-height: 1.75; }
	.fe-card--stage { border-radius: 24px; }
	.fe-card--stage .fe-card__media { height: 280px; border-radius: 24px; }
	.fe-card--stage .fe-card__body { padding: 24px 24px 28px; }
	.fe-card--latest { border-radius: 24px; padding: 12px 12px 26px; }
	.fe-card--latest .fe-card__media { height: 230px; border-radius: 18px; }
	.fe-card--latest .fe-card__body { padding: 20px 10px 0; }
	.fe-fsec__more { margin-top: 36px; }
	.fe-more-btn { min-width: 180px; min-height: 52px; padding: 12px 34px; font-size: 16px; }
}

/* ---------------------------------------------------------
   Mobile ≤767: photo on top, peach panel; cards swipe sideways
   --------------------------------------------------------- */
@media (max-width: 767px) {
	.fe-fhero { background: var(--fe-peach); }
	.fe-fhero__media { position: relative; aspect-ratio: 390 / 245; }
	.fe-fhero .fe-fhero__img { object-position: center 25%; }
	.fe-fhero.has-mobile-image .fe-fhero__img { object-position: 85% center; }
	.fe-fhero__inner { padding: 34px 16px 38px; }
	.fe-fhero__copy::before { display: none; }
	.fe-fhero__title { font-size: clamp(30px, 8.7vw, 40px); line-height: 1.05; }
	.fe-fhero__text { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; }
	.fe-stages { margin-top: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.fe-stage { grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 8px; min-height: 90px; padding: 12px 10px 30px 10px; border-radius: 6px; box-shadow: none; }
	.fe-stage__icon, .fe-stage .fe-stage__icon img { width: 38px; height: 38px !important; }
	.fe-stage__icon { margin-top: 2px; }
	.fe-stage__text { gap: 2px; }
	.fe-stage__name { font-size: 17px; }
	.fe-stage__desc { font-size: 12px; line-height: 1.35; }
	.fe-stage__arrow { position: absolute; right: 10px; bottom: 8px; width: 18px; height: 18px; border-width: 1px; background-size: 11px 11px; }

	.fe-fsec { padding: 44px 0 48px; }
	.fe-fsec__head { margin-bottom: 26px; padding: 0 16px; }
	.fe-fsec__title { font-size: clamp(26px, 7.2vw, 32px); }
	.fe-fsec__text { margin-top: 8px; font-size: 14px; }
	.fe-chips { gap: 10px 8px; margin: -4px 16px 26px; }
	.fe-chip { min-height: 32px; padding: 0 16px; font-size: 13px; }

	.fe-cards {
		grid-auto-flow: column; grid-auto-columns: 79%; grid-template-columns: none; gap: 20px;
		overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 6px; scroll-padding: 0 16px; scrollbar-width: none;
	}
	.fe-cards::-webkit-scrollbar { display: none; }
	.fe-card { scroll-snap-align: start; }
	.fe-cards__empty { grid-column: auto; }
	.fe-card__more { display: inline-flex; }
	.fe-card__time { top: 12px; left: 14px; gap: 5px; padding: 3px 10px 3px 8px; font-size: 11px; }
	.fe-card__time::before { width: 12px; height: 12px; }

	.fe-card--stage { border-radius: 20px; }
	.fe-card--stage .fe-card__media { height: 228px; border-radius: 20px; }
	.fe-card--stage .fe-card__body { padding: 20px 14px 24px; }
	.fe-card--stage .fe-card__date { margin-bottom: 8px; font-size: 16px; }
	.fe-card--stage .fe-card__byline { font-size: 14px; }
	.fe-card--stage .fe-card__byline .fe-card__sep { display: block; height: 0; overflow: hidden; margin: 0; }
	.fe-card--stage .fe-card__title { margin: 12px 0 8px; font-size: 26px; line-height: 1.1; }
	.fe-card--stage .fe-card__excerpt { font-size: 16px; line-height: 1.45; -webkit-line-clamp: 2; }
	.fe-card--stage .fe-card__more { margin-top: 20px; padding: 15px 42px; font-size: 16px; }

	.fe-card--latest { border-radius: 18px; padding: 8px 8px 22px; }
	.fe-card--latest .fe-card__media { height: 132px; border-radius: 14px; }
	.fe-card--latest .fe-card__time { top: 8px; left: 10px; }
	.fe-card--latest .fe-card__body { padding: 18px 8px 0; }
	.fe-card--latest .fe-card__date { margin-bottom: 4px; font-size: 12px; }
	.fe-card--latest .fe-card__byline { font-size: 10px; }
	.fe-card--latest .fe-card__title { margin: 10px 0 8px; font-size: 21px; }
	.fe-card--latest .fe-card__excerpt { font-size: 13px; line-height: 1.55; }
	.fe-card--latest .fe-card__more { margin-top: 16px; padding: 7px 24px; font-size: 13px; border-width: 1px; }

	.fe-fsec__more { margin-top: 30px; }
	.fe-more-btn { min-width: 150px; min-height: 48px; padding: 12px 32px; font-size: 16px; font-weight: 600; }
	.fe-fsec--faq { padding: 40px 16px 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.fe-stage, .fe-stage__arrow, .fe-card__img, .fe-chip, .fe-more-btn, .fe-cards { transition: none !important; }
}