/*
 * Phone layout (767px and narrower): cards two per row, tighter stacks.
 * Loaded after the main stylesheets.
 *
 * Every rule sits in the bpd-mobile cascade layer and is marked !important.
 * A layered !important declaration outranks any unlayered one whatever its
 * specificity, so these rules win over the many !important rules in
 * style.css and audit-fixes.css without piling on selectors. Only layout,
 * spacing and type size change here; colours and borders stay as they are.
 */
@layer bpd-mobile {
	@media (max-width: 767px) {
		/* ---------- Shared: two-column grids ---------- */
		.bpd-hero-proof__grid,
		.bpd-services-hero__proof,
		.bpd-about-hero__proof,
		.bpd-projects-hero__proof,
		.cp-hero-badges,
		.bpd-service-grid,
		.bpd-choose-grid,
		.bpd-stats-grid,
		.bpd-portfolio-grid,
		.cp-projects__grid,
		.bpd-trust-cards,
		.sv-choose__grid,
		.sv-content-cards,
		.sv-benefits__grid,
		.sv-stats__grid,
		.bpd-renovation-services-grid__cards,
		.rq-scope__grid,
		.bpd-process-flow-vertical {
			display: grid !important;
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			gap: 12px !important;
		}

		/* An odd last card spans the full row instead of leaving a hole. */
		.bpd-service-grid > :last-child:nth-child(odd),
		.sv-content-cards > :last-child:nth-child(odd),
		.sv-benefits__grid > :last-child:nth-child(odd),
		.bpd-renovation-services-grid__cards > :last-child:nth-child(odd),
		.bpd-process-flow-vertical > :last-child:nth-child(odd),
		.bpd-trust-cards > :last-child:nth-child(odd),
		.sv-choose__grid > :last-child:nth-child(odd) {
			grid-column: 1 / -1 !important;
		}

		/* Grid children must be allowed to shrink below their content width. */
		.bpd-service-grid > *,
		.bpd-choose-grid > *,
		.bpd-stats-grid > *,
		.bpd-portfolio-grid > *,
		.cp-projects__grid > *,
		.bpd-trust-cards > *,
		.sv-choose__grid > *,
		.sv-content-cards > *,
		.sv-benefits__grid > *,
		.sv-stats__grid > *,
		.bpd-renovation-services-grid__cards > *,
		.rq-scope__grid > *,
		.bpd-process-flow-vertical > * {
			min-width: 0 !important;
			width: auto !important;
			max-width: none !important;
			margin: 0 !important;
		}

		/* ---------- Hero proof tiles (home + inner pages) ---------- */
		.bpd-hero-proof__grid { gap: 10px !important; }
		.bpd-hero-proof__grid > div {
			min-height: 0 !important;
			padding: 14px 12px !important;
		}
		.bpd-hero-proof__grid strong {
			font-size: 28px !important;
			line-height: 1.05 !important;
		}
		.bpd-services-hero__proof > span,
		.bpd-about-hero__proof > span,
		.bpd-projects-hero__proof > span {
			min-height: 0 !important;
			padding: 14px 12px !important;
		}
		.bpd-services-hero__proof strong,
		.bpd-about-hero__proof strong,
		.bpd-projects-hero__proof strong {
			font-size: 26px !important;
			line-height: 1.05 !important;
		}
		.cp-hero-badges { gap: 10px !important; }
		.cp-hero-badge {
			min-width: 0 !important;
			padding: 10px 10px !important;
			font-size: 12px !important;
			line-height: 1.3 !important;
		}

		/* ---------- Service cards (home + Our Services) ---------- */
		.bpd-service-card { border-radius: 14px !important; }
		.bpd-service-card .bpd-service-img-wrapper {
			height: auto !important;
			aspect-ratio: 4 / 3 !important;
		}
		.bpd-service-card .bpd-service-img-wrapper img {
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
		}
		.bpd-service-card .bpd-service-content { padding: 14px 12px 14px !important; }
		.bpd-service-card .bpd-service-content h3 {
			font-size: 15px !important;
			line-height: 1.25 !important;
			margin-bottom: 6px !important;
		}
		.bpd-service-card .bpd-service-content p {
			font-size: 12.5px !important;
			line-height: 1.5 !important;
			margin-bottom: 12px !important;
		}
		.bpd-service-card .bpd-service-content .bpd-btn {
			min-height: 38px !important;
			height: auto !important;
			padding: 9px 8px !important;
			font-size: 10px !important;
			letter-spacing: 0.05em !important;
			white-space: normal !important;
			text-align: center !important;
		}
		/* Full-width odd card: image beside the text. */
		.bpd-service-grid > .bpd-service-card:last-child:nth-child(odd) { flex-direction: row !important; }
		.bpd-service-grid > .bpd-service-card:last-child:nth-child(odd) .bpd-service-img-wrapper {
			flex: 0 0 42% !important;
			aspect-ratio: auto !important;
		}
		.bpd-service-grid > .bpd-service-card:last-child:nth-child(odd) .bpd-service-content { flex: 1 1 auto !important; }

		/* ---------- Home: why contractors hire us ---------- */
		/* The decorative gold rail sits 35px in on phones, right through the text. */
		.bpd-contractor-advantage::before { left: 8px !important; }
		.bpd-choose-grid { margin-bottom: 24px !important; }
		.bpd-choose-card {
			flex-direction: column !important;
			align-items: flex-start !important;
			gap: 10px !important;
			min-height: 0 !important;
			padding: 16px 14px !important;
		}
		.bpd-choose-card .bpd-choose-icon {
			width: 38px !important;
			height: 38px !important;
			flex: 0 0 38px !important;
		}
		.bpd-choose-card .bpd-choose-text { width: 100% !important; }
		.bpd-choose-card h4 {
			font-size: 15px !important;
			line-height: 1.25 !important;
			margin-bottom: 6px !important;
		}
		.bpd-choose-card p {
			font-size: 12.5px !important;
			line-height: 1.5 !important;
		}

		/* ---------- Home: stat cards ---------- */
		.bpd-stat-card {
			min-height: 0 !important;
			padding: 16px 12px !important;
		}
		.bpd-stat-card .bpd-stat-icon {
			width: 36px !important;
			height: 36px !important;
			margin-bottom: 8px !important;
		}
		.bpd-stat-card .bpd-stat-val {
			font-size: 30px !important;
			line-height: 1.1 !important;
		}
		.bpd-stat-card .bpd-stat-label {
			font-size: 10px !important;
			line-height: 1.35 !important;
		}

		/* ---------- Project cards (portfolio + featured) ---------- */
		.bpd-portfolio-card,
		.cp-proj-card {
			height: auto !important;
			min-height: 0 !important;
			aspect-ratio: 4 / 5 !important;
			border-radius: 12px !important;
		}
		.bpd-portfolio-card > a,
		.cp-proj-card > a {
			display: block !important;
			width: 100% !important;
			height: 100% !important;
		}
		.bpd-portfolio-card img,
		.cp-proj-card img {
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
		}
		.bpd-portfolio-overlay,
		.cp-proj-card__overlay {
			min-height: 0 !important;
			height: auto !important;
			top: auto !important;
			padding: 30px 10px 10px !important;
		}
		.bpd-portfolio-overlay h4,
		.cp-proj-card__overlay h4 {
			font-size: 13.5px !important;
			line-height: 1.25 !important;
			margin-bottom: 4px !important;
		}
		.bpd-portfolio-overlay span,
		.cp-proj-card__overlay span {
			font-size: 9.5px !important;
			line-height: 1.35 !important;
			letter-spacing: 0.04em !important;
			white-space: normal !important;
		}

		/* An odd last project card fills the row as a wide banner. */
		.bpd-portfolio-grid > .bpd-portfolio-card:last-child:nth-child(odd),
		.cp-projects__grid > .cp-proj-card:last-child:nth-child(odd) {
			grid-column: 1 / -1 !important;
			aspect-ratio: 16 / 9 !important;
		}

		/* Projects page filter buttons: wrap as chips instead of a stacked list. */
		.bpd-portfolio-filters {
			flex-direction: row !important;
			flex-wrap: wrap !important;
			justify-content: center !important;
			gap: 8px !important;
			padding: 10px !important;
		}
		.bpd-portfolio-filters .portfolio-filter-btn {
			width: auto !important;
			flex: 0 0 auto !important;
			min-height: 38px !important;
			padding: 9px 14px !important;
			font-size: 10px !important;
		}

		/* ---------- Trust / advantage cards ---------- */
		.bpd-trust-cards > .bpd-trust-card {
			min-height: 0 !important;
			padding: 16px 14px !important;
		}
		.bpd-trust-cards > .bpd-trust-card .bpd-trust-card-icon {
			width: 38px !important;
			height: 38px !important;
			margin-bottom: 10px !important;
		}
		.bpd-trust-cards > .bpd-trust-card h4 {
			font-size: 15px !important;
			line-height: 1.25 !important;
			margin-bottom: 6px !important;
		}
		.bpd-trust-cards > .bpd-trust-card p {
			font-size: 12.5px !important;
			line-height: 1.5 !important;
		}

		/* ---------- Numbered steps / sectors ---------- */
		.bpd-process-flow-vertical > .bpd-process-step-vertical {
			display: flex !important;
			flex-direction: column !important;
			align-items: flex-start !important;
			gap: 8px !important;
			min-height: 0 !important;
			padding: 16px 14px !important;
		}
		.bpd-process-flow-vertical h4 {
			font-size: 14.5px !important;
			line-height: 1.3 !important;
			margin: 0 !important;
		}
		.bpd-process-flow-vertical p {
			font-size: 12.5px !important;
			line-height: 1.5 !important;
			margin: 0 !important;
		}
		.bpd-process-flow-vertical .bpd-sector-card__number {
			width: 38px !important;
			height: 38px !important;
		}
		/* The step number was absolutely placed in the old 58px top padding. */
		.bpd-process-flow-vertical .bpd-process-step-vertical__number {
			position: static !important;
			flex: 0 0 auto !important;
		}

		/* ---------- Service / city pages ---------- */
		.sv-choose__card,
		.sv-benefit,
		.sv-content-card {
			min-height: 0 !important;
			padding: 16px 14px !important;
		}
		.sv-content-card,
		.sv-benefit {
			flex-direction: column !important;
			align-items: flex-start !important;
			gap: 10px !important;
		}
		.sv-choose__icon,
		.sv-benefit__icon,
		.sv-content-card__icon {
			width: 38px !important;
			height: 38px !important;
			flex: 0 0 38px !important;
		}
		.sv-choose__icon { margin-bottom: 10px !important; }
		.sv-content-card__body,
		.sv-benefit > div:not([class*="icon"]) { width: 100% !important; }
		.sv-choose__card h4,
		.sv-benefit h4,
		.sv-content-card h4 {
			font-size: 15px !important;
			line-height: 1.25 !important;
			margin-bottom: 6px !important;
		}
		.sv-choose__card p,
		.sv-benefit p,
		.sv-content-card p {
			font-size: 12.5px !important;
			line-height: 1.5 !important;
		}
		.sv-content-card__body {
			display: flex !important;
			flex-direction: column !important;
			flex: 1 1 auto !important;
		}
		.sv-content-card__body p { margin-bottom: 12px !important; }
		.sv-content-card .bpd-btn {
			width: 100% !important;
			min-height: 38px !important;
			height: auto !important;
			margin-top: auto !important;
			padding: 9px 8px !important;
			font-size: 10px !important;
			letter-spacing: 0.05em !important;
		}
		.sv-stats__grid { gap: 0 !important; }
		.sv-stats__item { padding: 16px 8px !important; }
		.sv-stats__label {
			font-size: 10px !important;
			line-height: 1.35 !important;
		}

		/* Overview image was wider than the screen on some service pages. */
		.sv-overview__image,
		.sv-overview__image .sv-location-visual {
			max-width: 100% !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
		.sv-overview__image img { max-width: 100% !important; }

		/* ---------- Renovation service cards ---------- */
		.bpd-renovation-service-card {
			min-height: 0 !important;
			padding: 16px 14px !important;
			gap: 8px !important;
		}
		.bpd-renovation-service-card__number {
			width: 36px !important;
			height: 36px !important;
			font-size: 12px !important;
		}
		.bpd-renovation-service-card h3 {
			font-size: 15px !important;
			line-height: 1.25 !important;
		}
		.bpd-renovation-service-card p {
			font-size: 12.5px !important;
			line-height: 1.5 !important;
		}
		.bpd-renovation-service-card__cta {
			min-height: 38px !important;
			padding: 9px 8px !important;
			font-size: 10px !important;
		}

		/* ---------- Contact page sidebar: trust items three across ---------- */
		.cp-trust-strip {
			display: grid !important;
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
			gap: 8px !important;
		}
		.cp-trust-strip__item {
			min-width: 0 !important;
			flex-direction: column !important;
			justify-content: center !important;
			gap: 6px !important;
			padding: 12px 6px !important;
			font-size: 11px !important;
			line-height: 1.3 !important;
			text-align: center !important;
		}

		/* Home contact box: office hours as three short columns. */
		.bpd-hours-card .bpd-info-support__grid {
			display: grid !important;
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
			gap: 8px !important;
		}
		.bpd-hours-card .bpd-info-support__grid > div {
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			gap: 8px !important;
			min-width: 0 !important;
			padding: 10px 6px !important;
			text-align: center !important;
		}
		.bpd-hours-card .bpd-info-support__grid > div > span {
			width: auto !important;
			padding: 5px 10px !important;
			font-size: 11px !important;
		}
		.bpd-hours-card .bpd-info-support__grid p {
			margin: 0 !important;
			font-size: 12.5px !important;
			line-height: 1.35 !important;
		}

		/* Langford quote panel: numbered rows only need a small badge column. */
		.bpd-langford-quote .bpd-info-support__grid > div {
			grid-template-columns: 44px minmax(0, 1fr) !important;
			gap: 10px !important;
		}
		.bpd-langford-quote .bpd-info-support__grid > div > span {
			width: auto !important;
			justify-content: center !important;
			padding: 6px 4px !important;
		}

		/* ---------- Quote page ---------- */
		.rq-scope-card {
			min-height: 84px !important;
			padding: 14px 12px !important;
			font-size: 14px !important;
		}
		.rq-proof-card__stats {
			display: grid !important;
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
			gap: 8px !important;
		}
		.rq-proof-card__stats > div {
			min-width: 0 !important;
			padding: 12px 6px !important;
			text-align: center !important;
			align-items: center !important;
		}

		/* ---------- Service Areas page: two columns of cities per region ---------- */
		.bpd-sa-region ul {
			display: grid !important;
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			column-gap: 14px !important;
		}
		.bpd-sa-region li { min-width: 0 !important; }
		.bpd-sa-region li a {
			gap: 6px !important;
			font-size: 13.5px !important;
			padding-top: 12px !important;
			padding-bottom: 12px !important;
		}

		/* ---------- Offices (shared on every page): compact stacked cards ---------- */
		/* Kept one per row: at half width the OpenStreetMap credit line covers the map. */
		.bpd-global-map__offices { gap: 14px !important; }
		.bpd-global-map__office {
			padding: 12px !important;
			gap: 10px !important;
		}
		.bpd-global-map__address {
			min-height: 0 !important;
			padding: 12px 14px !important;
		}
		/* The map fills the space under its caption, so the bottom edge with the
		   OpenStreetMap credit is never cut off. */
		.bpd-global-map__frame {
			display: flex !important;
			flex-direction: column !important;
			height: 230px !important;
			min-height: 0 !important;
		}
		.bpd-global-map__frame-label { flex: 0 0 auto !important; }
		.bpd-global-map__frame iframe {
			flex: 1 1 auto !important;
			height: auto !important;
			min-height: 0 !important;
		}

		/* ---------- CTA band (shared) ---------- */
		.bpd-cta-band__panel {
			padding: 28px 20px !important;
			gap: 22px !important;
		}
		.bpd-cta-band__facts { gap: 8px !important; }
		.bpd-cta-band__facts li {
			padding: 5px 10px !important;
			font-size: 11.5px !important;
		}
		.bpd-cta-band__alt {
			display: grid !important;
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			gap: 10px !important;
		}
		.bpd-cta-band__alt .bpd-cta-band__btn {
			min-width: 0 !important;
			gap: 6px !important;
			padding-left: 6px !important;
			padding-right: 6px !important;
			font-size: 13.5px !important;
			white-space: nowrap !important;
		}

		/* ---------- Gallery-style content: linked photos two per row ---------- */
		.bpd-main-content-wrapper:has(> p > a > img) {
			display: grid !important;
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			gap: 10px !important;
		}
		.bpd-main-content-wrapper:has(> p > a > img) > * {
			grid-column: 1 / -1 !important;
			min-width: 0 !important;
		}
		.bpd-main-content-wrapper:has(> p > a > img) > p:has(> a > img) {
			grid-column: auto !important;
			margin: 0 !important;
		}
		/* The first photo is moved into the side image, leaving an empty link behind. */
		.bpd-main-content-wrapper:has(> p > a > img) > p:has(> a:only-child:empty) {
			display: none !important;
		}
		.bpd-main-content-wrapper:has(> p > a > img) > p > a > img {
			display: block !important;
			width: 100% !important;
			height: auto !important;
			aspect-ratio: 4 / 3 !important;
			object-fit: cover !important;
			border-radius: 10px !important;
		}
		.bpd-split-grid:has(.bpd-main-content-wrapper > p > a > img) .bpd-split-image { min-height: 240px !important; }

		/* ---------- Quote forms: first and last name on one row ---------- */
		.wpforms-field-name .wpforms-field-row {
			display: grid !important;
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			gap: 10px !important;
		}
		.wpforms-field-textarea textarea.wpforms-field-small {
			height: 84px !important;
			min-height: 84px !important;
		}
		.wpforms-field-name .wpforms-field-row-block {
			width: auto !important;
			min-width: 0 !important;
			margin: 0 !important;
			padding: 0 !important;
			float: none !important;
		}

		/* ---------- Floating chat and WhatsApp buttons ---------- */
		/* The chat box spans the screen width on phones, so its empty part
		   caught taps meant for links scrolling beneath it. Only the launcher
		   takes taps now; the chat panel sets its own when open. */
		.bpd-lead-chat { pointer-events: none !important; }
		.bpd-lead-chat__launcher { pointer-events: auto !important; }
		/* Faded out while the footer's copyright bar is on screen (js/main.js),
		   so they never sit on that text. */
		.bpd-at-footer-end .floating-whatsapp,
		.bpd-at-footer-end .bpd-lead-chat:not(.is-open) .bpd-lead-chat__launcher {
			opacity: 0 !important;
			visibility: hidden !important;
		}
	}

	/* The launcher's own transitions, plus the fade above. */
	@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
		.bpd-lead-chat__launcher {
			transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s, opacity 0.2s, visibility 0.2s !important;
		}
	}

	/* Small phones: keep two-word button labels on one line. */
	@media (max-width: 380px) {
		.bpd-service-card .bpd-service-content .bpd-btn,
		.sv-content-card .bpd-btn,
		.bpd-renovation-service-card__cta {
			padding-left: 4px !important;
			padding-right: 4px !important;
			font-size: 9.5px !important;
			letter-spacing: 0.03em !important;
		}
	}

	/* Very narrow phones: text-heavy grids and the call buttons go back to one column. */
	@media (max-width: 339px) {
		.bpd-choose-grid,
		.sv-content-cards,
		.bpd-process-flow-vertical,
		.bpd-cta-band__alt {
			grid-template-columns: 1fr !important;
		}
	}
}