/* Brentwood Page Links — contextual sub-page navigation, migrated from
 * brentwood.ca. Self-contained (no Tailwind). A skewed parent panel + sibling
 * photo tiles with label pills; primary-coloured underline reveals on hover.
 * Colours come from --bw-pl-primary / --bw-pl-highlight set on the wrapper. */

.bw-pl,
.bw-pl * {
	box-sizing: border-box;
}

/* ── bar ──────────────────────────────────────────────────────────────────── */
.bw-pl__bar {
	position: relative;
	display: flex;
	flex-direction: column-reverse;        /* mobile: "More" bar on top, tiles below */
	width: 100%;
	max-width: 72rem;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}

@media (min-width: 768px) {
	.bw-pl__bar {
		flex-direction: row;
		border-radius: .5rem;
	}
}

/* Decorative inset white border (desktop only). */
.bw-pl__border { display: none; }

@media (min-width: 768px) {
	.bw-pl__border {
		display: block;
		position: absolute;
		top: .25rem;
		bottom: .25rem;
		left: 0;
		right: 0;
		border: 1px solid rgba(255, 255, 255, .5);
		border-radius: .375rem;
		pointer-events: none;
		z-index: 8;
	}
}

/* ── parent panel (desktop only, skewed) ──────────────────────────────────── */
.bw-pl__parent { display: none; }

@media (min-width: 768px) {
	.bw-pl__parent {
		position: relative;
		display: grid;
		place-items: center;
		flex: 1 1 0;
		height: 12rem;
		overflow: hidden;
		background: #1f2937;
		color: #fff;
		text-decoration: none;
		transform: skewX(6deg);
		margin-left: -1rem;
		margin-right: -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
		border-right: 4px solid rgba(255, 255, 255, .7);
		z-index: 7;
	}
}

.bw-pl__parent-photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 35% 50%;
	transform: skewX(-6deg) scale(1.1);     /* counter-skew so the photo isn't slanted */
	opacity: .5;
	transition: opacity .5s ease;
}

.bw-pl__parent:hover .bw-pl__parent-photo { opacity: .8; }

.bw-pl__parent-label {
	position: relative;
	z-index: 7;
	display: inline-flex;
	align-items: center;
	transform: skewX(-6deg);                /* counter-skew so text is upright */
	color: #fff;
	font-family: var(--global-heading-font-family, inherit); /* follows customizer heading font */
	font-size: 1.875rem;
	line-height: 1;
	font-weight: 400;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
	pointer-events: none;
	padding-bottom: .25rem;
}

.bw-pl__parent-label .bw-pl__chevron {
	width: .7em;
	height: .7em;
	margin-left: .5rem;
	margin-bottom: -.04em;
}

/* ── sibling tiles ─────────────────────────────────────────────────────────── */
.bw-pl__tile {
	position: relative;
	display: block;
	width: 100%;
	height: 12rem;
	overflow: hidden;
	background: #e9e9e9;
	text-decoration: none;
	z-index: 3;
}

@media (min-width: 768px) {
	.bw-pl__tile { flex: 1 1 0; }

	/* Every tile but the last gets the same skewed white divider as the parent. */
	.bw-pl__tile--skew {
		transform: skewX(6deg);
		margin-right: -1rem;
		padding-right: 1rem;
		border-right: 4px solid rgba(255, 255, 255, .7);
	}

	/* Counter-skew the photo+pill so they stay upright; scale + offset fills the
	 * triangular gaps the skew would otherwise leave (matches live values). */
	.bw-pl__tile--skew .bw-pl__photo {
		transform: skewX(-6deg) scale(1.05);
		right: -8px;
		margin-top: -5px;
	}
}

/* Wrapper holding the image + pill, so it can be counter-skewed as a unit. */
.bw-pl__photo {
	position: absolute;
	inset: 0;
}

.bw-pl__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

.bw-pl__img--empty {
	background: repeating-linear-gradient(45deg, #e0e0e0 0 12px, #ededed 12px 24px);
}

.bw-pl__tile:hover .bw-pl__img { transform: scale(1.05); }

/* Overlay: pill anchored bottom-right (same look as the interlinking block). */
.bw-pl__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	pointer-events: none;
}

.bw-pl__pill {
	display: inline-flex;
	align-items: center;
	padding: .25rem 0;
	margin-bottom: .5rem;
	/* Flush to the tile's right edge on every breakpoint — the pill's rounded-left
	 * corners are designed to butt against the right wall, and the chevron keeps a
	 * .5rem internal right padding (.bw-pl__chevron-wrap) so it is never clipped. */
	margin-right: 0;
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
	color: var(--bw-pl-primary, #cc0000);
	font-weight: 500;
	line-height: 1.2;
}

.bw-pl__pill-label { padding-left: .5rem; text-align: right; }
.bw-pl__pill-label--left { padding-left: 0; padding-right: .5rem; }

.bw-pl__chevron-wrap { display: inline-flex; align-items: center; padding: 0 .5rem 0 .25rem; }
.bw-pl__chevron-wrap--left { padding: 0 .25rem 0 .5rem; }

.bw-pl__chevron { width: .85em; height: .85em; display: block; }

@media (min-width: 768px) {
	.bw-pl__pill              { margin-bottom: 1rem; font-size: 1.125rem; }
	.bw-pl__pill-label        { padding-left: 1rem; }
	.bw-pl__pill-label--left  { padding-left: 0; padding-right: 1.5rem; }
	.bw-pl__chevron-wrap      { padding-right: 1rem; }
	.bw-pl__chevron-wrap--left{ padding-left: 1rem; padding-right: .25rem; }
}

/* ── hover underline (parent + tiles) ──────────────────────────────────────── */
.bw-pl__line {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: var(--bw-pl-primary, #cc0000);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
	z-index: 5;
	pointer-events: none;
}

.bw-pl__parent:hover .bw-pl__line,
.bw-pl__tile:hover .bw-pl__line { transform: scaleX(1); }

/* ── mobile "More …" bar ───────────────────────────────────────────────────── */
.bw-pl__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: .5rem 1rem;
	background: var(--bw-pl-highlight, #f1efe9);
	color: #231f20;
	text-decoration: none;
	font-size: 1.25rem;
	font-weight: 500;
}

.bw-pl__more .bw-pl__chevron { width: .7em; height: .7em; }

@media (min-width: 768px) {
	.bw-pl__more { display: none; }
}

/* ── editor niceties ───────────────────────────────────────────────────────── */
.editor-styles-wrapper .bw-pl__tile,
.editor-styles-wrapper .bw-pl__parent { min-height: 12rem; }