/*
 * Page - Banner.
 *
 * Read from cp-all-designer css/career.css:974-1032 (the `.crrbanner` every
 * inner page wears) and about-us/our-business/convenience-store-services/
 * index.html:33-47.
 *
 * The picture starts at the very top of the window and runs under the site
 * header, which is fixed and has no ground of its own; the padding's top
 * keeps the words clear of it (career.css:968-973).
 *
 * What the Style tab sets is not repeated here: the band's ground, its least
 * height and padding, the alignment, the picture's focus, the title's and the
 * trail's colours, sizes and spacing all arrive through the widget's own
 * selectors.
 *
 * Tiers: mobile up to 767px, tablet 768-1024px, desktop 1025px and up.
 */

.custom-page-banner {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* The picture and its shade                                           */
/* ------------------------------------------------------------------ */

.custom-page-banner__picture {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * An empty slot shows the band's own ground (career.css:979), as the design
 * does when its picture fails to load — not the base's white box.
 */
.custom-page-banner__picture[data-custom-media]:empty {
	background-color: transparent;
}

/*
 * The image must fill the absolute frame and be cropped with object-fit so
 * that the object-position set by the Style → Image focus control takes effect.
 * Without these three rules the image is displayed at its natural size and
 * object-position has no visible impact.
 */
.custom-page-banner__picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center center; /* overridden per-widget by the Style control */
}

/*
 * The scrim runs top to bottom, so the title and the trail sit on the same
 * depth of shade wherever they land — career.css:993-996. A shade set on the
 * Style tab replaces it.
 */
.custom-page-banner__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(180deg,
		rgba(10, 22, 60, 0.32) 0%,
		rgba(10, 22, 60, 0.58) 48%,
		rgba(10, 22, 60, 0.4) 100%);
}

/* ------------------------------------------------------------------ */
/* The words                                                           */
/* ------------------------------------------------------------------ */

.custom-page-banner__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: 1920px;                     /* the content cap, every band */
	margin: 0 auto;
}

/* career.css:1020-1024 */
/* career.css:1034-1037 — the brand's mark over the title, centred; its width
   and the space under it arrive from the Style tab */
.custom-page-banner .custom-page-banner__logo {
	display: block;
	height: auto;
	max-width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}

/* the section's root in front, so Kadence's `.single-content h1` margins do not reach it */
.custom-page-banner .custom-page-banner__title {
	margin: 0;
	padding: 0;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

/* career.css:1002-1006 — the pipe is dimmed against the labels. */
.custom-page-banner__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--custom-page-banner-justify, center);
	font-weight: 300;
	line-height: 1.5;
	color: var(--custom-page-banner-crumb, rgba(255, 255, 255, 0.8));
}

.custom-page-banner__step,
.custom-page-banner__step:visited {
	color: var(--custom-page-banner-crumb, rgba(255, 255, 255, 0.8));
	text-decoration: none;
	transition: color 0.2s;
}

a.custom-page-banner__step:hover,
a.custom-page-banner__step:focus-visible {
	color: var(--custom-page-banner-crumb-hover, #FFFFFF);
	text-decoration: none;
}

.custom-page-banner__current {
	font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

/*
 * The words cross the whole frame on a phone, so the shade is even and a
 * little deeper — career.css:1030-1032. A shade set on the Style tab is
 * printed with a heavier selector and still wins.
 */
@media (max-width: 767px) {
	.custom-page-banner__shade {
		background-image: none;
		background-color: rgba(10, 22, 60, 0.6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-page-banner__step {
		transition: none;
	}
}