/* Drake Workflow (/products/drake-workflow/) hero video.
   Loaded after the scraped drake stylesheets.

   The legacy hero is a single fixed-width `.logo-wrapper` (612px) inside a
   1170px container, which leaves a large dead area on its right at desktop
   widths. These rules split the hero content box into two equal halves — the
   copy on the left, the Vimeo player on the right — i.e. two `col-6` columns,
   and stack them back into one column below 1236px.

   The columns are NOT the scraped Bootstrap `.row` / `.col-*` grid. Bootstrap's
   `.row` is a float grid whose clearfix pseudo-elements fight a flex container,
   so the hero markup carries its own `hero-workflow__*` classes and drops the
   grid classes.

   The hero's own left/right padding is retuned to a symmetric 80px. The scraped
   `.container .jumbotron` rule sets `padding-left: 134px` / `padding-right:
   60px` at >=768px, which is what left the copy off-centre; 80px puts the copy
   and the player on matching gutters. Below 768px the scraped 15px mobile
   padding is left alone.

   The 40px gutter between the columns is Bootstrap's `col-6` geometry expressed
   as a flex gap: each column is `calc(50% - 20px)`, so the copy starts on the
   hero's left padding edge and the player ends on its right padding edge. */

@media screen and (min-width: 768px) {
	.jumbotron.hero-technology.hero-workflow {
		padding-left: 80px;
		padding-right: 80px;
	}
}

.jumbotron.hero-technology.hero-workflow .hero-workflow__row {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Two equal columns. The copy is pinned to its half instead of the legacy
   612px wrapper, so the slack it never used goes to the player. */
.jumbotron.hero-technology.hero-workflow .hero-workflow__copy,
.jumbotron.hero-technology.hero-workflow .hero-workflow__media {
	flex: 0 0 calc(50% - 20px);
	min-width: 0;
}

.jumbotron.hero-technology.hero-workflow .hero-workflow__copy .logo-wrapper {
	width: 100%;
}

/* 16:9 player box. The fixed aspect ratio keeps the iframe in proportion at
   every column width. */
.hero-workflow__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hero-workflow__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Below 1236px the scraped `#pageContainer` steps from 1170px down to 992px, so
   two half-width columns no longer fit the copy. Fall back to the mobile
   one-column layout — copy on top, player underneath — which the markup already
   provides in DOM order (copy, then media). */
@media (max-width: 1235px) {
	.jumbotron.hero-technology.hero-workflow .hero-workflow__row {
		display: block;
	}

	/* In the stacked layout the columns are block children, so the side-by-side
	   flex basis no longer applies. Reset it explicitly so the copy always spans
	   the full hero content box. */
	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy {
		flex: none;
		width: 100%;
	}

	/* In the stacked layout the copy becomes a centred column, so every child of
	   the left column is centre-aligned with the logo. Each of these carries its
	   own `text-align` in the scraped sheets (`left` on the heading, the button
	   wrapper and the sign-in note), so they are set individually — a single
	   `text-align: center` on the column would not reach them. */
	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy,
	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy .logo-wrapper,
	.jumbotron.hero-technology.hero-workflow .hero-heading2,
	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy ul,
	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy .listitemflow,
	.jumbotron.hero-technology.hero-workflow .buttonWrapper,
	.jumbotron.hero-technology.hero-workflow .signin {
		text-align: center;
	}

	/* The wordmark is centred only in the stacked (top/bottom) layout. In the
	   side-by-side layout it stays on the copy column's left edge like the rest
	   of the copy.
	   `.logo-container` is `display: flex; align-items: flex-end` in the scraped
	   sheet, which defaults the mark hard to the left; and `.hero-logo` is a
	   block sized to the image's natural width while the image itself renders at
	   `width: 85%`, so it needs centring inside that box too or the mark lands
	   ~29px left of the column centre. */
	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy .logo-container {
		justify-content: center;
	}

	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy .hero-logo {
		text-align: center;
	}

	/* Every child of the copy column takes the full column width in the stacked
	   layout. The heading is the exception to watch for: `apps/drake-web/assets/css/drake-tax.css`
	   pins `.hero-heading2` to `width: 455px` at `min-width: 992px`, which in the
	   992–1235px band leaves the copy short of its column. That rule is scoped
	   under the site shell, so this override carries the same scope to outrank it
	   rather than relying on load order. */
	.site-shell--drake-web .scraped-page-root .jumbotron.hero-technology.hero-workflow .hero-heading2 {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* Same for the bullets: the disc marker sits outside the content box, so the
	   scraped 16.875px list padding pushes the centred text off centre. */
	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy ul {
		padding-left: 0;
		list-style-position: inside;
	}

	/* The scraped mobile rule pads `.logo-wrapper` 10px on the left (and 30px on
	   the right) with no counterpart on the other side, which knocks the centred
	   column 5px off centre. Zero both so the whole copy column is symmetric. */
	.jumbotron.hero-technology.hero-workflow .hero-workflow__copy .logo-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	/* The sign-in note carries its own asymmetric padding (8px left / 38px
	   right) below 768px, which is invisible while the copy is left-aligned but
	   visibly shifts the centred text. */
	.jumbotron.hero-technology.hero-workflow .signin {
		padding-left: 0;
		padding-right: 0;
	}

	/* The scraped `.logo-wrapper .hero-button` sets `margin-right: 38px`, which
	   holds the button 19px left of the centred text. Drop it so the CTA sits on
	   the column centre with everything else. */
	.jumbotron.hero-technology.hero-workflow .logo-wrapper .hero-button {
		margin-left: 0;
		margin-right: 0;
	}

	.jumbotron.hero-technology.hero-workflow .hero-workflow__media {
		max-width: 640px;
		margin-top: 40px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 575px) {
	.jumbotron.hero-technology.hero-workflow .hero-workflow__media {
		max-width: 100%;
		margin-top: 28px;
	}
}