/*!
 * Bollard Boys Site — Hero and "In Motion" video feature.
 * Ported from Hero.module.css and VideoFeature.module.css.
 *
 * Every selector starts `body.bbs-active .bbs-home` (see bbs-tokens.css). Rules on the
 * <button> carry one extra class (.bbs-hero) so they clear the tokens' button reset and the
 * Elementor kit's `.elementor-kit-N button:hover` without !important.
 *
 * Rgba values below have no token (overlay gradient, caption text, underline); they are the
 * design's own values.
 */

/* =====================================================================
   HERO
   ===================================================================== */

body.bbs-active .bbs-home .bbs-hero {
	display: grid;
	grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.82fr);
	align-items: stretch;
	background: var(--bbs-dark);
}

body.bbs-active .bbs-home .bbs-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	/* Left padding tracks the 1320px content well so the headline lines up with every
	   section below it. */
	padding: 104px 64px 104px max(var(--bbs-gutter), calc((100vw - var(--bbs-content-max)) / 2 + var(--bbs-gutter)));
}

body.bbs-active .bbs-home .bbs-hero__eyebrow-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 30px;
}

body.bbs-active .bbs-home .bbs-hero__flags {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	line-height: 1;
}

body.bbs-active .bbs-home .bbs-hero__flag {
	display: block;
	flex: none;
	width: auto;
	height: 0.78em;
}

body.bbs-active .bbs-home .bbs-hero__eyebrow {
	min-width: 0;
	font-family: var(--bbs-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bbs-blue-200);
}

body.bbs-active .bbs-home .bbs-hero__title {
	max-width: 16ch;
	margin: 0;
	font-family: var(--bbs-font-display);
	font-weight: 800;
	font-size: 78px;
	line-height: 0.96;
	letter-spacing: -0.03em;
	color: var(--bbs-surface);
	text-wrap: balance;
	overflow-wrap: break-word;
}

body.bbs-active .bbs-home .bbs-hero__sub {
	max-width: 48ch;
	margin: 26px 0 0;
	font-size: 20px;
	line-height: 1.5;
	color: var(--bbs-on-dark-body);
}

body.bbs-active .bbs-home .bbs-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	margin-top: 44px;
}

body.bbs-active .bbs-home .bbs-hero__primary {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	padding: 22px 40px;
	background: var(--bbs-navy);
	color: var(--bbs-surface);
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

body.bbs-active .bbs-home .bbs-hero__primary:hover,
body.bbs-active .bbs-home .bbs-hero__primary:focus {
	background: var(--bbs-accent);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-hero__primary-arrow {
	font-family: var(--bbs-font-mono);
	font-weight: 400;
}

/* Visual: 13.5px mono with a 1px underline 4px below. The hit area is grown to 44px
   upward with padding, and the matching negative margin keeps the box where the design
   draws it. */
body.bbs-active .bbs-home .bbs-hero__text-cta {
	display: inline-block;
	margin-top: -21px;
	padding: 21px 0 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	font-family: var(--bbs-font-mono);
	font-size: 13.5px;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bbs-on-dark-hi);
}

body.bbs-active .bbs-home .bbs-hero__text-cta:hover,
body.bbs-active .bbs-home .bbs-hero__text-cta:focus {
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-hero__media {
	position: relative;
	min-width: 0;
	min-height: 640px;
	/* Clips the cover-fitted video to its own panel. This is a leaf box with no sticky
	   descendants, not a page wrapper. */
	overflow: hidden;
	background: var(--bbs-dark);
}

body.bbs-active .bbs-home .bbs-hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	/* Correction: the design used `contain`, which floated the square source inside the
	   panel with bars down both sides and stranded the caption gradient on flat black. */
	object-fit: cover;
	object-position: center;
	background: var(--bbs-dark);
	border: 0;
}

body.bbs-active .bbs-home .bbs-hero__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 46px 26px 22px;
	/* A solid band with only the top 34px fading out. The top padding is 40px or more at
	   every width, so the text stays on the solid 85% plate even when the caption wraps to
	   two rows (the Pause control drops below it on phones). */
	background: linear-gradient(to top, rgba(7, 11, 16, 0.85) 0%, rgba(7, 11, 16, 0.85) calc(100% - 34px), rgba(7, 11, 16, 0) 100%);
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-label, 13px);
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-hero__caption-text {
	min-width: 0;
}

/* WCAG 2.2.2 pause control. The box is a real 44x44 target; the negative block margins
   collapse it back to the caption's single line box so the strip keeps the design's
   height, and the negative end margin keeps the word flush with the caption padding. */
body.bbs-active .bbs-home .bbs-hero .bbs-hero__toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	/* Negative inline margins on both sides: flush right on one line, and flush with the
	   caption text when the control wraps below it on narrow screens. */
	margin: calc((1.3em - 44px) / 2) -10px;
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	background: none;
	font: inherit;
	line-height: 1.3;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--bbs-surface);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	appearance: none;
}

body.bbs-active .bbs-home .bbs-hero .bbs-hero__toggle:hover,
body.bbs-active .bbs-home .bbs-hero .bbs-hero__toggle:focus,
body.bbs-active .bbs-home .bbs-hero .bbs-hero__toggle:active {
	border: 0;
	background: none;
	color: var(--bbs-blue-100);
	text-decoration: underline;
}

/* The control ships hidden until bbs-video.js wires it; display above would otherwise
   override the UA [hidden] rule. */
body.bbs-active .bbs-home .bbs-hero .bbs-hero__toggle[hidden] {
	display: none;
}

/* =====================================================================
   IN MOTION — video feature
   ===================================================================== */

