/**
 * Project detail page (single-project.php, bundle key "project").
 *
 * Mirrors live /{category}/detail/{id}: blurred cover hero, title +
 * description, stacked gallery, dark specs bar, key points. Live's
 * Bootstrap 3 rows are .ba-row flex rows with the same gutters; live's
 * page-level `.row { margin-right: 0 }` (≤500px) is scoped to this page's
 * content so it no longer narrows the header and footer.
 *
 * @package BlueArcChild
 */

/* ==========================================================================
   Hero (.image-container): 100vw frame shifted 15px left like live's row
   ========================================================================== */

.ba-project-hero__frame {
	position: relative;
	width: 100vw;
	margin-left: calc(var(--ba-gutter) * -1);
}

/* Stretched (no object-fit) and blurred, behind the page content. */
.ba-project-hero__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100vw;
	height: 100%;
	filter: blur(10px);
}

.ba-project-hero__img {
	position: relative;
	top: 30px;
	display: block;
	width: 50%;
	height: auto;
	margin-right: auto;
	margin-left: 15%;
	box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px;
}

@media (max-width: 767px) {
	.ba-project-hero__img {
		top: 15px;
		width: 90%;
		margin-left: 7%;
		box-shadow: none;
	}
}

/* ==========================================================================
   Title + description (.text-justify)
   ========================================================================== */

.ba-project-intro__row {
	margin-right: 0;
}

.ba-project-intro__body {
	margin-top: 80px;
	text-align: justify;
}

.ba-project-intro__title {
	margin: 20px 0 24px;
	color: var(--ba-text-strong);
	font-size: 32px;
	line-height: 24px;
	text-transform: uppercase;
}

/* ==========================================================================
   Gallery (.project-details-gallery)
   ========================================================================== */

.ba-project-gallery > .ba-row {
	margin-top: 50px;
}

.ba-project-gallery__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-project-gallery__item {
	display: block;
	margin: 10px;
	overflow: hidden;
	border-radius: 3px;
	background-color: var(--ba-white);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ba-project-gallery__link {
	display: block;
}

/* The frame clips overflow, so draw the keyboard focus ring inside it. */
.ba-project-gallery__link:focus-visible {
	outline-offset: -4px;
}

.ba-project-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3/2;
	object-fit: cover;
}

/* No gallery: live keeps the empty 50px-offset row (1px tall). */
.ba-project-intro + .ba-project-specs {
	margin-top: 51px;
}

/* ==========================================================================
   Specs bar (.product-block.p-a30.bg-black-light)
   ========================================================================== */

.ba-project-specs {
	padding: 50px 0;
}

.ba-project-specs__bar {
	padding: 30px;
	background-color: #212121;
	color: var(--ba-white);
}

.ba-project-specs__list {
	margin-top: 0;
	margin-bottom: 0;
}

.ba-project-specs__label {
	margin: 10px 0;
	color: var(--ba-white);
	font-family: var(--ba-font-heading);
	font-size: var(--ba-fs-h5);
	font-weight: var(--ba-fw-bold);
	line-height: var(--ba-lh-h5);
}

.ba-project-specs__icon {
	margin-right: 8px;
}

.ba-project-specs__value {
	margin: 0;
	color: var(--ba-white);
	line-height: var(--ba-lh-p);
}

/* ==========================================================================
   Key points (.key_poinsts)
   ========================================================================== */

.ba-project-points {
	margin-bottom: 50px;
}

/* Live wraps the stored HTML in a <p>, which renders as a leading empty
   paragraph: 24px above the first block (collapsing with its top margin). */
.ba-project-points__body::before {
	display: block;
	margin-bottom: 24px;
	content: "";
}

.ba-project-points__body ul {
	margin-top: 5px;
	margin-left: 18px;
	padding-left: 15px;
	list-style-type: disc;
}

@media (max-width: 767px) {

	/* Live's empty col-1 spacer stacks as a 1px row above the text. */
	.ba-project-points {
		padding-top: 1px;
	}
}

/* ==========================================================================
   ≤500px: live's `.row { margin-right: 0 }` (content rows 15px narrower on the right)
   ========================================================================== */

@media (max-width: 500px) {
	.ba-project .ba-row {
		margin-right: 0;
	}
}