/* ==========================================================================
   ACTANIMALS · responsive overrides
   ========================================================================== */

/* Tablets and below */
@media (max-width: 1024px) {

	.hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.hero-card { max-width: 460px; margin: 0 auto; }

	.stats-grid { grid-template-columns: repeat(4, 1fr); }
	.stat h3 { font-size: 30px; }

	.cause-grid { grid-template-columns: repeat(3, 1fr); }
	.video-strip-grid { grid-template-columns: repeat(2, 1fr); }
	.trans-grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.test-grid { grid-template-columns: 1fr; }

	.volunteer-grid { grid-template-columns: 1fr; gap: 30px; }
	.volunteer-img { order: -1; }

	.story-grid { grid-template-columns: 1fr; }
	.story-img { order: -1; }
	.mission-grid { grid-template-columns: 1fr; }
	.impact-grid { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(2, 1fr); }

	.cause-hero-grid { grid-template-columns: 1fr; gap: 30px; }
	.cause-body-grid { grid-template-columns: 1fr; gap: 30px; }
	.contact-grid { grid-template-columns: 1fr; gap: 30px; }
	.gallery-grid { grid-template-columns: repeat(3, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* Phones */
@media (max-width: 768px) {
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }

	.container { padding: 0 18px; }

	/* Header → mobile drawer */
	.nav-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		width: 30px;
		height: 22px;
		background: none;
		border: 0;
		cursor: pointer;
		padding: 0;
	}
	.nav-toggle span {
		display: block;
		width: 100%;
		height: 3px;
		background: var(--navy);
		border-radius: 2px;
		transition: transform .2s;
	}
	.btn-donate { padding: 8px 14px; font-size: 13px; }
	.btn-donate i { display: none; }

	.main-nav {
		position: fixed;
		inset: 0;
		background: #fff;
		z-index: 200;
		padding: 90px 24px 40px;
		transform: translateX(100%);
		transition: transform .3s ease;
		overflow-y: auto;
	}
	.main-nav.open { transform: translateX(0); }
	.main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav a {
		display: block;
		padding: 16px 18px;
		border-bottom: 1px solid var(--line);
		font-size: 17px;
		border-radius: 0;
	}
	.nav-close {
		position: absolute;
		top: 24px;
		right: 24px;
		background: rgba(10,37,64,.06);
		border: 0;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		font-size: 22px;
		color: var(--navy);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Hero */
	.hero { padding: 40px 0 60px; }
	.hero-cta { gap: 10px; }
	.hero-cta .btn { flex: 1; justify-content: center; }
	.hero-trust { gap: 14px; font-size: 12px; }

	/* Stats */
	.stats { padding: 32px 0; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.stat-icon { width: 48px; height: 48px; font-size: 22px; }
	.stat h3 { font-size: 24px; }
	.stat p { font-size: 13px; }

	/* Sections */
	.causes, .transparency, .how-it-works, .volunteer-banner, .testimonials,
	.story, .mission, .impact, .team, .related, .contact-section { padding: 50px 0; }
	.section-head { margin-bottom: 30px; }

	.cause-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.cause-card .cause-body { padding: 14px 14px 16px; }
	.cause-card h3 { font-size: 15px; }
	.cause-card p { font-size: 12.5px; }
	.cause-foot .price { font-size: 18px; }
	.cause-foot .btn-sm { padding: 6px 10px; font-size: 11.5px; }
	.cause-tag { font-size: 9.5px; padding: 4px 8px; }

	.video-strip-grid { grid-template-columns: 1fr; }
	.trans-grid { grid-template-columns: 1fr; gap: 14px; }
	.steps { grid-template-columns: 1fr; gap: 14px; }
	.impact-grid { grid-template-columns: 1fr; gap: 14px; }
	.impact-card h3 { font-size: 28px; }

	.team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.team-img { width: 90px; height: 90px; }
	.team-card { padding: 18px 14px; }
	.team-card h3 { font-size: 15px; }

	/* Cause detail */
	.cause-hero { padding: 30px 0 40px; }
	.donation-panel { padding: 22px; }
	.donation-form .form-row, .contact-form .form-row { grid-template-columns: 1fr; }
	.contact-form { padding: 24px 22px; }

	/* Gallery */
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }

	/* Footer */
	.footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
	.footer-bottom-grid { flex-direction: column; align-items: flex-start; gap: 8px; }

	/* Floating donate */
	.float-donate { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; bottom: 18px; right: 18px; }
	.float-donate span { display: none; }
	.float-donate i { font-size: 24px; margin: 0; }

	/* Flash */
	.flash-stack { right: 12px; left: 12px; top: 84px; }
	.flash { max-width: 100%; }
}

@media (max-width: 480px) {
	.cta-banner { padding: 50px 0; }
	.page-hero { padding: 40px 0 30px; }
	.hero-card-img { aspect-ratio: 16/10; }
	.what-card { flex-direction: column; align-items: stretch; }
	.what-card img { width: 100%; height: 180px; }
}

/* Donate page: compress the mobile fold so the impact pills land within
   one swipe of the FB-ad tap. Hero images work best landscape. */
@media (max-width: 768px) {
	.cause-hero { padding: 16px 0 40px; }
	.cause-hero-grid { gap: 18px; }
	.cause-main-image { aspect-ratio: 16/9; }
	.cause-main-image img { object-position: center 30%; }
	.cause-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.cause-thumbs::-webkit-scrollbar { display: none; }
	.cause-thumbs .thumb { flex: 0 0 56px; width: 56px; height: 56px; }
	.lead-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}