/* ========================================================================
   Job50+ public responsive system
   ------------------------------------------------------------------------
   Central responsive layer for the public WordPress theme.
   - Shared mobile tokens and Gutenberg utilities
   - Header / footer / homepage responsive rules
   - Editorial component responsive rules

   Application UI components remain owned by job50-core or their plugin.
   ======================================================================== */

:root {
	--job50-mobile-gutter: 20px;
	--job50-mobile-section-gap: 48px;
	--job50-mobile-card-gap: 20px;
	--job50-mobile-radius: 28px;
}

/* Mobile-only blocks stay out of the desktop layout. They remain visible in
   the Gutenberg editor because this stylesheet is front-end only. */
.job50-mobile-only {
	display: none !important;
}

/* Job50+ — button label alignment.
   Width is not forced here; layout width is handled separately on mobile. */
.wp-block-button__link,
.wp-element-button,
.buttons,
button[type="submit"],
button[type="button"]:not([aria-label]),
input[type="submit"],
input[type="button"],
input[type="reset"] {
	text-align: left !important;
}

/* Our Action matching cards reuse a class name owned by job50-core.
   Neutralize the application-card chrome only inside this editorial block,
   while preserving the inner blue Gutenberg cards and the desktop bridge. */
.our-action-columns .job50-match-layout > .job50-match-card {
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: default;
	will-change: auto;
	transition: none;
}

.our-action-columns .job50-match-layout > .job50-match-card::before {
	display: none !important;
	content: none !important;
}

