/* Mobile vs Figma fixes: resources. Scoped per page; see custom.css "Mobile vs Figma pass" for shared header/menu/button rules. */

/* ══ Resources (/resources/, post 36) vs Figma 109:4 "Blog/Case Study
   Template - Mobile" (440 x 6554), verified with compare/anchor_check.py.
   The feed is real posts ([sh_resource_cards]); Figma draws six identical
   placeholders, so card COUNT and title length are content, not layout. */
@media (max-width: 767px) {

	/* ── Header on this light hero ─────────────────────────────────────────
	   Figma inks the lockup and the stag #462222. custom.css darkened the
	   cream assets with brightness()/sepia() filters, which lands on a grey
	   (~#6B665A) logo and a near-black stag; swap in the true dark assets. */
	body.page-id-36 .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		content: url('../../img/socialhart-nav-logo-mobile-dark.svg');
		filter: none !important;
	}
	body.page-id-36 .elementor-element-e234cab > img[src*="deer"] {
		content: url('../../img/deer-dark.png');
		filter: none !important;
		width: 66px !important;
		height: 98px !important;
		object-fit: contain !important;
	}

	/* ── Hero: sand argyle band ending at y=712 ────────────────────────────
	   Script at y=239 (158 below the bar), h1 25px under it, intro 25px under
	   the h1, stag 63px under the intro, 68px to the band's edge. The build
	   used a desktop min-height of 765px and 173/30/28/29px gaps. */
	body.page-id-36 .elementor-element-e234cab {
		min-height: 0 !important;
		padding: 158px 28px 68px !important;
	}
	body.page-id-36 .elementor-element-e234cab > h2 {
		margin-top: 0 !important;
	}
	body.page-id-36 .elementor-element-e234cab > h1 {
		margin-top: 25px !important;
		max-width: min(347px, 100%) !important;
	}
	body.page-id-36 .elementor-element-e234cab > p {
		margin-top: 25px !important;
		max-width: min(355px, 100%) !important;
	}
	body.page-id-36 .elementor-element-e234cab > img[src*="deer"] {
		margin-top: 63px !important;
	}
	/* Figma's band is a low-contrast argyle over the sand (pattern repeat
	   154px across / 212px down, i.e. ~77px diamonds); the build had flat sand
	   and grain only.
	   The site's own argyle_overlay.png is scaled to that repeat and
	   multiplied faintly. */
	body.page-id-36 .elementor-element-4431138::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url('../../../../../uploads/2026/08/argyle_overlay.png') -38px -20px / 1573px 1690px repeat;
		opacity: 0.08;
		mix-blend-mode: multiply;
		pointer-events: none;
		z-index: 1;
	}

	/* ── The Library ────────────────────────────────────────────────────────
	   Script 96px under the band, h2 33px under the script, first card 92px
	   under the h2's last line. */
	body.page-id-36 .elementor-element-313c1e9 {
		padding: 96px 28px 92px !important;
	}
	/* The wrapper also carried a 20px flex gap on top of the margin. */
	body.page-id-36 .elementor-element-3ccf3b6 {
		gap: 0 !important;
	}
	body.page-id-36 .elementor-element-3ccf3b6 > h2:nth-child(2) {
		margin-top: 33px !important;
	}
	body.page-id-36 .elementor-element-f63ea6e {
		margin-top: 92px !important;
	}

	/* Cards: 384x316 image with a 1px #3B1919 rule; 45px/37.8 title 20px
	   under it in a three-line box; READ MORE 38px under the title with its
	   rule 8px under the letters; 50px between cards (pitch 565px). The build
	   ran 24px titles, a 384x315 unbordered image and 39px gaps, and the
	   text-decoration underline sat on the baseline. */
	body.page-id-36 .sh-resource-cards {
		row-gap: 50px !important;
	}
	body.page-id-36 .sh-resource-cards .sh-resource-card-img {
		width: 384px !important;
		max-width: 100% !important;
		height: 316px !important;
		aspect-ratio: auto !important;
		border: 1px solid #3B1919;
		box-sizing: border-box;
	}
	body.page-id-36 .sh-resource-card-title {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: normal !important;
		margin-top: 20px !important;
		min-height: 113px !important;
		overflow-wrap: anywhere;
	}
	body.page-id-36 .sh-resource-card-readmore {
		margin-top: 38px !important;
		padding: 0 0 8px !important;
		line-height: 18px !important;
		text-decoration: none !important;
		border-bottom: 1px solid #3B1919;
	}

	/* ── Ticker: 1px rule at y=4590, 30px text 17px under it, olive at 4656 ── */
	body.page-id-36 .elementor-element-0ecf4f4 {
		position: relative;
		z-index: 3;
		border-top: 1px solid #3B1919;
		padding: 17px 0 21px !important;
	}
	body.page-id-36 .elementor-element-df74aa7,
	body.page-id-36 .elementor-element-5685f68 {
		height: 27px !important;
	}
	body.page-id-36 .elementor-element-5685f68 > span {
		line-height: 27px !important;
		height: 27px !important;
	}
	/* Luggage tag: hangs from the ticker rule down into the olive band. Not
	   in the page data, so drawn here from the homepage's asset. Sized from
	   the export's measured ink box (x=153-402, 70-299px under the rule),
	   which is slightly larger and taller than the asset at Figma's nominal
	   274x283 group size. */
	body.page-id-36 .elementor-element-0ecf4f4::after {
		content: "";
		position: absolute;
		top: 2px;
		left: 29.18%;
		width: 65.98%;
		aspect-ratio: 290 / 304;
		background: url('../../../../../uploads/2026/08/tag_transparent.png') center / 100% 100% no-repeat;
		pointer-events: none;
	}

	/* ── Content coal band: stag 150px into the olive (cream in Figma, the
	   page-wide deer darkening made it black), h2 27 under it, copy 40, 238x51
	   CTA 43, pink 145 under the CTA. ── */
	body.page-id-36 .elementor-element-63949fe {
		padding: 150px 28px 145px !important;
	}
	/* Extra .e-image-base[src] so this outranks custom.css's page-wide
	   body.page-id-36 .e-image-base[src*="deer"] darkening filter. */
	body.page-id-36 .elementor-element-63949fe > img.e-image-base[src*="deer"] {
		filter: none !important;
		height: 98px !important;
		width: 66px !important;
	}
	body.page-id-36 .elementor-element-63949fe > p {
		margin: 40px 0 43px !important;
	}
	body.page-id-36 .elementor-element-63949fe > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
	}

	/* ── Newsletter (identical to the homepage block) ─────────────────────── */
	body.page-id-36 .elementor-element-2f30bd3 {
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
	}
	body.page-id-36 .elementor-element-b682f19 {
		padding: 58px 28px 69px !important;
	}
	body.page-id-36 .sh-newsletter-form {
		margin-top: 49px !important;
	}
	body.page-id-36 .sh-newsletter-form .elementor-form-fields-wrapper {
		margin-bottom: 0 !important;
	}
	body.page-id-36 .sh-newsletter-form .elementor-field-group {
		margin-bottom: 13px !important;
	}
	body.page-id-36 .sh-newsletter-form .elementor-field-group.e-form__buttons {
		margin: 14px 0 0 !important;
		justify-content: flex-start !important;
	}
	body.page-id-36 .sh-newsletter-form input.elementor-field-textual {
		height: 55px !important;
		min-height: 55px !important;
		padding: 0 19px !important;
		border: 1px solid #3B1919 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		color: #3B1919 !important;
	}
	body.page-id-36 .sh-newsletter-form input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	body.page-id-36 .sh-newsletter-form .e-form__buttons .elementor-button {
		flex: 0 0 auto !important;
		min-width: 281px !important;
		width: 281px !important;
		min-height: 51px !important;
		height: 51px !important;
		padding: 0 20px !important;
		white-space: nowrap !important;
	}

	/* ── Footer: no blurb; NAVIGATION x=59 / CONNECT x=274 at 70px under the
	   pink; 20px links on a 28px pitch; stacked wordmark; one 89px legal row. */
	body.page-id-36 .elementor-element-e0ec507 {
		padding: 70px 28px 0 !important;
	}
	body.page-id-36 .elementor-element-c54e4d5 {
		display: none !important;
	}
	body.page-id-36 .elementor-element-aa5e038 {
		margin-left: 31px !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}
	body.page-id-36 .elementor-element-8c61734 {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	body.page-id-36 .elementor-element-aa5e038 p:not(:first-child),
	body.page-id-36 .elementor-element-aa5e038 .e-paragraph-link-base {
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
	}
	body.page-id-36 .elementor-element-aa5e038 .e-paragraph-link-base {
		min-height: 28px !important;
		line-height: 28px !important;
	}
	body.page-id-36 .elementor-element-8c61734 > p:not(:first-child) {
		padding-left: 4px !important;
	}
	body.page-id-36 .elementor-element-43b7a77 {
		padding: 91px 28px 27px !important;
	}
	body.page-id-36 .elementor-element-43b7a77 > img {
		content: url('../../img/socialhart-wordmark-2line-dark.png');
		width: 376px !important;
		max-width: 100% !important;
		height: 173px !important;
		object-fit: contain !important;
		margin: 0 !important;
	}
	body.page-id-36 .elementor-element-3e93d2b {
		padding: 23px 25px 22px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		column-gap: 12px !important;
	}
	body.page-id-36 .elementor-element-13c0217 {
		flex: 0 0 auto !important;
		width: auto !important;
		flex-wrap: nowrap !important;
		column-gap: 12px !important;
	}
	body.page-id-36 .elementor-element-db0f766 {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		justify-content: flex-start !important;
	}
}
@media (max-width: 439px) {
	body.page-id-36 .elementor-element-3e93d2b,
	body.page-id-36 .elementor-element-13c0217 {
		flex-wrap: wrap !important;
	}
}