/* Tablet / in-between widths (768-1024px).

   Written when this range rendered the desktop layout unscaled. Since
   2026-09-17 the page is laid out at 1024 and scaled to the device (see
   functions.php "Responsive scaling"), so these rules now shape that 1024
   layout; they are still what keeps it from overflowing. Originally: rows
   built as fixed-width flex columns then run past the right edge, where
   html{overflow-x:hidden} silently cuts them off: About's Quick Overview lost
   two of its four columns, both stat rows lost their third card, Shop's
   benefit grid lost its right column, and newsletter fields shrank to ~40px.

   Every rule here only lets an over-wide row WRAP or SHRINK. Nothing is
   repositioned at 1025px and up, and phones (max-width 767px) are untouched.
   Found and verified with compare/dk_tablet_check.py + dk_tablet_sheets.py. */

@media (min-width: 768px) and (max-width: 1024px) {

	/* Any heading/paragraph carrying a desktop pixel width larger than its
	   column (About's "No wasted time" h3 was 895px wide at 768). Marquee and
	   carousel copy is excluded: those tracks must stay at max-content or the
	   loop breaks. */
	.elementor :is(.e-heading-base, .e-paragraph-base):not(.sh-marquee-track *):not(.sh-testi-track *) {
		max-width: 100% !important;
	}

	/* Newsletter bands: heading beside a two-field form. At 768 the fields
	   were 44px wide ("First Nai") and About's heading went one word per
	   line. Stack the heading above a full-width form. */
	.e-flexbox-base:has(> .sh-newsletter-form) {
		flex-wrap: wrap !important;
		row-gap: 32px !important;
	}
	/* ...and let the band grow with it: Resources/Success Stories pin it at
	   263px, so the stacked form spilled under the footer and the heading rose
	   behind the band above. */
	.e-flexbox-base:is(:has(> .sh-newsletter-form), :has(> * > .sh-newsletter-form)) {
		height: auto !important;
		min-height: 0 !important;
	}
	.e-flexbox-base:has(> .sh-newsletter-form) > * {
		flex: 1 1 100% !important;
		width: auto !important;
		max-width: 100% !important;
	}

	/* Resources (36) / Success Stories (37): feed.css pins these bands at
	   Figma's 263px with a 691px form and 339px fields, which only fits from
	   ~1100px. html-prefixed to outrank those page rules. */
	html body.page-id-36 .elementor-element-2f30bd3,
	html body.page-id-37 .elementor-element-ad0487c {
		height: auto !important;
	}
	html body.page-id-36 .elementor-element-b682f19,
	html body.page-id-37 .elementor-element-64e7019 {
		flex-wrap: wrap !important;
		padding: 57px 46px 60px !important;
		row-gap: 32px !important;
	}
	/* About "A quick overview of our proof": the two-line heading of the
	   design (606px measure) rather than one full-width line. */
	html body.page-id-33 .elementor .elementor-element-88f54db > h2.e-heading-base {
		max-width: 606px !important;
	}
	html body.page-id-36 .elementor-element-b682f19 > h2,
	html body.page-id-37 .elementor-element-64e7019 > h2 {
		margin-top: 0 !important;
	}
	html body.page-id-36 .elementor-element-b682f19 > .sh-newsletter-form,
	html body.page-id-37 .elementor-element-64e7019 > .sh-newsletter-form {
		flex: 1 1 100% !important;
		width: auto !important;
	}
	html body.page-id-36 .elementor-element-b682f19 :is(.elementor-field-type-text, .elementor-field-type-email),
	html body.page-id-37 .elementor-element-64e7019 :is(.elementor-field-type-text, .elementor-field-type-email) {
		flex: 1 1 calc(50% - 7px) !important;
		width: auto !important;
		max-width: none !important;
	}

	/* Stat rows (About, Shop): three fixed ~421px cards. Two per row. */
	.e-flexbox-base:has(> .sh-stat-card) {
		flex-wrap: wrap !important;
		justify-content: center !important;
		row-gap: 60px !important;
		column-gap: 40px !important;
	}
	.e-flexbox-base:has(> .sh-stat-card) > .sh-stat-card {
		flex: 0 1 calc(50% - 20px) !important;
		width: auto !important;
		min-width: 0 !important;
	}

	/* About "A Quick Overview": four 326px columns. Two per row. */
	.e-flexbox-base:has(> .sh-ov-row) {
		flex-wrap: wrap !important;
		justify-content: center !important;
		row-gap: 60px !important;
		padding-left: 0 !important;
	}
	.e-flexbox-base:has(> .sh-ov-row) > .sh-ov-row {
		flex: 0 1 50% !important;
		width: auto !important;
		min-width: 0 !important;
	}

	/* Shop "With Bubbly… you'll" benefits: 2x2 of 327px cards 213px apart. */
	.sh-etched-list > .e-flexbox-base {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 40px !important;
	}
	.sh-etched-list > .e-flexbox-base > .e-flexbox-base {
		flex: 1 1 280px !important;
		width: auto !important;
		max-width: 420px !important;
		min-width: 0 !important;
	}

	/* Contact "meet Crystal": photo + text row; the text column was 158px. */
	.sh-about-row {
		flex-wrap: wrap !important;
		row-gap: 40px !important;
	}
	.sh-about-row > * {
		flex: 1 1 100% !important;
		width: auto !important;
		max-width: 100% !important;
	}

	/* Services list rows (Services, Contact): the 78px gaps left the name
	   column 180px wide, breaking "90-MINUTE" at its hyphen. */
	.sh-service-row {
		column-gap: 24px !important;
	}

	/* About "The mission": the 514px copy column started at x=311 and ran
	   57px past the right edge. */
	body.page-id-33 .elementor-element-333ea16 {
		flex-wrap: wrap !important;
		align-content: flex-start !important;
		column-gap: 40px !important;
		row-gap: 24px !important;
	}
	body.page-id-33 .elementor-element-da3a210 {
		flex: 1 1 360px !important;
		min-width: 0 !important;
	}

	/* About "For collaborations": the copy and button are absolutely placed
	   at left:993px, i.e. off-screen below 1400px. Stack heading, copy and
	   button in flow at the bottom of the photo instead. */
	body.page-id-33 .sh-collab-frame {
		height: auto !important;
		min-height: 625px;
		flex-direction: column !important;
		justify-content: flex-end !important;
		padding: 200px 55px 55px !important;
		box-sizing: border-box !important;
		gap: 24px;
	}
	body.page-id-33 .sh-collab-photo {
		height: 100% !important;
	}
	body.page-id-33 :is(.sh-collab-heading, .sh-collab-text) {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		inset: auto !important;
		width: auto !important;
		max-width: 100% !important;
		z-index: 1;
	}

	/* Shop "An hour of dedicated decision making": heading, copy and CTA in
	   one 670px row over the photo, so each got ~200px. Heading full width,
	   copy and button share the line below. */
	body.page-id-35 .elementor-element-9a73541 {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		row-gap: 20px !important;
		column-gap: 40px !important;
	}
	body.page-id-35 .elementor-element-9a73541 > h4 {
		flex: 1 1 100% !important;
	}
	body.page-id-35 .elementor-element-9a73541 > p {
		flex: 1 1 300px !important;
		width: auto !important;
	}

	/* Homepage: the red envelope (500x390, pinned 62px from the right at
	   1512) slid left over "Read more about services" and swallowed its
	   clicks. Scale it with the viewport and keep the button on top. */
	body.home img[src*="envelope_clean2"] {
		width: 33% !important;
		height: auto !important;
		left: auto !important;
		inset-inline-start: auto !important;
		right: 4% !important;
		/* At 1512 it hangs 251px below the services section and straddles the
		   maroon band's top edge. At a third of the row it is 0.68 of that
		   size, so the same 251px left it wholly inside the band, red on red.
		   180px keeps the straddle and clears the button. */
		bottom: -180px !important;
		inset-block-end: -180px !important;
	}
	body.home .elementor-element-52be995 > a {
		position: relative;
		z-index: 7;
	}
	/* About: the luggage tag is pinned 190px from the right of a containing
	   block that is wider than a tablet viewport, so at 768-1024 it sat at
	   x=1040 - entirely off-screen. Anchor it to the viewport's right edge. */
	body.page-id-33 .elementor-element-4e2d7a9 > .sh-hover-nudge.e-01fbd51-aab218 {
		inset-inline-end: auto !important;
		inset-inline-start: calc(100% - 320px) !important;
		width: 240px !important;
		height: auto !important;
	}
}

