/* -----------------------------------------------------------
   Discover AnimaLife page
----------------------------------------------------------- */

/* Hero */
.discover-hero {
	position: relative;
	background: #0a3d2c;
	overflow: hidden;
	padding: 180px 0 260px;
}

.discover-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	width: 43%;
	max-width: 620px;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

.discover-hero__accent {
	position: absolute;
	bottom: -2%;
	left: 40%;
	width: 24%;
	max-width: 340px;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* Pre-rendered crops of the mobile hero's dog/cat blob art (Figma node
   1025:7441) — same technique as the homepage's about-shape-mobile.png,
   since the raw rotated vector exports don't come out right. Desktop-
   hidden by default, shown only at the 640px breakpoint below. */
.discover-hero__mobile-blob,
.discover-hero__mobile-accent {
	display: none;
}

.discover-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 32px;
}

.discover-hero__bar {
	width: 9px;
	flex-shrink: 0;
	background: #c3e76b;
	border-radius: 4px;
}

.discover-hero__text h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 45px;
	line-height: 60px;
	color: #f9f4df;
	margin: 0 0 24px;
}

.discover-hero__text p {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	color: #f9f4df;
	max-width: 470px;
	margin: 0;
}

/* Our Mission */
.discover-mission {
	background: var(--c-cream);
}

.discover-mission__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

.discover-mission__photo {
	min-height: 500px;
}

.discover-mission__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.discover-mission__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 96px;
}

.discover-mission__content h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 40px;
	color: #134635;
	margin: 0 0 16px;
}

.discover-mission__divider {
	width: 192px;
	height: 3px;
	background: #0a3d2c;
	margin-bottom: 24px;
}

.discover-mission__content p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: #134635;
	margin: 0;
}

/* Why AnimaLife */
.discover-why {
	background: #f4f0e0;
	padding: 80px 0;
}

.discover-why h2 {
	text-align: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 44px;
	color: #113d2e;
	margin: 0 0 56px;
}

.why-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 48px 32px;
}

/* flex-basis (not grid) so a trailing incomplete row — e.g. the last two of
   these five cards — centers as a group instead of sitting left-aligned
   under the first two grid columns. */
.why-card {
	text-align: center;
	flex: 0 1 calc((100% - 64px) / 3);
}

.why-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: #f6f1de;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.why-card__icon img {
	width: 32px;
	height: 32px;
}

/* 378px matches the Figma title box (node 557-14339/557-14347) — narrower
   than the card itself so "Expert-driven Production and Strict Quality
   Control" and "50 Years of Animal Nutrition Expertise" wrap to two lines
   the same way the design does, while the shorter titles stay on one. */
.why-card h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 30px;
	color: #113d2e;
	max-width: 378px;
	margin: 0 auto 12px;
}

.why-card p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: #113d2e;
	max-width: 378px;
	margin: 0 auto;
}

/* Wellness in Every Bite */
.discover-wellness {
	background: #ffffff;
	padding: 80px 0;
}

.discover-wellness h2 {
	text-align: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 50px;
	line-height: 60px;
	color: #134635;
	margin: 0 0 24px;
}

.discover-wellness__intro {
	max-width: 900px;
	margin: 0 auto 40px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	color: #134635;
}

.pet-toggle {
	display: flex;
	gap: 8px;
	background: #f6f1de;
	border-radius: 999px;
	padding: 8px;
	width: max-content;
	margin: 0 auto 48px;
}

.pet-toggle__btn {
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 12px 28px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	color: #134635;
	cursor: pointer;
}

.pet-toggle__btn--active {
	background: linear-gradient(180deg, #0a3d2c 0%, #134635 100%);
	color: #ffffff;
	box-shadow: 0px 10px 7.5px rgba(0, 0, 0, 0.1), 0px 4px 3px rgba(0, 0, 0, 0.1);
}

.ingredient-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ingredient-grid[hidden] {
	display: none;
}

.ingredient-card {
	background: #0a3024;
	border-radius: 16px;
	padding: 24px;
	color: #ffffff;
	box-shadow: 0px 1px 1.5px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.ingredient-card--cat {
	background: #565194;
}

.ingredient-card__health {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	text-align: left;
	gap: 4px;
}

.ingredient-card--cat .ingredient-card__label {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	margin: 0;
}

.ingredient-card__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	margin: 0;
}

.ingredient-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ingredient-card__icon img {
	width: 24px;
	height: 24px;
}

.ingredient-card__icon--filled img {
	width: 100%;
	height: 100%;
}

.ingredient-card__icon span {
	font-size: 24px;
	line-height: 1;
}

.ingredient-card h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	margin: 0;
}

