/* =========================================================
   Vaidya Kosha - site-wide layout fixes
   Small overrides for Elementor layouts. Loaded after Elementor.
   ========================================================= */

/* Sliders and the off-canvas mobile menu made every page
   scroll sideways (1440 -> 1470px, 375 -> 406px). clip keeps
   position: sticky working, unlike overflow: hidden. */
html,
body {
	overflow-x: clip;
}

/* "Latest Articles" + "View all articles": the button is pulled
   up next to the heading with a -60px margin. On smaller screens
   the heading takes the full width, so put the button below it. */
@media (max-width: 1024px) {
	.e-con-inner:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading + .elementor-widget-button {
		margin-top: 6px !important;
		margin-bottom: 4px !important;
		align-self: flex-start !important;
	}
}

/* Herb / disease detail hero (single templates 606 and 712):
   title + tags + text sit in a row with the image and get
   squeezed to ~140px on phones. Stack them instead. */
@media (max-width: 767px) {
	.elementor-location-single .e-atomic-element:has(> .e-atomic-element .elementor-widget-heading h1) {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.elementor-location-single .e-atomic-element:has(> .e-atomic-element .elementor-widget-heading h1) > .e-atomic-element {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
	}

	.elementor-location-single .elementor-widget-heading h1.elementor-heading-title {
		font-size: clamp(30px, 9vw, 40px) !important;
		line-height: 1.15 !important;
		overflow-wrap: anywhere;
	}

	/* Post content widget has a fixed ~70% width that also applies on phones. */
	.elementor-location-single .elementor-widget-theme-post-content {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-location-single .hsn-tag-style .elementor-heading-title {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* Herb / disease cards without an image: keep the grid even. */
.vk-card-placeholder a {
	display: grid !important;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 160px;
	background: linear-gradient(135deg, #f7efe0, #eef2e4);
	color: #8a9a6b;
}
.vk-card-placeholder svg {
	width: 44px;
	height: 44px;
	opacity: .8;
}