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

/* ══ Success Stories (/success-stories/, post 37) vs Figma 109:4 "Blog/Case
   Study Template - Mobile" (440 x 6554), the same feed template as Resources.
   This page never received the per-widget mobile typography pass: every
   heading still rendered at its desktop 70px/58.8 (50px on the newsletter)
   inside desktop 40-62px gutters, the backdrop images collapsed to 76-293px
   strips, and the newsletter form and footer blurb were squeezed into
   149px / 156px columns. Kept as content/brand choices, not changed here: the
   maroon hero (Figma draws this template's hero in sand), the page's own
   eyebrow labels in place of Figma's script headings, and the stag above the
   eyebrow (reordered below the intro to match the template). */
@media (max-width: 767px) {

	/* ── Backdrops: re-assert full height (custom.css's generated backdrop
	   list covers Homepage/About/Services/Shop/Resources but not this page). */
	body.page-id-37 .elementor-element-945c405 > img.e-image-base,
	body.page-id-37 .elementor-element-02e6a3f > img.e-image-base,
	body.page-id-37 .elementor-element-ad0487c > img.e-image-base {
		height: 100% !important;
	}

	/* ── Hero: template rhythm. Label 158px under the bar, h1 at y=300
	   (45px/37.8 in a 347px measure), intro 25px under the h1 (22px in 355px),
	   stag 63px under the intro, band edge 68px under the stag. */
	body.page-id-37 .elementor-element-945c405 {
		padding: 158px 28px 68px !important;
	}
	body.page-id-37 .elementor-element-374afae {
		width: 100% !important;
	}
	body.page-id-37 .elementor-element-374afae > img {
		order: 4;
		height: 98px !important;
		width: 66px !important;
		margin: 63px 0 0 !important;
	}
	body.page-id-37 .elementor-element-374afae > p:first-of-type {
		order: 1;
		margin: 0 !important;
	}
	body.page-id-37 .elementor-element-374afae > h1 {
		order: 2;
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: normal !important;
		max-width: min(347px, 100%) !important;
		/* 25px under Figma's 36px script slot; the label here is 18px tall. */
		margin: 43px 0 0 !important;
	}
	body.page-id-37 .elementor-element-374afae > p:last-of-type {
		order: 3;
		max-width: min(355px, 100%) !important;
		margin: 25px 0 0 !important;
	}

	/* ── Library: label 96px under the band, h2 69px under the label's top
	   (45px/37.8), first card 92px under the h2. ── */
	body.page-id-37 .elementor-element-fe6ddff {
		padding: 96px 28px 92px !important;
	}
	body.page-id-37 .elementor-element-fe6ddff > h2 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: normal !important;
		margin-top: 51px !important;
	}
	body.page-id-37 .elementor-element-d1639ef {
		gap: 0 !important;
	}
	body.page-id-37 .sh-resource-cards {
		margin-top: 92px !important;
		row-gap: 50px !important;
	}

	/* Cards: full 384px column, 1px #3B1919 image rule, 45px/37.8 title 20px
	   under the image, READ MORE 38px under the title with its rule 8px under
	   the letters, 50px between cards. The covers stay 16:9 and uncropped
	   (they are text posters; Figma's 384x316 crop would cut their copy). */
	body.page-id-37 .sh-resource-cards .sh-resource-card-img {
		width: 384px !important;
		max-width: 100% !important;
		aspect-ratio: 9 / 8 !important;   /* QA #37: no cream bands; 9:8 since the 2026-10-11 covers */
		border: 1px solid #3B1919;
		box-sizing: border-box;
	}
	body.page-id-37 .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-37 .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, 30px text 17px under it, olive 66px under the rule. */
	body.page-id-37 .elementor-element-6e6cfd8 {
		position: relative;
		z-index: 3;
		border-top: 1px solid #3B1919;
		padding: 17px 0 21px !important;
	}
	body.page-id-37 .elementor-element-b1e8a00,
	body.page-id-37 .elementor-element-262882a {
		height: 27px !important;
	}
	body.page-id-37 .elementor-element-262882a > span {
		line-height: 27px !important;
		height: 27px !important;
	}
	/* Luggage tag hanging into the olive band (not in the page data); same
	   measured geometry as Resources. */
	body.page-id-37 .elementor-element-6e6cfd8::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 ─────────────────────────────────────────────── */
	body.page-id-37 .elementor-element-f81aa54 {
		padding: 150px 28px 145px !important;
	}
	body.page-id-37 .elementor-element-f81aa54 > img {
		height: 98px !important;
		width: 66px !important;
	}
	body.page-id-37 .elementor-element-f81aa54 > h2 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: normal !important;
	}
	body.page-id-37 .elementor-element-f81aa54 > p {
		margin: 40px 0 43px !important;
	}
	body.page-id-37 .elementor-element-f81aa54 > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
	}

	/* ── Newsletter ─────────────────────────────────────────────────────── */
	body.page-id-37 .elementor-element-ad0487c {
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
	}
	body.page-id-37 .elementor-element-64e7019 {
		padding: 58px 28px 69px !important;
	}
	body.page-id-37 .elementor-element-64e7019 > h2 {
		width: 100% !important;
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: normal !important;
	}
	body.page-id-37 .sh-newsletter-form {
		width: 100% !important;
		flex: 0 0 100% !important;
		margin-top: 49px !important;
	}
	body.page-id-37 .sh-newsletter-form > .elementor-widget-form {
		width: 100% !important;
	}
	body.page-id-37 .sh-newsletter-form .elementor-form-fields-wrapper {
		margin-bottom: 0 !important;
	}
	body.page-id-37 .sh-newsletter-form .elementor-field-group {
		margin-bottom: 13px !important;
	}
	body.page-id-37 .sh-newsletter-form .elementor-field-group.e-form__buttons {
		margin: 14px 0 0 !important;
		justify-content: flex-start !important;
	}
	body.page-id-37 .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-37 .sh-newsletter-form input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	body.page-id-37 .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 ─────────────────────────────────────────────────────────── */
	body.page-id-37 .elementor-element-a649978 {
		padding: 70px 28px 0 !important;
	}
	body.page-id-37 .elementor-element-18770eb {
		display: none !important;
	}
	body.page-id-37 .elementor-element-e5aea3d {
		margin-left: 31px !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}
	body.page-id-37 .elementor-element-bf43842 {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	body.page-id-37 .elementor-element-e5aea3d p:not(:first-child),
	body.page-id-37 .elementor-element-e5aea3d .e-paragraph-link-base {
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
	}
	body.page-id-37 .elementor-element-e5aea3d .e-paragraph-link-base {
		min-height: 28px !important;
		line-height: 28px !important;
	}
	body.page-id-37 .elementor-element-bf43842 > p:not(:first-child) {
		padding-left: 4px !important;
	}
	body.page-id-37 .elementor-element-3f7be58 {
		padding: 91px 28px 27px !important;
	}
	body.page-id-37 .elementor-element-3f7be58 > 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-37 .elementor-element-758ad30 {
		padding: 23px 25px 22px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		column-gap: 12px !important;
	}
	body.page-id-37 .elementor-element-709cf44 {
		flex: 0 0 auto !important;
		width: auto !important;
		flex-wrap: nowrap !important;
		column-gap: 12px !important;
	}
	body.page-id-37 .elementor-element-3cd3f56 {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		justify-content: flex-start !important;
	}
}
@media (max-width: 439px) {
	body.page-id-37 .elementor-element-758ad30,
	body.page-id-37 .elementor-element-709cf44 {
		flex-wrap: wrap !important;
	}
}

/* Testimonial cards: only the first card's quote carries a mobile size
   (30px/27px); the other seven fell back to 18px/36px, so the carousel showed
   one large-type card beside small-type ones. Same size for all. */
@media (max-width: 767px) {
	body.page-id-37 .sh-testi-frame .sh-testi-quote {
		font-size: 30px !important;
		line-height: 27px !important;
	}
}