/*
 * 1.0.308: full-screen layout on phones, across every Partner Hub surface.
 *
 * At 767px and below, page-level sections (heroes, search panels, profile
 * sections, sidebars, dashboard panels) were boxed: inset 10-36px from the
 * screen edge with rounded corners, side borders and shadows. Here they become
 * full-width bands with a 16px content gutter, and panels nested inside a band
 * (a hero's search form, a stat box) sit flat on it. Repeated items (partner
 * cards, rows, buttons, inputs) keep their own shape.
 *
 * The bleed uses margin-inline: calc(50% - 50vw), which reaches the screen
 * edge from any centred container whatever that container's own padding. The
 * outer page shells keep their own overflow clipping (they are already full
 * width on phones, and on the regions page that clipping stops a map overlay
 * widening the page); only inner wrappers that are themselves inset and clip
 * are opened up.
 *
 * !important and the :not() specificity boost are deliberate (the finder's
 * own late-loaded rules reach (0,5,0) !important): this layer must
 * win over the per-component rules it replaces, and only on phones. It is
 * loaded last.
 */
@media (max-width: 767px) {
	html body :is(
		/* Network home, directory, sector and regional pages */
		.tla-ph-network-intro, .tla-ph-network-search, .tla-ph-network-business-cta,
		.tla-ph-directory-hero, .tla-ph-directory-filter, .tla-ph-directory-summary, .tla-ph-tier-reveal,
		.tla-ph-s302-hero, .tla-ph-s302-specialisms, .tla-ph-s302-tier, .tla-ph-s302-ad-row, .tla-ph-s302-spotlight,
		.tla-ph-region-hero, .tla-ph-region-map-shell, .tla-ph-region-page-hero, .tla-ph-region-sector-card, .tla-ph-region-filter, .tla-ph-region-area-links,
		/* Basic and classic profiles */
		.tla-ph-basic-listing-hero, .tla-ph-profile-anchor-nav, .tla-ph-profile-section, .tla-ph-member-discount-card,
		.tla-ph-profile-sidebar-card, .tla-ph-related-searches, .tla-ph-related-partners, .tla-ph-public-state,
		/* Showcase profiles */
		.tla-pp-contact, .tla-pp-closer-card, .tla-pp-map,
		/* Finder and its launch gate */
		.tla-ai-finder, .tla-ph-fresh-search, .tla-ph-fresh-guided, .tla-ph-match-disclaimer, .tla-ph-match-fresh .tla-ph-alert,
		.tla-ph-member-matching-gate .tla-ph-frontend-card,
		/* My TLA (member dashboard) */
		.tla-mcc-membership-card, .tla-mcc-spotlight-card, .tla-mcc-introduction-summary, .tla-mcc-account-shell,
		.tla-mcc-footer-help-grid, .tla-mytla-empty, .tla-mytla-feed-empty,
		/* Partner workspace */
		.tla-ph-partner-app-frame, .tla-ph-dashboard-hero, .tla-ph-workspace-panel, .tla-ph-business-type-card, .tla-ph-flash-notice
	):not(.tla-fb-a):not(.tla-fb-b):not(.tla-fb-c):not(.tla-fb-d) {
		width: auto !important;
		max-width: none !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
	}

	/* Panels nested inside a band lie flat on it, using the band's gutter. */
	html body :is(
		.tla-ph-s302-search, .tla-ph-region-hero-note, .tla-ph-region-page-stat, .tla-ph-region-map-how, .tla-ph-uk-map-wrap,
		.tla-ai-finder-workspace, .tla-ai-v278-stage, .tla-ph-fresh-guided-intro, .tla-ph-fresh-guided-main, .tla-ph-match-wizard
	):not(.tla-fb-a):not(.tla-fb-b):not(.tla-fb-c):not(.tla-fb-d) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	/* Inner wrappers that are inset and clip would cut the bands off. */
	html body :is(.tla-ph-basic-public-listing, .tla-ph-profile-experience) {
		overflow: visible !important;
	}

	/* The workspace frame is only a wrapper on phones: its panels carry the gutter. */
	html body .tla-ph-partner-app-frame:not(.tla-fb-a):not(.tla-fb-b) {
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
		background: transparent !important;
	}

	/* Full-width maps run square to the screen edge. */
	html body :is(.tla-ph-region-map-shell .tla-ph-uk-map, .tla-pp-map img, .tla-pp-map svg) {
		border-radius: 0 !important;
	}

	/* 1.0.309: one 16px gutter everywhere. The regions map runs edge to edge,
	   directory tier groups drop their extra 20px, and on sector pages the
	   partner and service sections become bands (the page wrapper keeps its
	   10px inset, which other sector rules offset) and the tier grid drops its
	   10px padding. */
	html body .tla-ph-region-map-shell .tla-ph-uk-map-wrap:not(.tla-fb-a) {
		margin-left: -16px !important;
		margin-right: -16px !important;
	}
	html body .tla-ph-region-map-shell .tla-ph-uk-map:not(.tla-fb-a) {
		border-left: 0 !important;
		border-right: 0 !important;
	}
	html body :is(.tla-ph-tier-reveal .tla-ph-directory-group, .tla-ph-s302-tier-grid):not(.tla-fb-a):not(.tla-fb-b) {
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	html body :is(.tla-ph-s302-partners, .tla-ph-s302-services):not(.tla-fb-a):not(.tla-fb-b) {
		width: auto !important;
		max-width: none !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box !important;
	}

	/* Profile section tabs scroll sideways without showing a scrollbar strip. */
	html body .tla-ph-profile-tabs {
		scrollbar-width: none;
	}
	html body .tla-ph-profile-tabs::-webkit-scrollbar {
		display: none;
	}
}