/* =============================================================================
   10-page-sections.css — the section blocks templates share
   #mainbanner, #mainsec, #intro_band, #info, #quotes, #pick, #slideshow, and
   the per-template background images that dress them.

   These are page furniture rather than components: a template drops the
   section in and the rules here style it. Anything reusable across unrelated
   pages belongs in the component files (04–07) instead.
   ============================================================================= */

/* =============================================================================
   #mainbanner — the tall coloured hero at the top of most pages
   ============================================================================= */
#mainbanner .pattern,
#quotes .pattern {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150px;
	background: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-Webskin-2023-strip.png");
	background-size: contain;
}

#mainbanner {
	position: relative;
	min-height: 600px;
	max-height: 700px;
	padding: 11.25rem 0;
	background-size: cover;
}

#mainbanner h1 {
	color: var(--js-white);
}

#mainbanner p,
#mainbanner p a {
	font-family: var(--js-font-bold);
	font-size: 1.75rem;
	line-height: 1.25;
	color: var(--js-white);
}

/* 70/30 rather than the 50/50 default: text left, phone image right. */
#mainbanner .container .column .left {
	width: 70%;
}

#mainbanner .container .column .left p {
	max-width: 90%;
}

#mainbanner .container .column .right {
	width: 30%;
}

/* The phone image hangs below the banner on purpose — the negative bottom
   margin lets it overlap the section underneath. */
#mainbanner .container .column .right img {
	width: 70%;
	margin-top: -1.875rem;
	margin-bottom: -12.5rem;
}



/* --- Banner background per template --------------------------------------- */
body.page-template-template_homepage #mainbanner,
body.page-template-template_agency #mainbanner,
body.page-template-template_signup #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/aboutus.webp");
}

body.page-template-template_employer #mainbanner,
body.page-template-template_advice_and_resources #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/employer.webp");
}

body.page-template-template_contact #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/faqs.webp");
}

body.page-template-template_events_workshops #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/contactus.webp");
}

body.page-template-template_faq #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/contactus.webp");
}

/* =============================================================================
   #mainsec — the shorter banner used by the jobs templates and blog pages
   ============================================================================= */
#mainsec {
	position: relative;
	padding-top: 12.5rem;
	background-size: cover;
}

#mainsec .container .column .left {
	width: 70%;
}

#mainsec .container .column .right {
	width: 30%;
}

/* =============================================================================
   #intro_band — the short introduction strip under a banner
   It always wants a rule under it, so every intro_band in the templates
   carries .section_border_bottom; these variables set that line's spacing.
   ============================================================================= */
#intro_band {
	padding: 1.2rem 0 1rem;
	--section_border_space_above: 2rem;
	--section_border_space_below: 1.5rem;
}

/* =============================================================================
   #info — a two-column block with a rule down the middle
   ============================================================================= */
#info .container .column .left {
	width: 50%;
	padding-right: 4.0625rem;
	border-right: 1px solid;
}

#info .container .column .right {
	padding-left: 4.0625rem;
}

/* =============================================================================
   #quotes — the full-bleed testimonial band
   line-height: 0 removes the inline-block gaps under the background image.
   ============================================================================= */
#quotes {
	background-size: cover;
	line-height: 0;
}

#quotes .container .column {
	padding: 3.125rem 0;
}

#quotes .container .column .right {
	padding-left: 6.5625rem;
	color: var(--js-white);
}

#quotes .container .column .right h1,
#quotes2 h1 {
	color: var(--js-white);
	margin-bottom: 0;
}

/* Hangs below the band rather than sitting inside it. */
#quotes .pattern {
	bottom: -70px;
}

body.page-template-template_employer #quotes,
body.page-template-template_about #quotes {
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-Webskin-quotebk.png");
}

body.page-template-template_agency #quotes {
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/ornagetheme.png");
}

/* =============================================================================
   #slideshow — the cross-fading quotes carousel
   Markup and rotation script: parts/quotes-slideshow.php (NOT js/cycle.js —
   that is a jQuery plugin loaded in header.php that nothing calls).

   HOW THE STACK WORKS
   Every quote is a `.slide`. All slides are position: absolute, so they are
   out of the flow and contribute no height. The one carrying `.showing` is
   put back to position: relative, so it — and only it — gives #slideshow its
   height. The opacity change plus the transition is the cross-fade.

   `.slide.showing` has NO SPACE. Written as `.slide .showing` it means "an
   element with class showing inside a slide", which nothing here is, so every
   slide stays at opacity 0 and the box renders as an empty white rectangle.
   ============================================================================= */