.our-action-columns .job50-match-layout > .job50-match-card:hover,
.our-action-columns .job50-match-layout > .job50-match-card:focus,
.our-action-columns .job50-match-layout > .job50-match-card:focus-within {
	border-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Desktop preservation for Gutenberg layouts that include mobile-only
   helper columns. The bridge column is absent from the desktop grid, so the
   two existing matching cards keep the original two-column composition. */
@media (min-width: 782px) {
	.our-action-columns .job50-match-layout {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		align-items: stretch;
		width: 100%;
		position: relative;
		isolation: isolate;
		overflow: visible;
	}

	.our-action-columns .job50-match-layout > .job50-match-card {
		width: 100% !important;
		min-width: 0;
		max-width: none !important;
		margin: 0 !important;
		overflow: visible;
	}

	/* Keep the historical matching pictogram above both desktop cards.
	   The candidate card owns the pseudo-element, so its stacking context must
	   sit above the recruiter card when the pictogram crosses the grid gap. */
	.our-action-columns .job50-match-card--candidate {
		position: relative;
		z-index: 2;
	}

	.our-action-columns .job50-match-card--recruiter {
		position: relative;
		z-index: 1;
	}

	.our-action-columns .job50-match-card--candidate.picto-matching::after {
		pointer-events: none;
	}

	.our-action-columns .job50-match-layout > .job50-match-bridge {
		display: none !important;
	}
}

/* ==========================================================
   Job50+ — Mobile header
   Scope: smartphone / small tablet only.
   Desktop is untouched. The mobile app bar also applies to short landscape phone viewports.
   ========================================================== */

@media (max-width: 781px), (max-width: 1024px) and (max-height: 500px) {
	/* The desktop header is fixed and main compensates with padding-top.
	   On mobile the header stays in the document flow as a true sticky app bar. */
	header.main-header,
	header.main-header.fixed {
		position: sticky !important;
		top: 0;
		width: 100%;
		min-height: 76px;
		margin: 0 !important;
		border-bottom: 1px solid var(--j50-gray-300, #dedede);
		background: var(--wp--preset--color--base, #fff);
		box-shadow: 0 5px 18px rgba(0, 0, 0, .045);
		z-index: 100000;
	}

	/* Remove the desktop-only space reserved for a fixed header. */
	main {
		padding-top: 0 !important;
	}

	header.main-header > .wp-block-group,
	header.main-header .content {
		width: 100%;
		max-width: none !important;
		margin: 0 !important;
	}

	header.main-header .content,
	header.main-header.fixed .content {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px;
		min-height: 76px;
		padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left)) !important;
		transition: none !important;
	}

	header.main-header .wp-block-site-logo {
		flex: 0 0 auto;
		margin: 0;
		line-height: 0;
		order: 1;
	}

	header.main-header .wp-block-site-logo img,
	header.main-header.fixed .wp-block-site-logo img {
		display: block;
		width: clamp(92px, 25vw, 112px) !important;
		height: auto !important;
		max-height: 58px;
		object-fit: contain;
		transition: none !important;
	}

	header.main-header .main-nav-block,
	header.main-header .main-nav-block > .wp-block-group {
		display: flex !important;
		flex: 0 1 auto;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 6px !important;
		min-width: 0;
		margin: 0 0 0 auto !important;
		order: 2;
	}

	/* Compact public account CTA: readable, but no longer responsible for a
	   second header row on narrow screens. Keep it as the rightmost item. */
	header.main-header .user-nav {
		display: flex !important;
		flex: 0 1 auto;
		flex-wrap: nowrap !important;
		margin: 0 0 0 auto !important;
		padding: 0 !important;
		order: 3;
	}

	header.main-header .user-nav .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		justify-content: center !important;
		min-height: 42px;
		max-width: 142px;
		padding: 9px 12px !important;
		border-radius: 999px;
		font-size: clamp(11px, 3vw, 13px) !important;
		line-height: 1;
		white-space: nowrap;
		text-align: center !important;
		transform: none !important;
	}

	/* Use the native WordPress dialog menu through small-tablet width. */
	header.main-header .wp-block-navigation {
		flex: 0 0 auto;
		margin: 0 !important;
	}

	header.main-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	header.main-header .wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		min-width: 42px;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: var(--wp--preset--color--contrast, #222);
		cursor: pointer;
	}

	header.main-header .wp-block-navigation__responsive-container-open svg {
		width: 30px;
		height: 30px;
	}

	header.main-header .wp-block-navigation__responsive-container-open:focus-visible,
	header.main-header .wp-block-navigation__responsive-container-close:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent-1, #ed1c24);
		outline-offset: 3px;
	}

	/* Full-height mobile navigation panel. */
	header.main-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		display: flex !important;
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
		background: var(--wp--preset--color--base, #fff) !important;
		color: var(--wp--preset--color--contrast, #222) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		z-index: 100010 !important;
	}

	header.main-header .wp-block-navigation__responsive-close,
	header.main-header .wp-block-navigation__responsive-dialog {
		width: 100%;
		max-width: none;
		min-height: 100%;
	}

	header.main-header .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
	}

	header.main-header .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: max(14px, env(safe-area-inset-top));
		right: max(14px, env(safe-area-inset-right));
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 12px;
		color: var(--wp--preset--color--contrast, #222);
	}

	header.main-header .wp-block-navigation__responsive-container-close svg {
		width: 30px;
		height: 30px;
	}

	header.main-header .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex: 1 1 auto;
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100%;
		padding-top: 82px !important;
	}

	header.main-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
	header.main-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		width: 100%;
	}

	header.main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		margin: 0 !important;
		border-bottom: 1px solid var(--j50-gray-200, #efefef);
	}

	header.main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
	header.main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > button,
	header.main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		min-height: 58px;
		padding: 13px 4px !important;
		border: 0;
		background: transparent;
		font-family: var(--j50-font-display, "Google Sans Flex", Inter, sans-serif);
		font-size: clamp(18px, 5vw, 22px) !important;
		font-weight: 700;
		line-height: 1.15;
		text-align: left;
		text-transform: uppercase;
		white-space: normal;
	}

	/* Desktop icon-only navigation becomes explicit text navigation in the
	   mobile panel. */
	header.main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.big-nav > a,
	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.j50-bell-nav-item > .j50-bell-btn {
		height: auto;
		justify-content: flex-start;
	}

	header.main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.big-nav > a::before,
	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.j50-bell-nav-item > .j50-bell-btn::before {
		position: static;
		inset: auto;
		flex: 0 0 30px;
		width: 30px;
		height: 30px;
		margin-right: 12px;
		font-size: 27px;
		color: var(--wp--preset--color--accent-1, #ed1c24);
	}

	header.main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.big-nav > a > .wp-block-navigation-item__label,
	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.j50-bell-nav-item > .j50-bell-btn > .j50-bell-label {
		position: static !important;
		display: inline !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		font: inherit;
		color: inherit;
		white-space: normal;
	}

	header.main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.big-nav > a > .wp-block-navigation-item__label::before,
	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.j50-bell-nav-item > .j50-bell-btn > .j50-bell-label::before,
	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.job50-tools-avatar::after,
	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.j50-bell-nav-item::after {
		display: none !important;
	}

	/* Account submenu: keep it inside the mobile panel, never as a floating
	   desktop popover outside the viewport. */
	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.job50-tools-avatar.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		position: static !important;
		display: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 4px 0 10px 18px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		clip-path: none !important;
		-webkit-clip-path: none !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.job50-tools-avatar.wp-block-navigation-submenu.is-job50-open > .wp-block-navigation__submenu-container {
		display: block !important;
	}

	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.job50-tools-avatar.wp-block-navigation-submenu > .wp-block-navigation__submenu-container > li {
		border-bottom: 0;
	}

	header.main-header .wp-block-navigation__responsive-container.is-menu-open li.job50-tools-avatar.wp-block-navigation-submenu > .wp-block-navigation__submenu-container > li > a {
		min-height: 48px;
		padding: 10px 4px !important;
		font-size: 16px !important;
	}

	/* Logged-in mobile header: keep the compact desktop icon navigation instead
	   of replacing it with the WordPress hamburger panel. Public navigation
	   remains unchanged. */
	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) {
		display: flex !important;
		flex: 0 1 auto;
		min-width: 0;
		margin: 0 !important;
		overflow: visible !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) > .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) > .wp-block-navigation__responsive-container,
	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) > .wp-block-navigation__responsive-container:not(.is-menu-open) {
		position: static !important;
		inset: auto !important;
		display: flex !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		padding: 0 !important;
		background: transparent !important;
		color: inherit !important;
		overflow: visible !important;
		z-index: auto !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation__responsive-close,
	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation__responsive-dialog {
		position: static !important;
		display: block !important;
		width: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation__responsive-container-content {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		width: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 1px !important;
		width: auto !important;
		min-width: 0;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation-item {
		flex: 0 0 auto;
		width: auto !important;
		margin: 0 !important;
		border: 0 !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation-item.big-nav > a,
	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.j50-bell-nav-item > .j50-bell-btn {
		width: 36px;
		height: 42px;
		min-height: 0;
		padding: 0 !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) .wp-block-navigation-item.big-nav > a::before,
	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.j50-bell-nav-item > .j50-bell-btn::before {
		font-size: 25px;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.job50-tools-avatar.wp-block-navigation-submenu .job50-user-avatar,
	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.job50-tools-avatar.wp-block-navigation-submenu .job50-avatar,
	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.job50-tools-avatar.wp-block-navigation-submenu .job50-avatar-fallback {
		width: 46px !important;
		height: 46px !important;
		flex: 0 0 46px !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.job50-tools-avatar.wp-block-navigation-submenu .job50-user-avatar__fallback {
		font-size: 16px !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.job50-tools-avatar.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		width: min(330px, calc(100vw - 24px)) !important;
		min-width: 0 !important;
		max-width: calc(100vw - 24px) !important;
		right: -14px !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.j50-bell-nav-item > .j50-bell-dropdown {
		width: min(330px, calc(100vw - 24px));
		min-width: 0;
		max-width: calc(100vw - 24px);
		right: -24px;
	}

	/* Global mobile footer: use the exact same horizontal inset as the header. */
	footer.wp-block-template-part > .has-base-background-color {
		padding-left: calc(var(--wp--custom--spacing--outer, 32px) + 10px) !important;
		padding-right: calc(var(--wp--custom--spacing--outer, 32px) + 10px) !important;
		padding-bottom: clamp(96px, 24vw, 140px) !important;
	}

	footer.wp-block-template-part > .has-base-background-color > .alignwide,
	footer.wp-block-template-part > .has-base-background-color .wp-block-columns {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	footer.wp-block-template-part .footer-nav {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	footer.wp-block-template-part .footer-nav .wp-block-site-logo {
		margin-bottom: 28px !important;
	}

	footer.wp-block-template-part .footer-nav .wp-block-site-logo img {
		width: 142px !important;
		height: auto !important;
	}

	footer.wp-block-template-part .footer-nav::before {
		width: 250px;
		height: 276px;
		left: -24px;
		top: -18px;
		background-size: contain;
		opacity: 0.30;
	}

	footer.wp-block-template-part .footer-nav h3,
	footer.wp-block-template-part .footer-nav p,
	footer.wp-block-template-part .footer-nav a {
		margin-left: 0 !important;
	}

	/* Gutenberg buttons: intrinsic content width, never a stretched 100% flex item. */
	main .wp-block-buttons {
		display: flex !important;
		align-items: flex-start !important;
	}

	main .wp-block-buttons > .wp-block-button {
		flex: 0 0 auto !important;
		flex-grow: 0 !important;
		flex-basis: auto !important;
		align-self: flex-start !important;
		width: fit-content !important;
		max-width: 100%;
	}

	main .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		display: inline-flex !important;
		align-self: flex-start !important;
		width: fit-content !important;
		min-width: 0 !important;
		max-width: min(100%, 36rem) !important;
		box-sizing: border-box;
		justify-content: flex-start !important;
		text-align: left !important;
	}

	/* Homepage hero: place the badge at the right, then visually interlock it
	   with the white logo while keeping a deliberate small gap. */
	.banner-home .hero-senior > .wp-block-columns {
		row-gap: 0 !important;
		column-gap: 0 !important;
	}

	.banner-home .hero-senior > .wp-block-columns > .wp-block-column:first-child {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		padding-right: 10px;
		margin: 0 !important;
		box-sizing: border-box;
	}

	.banner-home .job50-home-award {
		--j50-home-award-y: 24px;
	}

	.banner-home .hero-senior > .wp-block-columns > .wp-block-column:first-child .wp-block-image {
		margin: 0 0 -60px auto !important;
	}

	.banner-home .hero-senior > .wp-block-columns > .wp-block-column:first-child .wp-block-image img,
	.banner-home .hero-senior > .wp-block-columns > .wp-block-column:first-child .wp-block-image svg {
		width: clamp(108px, 30vw, 136px) !important;
		height: auto !important;
	}

	.banner-home .hero-senior > .wp-block-columns > .wp-block-column:nth-child(2) > .wp-block-group > .wp-block-spacer:first-child {
		height: 96px !important;
		min-height: 96px !important;
		max-height: 96px !important;
		margin: 0 !important;
	}

	/* Matching puzzle illustration: keep it strong but not oversized. */
	.puzzle-title .wp-block-image img {
		display: block;
		width: min(56vw, 220px) !important;
		height: auto !important;
		margin-inline: auto;
	}
}

@media (max-width: 360px) {
	header.main-header .content,
	header.main-header.fixed .content {
		gap: 6px;
		padding-inline: 8px !important;
	}

	header.main-header .wp-block-site-logo img,
	header.main-header.fixed .wp-block-site-logo img {
		width: 84px !important;
	}

	header.main-header .user-nav .wp-block-button__link {
		max-width: 118px;
		padding-inline: 9px !important;
		font-size: 10px !important;
	}

	header.main-header .wp-block-navigation__responsive-container-open {
		width: 42px;
		height: 42px;
		min-width: 42px;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.job50-tools-avatar.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		right: -8px !important;
	}

	header.main-header .wp-block-navigation:is(.nav-recruiter, .nav-seeker) li.j50-bell-nav-item > .j50-bell-dropdown {
		right: -12px;
	}
}

@media (max-width: 782px) {
	body.admin-bar header.main-header,
	body.admin-bar header.main-header.fixed {
		top: 46px;
	}
}

@media (max-width: 600px) {
	/* WordPress makes the admin bar non-fixed on very small screens. */
	body.admin-bar header.main-header,
	body.admin-bar header.main-header.fixed {
		top: 0;
	}
}

/* ========================================================================
   Editorial responsive components — mobile / tablet
   ------------------------------------------------------------------------
   Gutenberg classes are the API. No page-order/nth-child selectors are used
   for matching, feature grids, full bleed, media stacks or timeline.
   ======================================================================== */

@media (max-width: 1024px) {
	/* --------------------------------------------------------------------
	   Reusable Gutenberg utilities
	   -------------------------------------------------------------------- */
	.job50-mobile-only {
		display: block !important;
	}

	/*
	 * Full bleed is based only on the real Gutenberg gutters. No viewport
	 * width, centring transform or page-order selector is used.
	 *
	 * style.css deliberately resets nested .alignfull blocks with a highly
	 * specific margin:auto + width:inherit rule. The selectors below are
	 * intentionally more specific, but remain scoped to our opt-in utility.
	 */
	.wp-site-blocks .entry-content > .job50-mobile-full-bleed {
		--job50-full-bleed-page-gutter: var(--wp--custom--spacing--outer, 0px);
		position: static !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		max-width: none !important;
		margin-left: calc(-1 * var(--job50-full-bleed-page-gutter)) !important;
		margin-right: calc(-1 * var(--job50-full-bleed-page-gutter)) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	/* Direct semantic content sections keep their readable inner gutter. */
	.wp-site-blocks .entry-content > :is(
		.job50-mobile-align-left,
		.job50-mobile-align-right,
		.job50-mobile-align-center
	) {
		--job50-full-bleed-page-gutter: var(--wp--custom--spacing--outer, 0px);
		--job50-full-bleed-parent-gutter: var(--job50-mobile-gutter);
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	/*
	 * Nested Media & Text blocks escape both the page gutter and the semantic
	 * section's own padding. This overrides the global nested-alignfull rule
	 * without changing any unrelated Gutenberg block.
	 */
	.wp-site-blocks .entry-content > :is(
		.job50-mobile-align-left,
		.job50-mobile-align-right,
		.job50-mobile-align-center
	) > .job50-mobile-full-bleed.alignfull {
		--job50-full-bleed-total-gutter: calc(
			var(--job50-full-bleed-page-gutter) +
			var(--job50-full-bleed-parent-gutter)
		);
		position: static !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		max-width: none !important;
		margin-left: calc(-1 * var(--job50-full-bleed-total-gutter)) !important;
		margin-right: calc(-1 * var(--job50-full-bleed-total-gutter)) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	.job50-mobile-align-left,
	.job50-mobile-align-right,
	.job50-mobile-align-center {
		padding-left: var(--job50-mobile-gutter) !important;
		padding-right: var(--job50-mobile-gutter) !important;
	}

	.job50-mobile-align-left > .wp-block-heading,
	.job50-mobile-align-left > p {
		text-align: left !important;
	}

	.job50-mobile-align-right > .wp-block-heading,
	.job50-mobile-align-right > p {
		text-align: right !important;
	}

	.job50-mobile-align-center > .wp-block-heading,
	.job50-mobile-align-center > p {
		text-align: center !important;
	}

	/* --------------------------------------------------------------------
	   Our Action hero
	   -------------------------------------------------------------------- */
	.our-action-banner {
		display: block !important;
		gap: 0 !important;
		padding: 0 !important;
		overflow: hidden;
	}

	.our-action-banner > .col-1 {
		display: none !important;
	}

	.our-action-banner > .col-2 {
		width: 100% !important;
		max-width: none !important;
		min-width: 0;
		flex-basis: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.our-action-banner .col-2::before {
		width: 112px;
		height: 112px;
		top: 20px;
		right: 16px;
		left: auto;
		background-size: 68px;
		opacity: .13;
		z-index: 1;
	}

	.our-action-banner .banner-home {
		position: relative;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 0 0 42px 42px !important;
		overflow: hidden;
	}

	.our-action-banner .banner-home > .wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
		margin: 0 !important;
		gap: 0 !important;
	}

	.our-action-banner .banner-home > .wp-block-columns > .wp-block-column {
		width: 100% !important;
		max-width: none !important;
		min-width: 0;
		flex-basis: auto !important;
		margin: 0 !important;
	}

	.our-action-banner .banner-home > .wp-block-columns > .wp-block-column:first-child > .wp-block-group {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: 680px;
		margin: 0 auto !important;
		padding: 38px 22px 8px !important;
	}

	.our-action-banner .banner-home .wp-block-image {
		margin: 0;
	}

	.our-action-banner .banner-home > .wp-block-columns > .wp-block-column:first-child .wp-block-image img {
		width: 118px !important;
		height: auto !important;
	}

	.our-action-banner h1 {
		max-width: 10ch;
		margin-top: 14px !important;
		margin-right: auto !important;
		margin-bottom: 18px !important;
		margin-left: 0 !important;
		font-size: clamp(36px, 8vw, 42px) !important;
		line-height: .98 !important;
		text-align: left !important;
		text-wrap: balance;
	}

	.our-action-banner p {
		max-width: 38rem;
		margin: 0;
		font-size: clamp(17px, 3.2vw, 19px) !important;
		line-height: 1.5;
	}

	/* The portrait is a desktop-only decorative element. Remove its entire
	   column on responsive layouts so it leaves no reserved height or gap. */
	.our-action-banner .banner-home > .wp-block-columns > .wp-block-column:last-child {
		display: none !important;
	}

	/* --------------------------------------------------------------------
	   Our Action introductory and matching area
	   -------------------------------------------------------------------- */
	.our-action-columns {
		width: 100%;
		margin: 0 !important;
		padding: 42px var(--job50-mobile-gutter) 18px !important;
		background-image: none !important;
		overflow: hidden;
	}

	.our-action-columns > .wp-block-columns:first-child {
		display: block !important;
		width: 100%;
		margin: 0 !important;
		gap: 0 !important;
	}

	.our-action-columns > .wp-block-columns:first-child > .wp-block-column:first-child {
		width: 100% !important;
		max-width: 680px;
		margin: 0 auto !important;
		padding: 0 !important;
	}

	.our-action-columns > .wp-block-columns:first-child > .wp-block-column:first-child > .wp-block-group {
		padding: 0 0 28px !important;
	}

	.our-action-columns > .wp-block-columns:first-child > .wp-block-column:last-child {
		display: none !important;
	}

	.our-action-columns > .wp-block-columns:first-child h2 {
		position: relative;
		margin: 0 0 18px;
		padding-top: 18px;
		font-size: clamp(30px, 6vw, 38px) !important;
		line-height: 1.02;
		text-wrap: balance;
	}

	.our-action-columns > .wp-block-columns:first-child h2::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 58px;
		height: 5px;
		border-radius: 999px;
		background: var(--wp--preset--color--accent-1, #ed1c24);
	}

	.our-action-columns > .wp-block-columns:first-child p {
		max-width: 42rem;
		margin: 0;
		font-size: clamp(17px, 3.2vw, 19px) !important;
		line-height: 1.55;
	}

	.our-action-columns .job50-match-layout {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		width: 100%;
		margin: 0 !important;
	}

	.our-action-columns .job50-match-layout > .job50-match-card {
		width: 100% !important;
		max-width: 680px !important;
		min-width: 0;
		flex: 0 0 auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	.our-action-columns .job50-match-layout > .job50-match-card > .wp-block-group {
		width: 100%;
		max-width: none !important;
		margin: 0 !important;
		padding: 30px 20px 32px !important;
		border-radius: 28px !important;
		box-sizing: border-box;
		overflow: visible;
	}

	.our-action-columns .job50-match-card h3,
	.our-action-columns .job50-match-card p {
		width: 100%;
		max-width: 34rem;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	.our-action-columns .job50-match-card h3 {
		margin-top: 0;
		margin-bottom: 24px;
		font-size: clamp(28px, 6vw, 36px) !important;
		line-height: 1;
	}

	.our-action-columns .job50-match-card > .wp-block-group > .wp-block-group {
		width: 100%;
		max-width: 540px;
		margin: 0 auto 22px !important;
		padding: 24px 20px !important;
		box-sizing: border-box;
	}

	.our-action-columns .job50-match-card > .wp-block-group > .wp-block-group:last-child {
		margin-bottom: 0 !important;
	}

	.our-action-columns .picto-plus::after {
		width: 66px;
		height: 66px;
		bottom: -44px;
	}

	.our-action-columns .job50-match-card--candidate.picto-matching::after,
	.our-action-columns .job50-match-card--candidate.picto-matching::before {
		display: none !important;
		content: none !important;
	}

	.our-action-columns .job50-match-bridge.job50-mobile-only {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		margin: 24px 0 !important;
		padding: 0 !important;
	}

	.our-action-columns .job50-match-bridge .wp-block-image {
		margin: 0 !important;
		text-align: center;
	}

	.our-action-columns .job50-match-bridge img,
	.our-action-columns .job50-match-bridge svg {
		display: block;
		width: min(42vw, 190px) !important;
		height: auto !important;
		margin-inline: auto;
	}

	/* --------------------------------------------------------------------
	   Reusable editorial alignment and media components
	   -------------------------------------------------------------------- */
	.job50-mobile-align-left,
	.job50-mobile-align-right,
	.job50-mobile-align-center {
		width: 100%;
		max-width: 720px;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}

	.job50-mobile-align-left > .wp-block-heading,
	.job50-mobile-align-left > p,
	.job50-mobile-align-right > .wp-block-heading,
	.job50-mobile-align-right > p {
		word-break: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	.job50-mobile-media-stack {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		background: transparent;
	}

	.job50-mobile-media-stack > .wp-block-media-text__media {
		order: 1;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-height: 260px;
		margin: 0 !important;
		padding: 0 !important;
	}

	.job50-mobile-media-stack > .wp-block-media-text__media img {
		display: block;
		width: 100% !important;
		height: 100% !important;
		min-height: 260px;
		object-fit: cover;
	}

	.job50-mobile-media-stack > .wp-block-media-text__content {
		order: 2;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		justify-self: stretch !important;
	}

	.job50-mobile-media-stack > .wp-block-media-text__content > .wp-block-group {
		width: 100%;
		max-width: none !important;
		margin: 0 !important;
		padding: 34px 22px !important;
		box-sizing: border-box;
	}

	.job50-feature-grid,
	.job50-feature-grid__row,
	.job50-mobile-grid-one {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: var(--job50-mobile-card-gap) !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.job50-feature-grid__row > * {
		width: 100% !important;
		max-width: none !important;
		min-height: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 24px 20px !important;
		border-radius: 20px !important;
		box-sizing: border-box;
	}

	.job50-feature-grid h5 {
		margin: 0 !important;
		font-size: clamp(19px, 4vw, 24px) !important;
		line-height: 1.15;
		text-align: center !important;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	/* --------------------------------------------------------------------
	   Timeline
	   -------------------------------------------------------------------- */
	.job50-timeline {
		position: relative;
		width: 100%;
		max-width: 720px;
		margin: 0 auto !important;
		padding: 8px 20px 8px 42px !important;
	}

	.job50-timeline::after {
		top: 8px;
		bottom: 8px;
		left: 26px;
		width: 3px;
		margin-left: 0;
		border-radius: 999px;
	}

	.job50-timeline > .container,
	.job50-timeline > .container.left,
	.job50-timeline > .container.right {
		position: relative;
		left: auto !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 0 30px 24px !important;
	}

	.job50-timeline > .container::before {
		display: none !important;
	}

	.job50-timeline > .container::after,
	.job50-timeline > .container.left::after,
	.job50-timeline > .container.right::after {
		top: 18px;
		left: -23px !important;
		right: auto !important;
		width: 15px;
		height: 15px;
		border-width: 3px;
		border-radius: 50%;
		box-sizing: border-box;
	}

	.job50-timeline > .container .date,
	.job50-timeline > .container.left .date,
	.job50-timeline > .container.right .date {
		position: static !important;
		display: block;
		width: auto;
		margin: 0 0 9px !important;
		font-size: 15px;
		line-height: 1;
		text-align: left !important;
	}

	.job50-timeline > .container .content,
	.job50-timeline > .container.left .content,
	.job50-timeline > .container.right .content {
		width: 100%;
		margin: 0 !important;
		padding: 24px 22px !important;
		border-radius: 24px !important;
		text-align: left !important;
	}

	.job50-timeline > .container .content h3 {
		margin: 0 0 12px;
		font-size: clamp(24px, 5vw, 30px) !important;
		line-height: 1.05;
		text-align: left !important;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	.job50-timeline > .container .content p {
		margin: 0;
		font-size: clamp(16px, 3.2vw, 18px) !important;
		line-height: 1.5;
		text-align: left !important;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}
}

/* style.css forces 32px on direct post-content children at <= 780px.
   Keep the full-bleed calculation aligned with that real computed padding. */
@media (max-width: 780px) {
	.wp-site-blocks .entry-content > :is(
		.job50-mobile-align-left,
		.job50-mobile-align-right,
		.job50-mobile-align-center
	) {
		--job50-full-bleed-parent-gutter: 32px;
	}
}

@media (max-width: 380px) {
	.our-action-banner .banner-home > .wp-block-columns > .wp-block-column:first-child > .wp-block-group {
		padding-inline: 18px !important;
	}


	.our-action-columns {
		padding-inline: 18px !important;
	}

	.job50-mobile-align-left,
	.job50-mobile-align-right,
	.job50-mobile-align-center {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.job50-mobile-media-stack > .wp-block-media-text__content > .wp-block-group {
		padding-inline: 18px !important;
	}

	.job50-timeline {
		padding-right: 16px !important;
		padding-left: 38px !important;
	}
}