/*
 * Tool Guide family (v2): collapsible hero → breadcrumb of nested rounded plates.
 * Model: the step article pane of the TPM Tool (Tool Guide › Project Steps › phase).
 * See inc/tpm-guide-hero-toggle.php. Max, video 03.11.2026.
 */

/* --- Close (×) on the big hero --- */
.tpm-g2 .tpm-g2-intro { position: relative; }
.tpm-g2 .tpm-g2-hero-close {
	position: absolute; top: 10px; right: 14px; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0; margin: 0;
	border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%;
	background: rgba(35, 68, 93, .55); color: #fff; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.tpm-g2 .tpm-g2-hero-close:hover { background: #b85450; border-color: #b85450; }
.tpm-g2 .tpm-g2-hero-close svg,
.tpm-g2 .tpm-g2-hero-open svg {
	width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Breadcrumb plates: hidden while the hero is shown --- */
.tpm-g2 .tpm-g2-crumb { display: none; }

.tpm-g2.is-hero-collapsed .tpm-g2-intro { display: none; }
.tpm-g2.is-hero-collapsed .tpm-g2-crumb {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	position: relative;
	min-height: 42px; padding: 4px 48px; margin: 0;
	font-family: "Roboto Condensed", Arial, sans-serif; font-size: 21px; font-weight: 500; line-height: 1.2;
	color: #fff; text-align: center;
}
/* Max 03.11 (third video, 14:45): the title of the page you are on is big (35px) and sits in the
   middle of its plate — "Tool Guide" on /guide/, "Project Steps" / "Tool Levels" on the child pages.
   The parent "Tool Guide" link on a child page goes back to the LEFT of its plate, normal size.
   Phones keep one modest size for every crumb (no 35px there). */
@media (min-width: 601px) {
	.tpm-g2.is-hero-collapsed .tpm-g2-crumb { min-height: 56px; font-size: 35px; gap: 12px; }
	.tpm-g2.is-hero-collapsed .tpm-g2-crumb .tpm-g2-crumb__icon,
	.tpm-g2.is-hero-collapsed .tpm-g2-crumb .tpm-g2-crumb__icon svg { flex-basis: 30px; width: 30px; height: 30px; }
	.tpm-g2.is-hero-collapsed:not(.tpm-g2--guide) .tpm-g2-crumb--guide { min-height: 42px; font-size: 21px; gap: 8px; }
	.tpm-g2.is-hero-collapsed:not(.tpm-g2--guide) .tpm-g2-crumb--guide .tpm-g2-crumb__icon,
	.tpm-g2.is-hero-collapsed:not(.tpm-g2--guide) .tpm-g2-crumb--guide .tpm-g2-crumb__icon svg { flex-basis: 20px; width: 20px; height: 20px; }
}
.tpm-g2.is-hero-collapsed:not(.tpm-g2--guide) .tpm-g2-crumb--guide { justify-content: flex-start; padding-left: 22px; }

.tpm-g2 .tpm-g2-crumb__icon { display: inline-flex; flex: 0 0 20px; width: 20px; height: 20px; }
.tpm-g2 .tpm-g2-crumb__icon svg { width: 20px; height: 20px; fill: currentColor; }
.tpm-g2 .tpm-g2-crumb__label,
.tpm-g2 a.tpm-g2-crumb__label:visited { color: #fff !important; text-decoration: none !important; min-width: 0; transition: color .15s ease; }
/* Parent crumb (a link): our red on hover, like every TPM breadcrumb (.tpm-breadcrumb a:hover). */
.tpm-g2 a.tpm-g2-crumb__label:hover,
.tpm-g2 a.tpm-g2-crumb__label:focus-visible { color: #b85450 !important; text-decoration: none !important; }
.tpm-g2 .tpm-g2-crumb:has(a.tpm-g2-crumb__label:hover) .tpm-g2-crumb__icon { color: #b85450; }

.tpm-g2 .tpm-g2-hero-open {
	display: inline-flex; align-items: center; justify-content: center;
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	width: 32px; height: 32px; padding: 0; margin: 0;
	border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer;
}
.tpm-g2 .tpm-g2-hero-open:hover { background: rgba(255, 255, 255, .14); }

/* --- The frame: nested rounded plates in BOTH states (Max 03.11, third video) ---
   With the big hero shown there is no crumb on top, so every plate gets the same 5px edge on top
   as on the sides and the bottom — rounded all round, never a square top. */
.tpm-g2.is-hero-collapsed .tpm-g2-map .center-section { padding-top: 14px !important; }
.tpm-g2 .tpm-g2-map .docs-center-column {
	background-color: #23445d;
	border: 2px solid #5d7f99;
	border-radius: 25px;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .5) inset;
	padding: 0 5px 5px;
}
.tpm-g2:not(.is-hero-collapsed) .tpm-g2-map .docs-center-column { padding-top: 5px; }
.tpm-g2 .tpm-g2-map .docs-center-widget-wrap--populated { border-radius: 20px; }
.tpm-g2:not(.is-hero-collapsed) .tpm-g2-map .docs-center-widget-wrap--populated { padding-top: 5px; }
/* Tool Guide: its light map plate sits inside the dark Tool Guide plate. */
.tpm-g2.tpm-g2--guide .tpm-g2-map .tpm-g2-guide-content {
	background-color: #bac8d3;
	border: 2px solid #bac8d3;
	border-radius: 20px;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .5) inset;
	padding: 10px;
}

/* The map pane itself: rounded on top too (Tool Guide, Tool Levels); on Project Steps the
   Map / Phases tabs sit on its top-right edge, so only the top-left corner is rounded. */
.tpm-g2 .tpm-g2-map .tpm-process-steps-tabs__panes { border-radius: 15px; }
.tpm-g2.tpm-g2--project-steps .tpm-g2-map .tpm-process-steps-tabs__panes { border-radius: 15px 0 15px 15px; }

/* Project Steps, wide screens: the Map / Phases tabs share the row with the crumb
   (the crumb row is 56px high since the 35px title). */
@media (min-width: 768px) {
	.tpm-g2.is-hero-collapsed.tpm-g2--project-steps .tpm-process-steps-tabs__nav {
		position: relative; z-index: 1; margin-top: -40px; pointer-events: none;
	}
	.tpm-g2.is-hero-collapsed.tpm-g2--project-steps .tpm-process-steps-tabs__nav > * { pointer-events: auto; }
}

@media (max-width: 600px) {
	.tpm-g2 .tpm-g2-intro .tpm-g2-wrap { padding-right: 52px; padding-left: 52px; }
	.tpm-g2 .tpm-g2-hero-close { top: 8px; right: 8px; width: 32px; height: 32px; }
	.tpm-g2.is-hero-collapsed .tpm-g2-crumb { font-size: 19px; min-height: 40px; padding-left: 40px; padding-right: 40px; }
	/* parent "Tool Guide" on a child page: left, and a little lower in its plate */
	.tpm-g2.is-hero-collapsed:not(.tpm-g2--guide) .tpm-g2-crumb--guide { padding-left: 16px; padding-top: 8px; }
	.tpm-g2 .tpm-g2-map .docs-center-column { border-radius: 20px; }
	.tpm-g2 .tpm-g2-map .docs-center-widget-wrap--populated,
	.tpm-g2.tpm-g2--guide .tpm-g2-map .tpm-g2-guide-content { border-radius: 16px; }
	.tpm-g2.tpm-g2--guide .tpm-g2-map .tpm-g2-guide-content { padding: 6px; }
}

@media print {
	.tpm-g2 .tpm-g2-hero-close,
	.tpm-g2 .tpm-g2-hero-open { display: none !important; }
}