.ingredient-card__label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 22.5px;
	margin: 0 0 8px;
}

.ingredient-card__value {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	margin: 0;
}

.ingredient-card__value--plain {
	/* Overrides the accent color set on a handful of .ingredient-card__value
	   nodes (chicken, grains) — Figma only tints the clause before the last
	   comma, the final clause stays the card's default white. */
	color: #ffffff;
}

.ingredient-card__benefits ul {
	list-style: disc;
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ingredient-card__benefits li {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
}

.ingredient-card--wide {
	grid-column: span 2;
}

.ingredient-card--wide h3 {
	font-size: 24px;
	margin-bottom: 8px;
}

.ingredient-card--wide .ingredient-card__value {
	font-size: 14px;
}

.ingredient-card__nutrients,
.ingredient-card__benefits,
.ingredient-card--wide__grid {
	align-self: stretch;
	text-align: left;
}

.ingredient-card--wide__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.ingredient-card--wide .ingredient-card__benefits ul {
	padding-left: 21px;
}

.ingredient-card--wide__col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Our Future Product Expansion */
.discover-future {
	background: var(--c-cream);
	padding: 80px 0 100px;
}

.discover-future h2 {
	text-align: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 40px;
	color: #134635;
	margin: 0 0 48px;
}

.future-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 848px;
	margin: 0 auto;
}

.future-card {
	position: relative;
	background: #0a3024;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 416 / 515;
}

/* Desktop doesn't use the bled background photo — only the mobile Dry
   Food treatment does (node 1062:1652). */
.future-card__photo-bleed {
	display: none;
}

