/* Crown Bridge CTA Box: image tile with centred outlined frame */

.cbr-cta-box-wrap {
	width: 100%;
}

.cbr-cta-box {
	position: relative;
	display: block;
	width: 100%;
	height: var(--cbr-h, 160px);
	overflow: hidden;
	background: #1c1c1c;
	text-decoration: none;
}

/* Photo layer: greyscale at rest, full colour on hover */
.cbr-cta-box__bg {
	position: absolute;
	inset: 0;
	background-color: #2a2a2a;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: grayscale(100%);
	transition: transform 0.6s ease, filter 0.6s ease;
}

/* Dummy placeholder used until a real image is chosen */
.cbr-cta-box__bg.is-dummy {
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
		linear-gradient(225deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
		linear-gradient(135deg, #3a3a3a 0%, #161616 100%);
	background-size: 40px 40px, 40px 40px, cover;
}

/* Darkening layer */
.cbr-cta-box__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--cbr-overlay, 0.45));
	transition: background 0.4s ease;
}

/* Outlined frame, centred */
.cbr-cta-box__frame {
	position: absolute;
	top: 38.5%;
	bottom: 38.5%;
	left: 16.5%;
	right: 16.5%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--cbr-border, rgba(255, 255, 255, 0.6));
	transition:
		top 0.5s ease,
		bottom 0.5s ease,
		left 0.5s ease,
		right 0.5s ease,
		border-color 0.4s ease;
}

.cbr-cta-box__title {
	color: var(--cbr-text, #fff);
	font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(18px, 2.2vw, 30px);
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	padding-left: 0.22em; /* balances the trailing letter-spacing */
}

/* Hover: photo turns to colour and zooms slightly */
.cbr-cta-box:hover .cbr-cta-box__bg {
	transform: scale(1.04);
	filter: grayscale(0%);
}

.cbr-cta-box:hover .cbr-cta-box__overlay {
	background: rgba(0, 0, 0, calc(var(--cbr-overlay, 0.45) - 0.15));
}

/* Hover: frame grows into a taller box and brightens; leaving the box shrinks it back */
.cbr-cta-box:hover .cbr-cta-box__frame {
	top: 10%;
	bottom: 10%;
	left: 8%;
	right: 8%;
	border-color: #fff;
}

.cbr-cta-box:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Narrow screens: wider frame, smaller title */
@media (max-width: 800px) {
	.cbr-cta-box__frame {
		left: 8%;
		right: 8%;
		top: 25%;
		bottom: 25%;
	}
}