/* Grade House Page Hero — breadcrumb, H1, intro and actions on pattern-master
 * paper, with the picture framed like a pattern piece: square edges, two V
 * notches cut into its left and bottom edges and a pencil outline offset
 * behind it. Compact: never a full screen. */

.gh.pagehero { position: relative; padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); background: var(--gh-paper); overflow: hidden; border-bottom: 1px solid var(--gh-line); }
.gh.pagehero .phero__paper { position: absolute; inset: 0; pointer-events: none; }
.gh.phero--split .phero__paper { right: auto; width: 58%; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.gh.pagehero .phero__in { position: relative; display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.gh.phero--split .phero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

.gh.pagehero .phero__text { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.gh.pagehero .phero__crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 4px; padding: 0; list-style: none; font-size: 14px; color: var(--gh-muted); }
.gh.pagehero .phero__crumb li { display: inline-flex; align-items: center; }
.gh.pagehero .phero__crumb li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border-top: 1.4px solid currentColor; border-right: 1.4px solid currentColor; transform: rotate(45deg); opacity: .6; }
.gh.pagehero .phero__crumb a { color: var(--gh-text); text-decoration: none; }
.gh.pagehero .phero__crumb a:hover { color: var(--gh-blue); text-decoration: underline; text-underline-offset: 3px; }
.gh.pagehero .phero__crumb [aria-current] { color: var(--gh-muted); }

.gh.pagehero .phero__label { font-size: 15px; font-weight: 600; color: var(--gh-blue); text-decoration: none; }
.gh.pagehero a.phero__label:hover { text-decoration: underline; text-underline-offset: 3px; }
.gh.pagehero .phero__title { max-width: 18ch; font-size: clamp(38px, 4.6vw, 68px); line-height: 1.02; overflow-wrap: break-word; }
.gh.phero--plain .phero__title { max-width: 20ch; font-size: var(--gh-fs-h1); }
.gh.pagehero .phero__intro { max-width: 58ch; }
.gh.pagehero .phero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }
.gh.pagehero .phero__call { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--gh-ink); font-weight: 600; text-decoration: none; }
.gh.pagehero .phero__call span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.gh.pagehero .phero__call:hover { color: var(--gh-blue); }

/* Picture framed as a pattern piece */
.gh.pagehero .phero__media { min-width: 0; padding: 0 10px 10px 0; }
.gh.pagehero .phero__frame { --phero-line: var(--gh-ink); position: relative; }
.gh.pagehero .phero__frame::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid var(--phero-line); opacity: .55; pointer-events: none; }
.gh.pagehero .phero__frame img { position: relative; width: 100%; height: clamp(300px, 34vw, 480px); object-fit: cover;
	/* two V notches: one on the left edge, one on the bottom edge */
	clip-path: polygon(0 0, 100% 0, 100% 100%, calc(62% + 9px) 100%, 62% calc(100% - 12px), calc(62% - 9px) 100%, 0 100%, 0 calc(38% + 9px), 12px 38%, 0 calc(38% - 9px)); }

@media (max-width: 1024px) {
	.gh.phero--split .phero__in { grid-template-columns: 1fr; }
	.gh.phero--split .phero__paper { width: 100%; -webkit-mask-image: none; mask-image: none; }
	.gh.pagehero .phero__frame img { height: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
	.gh.pagehero { padding: 28px 0 56px; }
	.gh.pagehero .phero__title, .gh.phero--plain .phero__title { font-size: 34px; max-width: none; }
	.gh.pagehero .phero__text { gap: 16px; }
	.gh.pagehero .phero__actions { width: 100%; }
	.gh.pagehero .phero__frame img { aspect-ratio: 4 / 3; }
}