body.bbs-active .bbs-home .bbs-feature {
	background: var(--bbs-dark);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-feature__inner {
	display: grid;
	grid-template-columns: minmax(380px, 1.05fr) 1fr;
	align-items: center;
	gap: 72px;
	max-width: var(--bbs-content-max);
	margin: 0 auto;
	padding: 100px var(--bbs-gutter);
}

body.bbs-active .bbs-home .bbs-feature__video-wrap {
	display: flex;
	justify-content: center;
	min-width: 0;
}

body.bbs-active .bbs-home .bbs-feature__video {
	display: block;
	width: 100%;
	max-width: 620px;
	height: auto;
	margin: 0;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 55%;
	background: var(--bbs-dark);
	border: 1px solid var(--bbs-hairline);
}

body.bbs-active .bbs-home .bbs-feature__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	min-width: 0;
}

body.bbs-active .bbs-home .bbs-feature__eyebrow {
	font-family: var(--bbs-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bbs-blue-200);
}

body.bbs-active .bbs-home .bbs-feature__title {
	margin: 0;
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 46px;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--bbs-surface);
	overflow-wrap: break-word;
}

body.bbs-active .bbs-home .bbs-feature__body {
	max-width: 46ch;
	margin: 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--bbs-on-dark-mid);
}

/* Same 44px hit-area technique as the hero text CTA: padding grows the target upward
   into the column gap, the negative margin keeps the visual position. */
body.bbs-active .bbs-home .bbs-feature__cta {
	display: inline-block;
	margin-top: -20px;
	padding: 20px 0 4px;
	border-bottom: 2px solid var(--bbs-accent);
	font-family: var(--bbs-font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-feature__cta:hover,
body.bbs-active .bbs-home .bbs-feature__cta:focus {
	color: var(--bbs-blue-200);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1180px) {
	body.bbs-active .bbs-home .bbs-hero__title {
		font-size: 62px;
	}
	body.bbs-active .bbs-home .bbs-hero__copy {
		padding-right: 40px;
	}
}

@media (max-width: 1080px) {
	body.bbs-active .bbs-home .bbs-feature__inner {
		gap: 56px;
	}
}

@media (max-width: 980px) {
	body.bbs-active .bbs-home .bbs-feature__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
		padding: 72px var(--bbs-gutter);
	}
	body.bbs-active .bbs-home .bbs-feature__title {
		font-size: 34px;
	}
}

@media (max-width: 900px) {
	body.bbs-active .bbs-home .bbs-hero {
		grid-template-columns: minmax(0, 1fr);
	}
	body.bbs-active .bbs-home .bbs-hero__copy {
		padding: 72px var(--bbs-gutter);
	}
	body.bbs-active .bbs-home .bbs-hero__title {
		font-size: 48px;
	}
	body.bbs-active .bbs-home .bbs-hero__sub {
		font-size: 18px;
	}
	body.bbs-active .bbs-home .bbs-hero__media {
		min-height: 420px;
	}
}

@media (max-width: 640px) {
	body.bbs-active .bbs-home .bbs-hero__copy {
		padding: 56px var(--bbs-gutter);
	}
	body.bbs-active .bbs-home .bbs-hero__eyebrow-row {
		align-items: flex-start;
		margin-bottom: 24px;
	}
	body.bbs-active .bbs-home .bbs-hero__flags {
		/* Centre the flags on the first line of the wrapped eyebrow. */
		margin-top: 2px;
	}
	body.bbs-active .bbs-home .bbs-hero__title {
		font-size: 40px;
		line-height: 1;
	}
	body.bbs-active .bbs-home .bbs-hero__sub {
		font-size: 17px;
	}
	body.bbs-active .bbs-home .bbs-hero__ctas {
		gap: 28px;
		margin-top: 36px;
	}
	body.bbs-active .bbs-home .bbs-hero__primary {
		padding: 20px 32px;
	}
	body.bbs-active .bbs-home .bbs-hero__media {
		min-height: 360px;
	}
	body.bbs-active .bbs-home .bbs-hero__caption {
		padding: 40px var(--bbs-gutter) 18px;
	}

	body.bbs-active .bbs-home .bbs-feature__inner {
		gap: 40px;
		padding: 56px var(--bbs-gutter);
	}
	body.bbs-active .bbs-home .bbs-feature__title {
		font-size: 30px;
	}
	body.bbs-active .bbs-home .bbs-feature__body {
		font-size: 17px;
	}
}

@media (max-width: 380px) {
	body.bbs-active .bbs-home .bbs-hero__copy {
		padding: 48px var(--bbs-gutter);
	}
	/* Tighter tracking instead of a smaller size: 12px is the type floor. */
	body.bbs-active .bbs-home .bbs-hero__eyebrow {
		font-size: var(--bbs-fs-meta, 12px);
		letter-spacing: 0.1em;
	}
	body.bbs-active .bbs-home .bbs-hero__title {
		font-size: 34px;
	}
	body.bbs-active .bbs-home .bbs-hero__sub {
		font-size: 16px;
	}
	body.bbs-active .bbs-home .bbs-hero__primary {
		gap: 10px;
		padding: 18px 22px;
		font-size: 15px;
	}
	body.bbs-active .bbs-home .bbs-hero__media {
		min-height: 300px;
	}

	body.bbs-active .bbs-home .bbs-feature__inner {
		padding: 48px var(--bbs-gutter);
	}
	body.bbs-active .bbs-home .bbs-feature__title {
		font-size: 27px;
	}
	body.bbs-active .bbs-home .bbs-feature__cta {
		letter-spacing: 0.06em;
	}
}