/*
 * Mobile-only homepage adjustments for the Blocksy child theme.
 */
@media (max-width: 760px) {
	/* Phone header logo: 10% larger than the theme's 42vw / 228px default. */
	.ds-mobile-site-logo__image {
		max-width: min(46.2vw, 251px);
		width: min(46.2vw, 251px);
	}

	/* Remove donation CTAs from the compact header and its slide-out panel. */
	.ds-mobile-site-header__signup,
	.ds-mobile-panel-utility .ds-header-donate {
		display: none !important;
	}

	/* Every daily-feed variant uses the lead card's vertical, text-then-image flow. */
	.ds-daily-feed .ds-daily-story,
	.ds-daily-feed .ds-daily-story--support,
	.ds-daily-feed .ds-daily-story--feature-lead,
	.ds-daily-feed .ds-daily-story--feature-side {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		padding: 0 !important;
	}

	.ds-daily-feed .ds-daily-story__content {
		box-sizing: border-box;
		order: initial !important;
		padding: 24px 20px 20px !important;
		width: 100%;
	}

	.ds-daily-feed .ds-daily-story__media {
		display: block !important;
		flex: 0 0 auto !important;
		height: auto !important;
		margin: 0 18px 18px !important;
		order: initial !important;
		overflow: hidden;
		width: calc(100% - 36px) !important;
	}

	.ds-daily-feed .ds-daily-story__media img {
		aspect-ratio: 16 / 9;
		display: block;
		height: auto !important;
		object-fit: cover;
		width: 100% !important;
	}

	/* Make the separation above and below each date header symmetrical. */
	.ds-daily-feed__day {
		padding: 8px 0 !important;
	}

	/* The carousel's phone headline is 20% smaller than its current mobile scale. */
	.ds-hero-carousel__title {
		font-size: clamp(1.2rem, 2.4vw, 2rem) !important;
	}

	/* Explicit light palette for the mobile content surface and daily-feed cards. */
	html[data-ds-theme-mode="runtime"][data-theme="light"] body,
	html[data-ds-theme-mode="runtime"][data-theme="light"] #main-container,
	html[data-ds-theme-mode="runtime"][data-theme="light"] .site-main,
	html[data-ds-theme-mode="runtime"][data-theme="light"] .ds-homepage {
		background: #ffffff !important;
		color: #111111 !important;
	}

	html[data-ds-theme-mode="runtime"][data-theme="light"] .ds-daily-feed .ds-daily-story,
	html[data-ds-theme-mode="runtime"][data-theme="light"] .ds-daily-feed .ds-daily-story__title a,
	html[data-ds-theme-mode="runtime"][data-theme="light"] .ds-daily-feed .ds-daily-story__excerpt,
	html[data-ds-theme-mode="runtime"][data-theme="light"] .ds-daily-feed__date h2 {
		background: #ffffff;
		color: #111111 !important;
	}
}