/**
 * Thistle Estates — responsive layer.
 *
 * Additive only. Everything lives inside max-width media queries, so the
 * desktop (>=1200px) rendering is never touched. Because the theme styles are
 * inline per section, overrides here use !important and attribute selectors
 * that match the inline style values — this is safe: !important inside a
 * media query cannot leak to desktop.
 *
 * Tiers:  Tablet 768–1199px  |  Mobile <=767px
 */

/* Hamburger + drawer are hidden until the JS injects them; also hidden >=1200. */
.nav-toggle,
.thistle-drawer,
.thistle-backdrop { display: none; }

/* Partner-logo marquee: built by JS but hidden on desktop (arrow rail shows). */
.thistle-logo-marquee { display: none; }
@keyframes thistle-logo-scroll {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

/* ============================================================= TABLET + MOBILE
 * (max-width: 1199px) — applies to both tablet and mobile.
 * ============================================================================ */
@media ( max-width: 1199px ) {

	/* --- 1. Global -------------------------------------------------------- */
	.site { min-width: 0 !important; overflow-x: hidden; }
	img, iframe { max-width: 100%; }

	/* Section side + vertical padding */
	.site-main > section { padding-left: 32px !important; padding-right: 32px !important; }

	/* --- 2. Header → collapsed bar + hamburger ---------------------------- */
	/* Two-column bar: logo (left) + hamburger (right). Nav + CTA button hidden;
	   the CTA is reproduced inside the drawer. */
	.site-header {
		grid-template-columns: 1fr auto !important;
		align-items: center !important;
		gap: 14px !important;
		padding: 12px 24px !important;
		position: sticky; top: 0; z-index: 90;
	}
	.site-header .main-nav { display: none !important; }
	.site-header > a[href*="get-in-touch"] { display: none !important; }
	.site-header > a:first-child img { height: 44px !important; }
	.nav-toggle {
		display: flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; border: none; background: none;
		cursor: pointer; padding: 0; justify-self: end;
	}
	.nav-toggle svg { display: block; }
	.nav-toggle:hover { transform: none !important; }
	.breadcrumb { padding: 10px 24px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	/* --- 3. Grid collapse (inline-style attribute selectors) -------------- */
	.site-main [style*="grid-template-columns: repeat(4"],
	.site-main [style*="grid-template-columns: repeat(3"],
	.site-main [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }

	/* Two-column split sections -> stack on tablet where they get cramped */
	.site-main [style*="grid-template-columns: 300px 1fr"],
	.site-main [style*="grid-template-columns: 110px 1fr"],
	.site-main [style*="grid-template-columns: 1.15fr 1fr"] { grid-template-columns: 1fr !important; }

	/* Section header rows (heading + action link/buttons, space-between) -> stack,
	   so the action drops below the heading instead of overflowing / misaligning. */
	.site-main [style*="align-items: flex-end"][style*="justify-content: space-between"],
	.site-main [style*="align-items: baseline"][style*="justify-content: space-between"] {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px !important;
	}
	/* let the button group wrap onto two rows if needed */
	.site-main [style*="display: flex"][style*="gap: 16px"] { flex-wrap: wrap !important; }

	/* Homepage stats band: drop the inline 60px side padding and let each stat
	   cell shrink (cells default to min-width:auto, which was forcing overflow). */
	.home [style*="grid-template-columns: repeat(4, auto)"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
		gap: 30px 18px !important;
		justify-content: stretch !important;
	}
	.home [style*="grid-template-columns: repeat(4, auto)"] > div { min-width: 0 !important; }

	/* --- 4. Type scale (tablet) ------------------------------------------ */
	[style*="font-size: 72px"] { font-size: 52px !important; }
	[style*="font-size: 68px"], [style*="font-size: 64px"],
	[style*="font-size: 62px"], [style*="font-size: 58px"],
	[style*="font-size: 56px"] { font-size: 44px !important; }
	[style*="font-size: 54px"], [style*="font-size: 52px"],
	[style*="font-size: 50px"], [style*="font-size: 48px"] { font-size: 40px !important; }
	[style*="font-size: 46px"], [style*="font-size: 44px"],
	[style*="font-size: 42px"], [style*="font-size: 40px"] { font-size: 34px !important; }

	/* --- 5. Hero heights ------------------------------------------------- */
	[style*="height: 720px"] { height: auto !important; min-height: 620px; }
	[style*="height: 640px"] { height: 480px !important; }
	[style*="height: 620px"] { height: 480px !important; }
	[style*="height: 560px"] { height: 440px !important; }
	[style*="height: 480px"] { height: 380px !important; }
	[style*="height: 460px"] { height: 380px !important; }

	/* --- 6. Footer ------------------------------------------------------- */
	.site-footer > div:first-of-type { grid-template-columns: repeat(3, 1fr) !important; }

	/* --- 7. Get in Touch map --------------------------------------------- */
	#map, #map > div, #map iframe { height: 360px !important; }

	/* --- 8. Testimonial quote: adaptive smaller text --------------------- */
	[id^="thistle-reviews-"] .t-text { font-size: 19px !important; line-height: 1.6 !important; }

	/* --- 9. Partner logos: swap arrow rail for auto-sliding marquee ------- */
	.thistle-logo-strip { display: none !important; }
	.thistle-logo-marquee {
		display: block !important;
		background: #26282f;
		overflow: hidden;
		padding: 8px 0;
	}
	.thistle-logo-marquee-track {
		display: flex;
		align-items: center;
		width: max-content;
		animation: thistle-logo-scroll 24s linear infinite;
	}
	/* trailing margin per item (not flex gap) so translateX(-50%) loops exactly */
	.thistle-logo-marquee-track [role="img"] { flex: 0 0 auto; margin-right: 46px; }

	/* Footer accreditation row gets the same marquee. The original row is kept
	 * in the DOM and only visually clipped (not `display: none`) so the badge
	 * aria-labels stay available to screen readers — the marquee itself is
	 * aria-hidden decoration. */
	.thistle-footer-logo-strip {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip-path: inset( 50% ) !important;
		white-space: nowrap !important;
	}
	.thistle-footer-marquee {
		background: transparent !important;
		padding: 14px 0 18px !important;
	}
}

/* ==================================================================== MOBILE
 * (max-width: 767px) — single column, further reductions.
 * ============================================================================ */
@media ( max-width: 767px ) {

	.site-main > section { padding-left: 20px !important; padding-right: 20px !important; }

	/* --- Section rhythm: desktop vertical padding is far too tall on a phone --
	 * Sections carry their padding inline (70-90px top/bottom), which is ~11% of
	 * total page height before any content. Halve it. Keyed off the inline
	 * `padding:` so heroes — which have no inline padding — are skipped. */
	.site-main > section[style*="padding:"] {
		padding-top: 40px !important;
		padding-bottom: 44px !important;
	}
	/* keep deliberately-tight tops: blocks that continue the section above, and
	 * the slim filter/utility bars */
	.site-main > section[style*="padding: 0 "] { padding-top: 0 !important; }
	.site-main > section[style*="padding: 30px"] { padding-top: 18px !important; }
	.site-main > section[style*="padding: 34px"] {
		padding-top: 20px !important;
		padding-bottom: 16px !important;
	}
	.site-header { padding: 10px 16px !important; }
	.site-header > a:first-child img { height: 40px !important; }
	.breadcrumb { padding: 10px 16px !important; }

	/* --- Everything to single column ------------------------------------- */
	.site-main [style*="grid-template-columns: repeat(4"],
	.site-main [style*="grid-template-columns: repeat(3"],
	.site-main [style*="grid-template-columns: 1fr 1fr"],
	.site-main [style*="grid-template-columns: 620px"] { grid-template-columns: 1fr !important; }

	/* Stat bands read best as 2x2 — keep repeat(5) and the yellow stat bands paired */
	.site-main [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
	.site-main [style*="repeat(4, auto)"] { grid-template-columns: repeat(2, 1fr) !important; }

	/* --- Small icon cards: 2-up, not 1-up --------------------------------
	 * Icon + one bold line + one sentence. At 1-up that section costs ~830px
	 * of scroll for almost no content. The gap:40px grids are exactly these
	 * icon rows; the other repeat(4) grids are card/stat rows and stay 1-up. */
	.site-main [style*="grid-template-columns: repeat(4, 1fr); gap: 40px"] {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 30px 16px !important;
	}

	/* --- Odd-count grids: last item fills the empty cell instead of
	 * orphaning next to a dead one (5 process steps, 5 footer columns) --- */
	.site-main [style*="grid-template-columns: repeat(5, 1fr)"] > div:last-child {
		grid-column: 1 / -1;
	}
	.site-footer > div:first-of-type > div:last-child { grid-column: 1 / -1; }

	/* --- Fixed image heights ---------------------------------------------
	 * Chosen for a 3-across desktop grid (~415px wide each). At 335px wide a
	 * 440px block is taller than it is wide. Scoped to div/a so the
	 * fixed-height CTA *sections* keep their frames. */
	.site-main div[style*="height: 440px"] { height: 240px !important; }
	.site-main div[style*="height: 380px"] { height: 220px !important; }
	.site-main div[style*="height: 320px"],
	.site-main div[style*="height: 300px"] { height: 190px !important; }
	.site-main a[style*="height: 340px"] { height: 200px !important; }

	/* --- Grid blow-out: grid items default to `min-width: auto`, so a track
	 * cannot shrink below its content's min-content width. On Get in touch the
	 * Submit button's 180px floor propped the enquiry card open to 416px inside
	 * a 335px column. `min-width: 0` lets the track shrink as intended. */
	.site-main [style*="display: grid"] > *,
	.site-main [style*="display: flex"] > * { min-width: 0 !important; }
	.site-main input, .site-main select, .site-main textarea, .site-main button {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* --- Type scale (mobile) --------------------------------------------- */
	[style*="font-size: 72px"] { font-size: 36px !important; }
	[style*="font-size: 68px"], [style*="font-size: 64px"],
	[style*="font-size: 62px"], [style*="font-size: 58px"],
	[style*="font-size: 56px"] { font-size: 30px !important; }
	[style*="font-size: 54px"], [style*="font-size: 52px"],
	[style*="font-size: 50px"], [style*="font-size: 48px"] { font-size: 28px !important; }
	[style*="font-size: 46px"], [style*="font-size: 44px"],
	[style*="font-size: 42px"], [style*="font-size: 40px"] { font-size: 26px !important; }
	[style*="font-size: 36px"], [style*="font-size: 34px"],
	[style*="font-size: 32px"] { font-size: 24px !important; }

	/* --- Hero heights (mobile) ------------------------------------------- */
	[style*="height: 640px"] { height: 340px !important; }
	[style*="height: 620px"] { height: 340px !important; }
	[style*="height: 560px"] { height: 300px !important; }
	[style*="height: 480px"] { height: 280px !important; }
	[style*="height: 460px"] { height: 280px !important; }

	/* --- Page hero: size to content instead of clipping it ----------------
	 * The service / area heroes carry an inline `height: Npx; overflow: hidden`,
	 * so the fixed heights above chop off the intro copy and both CTAs. Let the
	 * hero grow to fit and demote the fixed height to a floor.
	 * Excluded: `.home` (own treatment below) and `.pgallery` (the single-property
	 * slideshow, which must keep a fixed frame). */
	/* Applies to ANY fixed-height section, not just the hero: the homepage
	 * "Let’s talk property" CTA is mid-page and was hiding both its buttons.
	 * min-height keeps each section's existing mobile height as a floor, so
	 * sections that already fit are visually unchanged. */
	.site-main > section:not(.pgallery)[style*="overflow: hidden"] {
		height: auto !important;
	}
	.site-main > section:not(.pgallery)[style*="height: 640px"],
	.site-main > section:not(.pgallery)[style*="height: 620px"] { min-height: 340px; }
	.site-main > section:not(.pgallery)[style*="height: 560px"] { min-height: 300px; }
	.site-main > section:not(.pgallery)[style*="height: 480px"],
	.site-main > section:not(.pgallery)[style*="height: 460px"] { min-height: 280px; }
	.site-main > section:not(.pgallery)[style*="height: 340px"] { min-height: 340px; }
	/* the in-flow content column is authored `height: 100%`, so with the section
	 * on auto it was still sized BY the section rather than sizing it. Absolutely
	 * positioned children (photo, tint) keep their 100% and are not matched. */
	.site-main > section:not(.pgallery)[style*="overflow: hidden"] > div[style*="position: relative"][style*="height: 100%"] {
		height: auto !important;
		padding: 44px 0 !important;
	}

	/* Decorative split-photo backdrops are `position: absolute; inset: 0` grids.
	 * Collapsing them to one column stacks the photos vertically (doubling their
	 * height inside a fixed frame) so the second photo falls out of view. They
	 * are backdrops, not content — keep them side by side. */
	.site-main [style*="position: absolute"][style*="grid-template-columns: 1fr 1fr"] {
		grid-template-columns: 1fr 1fr !important;
	}

	/* text column: drop the 50px desktop inset so the hero lines up with the
	 * 20px page gutter, and give it real top/bottom breathing room */
	body:not(.home) .site-main > section:first-of-type:not(.pgallery)[style*="overflow: hidden"] > div[style*="z-index: 2"] {
		padding: 52px 0 56px !important;
	}
	/* hero CTA pair: wrap instead of squeezing both buttons onto one line */
	body:not(.home) .site-main > section:first-of-type:not(.pgallery)[style*="overflow: hidden"] > div[style*="z-index: 2"] > div[style*="display: flex"] {
		flex-wrap: wrap !important;
		gap: 12px !important;
	}

	/* --- Homepage hero: photo becomes full background, text flows on top --- */
	.home .site-main > section:first-of-type { height: auto !important; min-height: 0 !important; }
	/* photo panel -> full-bleed background */
	.home .site-main > section:first-of-type > div:first-child {
		position: absolute !important; inset: 0 !important; width: 100% !important;
		clip-path: none !important;
	}
	/* darken the photo for text legibility (overlay is the panel's last child) */
	.home .site-main > section:first-of-type > div:first-child > div:last-child {
		background: rgba(20,22,27,0.6) !important;
	}
	/* text/search block: keep it POSITIONED so its z-index wins over the photo */
	.home .site-main > section:first-of-type > div:nth-child(2) {
		position: relative !important; left: auto !important; top: auto !important;
		max-width: 100% !important; padding: 56px 20px 48px !important;
		z-index: 3 !important;
	}
	/* hero search bar → wrap */
	#thistle-hero-search { flex-wrap: wrap !important; width: 100% !important; }
	#thistle-hero-search [data-pick] { flex: 1 1 50% !important; height: 48px !important; }
	#thistle-hero-search input[type="text"] { flex: 1 1 70% !important; height: 48px !important; }
	#thistle-hero-search button[type="submit"] { height: 48px !important; }
	.home .site-main > section:first-of-type img[alt*="RICS"] { width: 100px !important; }

	/* --- Homepage stats band: stack the figure above its label -----------
	 * Each stat is authored as a row (58px figure beside a 14px label). In a
	 * 161px half-width cell that forced labels onto 2-3 ragged lines and left
	 * the four cells 42/63/42/45px tall. Stacked and centred they read as a
	 * tidy 2x2 and match the yellow stat bands on the service pages. */
	.home [style*="grid-template-columns: repeat(4, auto)"] {
		gap: 26px 12px !important;
		align-items: start !important;
	}
	.home [style*="grid-template-columns: repeat(4, auto)"] > div {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 2px !important;
	}
	/* the 5★ glyph has taller font metrics than the digits, which pushed its
	 * label 10px below its row neighbour — pin the figure's line box */
	.home [style*="grid-template-columns: repeat(4, auto)"] > div > span:first-child {
		line-height: 1.15 !important;
	}

	/* --- Testimonials: pair the arrows under the quote -------------------
	 * The carousel is a `60px | 1fr | 60px` grid (prev, quote, next). Collapsing
	 * it to one column stacked prev ABOVE the quote and next BELOW it, and the
	 * bare glyphs had no tappable affordance. Keep two columns, span the quote
	 * across both, and sit the arrows side by side beneath it as 44px targets. */
	[id^="thistle-reviews-"] {
		grid-template-columns: 1fr 1fr !important;
		gap: 0 !important;
		padding-top: 24px !important;
	}
	[id^="thistle-reviews-"] > div {
		grid-column: 1 / -1 !important;
		grid-row: 1 !important;
		padding: 12px 6px !important;
	}
	[id^="thistle-reviews-"] > button {
		grid-row: 2 !important;
		width: 44px !important;
		height: 44px !important;
		margin: 16px 0 4px !important;
		padding: 0 !important;
		font-size: 24px !important;
		line-height: 1 !important;
		background: #ffffff !important;
		border: 1px solid #dcdcdc !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	[id^="thistle-reviews-"] > button[data-t="prev"] { justify-self: end !important; margin-right: 7px !important; }
	[id^="thistle-reviews-"] > button[data-t="next"] { justify-self: start !important; margin-left: 7px !important; }
	[id^="thistle-reviews-"] .t-text { font-size: 16px !important; line-height: 1.6 !important; margin-bottom: 22px !important; }

	/* --- Short-label CTA pairs: share one row -----------------------------
	 * `15px 34px` (hero) and `15px 36px` ("Need a surveyor?") are deliberately
	 * NOT in the full-width button list above — both labels in each pair are
	 * short enough to sit side by side. Their 68-72px of horizontal padding will
	 * not fit a ~160px half, so trim it to 10px. */
	.site-main [style*="display: flex"]:has(> a[style*="padding: 15px 34px"]),
	.site-main [style*="display: flex"]:has(> a[style*="padding: 15px 36px"]) {
		flex-wrap: nowrap !important;
		gap: 12px !important;
		/* the surveyor row sits in a centred flex column, so it shrank to its
		 * content width (285px) and the labels wrapped — make it fill the line */
		width: 100% !important;
		align-self: stretch !important;
	}
	.site-main [style*="display: flex"] > a[style*="padding: 15px 34px"],
	.site-main [style*="display: flex"] > a[style*="padding: 15px 36px"] {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	/* --- Estate Agency hero badge: stop it colliding with the dots -------
	 * A 150px circle at `bottom: -40px` is fine beside a ~600px desktop photo,
	 * but on a 335px one it covers nearly half the width and lands on top of the
	 * centred slideshow dots. Shrink it and pull the overhang in. */
	.site-main [style*="width: 150px"][style*="border-radius: 50%"][style*="bottom: -40px"] {
		width: 96px !important;
		height: 96px !important;
		right: 10px !important;
		bottom: -20px !important;
	}
	.site-main [style*="width: 150px"][style*="border-radius: 50%"][style*="bottom: -40px"] > span:first-child {
		font-size: 22px !important;
	}
	.site-main [style*="width: 150px"][style*="border-radius: 50%"][style*="bottom: -40px"] > span:last-child {
		font-size: 10px !important;
	}
	.site-main [style*="bottom: -34px"][style*="justify-content: center"] {
		bottom: -26px !important;
	}

	/* --- Single property: stack facts + unit overview -------------------- */
	.single-property .site-main [style*="grid-template-columns: 1fr 1fr"],
	.single-property .site-main [style*="grid-template-columns: 1.15fr 1fr"] { grid-template-columns: 1fr !important; }

	/* --- Buttons / CTAs: make hero + card CTAs comfortable --------------- */
	.site-main a[style*="letter-spacing: 2px"][style*="text-transform: uppercase"][style*="padding: 16px"] { text-align: center; }

	/* --- CTA buttons: uniform full-width blocks --------------------------
	 * Natural widths left pairs ragged (e.g. 271px next to 240px on the home
	 * page). Real buttons are the anchors carrying a two-value `padding`
	 * shorthand; the site's text-style CTAs use `padding-bottom` only and are
	 * deliberately not matched. The small "Back to listings" chip (12px 22px)
	 * is also excluded. */
	.site-main a[style*="padding: 16px 34px"],
	.site-main a[style*="padding: 15px 32px"],
	.site-main a[style*="padding: 16px 32px"],
	.site-main a[style*="padding: 15px 28px"],
	.site-main a[style*="padding: 17px 40px"],
	.site-main a[style*="padding: 14px 34px"],
	.site-main a[style*="padding: 14px 30px"] {
		width: 100% !important;
		flex: 1 1 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}
	/* let the row wrap so each button gets its own full-width line. Without
	 * :has() support they simply share the row equally — still uniform. */
	.site-main [style*="display: flex"]:has(> a[style*="padding: 16px 34px"]),
	.site-main [style*="display: flex"]:has(> a[style*="padding: 15px 32px"]),
	.site-main [style*="display: flex"]:has(> a[style*="padding: 16px 32px"]),
	.site-main [style*="display: flex"]:has(> a[style*="padding: 15px 28px"]),
	.site-main [style*="display: flex"]:has(> a[style*="padding: 17px 40px"]),
	.site-main [style*="display: flex"]:has(> a[style*="padding: 14px 34px"]),
	.site-main [style*="display: flex"]:has(> a[style*="padding: 14px 30px"]) {
		flex-wrap: wrap !important;
	}

	/* --- Footer (mobile): logo full width, links 2-up -------------------- */
	.site-footer > div:first-of-type { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
	.site-footer > div:first-of-type > img { grid-column: 1 / -1 !important; width: 150px !important; }
	.site-footer { padding: 40px 20px 24px !important; }
	/* accreditation logo row + bottom row wrap tighter */
	.site-footer > div:nth-of-type(2) { gap: 20px !important; }
	.site-footer > div:last-of-type { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
	.site-footer > div:last-of-type > div:last-child { text-align: left !important; }
	.site-footer > div:last-of-type [style*="justify-content: flex-end"] { justify-content: flex-start !important; }

	/* --- Knowledge Hub article body -------------------------------------
	 * Three problems on a phone:
	 *  1. <article> carries `padding: 60px 40px 80px`, leaving a 295px measure
	 *     while the rest of the site runs a 20px gutter (335px).
	 *  2. the authored 26px h2 rendered identical to the h1, because the h1's
	 *     44px scales to 26px here — no heading hierarchy at all.
	 *  3. body copy is set at line-height 1.9, far too airy for a 17px column.
	 * Justified + auto hyphenation (the document carries a lang, so the browser
	 * can hyphenate) keeps the ragged edge tidy without opening word gaps. */
	.site-main article[style*="max-width: 820px"] {
		padding: 32px 20px 44px !important;
	}
	.article-body > p {
		line-height: 1.7 !important;
		margin-top: 22px !important;
		text-align: justify !important;
		-webkit-hyphens: auto !important;
		hyphens: auto !important;
	}
	.article-body > h2 {
		font-size: 20px !important;
		line-height: 1.3 !important;
		margin-top: 34px !important;
	}
	/* the in-article CTA panel */
	.article-body > div {
		padding: 24px 20px !important;
		margin-top: 34px !important;
	}
	.article-body > div h2 { font-size: 19px !important; line-height: 1.3 !important; }
	.article-body > div p { line-height: 1.65 !important; }

	/* --- Contact map (mobile) ------------------------------------------- */
	#map, #map > div, #map iframe { height: 280px !important; }

	/* --- Sticky valuation bar: slightly shorter ------------------------- */
	.site > a[style*="position: sticky"][style*="bottom: 0"] { height: 50px !important; font-size: 13px !important; letter-spacing: 1.5px !important; }
}

/* Respect reduced-motion: hold the logo marquee still. */
@media ( prefers-reduced-motion: reduce ) {
	.thistle-logo-marquee-track { animation: none !important; }
}