/* Tablet (laid out at 1024 and scaled; see functions.php "Responsive
   scaling"). Homepage "bright path": the pink photo kept its desktop 929px
   height while the copy column grows to ~1109px at this width, leaving a
   cream strip under the photo. Let it fill the row. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.home .elementor-element-afa2f29 > img {
		height: auto !important;
		align-self: stretch !important;
		object-fit: cover !important;
	}
}
/* Tablet: two images stretched with object-fit:fill at the 1024 layout -
   the homepage testimonial marble (1.31 vs its 1.78 ratio) and the footer
   wordmark on Resources / Success Stories (4.98 vs 7.59). */
@media (min-width: 768px) and (max-width: 1024px) {
	body.home .elementor-element-72a9033 > img {
		object-fit: cover !important;
		object-position: center bottom !important;
	}
	/* feed.css pins these at 186px tall with a 1414px-wide box capped to
	   100%, so the height must follow the narrower width. */
	html body.page-id-36 .elementor-element-43b7a77 > img.e-d1d6a9e-918863,
	html body.page-id-37 img.e-8784c34-39f205.e-8784c34-39f205 {
		height: auto !important;
		object-fit: contain !important;
	}
}
/* Cookie banner on tablets: the page is scaled to 0.75-1.0 here, which took
   its 15px copy and 16px buttons down to ~11px. Sized so they render at the
   same 15-16px as on phones and desktop. */