/* --- 1. the white bubble (banner mode only) ------------------------------- */
.quote_box {
	position: relative;
	float: right;
	max-width: 20rem;         /* MAIN width dial for the bubble */
	/* min-height: 10rem;      */
	padding: 1.5rem 1.5rem;
	border-radius: 20px;
	background-color: var(--js-white);
}

/* --- 2. the stack, wherever the carousel appears -------------------------- */
#slideshow {
	position: relative;
	font-size: 1rem;          /* THE dial — everything below is in em */
}

/* Keeps the bubble from resizing every 5 seconds as quotes of different
   lengths take their turn. Raise it if a quote is being cut off. */
#mainbanner .quote_box #slideshow {
	min-height: 10rem;
}


#slideshow .slide {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 500ms ease-out;
}

#slideshow .slide.showing {
	position: relative;
	opacity: 1;
}

/* --- 3. the quote itself -------------------------------------------------- */
#slideshow .quote_text {
	font-size: 1.3em;
	line-height: 1.1;
	color: var(--js-black);
}

/* In the banner the bubble is a fixed size, so long quotes are cut off after
   N lines rather than pushing the layout around. */
#mainbanner .quote_box .quote_text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 15;
	line-clamp: 15;
	overflow: hidden;
}

/* --- 4. the attribution line: avatar + name + course ---------------------- */
#slideshow .quote_attribution {
	position: relative;
	top: 1rem;
	font-size: 0.9em;
	line-height: 1;
	margin: 1rem 0 1.5rem;
	color: var(--js-black);
}

#slideshow .quote_avatar {
	display: inline-block;
}

#slideshow .quote_avatar img {
	display: inline-block;
	/* width: 1em; */
	/* height: 2em; */
	border: 2px solid var(--js-black);
	border-radius: 50%;
	vertical-align: top;
}

#slideshow .quote_person {
	display: inline-block;
	position: relative;
	top: -0.5rem;
	margin-left: 1rem;
}

#slideshow .quote_person strong {
	display: block;
}

/* Looped quotes carry an extra width constraint the hardcoded one does not. */
#slideshow .quote_person_wide {
	width: 80%;
}

/* ============================================================================= */

@media (max-width: 1000px) {
	#mainbanner {
		padding-bottom: 15.625rem;
	}

	#mainbanner p,
	#mainbanner p a {
		font-size: 1.5rem;
		line-height: 1.05;
	}

	/* The phone image has nowhere to go once the columns stack. */
	#mainbanner .container .column .right img {
		display: none;
	}

	#mainbanner .quote_box {
		display: none;
	}

	#mainbanner .pattern,
	#quotes .pattern {
		background-size: 150%;
		height: 200px;
	}

	#quotes .pattern {
		bottom: 0;
	}

	#quotes {
		background-position: center;
	}

	#quotes .container .column {
		padding: 6.25rem 0;
	}

	#quotes .container .column .right {
		padding-left: 0;
	}

	#info {
		padding: 3.125rem 0;
	}

	/* The divider between the two columns has nothing to divide once they
	   stack, so the rule and its gutter both go. */
	#info .container .column .left {
		width: 100%;
		padding-right: 0;
		border-right: none;
	}

	#info .container .column .right {
		width: 100%;
		padding-left: 0;
	}

	#pick ul li {
		background-position: 0 8px;
	}

	/* JobClub uses the quotes band as a fixed-height colour block. */
	body.page-template-template_jobclub #quotes,
	body.page-template-template_jobclub #quotes2 {
		height: 400px;
	}

	body.page-template-template_jobclub ul.special li {
		background-position: 0 11px;
	}
}

@media (max-width: 750px) {
	#mainbanner {
		padding-bottom: 12.5rem;
	}

	#mainbanner .pattern,
	#quotes .pattern {
		background-size: 200%;
		height: 150px;
	}

	/* Beats the #mainbanner p rule above on specificity, so .large keeps its
	   step-up instead of being flattened to banner body size. */
	#mainbanner p.large {
		font-size: 1.75rem;
		line-height: 1.15;
		margin-bottom: 0;
	}
}