/* ==========================================================================
   Custom styles
   ---------------------------------------------------------------------------
   Site styles that are not yet part of the compiled styles.min.css bundle.
   Kept as one file so each addition does not cost another HTTP request.

   Linked from Master.cshtml after styles.min.css, and pulled into the
   backoffice block previews via blockpreview.css.

   Everything here uses the same tokens as the compiled bundle (GT Walsheim
   Pro, the #192038 / #2e3a59 / #69748f text ramp, #c5cee0 borders, the
   #1d5af5 accent), so each section can be pasted into the SCSS source as-is.
   Once a section lands in the bundle, delete it from here.

   Contents
     1. Widget: Before / After
     2. Article share - "Copied!" confirmation pill
     3. Article cards - linked preview image and title
   ========================================================================== */


/* ==========================================================================
   1. Widget: Before / After
   ---------------------------------------------------------------------------
   Element type alias : beforeAfter
   View               : ~/Views/Partials/blockgrid/Components/beforeAfter.cshtml
   Backoffice preview : ~/App_Plugins/BlockGridPreviews/BeforeAfter.html

   No vertical padding is set on the section: like every other widget here,
   top/bottom rhythm comes from the Full Width layout's padding options.
   ========================================================================== */

.widget-before-after {
	--ba-font: "GT Walsheim Pro", "Helvetica Neue", Arial, sans-serif;
	--ba-ink: #192038;
	--ba-ink-soft: #2e3a59;
	--ba-muted: #69748f;
	--ba-number: #8f9bb3;
	--ba-line: #c5cee0;
	--ba-line-light: #edf1f7;
	--ba-shell: #f7f9fc;
	--ba-accent: #1d5af5;
	--ba-dot: #f3c97f;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.widget-before-after .before-after__header {
	margin-bottom: 56px;
}