@media (min-width: 768px) and (max-width: 1024px) {
	.sh-cookie-banner-text {
		font-size: calc(15px / var(--sh-zoom, 1)) !important;
	}
	.sh-cookie-banner-decline,
	.sh-cookie-banner-accept {
		font-size: calc(16px / var(--sh-zoom, 1)) !important;
	}
}

/* The post's Bubbly CTA button sets 15px, which the tablet scale (0.75-1.0)
   took down to 11.3px - found by the device sweep on an iPad. Sized so it
   lands at 15px whatever the page is scaled to, the same trick the cookie
   banner uses. */
@media (min-width: 768px) and (max-width: 1024px) {
	.sh-inline-cta-btn {
		font-size: calc(15px / var(--sh-zoom, 1)) !important;
	}
}

/* Homepage founder panel. The portrait is a separate image inside
   .sh-founder-frame (see desktop-pages/home.css); here the panel is half the
   row and as tall as the copy beside it. The 758x852 frame overlay is drawn
   at 0.75 scale (568x639) so the tag stays inside the 512px panel, centred,
   with the portrait placed in the overlay's opening. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.home .sh-founder-section > .sh-founder-frame {
		position: relative !important;
		display: block !important;
		flex: 0 0 50% !important;
		width: 50% !important;
		min-height: 700px !important;
		padding: 0 !important;
		overflow: hidden !important;
		align-self: stretch !important;
		background: #DCC38B url('../../img/founder-argyle-tile.png') repeat calc(50% - 229.1px) calc(50% - 20.25px) / 110.25px 148.5px !important;
	}
	body.home .sh-founder-frame::after {
		content: '';
		position: absolute;
		inset: 0;
		background: url('../../img/founder-frame-overlay.webp') 50% 50% / 568.5px 639px no-repeat;
		pointer-events: none;
	}
	body.home .sh-founder-frame > .sh-founder-photo {
		position: absolute !important;
		top: calc(50% - 197px) !important;
		left: calc(50% - 147px) !important;
		width: 294px !important;
		max-width: none !important;
		height: 384px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		object-fit: cover !important;
		object-position: 50% 15% !important;
	}
}