.future-card__blob {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.future-card__photo {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 65%;
	object-fit: contain;
	object-position: bottom;
	z-index: 1;
}

.future-card__text {
	position: absolute;
	top: 30px;
	left: 28px;
	right: 28px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 23px;
	line-height: 29px;
	color: #f6f1de;
	margin: 0;
	z-index: 2;
}

.future-card__text strong {
	display: block;
	font-weight: 700;
	margin-bottom: 2px;
}

/* Responsive */
@media (max-width: 1000px) {
	.why-card {
		flex-basis: calc((100% - 32px) / 2);
	}

	.ingredient-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ingredient-card--wide {
		grid-column: span 2;
	}
}

@media (max-width: 900px) {
	.discover-mission__grid {
		grid-template-columns: 1fr;
	}

	.discover-mission__photo {
		min-height: 360px;
	}

	.discover-mission__content {
		padding: 56px 40px;
	}

	.discover-hero {
		padding: 160px 0 180px;
	}

	.discover-hero__photo {
		width: 55%;
		opacity: 0.35;
	}
}

@media (max-width: 640px) {
	/* Hero — compact card using the same dog/cat blob art as the
	   homepage "Why AnimaLife" section, re-cropped for this page
	   (node 1025:7441). */
	.discover-hero {
		background: #062d20;
		/* .site-header floats as a transparent ~106px-tall overlay on this
		   page (is-front-page body class, see functions.php) — top padding
		   has to clear it before the Figma-spec 24px text gap starts. */
		padding: 130px 0 24px;
		/* Matches the Academy page's own mobile hero height (node
		   1025:8013 there), so the two "top section" heroes read
		   consistently across pages. */
		min-height: 550px;
	}

	.discover-hero__photo,
	.discover-hero__accent {
		display: none;
	}

	.discover-hero__mobile-blob {
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 71%;
		aspect-ratio: 280 / 294;
		/* Above the accent blob (node 1025:7528 sits on top of 1025:7529 in
		   Figma's own layer order — both were previously z-index:0, which
		   fell back to DOM order and put the accent on top instead). */
		z-index: 1;
		pointer-events: none;
	}

	.discover-hero__mobile-accent {
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 57.6%;
		aspect-ratio: 227 / 64;
		z-index: 0;
		pointer-events: none;
	}

	.discover-hero__inner {
		gap: 0;
	}

	.discover-hero__bar {
		display: none;
	}

	.discover-hero__text {
		max-width: 249px;
	}

	.discover-hero__text h1 {
		font-size: 20px;
		line-height: 24.5px;
		margin: 0 0 12px;
	}

	.discover-hero__text p {
		font-size: 14px;
		line-height: 1.6;
	}

	/* Our Mission — stacked, content before photo, centered/compact type
	   (node 1061:3016). */
	.discover-mission__grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 48px 24px;
	}

	.discover-mission__content {
		padding: 0;
		align-items: center;
		text-align: center;
		order: -1;
		/* Node 1061:3018 — heading + paragraph sit in a 277.86px column
		   centered within the section, not the full available width. */
		max-width: 278px;
	}

	.discover-mission__content h2 {
		font-size: 20px;
		line-height: 28px;
		color: #0a3024;
	}

	.discover-mission__divider {
		display: none;
	}

	.discover-mission__content p {
		font-size: 13.5px;
		line-height: 1.65;
		text-align: justify;
		color: #0a3024;
	}

	.discover-mission__photo {
		min-height: 0;
		width: 302px;
		max-width: 100%;
		aspect-ratio: 302 / 303;
		border-radius: 12px;
		overflow: hidden;
	}

	/* Why AnimaLife — white bordered cards, stacked (node 1025:7107). */
	.discover-why {
		background: #f9f4df;
		padding: 48px 0;
	}

	.discover-why h2 {
		font-size: 24px;
		margin-bottom: 32px;
	}

	.why-grid {
		gap: 16px;
	}

	.why-card {
		flex-basis: 100%;
		background: var(--c-white);
		border: 0.8px solid #ede7d0;
		border-radius: 12px;
		padding: 21px;
	}

	.why-card__icon {
		width: 41px;
		height: 41px;
	}

	.why-card__icon img {
		width: 27px;
		height: 27px;
	}

	.why-card h3 {
		font-size: 14px;
		margin-bottom: 8px;
	}

	.why-card p {
		font-size: 12px;
		line-height: 19.5px;
		color: #667479;
	}

	/* Wellness in Every Bite (node 1025:7173). */
	.discover-wellness {
		padding: 48px 0;
	}

	.discover-wellness h2 {
		font-size: 30px;
		line-height: 36px;
		margin-bottom: 8px;
	}

	.discover-wellness__intro {
		font-size: 14px;
		line-height: 22.75px;
		margin-bottom: 24px;
	}

	.pet-toggle {
		margin-bottom: 24px;
	}

	.pet-toggle__btn {
		padding: 8px 20px;
		font-size: 15px;
	}

	.ingredient-grid,
	.future-grid {
		grid-template-columns: 1fr;
	}

	.ingredient-grid {
		gap: 10px;
	}

	/* Icon + heading are centered in the mobile card (nodes 1025:7189 etc.
	   and the cat variants 1064:1874 etc.) — only the nutrients/benefits
	   body copy stays left-aligned, so it's re-stretched + re-aligned
	   explicitly against the centered parent. */
	.ingredient-card {
		align-items: center;
		text-align: center;
		border-radius: 12px;
		padding: 17px;
		border: 0.8px solid rgba(255, 255, 255, 0.1);
	}

	.ingredient-card h3 {
		text-align: center;
	}

	.ingredient-card__nutrients,
	.ingredient-card__benefits,
	.ingredient-card__text {
		align-self: stretch;
		text-align: left;
	}

	.ingredient-card--wide,
	.ingredient-card--wide__grid {
		grid-column: auto;
		grid-template-columns: 1fr;
	}

	.ingredient-card--wide__col {
		align-self: stretch;
	}

	.ingredient-card--wide__grid {
		gap: 20px;
	}

	/* Our Future Product Expansion — short horizontal cards, each with a
	   product photo bled off the right/bottom edge as a background
	   (nodes 1062:1652, 1062:1644) — a different composition than
	   desktop's tall overlay cards. */
	.discover-future {
		padding: 48px 0;
	}

	.discover-future h2 {
		font-size: 24px;
		margin-bottom: 32px;
	}

	.future-grid {
		gap: 20px;
		max-width: none;
	}

	.future-card {
		aspect-ratio: auto;
		height: 112px;
		border-radius: 16px;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.future-card__blob,
	.future-card__photo {
		display: none;
	}

	/* future-photo-{1,2}-cutout.png are pre-composited 346x112 renders
	   (card bg + product photo bled off the edge) rather than raw crops —
	   Figma's own crop percentages are relative to a taller reference
	   frame and don't translate to this compact mobile card. */
	.future-card__photo-bleed {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.future-card__text {
		position: static;
		padding: 24px;
		max-width: 222px;
		font-size: 13px;
		line-height: 20px;
	}

	.future-card__text strong {
		font-size: 18px;
		line-height: 22.5px;
		margin-bottom: 4px;
	}
}