/* Detail-page discovery shell only: the way back above the approved single
   composition and the related grid below it. Every selector is rooted in its
   own namespace so nothing here can reach inside a Single layout, the
   Explorer or the home showcase. */

.aura-portfolio-single-context,
.aura-portfolio-related {
	--aura-discovery-accent: #236b54;
	--aura-discovery-border: color-mix(in srgb, currentColor 14%, transparent);
	--aura-discovery-muted: color-mix(in srgb, currentColor 62%, transparent);
	--aura-discovery-focus: color-mix(in srgb, var(--aura-discovery-accent) 65%, #fff);
	font: inherit;
	color: inherit;
}

.aura-portfolio-single-context *,
.aura-portfolio-related *,
.aura-portfolio-single-context *::before,
.aura-portfolio-related *::before { box-sizing: border-box; }

/* Both shell sections share the reading column the Editorial composition
   defines for itself, so the bar and the related grid line up with the case
   study instead of spanning the full page. */
.aura-portfolio-single-context,
.aura-portfolio-related {
	width: min(calc(100% - 2rem), 92rem);
	margin-inline: auto;
}

/* The shell now supplies the page's leading whitespace, so the composition
   below it must not add a second one — that is what pushed the bar up into the
   site menu and left the title stranded far below it. Only the outer offset is
   reset; nothing inside the composition is touched. */
.aura-portfolio-page--discovery > .aura-portfolio-single-layout { padding-block-start: 0; }

/* ── The way back ─────────────────────────────────────────────────────────
   Deliberately quiet: no surface of its own, no green block, no sticky
   behaviour. It stays in the normal document flow and almost disappears
   until the visitor looks for it.

   It belongs to the case study, not to the header: it clears the site menu
   above it and then sits directly on top of the project title. */

.aura-portfolio-single-context {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(12px, 3vw, 40px);
	padding: 0 0 clamp(10px, 1.6vw, 18px);
	margin-block: clamp(24px, 4vw, 48px) clamp(20px, 2.5vw, 32px);
	background: none;
	border-bottom: 1px solid var(--aura-discovery-border);
}

.aura-portfolio-single-context__back { min-width: 0; }

.aura-portfolio-single-context__back-link,
.aura-portfolio-single-context .aura-portfolio-navigation a {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	color: inherit;
	font-size: .95rem;
	line-height: 1.3;
	text-decoration: none;
}

.aura-portfolio-single-context__back-link:hover,
.aura-portfolio-single-context__back-link:focus-visible,
.aura-portfolio-single-context .aura-portfolio-navigation a:hover,
.aura-portfolio-single-context .aura-portfolio-navigation a:focus-visible {
	color: var(--aura-discovery-accent);
}

.aura-portfolio-single-context a:focus-visible {
	outline: 2px solid var(--aura-discovery-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.aura-portfolio-single-context__arrow,
.aura-portfolio-single-context .aura-portfolio-navigation__arrow {
	font-size: 1.05em;
	line-height: 1;
}

.aura-portfolio-single-context__hint {
	margin: 2px 0 0;
	color: var(--aura-discovery-muted);
	font-size: .78rem;
	line-height: 1.4;
}

.aura-portfolio-single-context__hint-label {
	text-transform: uppercase;
	letter-spacing: .08em;
}

.aura-portfolio-single-context__hint-value { white-space: nowrap; }

/* The adjacent pair reuses the published navigation component; only its
   placement inside this shell is styled here. */

.aura-portfolio-single-context__adjacent { min-width: 0; }

.aura-portfolio-single-context .aura-portfolio-navigation {
	display: flex;
	gap: clamp(16px, 3vw, 40px);
	margin: 0;
}

/* The glyph sits beside the pair of lines the component already produces:
   the direction above, the project it leads to below. */
.aura-portfolio-single-context .aura-portfolio-navigation a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: .55em;
	max-width: 24ch;
}

.aura-portfolio-single-context .aura-portfolio-navigation__arrow { grid-row: 1 / span 2; }

.aura-portfolio-single-context .aura-portfolio-navigation__title {
	grid-column: 2;
	overflow: hidden;
	font-size: .95rem;
	opacity: 1;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

.aura-portfolio-single-context .aura-portfolio-navigation__next {
	grid-template-columns: minmax(0, 1fr) auto;
	text-align: right;
}

.aura-portfolio-single-context .aura-portfolio-navigation__next .aura-portfolio-navigation__arrow { grid-column: 2; }
.aura-portfolio-single-context .aura-portfolio-navigation__next .aura-portfolio-navigation__title { grid-column: 1; }

@media (max-width: 900px) {
	.aura-portfolio-single-context {
		flex-direction: column;
		gap: 8px;
	}

	.aura-portfolio-single-context__adjacent { width: 100%; }

	.aura-portfolio-single-context .aura-portfolio-navigation {
		justify-content: space-between;
		width: 100%;
	}

	/* Titles saturate a narrow bar: the direction and the glyph carry it. */
	.aura-portfolio-single-context .aura-portfolio-navigation a { max-width: 45%; }
	.aura-portfolio-single-context__hint { display: none; }
}

/* ── Continue exploring ───────────────────────────────────────────────────
   The section around the published cards. The grid itself is the listing
   contract, so nothing here restyles .aura-portfolio-card. */

.aura-portfolio-related {
	padding-top: clamp(40px, 6vw, 88px);
	margin-top: clamp(48px, 7vw, 104px);
	border-top: 1px solid var(--aura-discovery-border);
}

.aura-portfolio-related__header { margin-bottom: clamp(24px, 3.5vw, 48px); }

.aura-portfolio-related__eyebrow {
	margin: 0 0 10px;
	color: var(--aura-discovery-accent);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.aura-portfolio-related__title {
	max-width: 22ch;
	margin: 0;
	color: inherit;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	letter-spacing: -.02em;
	line-height: 1.12;
}

.aura-portfolio-related__cta {
	margin: clamp(24px, 3vw, 40px) 0 0;
	text-align: right;
}

.aura-portfolio-related__cta-link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	color: var(--aura-discovery-accent);
	font-weight: 600;
	text-decoration: none;
}

.aura-portfolio-related__cta-link:hover,
.aura-portfolio-related__cta-link:focus-visible { text-decoration: underline; }

.aura-portfolio-related__cta-link:focus-visible {
	outline: 2px solid var(--aura-discovery-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (max-width: 640px) {
	.aura-portfolio-related__cta { text-align: left; }
}