/*
 * PA Knowledge Hub.
 * Everything here is scoped under .pa-kh so it cannot reach another page.
 * The only colours used are the theme's own, lifted from assets/dist/css/app-ltr.css:
 *   .c-blue-80  #002c54     .c-green-80 #43a548
 * No font family and no font size is declared; type comes from the theme.
 */

.pa-kh {
	--pa-kh-blue: #002c54;
	--pa-kh-green: #43a548;
	--pa-kh-line: rgba(0, 44, 84, .18);
	--pa-kh-node: 2.25rem;
	--pa-kh-thumb: 13rem;
	--pa-kh-foot: 3.5rem;
}

/* A full width entry needs a bigger picture to stay in proportion. */
@media (min-width: 1200px) {
	.pa-kh { --pa-kh-thumb: 17rem; }
}
@media (min-width: 1600px) {
	.pa-kh { --pa-kh-thumb: 20rem; }
}

/* Breadcrumbs, editor notice, objectives ---------------------------------- */
.pa-kh-breadcrumbs nav { opacity: .75; }
.pa-kh-breadcrumbs .sep { margin: 0 .5em; opacity: .5; }
.pa-kh-notice { border-left: 3px solid var(--pa-kh-green); padding: .75em 1em; background: rgba(67, 165, 72, .07); }
/* The definition: two balanced columns across the full width under a short green rule.
   Relative size only, so it still tracks whatever the theme sets for body type. */
.pa-kh-definition { position: relative; padding-top: 1.6rem; }
.pa-kh-definition::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.5rem;
	height: 3px;
	background: var(--pa-kh-green);
}
.pa-kh-definition p { font-size: 1.05em; line-height: 1.6; }
.pa-kh-definition p:last-child { margin-bottom: 0; }

/* Objectives --------------------------------------------------------------
 * The definition now sits in a centred Bootstrap column and needs nothing here. These
 * rules cover the objectives list, both inside the green block and in the plain
 * fallback used when a series has no picture to build the block around. */
.pa-kh-objectives-block { border-top: 1px solid var(--pa-kh-line); padding-top: 1.75rem; }
.pa-kh-objectives-intro { max-width: 52ch; margin-bottom: 1.25rem; line-height: 1.35; }

