/* -----------------------------------------------------------
   AnimaLife Academy — blog archive + single post
----------------------------------------------------------- */

/* Archive hero
   Text block is horizontally positioned to match Figma's proportions
   (pixel-measured against the 1440x411 reference frame: left at 11.74%)
   via an aspect-ratio-locked container, so it stays aligned with the
   background photo at any viewport width instead of drifting the way
   background-size:cover + fixed padding would.

   hero-bg.png has 70px of solid-color padding baked onto its top edge
   (image is 1440x481, not Figma's native 1440x411) so the photo/blob and
   the nav both get breathing room, since our nav renders taller than
   Figma's compact nav row. The text's top offset (32.64%) is Figma's
   original 87px position re-based against this taller 481px frame, so
   the photo and text shift down together and keep their original
   relative alignment to each other. */
.academy-hero {
	position: relative;
	aspect-ratio: 1440 / 481;
	overflow: hidden;
	background-color: #0a3d2c;
}

.academy-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Mobile-only photo + pink shape — see mobile media query below. Desktop
   keeps using the pet photo baked into .academy-hero__bg instead. */
.academy-hero__photo-wrap {
	display: none;
}

.academy-hero__inner {
	position: absolute;
	top: 32.64%;
	left: 11.74%;
	right: 5%;
	display: flex;
}

.academy-hero__text {
	max-width: 36%;
}

.academy-hero__text h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 34px;
	line-height: 40px;
	color: #fffcef;
	margin: 0 0 20px;
}

.academy-hero__text p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #fffcef;
	margin: 0;
}

/* Archive grid */
.academy-content {
	background: var(--c-cream);
	padding: 48px 0 80px;
}

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

.academy-card {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.academy-card__media {
	display: block;
	aspect-ratio: 364 / 240;
	margin: 8px 8px 0;
	border-radius: 10px;
	overflow: hidden;
	background: #000000;
}

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

.academy-card__body {
	padding: 16px 16px 20px;
}

.academy-card__badge {
	display: inline-block;
	color: #fdfdfd;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 16px;
	padding: 2px 10px;
	border-radius: 28px;
	margin-bottom: 12px;
}

.academy-card__title {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 24px;
}

.academy-card__title a {
	font-family: var(--font-body);
	font-weight: 700;
	color: #00171f;
}

.academy-card__excerpt {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #0a3024;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.academy-empty {
	font-family: var(--font-body);
	font-size: 16px;
	color: #0a3024;
	text-align: center;
	padding: 60px 0;
}

/* Pagination */
.academy-pagination {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 48px;
}

.academy-pagination .page-numbers {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: #0a3024;
	padding: 8px 14px;
	border-radius: 8px;
}

.academy-pagination .page-numbers.current {
	background: #0a3024;
	color: #fdfdfd;
}

/* -----------------------------------------------------------
   Single post
----------------------------------------------------------- */
body.is-single-post .site-header {
	background: #0a3d2c;
}

.academy-single {
	background: var(--c-cream);
	padding: 160px 0 80px;
}

.academy-single__wrap {
	max-width: 1207px;
	margin: 0 auto 40px;
	padding: 0 24px;
}

.academy-single__media {
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 1208 / 505;
	background: #0a3024;
}

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

.academy-single__body {
	max-width: 973px;
	margin: 0 auto;
	padding: 0 24px;
}

.academy-single__header {
	position: relative;
	margin-bottom: 32px;
}

.academy-single__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 42px;
	line-height: 1.2;
	/* Figma nodes 1026:10007 (dogs) / 1026:12281 (cats): the dogs/default
	   title color is #134635 — the cats override below is the only
	   category-specific accent; headings and the nav link (further down)
	   stay this same color in both variants, pixel-confirmed against
	   both Figma pages rather than assumed. */
	color: #134635;
	margin: 0 0 12px;
	max-width: 85%;
}

.academy-single__meta {
	display: flex;
	gap: 24px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	color: #667479;
}

.academy-single__seal {
	position: absolute;
	top: 0;
	right: 0;
	width: 90px;
	height: 90px;
}

.academy-single__content {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.8;
	color: #0a3024;
}

.academy-single__content p {
	margin: 0 0 24px;
}

.academy-single__content h2,
.academy-single__content h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	color: #134635;
	margin: 32px 0 16px;
}

.academy-single__content blockquote {
	margin: 0 0 24px;
	padding-left: 20px;
	border-left: 3px solid rgba(0, 0, 0, 0.1);
	font-style: italic;
}

/* The sitewide `ul { list-style: none; }` reset (main.css) strips bullet
   markers everywhere by default, which no prior Academy post ever needed
   since none used list markup — re-enabled and styled here now that post
   content includes bullet lists. */
.academy-single__content ul {
	margin: 0 0 24px;
	padding-left: 20px;
	list-style: disc;
}

.academy-single__content li {
	margin: 0 0 8px;
}

.academy-single__content li:last-child {
	margin-bottom: 0;
}