.widget-before-after .centered-line-text {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.widget-before-after .centered-line-text .line {
	width: 33px;
	height: 1px;
	background-color: var(--ba-ink);
	margin-right: 10px;
}

.widget-before-after .before-after__tagline {
	font-family: var(--ba-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 21.69px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ba-ink);
}

.widget-before-after .before-after__headline {
	font-family: var(--ba-font);
	font-size: 42px;
	font-weight: 700;
	line-height: 56px;
	color: var(--ba-ink);
	max-width: 820px;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.widget-before-after .before-after__panels {
	--bs-gutter-x: 4rem;
}

.widget-before-after .before-after__panel-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.widget-before-after .before-after__panel-label {
	font-family: var(--ba-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ba-number);
}

.widget-before-after .before-after__panel-header .line {
	width: 33px;
	height: 1px;
	background-color: var(--ba-line);
	margin: 0 12px;
	flex: 0 0 auto;
}

.widget-before-after .before-after__panel-caption {
	font-family: var(--ba-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: var(--ba-muted);
}

/* The "after" side carries the accent so the eye lands on the rebuild. */
.widget-before-after .before-after__panel--after .before-after__panel-label {
	color: var(--ba-accent);
}

.widget-before-after .before-after__panel--after .before-after__panel-header .line {
	background-color: var(--ba-accent);
}

/* --------------------------------------------------------------------------
   Browser frame
   -------------------------------------------------------------------------- */

.widget-before-after .before-after__browser {
	margin: 0;
	border: 1px solid var(--ba-line);
	border-radius: 16px;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 18px 40px rgba(25, 32, 56, .06);
}

.widget-before-after .before-after__panel--after .before-after__browser {
	border-color: var(--ba-accent);
}

.widget-before-after .before-after__browser-bar {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	background-color: var(--ba-shell);
	border-bottom: 1px solid var(--ba-line-light);
}

.widget-before-after .before-after__browser-dots {
	display: flex;
	flex: 0 0 auto;
	margin-right: 16px;
}

.widget-before-after .before-after__browser-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--ba-line);
}

.widget-before-after .before-after__browser-dots i + i {
	margin-left: 6px;
}

.widget-before-after .before-after__browser-url {
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 14px;
	border-radius: 8px;
	background-color: #fff;
	font-family: var(--ba-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	color: var(--ba-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Fixed ratio keeps the two screenshots aligned even when the source images
   differ in height. Crop from the top so the page header stays visible. */
.widget-before-after .before-after__browser-viewport {
	display: block;
	aspect-ratio: 5 / 4;
	background-color: var(--ba-shell);
}

.widget-before-after .before-after__browser-viewport img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* --------------------------------------------------------------------------
   Numbered points
   -------------------------------------------------------------------------- */

.widget-before-after .before-after__points {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	counter-reset: ba-point;
}

.widget-before-after .before-after__points-item {
	counter-increment: ba-point;
	position: relative;
	padding: 20px 0 20px 48px;
	border-top: 1px solid var(--ba-line-light);
}

.widget-before-after .before-after__points-item:last-child {
	border-bottom: 1px solid var(--ba-line-light);
}

.widget-before-after .before-after__points-item:before {
	content: counter(ba-point, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 20px;
	font-family: var(--ba-font);
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
	color: var(--ba-number);
}

.widget-before-after .before-after__panel--after .before-after__points-item:before {
	color: var(--ba-accent);
	font-weight: 400;
}

.widget-before-after .before-after__points-title {
	display: block;
	font-family: var(--ba-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ba-ink-soft);
}

.widget-before-after .before-after__points-text {
	margin-top: 4px;
	font-family: var(--ba-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--ba-muted);
}

.widget-before-after .before-after__points-text p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Summary
   -------------------------------------------------------------------------- */

.widget-before-after .before-after__summary {
	margin-top: 56px;
	padding-top: 28px;
	border-top: 2px solid var(--ba-ink);
	font-family: var(--ba-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 32px;
	color: var(--ba-ink-soft);
}

.widget-before-after .before-after__summary p:last-child {
	margin-bottom: 0;
}

/* Editors may write the summary as a list or as prose; style both. */
.widget-before-after .before-after__summary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget-before-after .before-after__summary ul li {
	position: relative;
	padding-left: 28px;
}

.widget-before-after .before-after__summary ul li + li {
	margin-top: 12px;
}

.widget-before-after .before-after__summary ul li:before {
	content: "";
	position: absolute;
	left: 6px;
	top: 13px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--ba-dot);
}

/* --------------------------------------------------------------------------
   Tablet / mobile — matches the 991px breakpoint used across the bundle
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.widget-before-after .before-after__header {
		margin-bottom: 40px;
	}

	.widget-before-after .before-after__headline {
		font-size: 32px;
		line-height: 42px;
	}

	.widget-before-after .before-after__panels {
		--bs-gutter-x: 1.5rem;
	}

	.widget-before-after .before-after__panel + .before-after__panel {
		margin-top: 48px;
	}

	.widget-before-after .before-after__summary {
		margin-top: 40px;
		font-size: 18px;
		line-height: 28px;
	}
}

@media (max-width: 575px) {
	.widget-before-after .before-after__panel-header {
		flex-wrap: wrap;
	}

	.widget-before-after .before-after__panel-header .line {
		margin-left: 10px;
	}

	.widget-before-after .before-after__browser-url {
		font-size: 12px;
	}

	.widget-before-after .before-after__points-item {
		padding-left: 40px;
	}
}


/* ==========================================================================
   2. Article share - "Copied!" confirmation pill
   ---------------------------------------------------------------------------
   Partial: ~/Views/Partials/articleShareLinks.cshtml

   The pill sits on top of the existing .widget-blog-detail__social a circle
   without altering it.
   ========================================================================== */

.widget-blog-detail__copy {
	position: relative;
	display: inline-flex;
}

.widget-blog-detail__copy-toast {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 100px;
	background-color: #192038;
	font-family: "GT Walsheim Pro", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

/* Caret pointing down at the icon. */
.widget-blog-detail__copy-toast:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	border: 5px solid transparent;
	border-top-color: #192038;
	transform: translateX(-50%);
}

.widget-blog-detail__copy.is-copied .widget-blog-detail__copy-toast {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.widget-blog-detail__copy-toast {
		transition: none;
	}
}


/* ==========================================================================
   3. Article cards - linked preview image and title
   ---------------------------------------------------------------------------
   Views: ~/Views/BlogArticle.cshtml (related articles)
          ~/Views/Partials/blockgrid/Components/blogArticlesFeatured.cshtml

   The preview image and the title link to the article alongside the existing
   "Read More" link. The base a{} rule adds a link colour and underline, so
   the title has to be reset back to the card's own styling.
   ========================================================================== */

.widget-blog-cards .card-img-link {
	display: block;
	overflow: hidden;
	border-radius: 1rem; /* matches .rounded-4 on the image */
	/* Keeps alt text neutral rather than blue and underlined if an image 404s */
	color: inherit;
	text-decoration: none;
}

.widget-blog-cards .card-img-link .card-img-top {
	transition: transform .3s ease;
}

.widget-blog-cards .card-img-link:hover .card-img-top,
.widget-blog-cards .card-img-link:focus-visible .card-img-top {
	transform: scale(1.04);
}

.widget-blog-cards .card-title a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.widget-blog-cards .card-title a:hover,
.widget-blog-cards .card-title a:focus-visible {
	color: #1d5af5;
}

@media (prefers-reduced-motion: reduce) {
	.widget-blog-cards .card-img-link .card-img-top {
		transition: none;
	}

	.widget-blog-cards .card-img-link:hover .card-img-top,
	.widget-blog-cards .card-img-link:focus-visible .card-img-top {
		transform: none;
	}
}