.pa-kh-objectives { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.pa-kh-objective {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
	margin-bottom: 1.1rem;
}
.pa-kh-objective:last-child { margin-bottom: 0; }
.pa-kh-objective-num { color: var(--pa-kh-green); font-variant-numeric: tabular-nums; }
.pa-kh-objective-text { line-height: 1.55; }
/* An objective written as "Title | Explanation" leads with its title. */
.pa-kh-objective-title { display: block; margin-bottom: .2rem; }

/* Section blocks ----------------------------------------------------------
 * The theme's blocks take their height from a fixed picture ratio and scroll the text
 * inside whatever is left. Service pages carry a paragraph or two so that is fine; a
 * series definition and five objectives overflow it, and the copy gets hidden behind an
 * inner scrollbar. These rules let the block take its height from the text instead: the
 * text column stops overlaying the picture and simply takes half the row, and the
 * picture stretches to whatever height the text needs. Modifiers only, no !important. */
@media (min-width: 992px) {
	.pa-kh .pa-kh-sections .section-box-green { flex-direction: row; align-items: stretch; }

	/* The text column: was absolute and full height, now an ordinary half of the row. */
	.pa-kh .pa-kh-sections .section-box-green .right {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		width: 50%;
	}
	.pa-kh .pa-kh-sections .section-box-green .left { order: 1; }
	.pa-kh .pa-kh-sections .section-box-green .right { order: 2; }

	.pa-kh .pa-kh-sections .section-box-green .left { left: auto; width: 50%; }

	/* The picture fills its column rather than dictating the height. */
	.pa-kh .pa-kh-sections .section-box-green .left .image-wrapper {
		padding-bottom: 0;
		height: 100%;
		min-height: 24rem;
	}

	/* Nothing is capped, so nothing scrolls out of sight. */
	.pa-kh .pa-kh-sections .section-box-green .right .content {
		max-height: none;
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* Inside the green section block the type is already white, so the numerals step back
   to a lighter weight of the same white rather than the green they use on a pale page. */
.pa-kh .section-box-green .pa-kh-objectives,
.pa-kh .section-box-blue .pa-kh-objectives { max-width: none; }
.pa-kh .section-box-green .pa-kh-objective-num,
.pa-kh .section-box-blue .pa-kh-objective-num { color: #fff; opacity: .6; }

/* Home page band ----------------------------------------------------------
 * The theme's industry cards are laid out by slick, which is what makes their contents
 * stack. This strip is a plain flex row instead, so the card needs telling to stack and
 * sit on the floor of the band the way the industries ones do. */
.pa-kh-home .pa-kh-strip { display: flex; }
.pa-kh-home .pa-kh-strip .container-industry-listing-carousel {
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	justify-content: flex-end;
	text-decoration: none;
}
/* The theme draws the divider on every card; drop it on the last so the row does not
   end on a stray hairline. */
.pa-kh-home .pa-kh-strip .container-industry-listing-carousel:last-child::after { display: none; }
.pa-kh-home .pa-kh-draft-pill { background: hsla(0, 0%, 100%, .25); }

@media (max-width: 767.98px) {
	.pa-kh-home .pa-kh-strip { flex-direction: column; }
	.pa-kh-home .pa-kh-strip .container-industry-listing-carousel { padding-top: 2rem; padding-bottom: 2rem; }
	.pa-kh-home .pa-kh-strip .container-industry-listing-carousel::after { display: none; }
}

/* Directory cards -------------------------------------------------------- */
/* The card asks for height:100%, which only resolves if the grid column is itself a
   flex container. Without this a series with no picture sits short next to the others. */
.pa-kh .container-insights-listings > [class*="col-"] { display: flex; }
/* Same declarations the theme gives .container-insight-listing a, applied to whichever
   element the card uses, so a non-clickable series still fills its column. */
.pa-kh-card-inner { display: flex; flex-direction: column; height: 100%; }
.pa-kh-series-tagline { display: block; margin-bottom: .5rem; opacity: .7; }
.pa-kh-status-note { display: block; margin-bottom: .35rem; opacity: .6; text-transform: uppercase; letter-spacing: .08em; }
.pa-kh-muted { opacity: .55; }
.pa-kh-muted .wrapper { cursor: default; }

/* Timeline --------------------------------------------------------------- */
/* Full width: the entries run the whole container rather than stopping short and
   leaving the right of the page empty. */
.pa-kh-timeline { list-style: none; margin: 0; padding: 0; }
.pa-kh-entry { position: relative; padding-left: calc(var(--pa-kh-node) + 1.5rem); margin-bottom: 1.5rem; }

/* The spine. Drawn per entry and omitted on the last one, so the line always
   closes cleanly on the final node with no trailing stub. */
.pa-kh-entry:not(:last-child)::before {
	content: "";
	position: absolute;
	left: calc(var(--pa-kh-node) / 2 - 1px);
	top: var(--pa-kh-node);
	bottom: -1.5rem;
	width: 2px;
	background: var(--pa-kh-line);
}

.pa-kh-node {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--pa-kh-node);
	height: var(--pa-kh-node);
	border-radius: 50%;
	border: 2px solid var(--pa-kh-blue);
	color: var(--pa-kh-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	background: #fff;
}

.pa-kh-node-planned { border-style: dashed; opacity: .55; }
.pa-kh-part { text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin-bottom: .35rem; }

/* The theme's insight card, re-laid-out as a horizontal row.
 *
 * The card's .wrapper is already display:flex/flex-direction:column, and its
 * .image-wrapper gets its height from padding-bottom:35% of its own width. Neither
 * survives being handed flex row properties, so switch the wrapper to grid and place
 * the existing children explicitly: picture down the left, text down the right.
 * Column one is sized auto, so on a card with no picture it collapses to nothing and
 * the text simply fills the row. */
.pa-kh-entry .container-insight-listing .wrapper {
	display: grid;
	grid-template-columns: auto 1fr;
	align-content: start;
	padding-bottom: var(--pa-kh-foot);
}
.pa-kh-entry .container-insight-listing .wrapper .image-wrapper {
	grid-area: 1 / 1 / span 3 / 2;
	width: var(--pa-kh-thumb);
	min-height: 10rem;
	padding-bottom: 0;
	margin-bottom: calc(var(--pa-kh-foot) * -1);
}
/* The title now has room to run, so keep the date clear of it. */
.pa-kh-entry .container-insight-listing .wrapper .head { grid-area: 1 / 2; gap: 1rem; align-items: baseline; }
.pa-kh-entry .container-insight-listing .wrapper .head .date { white-space: nowrap; }
.pa-kh-entry .container-insight-listing .wrapper .tags { grid-area: 2 / 2; }
.pa-kh-entry .container-insight-listing .wrapper .text { grid-area: 3 / 2; min-height: 0; }

/* Read state, set by hub.js from this browser's history. */
.pa-kh-entry.pa-kh-read .pa-kh-node { border-color: var(--pa-kh-green); color: var(--pa-kh-green); }

/* Article badge and continue strip --------------------------------------- */
.pa-kh-badge { margin-bottom: 1.5rem; }
.pa-kh-badge-link { display: inline-flex; gap: .6rem; align-items: baseline; border-left: 3px solid var(--pa-kh-green); padding: .35rem .75rem; text-decoration: none; }
.pa-kh-badge-name { color: var(--pa-kh-blue); font-weight: 700; }
.pa-kh-badge-part { opacity: .65; }

.pa-kh-continue { margin-top: 2.5rem; border-top: 1px solid var(--pa-kh-line); padding-top: 1.5rem; }
.pa-kh-continue-nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.pa-kh-continue-item { flex: 1 1 14rem; display: block; text-decoration: none; padding: .75rem 1rem; border: 1px solid var(--pa-kh-line); }
.pa-kh-continue-item:hover { border-color: var(--pa-kh-green); }
.pa-kh-continue-item.is-disabled { opacity: .45; pointer-events: none; }
.pa-kh-continue-label { display: block; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.pa-kh-continue-title { display: block; color: var(--pa-kh-blue); }
.pa-kh-continue-index { margin-top: 1rem; }

/* Back link ---------------------------------------------------------------
 * The theme styles .button-back only under .container-text-photo .left and under
 * .container-head-slider. Outside those two parents its arrow gets no width at all and
 * renders at the SVG's full intrinsic size. These are the theme's own declarations for
 * that arrow, lifted verbatim and scoped to the hub. */
.pa-kh .button-back { font-weight: 600; }
.pa-kh .button-back img,
.pa-kh .button-back svg { width: 18px; height: auto; margin-right: 10px; transform: scaleX(-1); transition: transform .3s; }
@media (min-width: 992px) {
	.pa-kh .button-back:hover img,
	.pa-kh .button-back:hover svg { transform: scaleX(-1) translateX(10px); }
}

/* Draft marker in the navigation. The only rule outside the .pa-kh root, because the
   marker lives inside the theme's nav markup. Single class, no custom properties. */
.pa-kh-draft-pill { display: inline-block; margin-left: .4em; padding: 0 .5em; border-radius: 1em; background: rgba(0, 44, 84, .18); opacity: .8; }
/* Navigation --------------------------------------------------------------
 * The top level item's label carries its own anchor, because the theme only links a top
 * level entry that points at a real post. No rule is needed to style that anchor: the
 * theme already sets a{color:inherit;text-decoration:none} globally, which matters
 * because this item appears on every page while hub.css does not. */
/* In a heading the pill would otherwise inherit the full display size. Relative only,
   so it still tracks whatever size the theme gives the heading. */
.pa-kh h1 .pa-kh-draft-pill,
.pa-kh h2 .pa-kh-draft-pill { font-size: .4em; vertical-align: middle; }

/* Narrow screens: the spine drops away, entries stack full width, numbers stay, and
   the card reverts to exactly the vertical form it has on the insights listing. */
@media (max-width: 767.98px) {
	.pa-kh-entry { padding-left: 0; }
	.pa-kh-entry:not(:last-child)::before { display: none; }
	.pa-kh-node { position: static; margin-bottom: .6rem; }
	.pa-kh-entry .container-insight-listing .wrapper { display: flex; }
	.pa-kh-entry .container-insight-listing .wrapper .image-wrapper {
		width: 100%;
		min-height: 0;
		padding-bottom: 35%;
		margin-bottom: 0;
	}
}