.academy-single__content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 24px 0;
}

.academy-single__nav {
	display: flex;
	justify-content: space-between;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.academy-single__nav a {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	color: #ba643b;
}

/* Cats theme — the title is the only element that changes color between
   the dogs/cats Figma pages (1026:10007 / 1026:12281); the body h2/h3
   and the nav link are the same #134635 / #ba643b in both, pixel-checked
   against both pages rather than themed here too. */
.academy-single--cats .academy-single__title {
	color: #565194;
}

/* Responsive */
@media (max-width: 900px) {
	.academy-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.academy-single__title {
		font-size: 32px;
		max-width: 100%;
	}

	.academy-single__seal {
		position: static;
		margin-top: 16px;
	}
}

@media (max-width: 640px) {
	.academy-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Figma node 1025:8024: single-column card list — thin border instead
	   of the desktop drop-shadow, image flush with the card's own top
	   corners (no inset margin), and smaller type throughout. */
	.academy-card {
		border: 0.794px solid rgba(237, 231, 208, 0.5);
		box-shadow: none;
	}

	.academy-card__media {
		aspect-ratio: 346 / 180;
		margin: 0;
		/* Desktop's border-radius:10px rounds all four corners, but with
		   the image flush at the top of the card now (no inset margin),
		   the bottom two corners have card content directly below them —
		   rounding those left a visible sliver of the card's white
		   background poking through. Only the top corners sit against the
		   card's own edge, so only those should be rounded. */
		border-radius: 11px 11px 0 0;
	}

	.academy-card__body {
		padding: 12px 16px 16px;
	}

	.academy-card__title {
		font-size: 14px;
		line-height: 19.25px;
		margin: 0 0 4px;
	}

	.academy-card__excerpt {
		font-size: 12px;
		line-height: 19.5px;
	}

	.academy-hero {
		aspect-ratio: auto;
		/* No bottom padding — the section ends flush with the photo's own
		   bottom edge instead of leaving a gap after it. */
		padding: 140px 0 0;
	}

	/* hero-bg.png is a 1440x481 desktop crop with the pet photo sitting in
	   its right ~49% — at mobile's much taller box, object-fit:cover's
	   default center crop either hid the photo behind the empty green gap
	   or dragged it under the text. .academy-hero__photo-wrap (Figma's
	   own pre-flattened export) replaces it entirely; the section's own
	   background-color shows through instead. */
	.academy-hero__bg {
		display: none;
	}

	.academy-hero__inner {
		/* Stack the photo in normal flow, after the text — this
		   guarantees it can never overlap the text regardless of how long
		   the (translated) copy runs, unlike Figma's own absolute ~42%
		   inset, which is calibrated for its own much shorter placeholder
		   text. */
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		/* The desktop rule's left:11.74%/right:5% offsets (for the
		   absolute-positioned desktop layout) were still being applied
		   here as a relative-position shift, pushing the text ~46px
		   further right than the 24px padding alone intended. */
		left: 0;
		right: auto;
		padding: 0 24px;
	}

	/* Figma node 1141:527 (updated design file): photo + pink shape,
	   pre-flattened by Figma into one asset with the rounded mask already
	   baked in — no rotation/cropping math needed, just placed and sized.
	   Inset ~12% from the left and bled well past the right edge to
	   roughly match the design's own proportions (inset 14.21% / bleed
	   20.05% of the section width, pixel-measured against Figma's 394px
	   mobile frame). */
	.academy-hero__photo-wrap {
		display: block;
		max-width: none;
		width: auto;
		height: auto;
		margin: -44px -70px 0 12%;
	}

	.academy-hero__text {
		max-width: 100%;
	}

	/* Figma mobile spec (node 1025:8013): narrower text columns than the
	   available width so the heading/paragraph wrap the same way as the
	   design instead of stretching across the full inner width. */
	.academy-hero__text h1 {
		font-size: 24px;
		line-height: 32px;
		max-width: 275px;
	}

	.academy-hero__text p {
		font-size: 14px;
		line-height: 22.75px;
		color: rgba(255, 255, 255, 0.65);
		max-width: 233px;
	}

	/* Single-post header renders in normal flow here (not as an absolute
	   overlay like the archive/hero pages), so this padding was stacking
	   on top of the header's own height instead of substituting for it —
	   160px left an oversized empty gap before the featured image. */
	.academy-single {
		padding: 32px 0 60px;
	}

	/* Figma node 1026:10081: the featured image is a full-bleed 243px-tall
	   banner flush against the top of the page, not an inset/rounded
	   card — pull it out of .academy-single's own top padding and drop
	   .academy-single__wrap's max-width/padding so it reaches both
	   viewport edges. */
	.academy-single__wrap {
		max-width: none;
		margin: -32px 0 24px;
		padding: 0;
	}

	.academy-single__media {
		aspect-ratio: auto;
		height: 243px;
		border-radius: 0;
	}

	.academy-single__seal {
		display: none;
	}
}