/* Template sections: Page header variants (template-sections/page-header.html).
   On a real inner page add .page-top to the first section so it clears the fixed navbar. */
.ts-ph p { color: var(--text-medium); }
.ts-ph .page-title { color: var(--text-strong); }
.ts-ph .ts-svg { width: 16px; height: 16px; }

/* V1 centered */
.ts-ph__center { display: grid; justify-items: center; gap: var(--space-5); max-width: 860px; text-align: center; }
.ts-ph__center .ts-lead { max-width: 56ch; }
.ts-ph__center .ts-actions { justify-content: center; margin-top: var(--space-2); }

/* V2 breadcrumb and meta */
.ts-ph__left { display: grid; justify-items: start; gap: var(--space-5); max-width: 820px; padding-bottom: var(--space-8); border-bottom: 1px solid var(--border-thin); }
.ts-ph__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-2); font-size: var(--body-sm-size); color: var(--text-low); }
.ts-ph__meta > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.ts-ph__by { font-weight: var(--fw-medium); color: var(--text-strong); }

/* V3 split with image */
.ts-ph__split { display: grid; gap: var(--space-10); align-items: center; }
.ts-ph__copy { display: grid; justify-items: start; gap: var(--space-5); }
.ts-ph__stats { justify-self: stretch; display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-10); margin-top: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--border-thin); }
.ts-ph__stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.ts-ph__stats dt { font-size: var(--body-sm-size); color: var(--text-low); }
.ts-ph__stats dd { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h3-size); line-height: 1.1; color: var(--text-strong); }
.ts-ph__img { overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 4 / 3; }
.ts-ph__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .ts-ph__split { grid-template-columns: 1fr 1.05fr; gap: var(--space-16); } }

/* V4 dark with tabs */
.ts-ph__dark { display: grid; gap: var(--space-10); padding: var(--space-12) var(--space-5) 0; border-radius: var(--radius-xl); }
.ts-ph__dark-copy { display: grid; justify-items: start; gap: var(--space-4); max-width: 640px; }
.ts-ph__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); font-size: var(--body-sm-size); color: var(--orange-400) !important; }
.ts-ph__tabs { display: flex; gap: var(--space-6); overflow-x: auto; border-top: 1px solid rgb(255 255 255 / 0.12); scrollbar-width: none; }
.ts-ph__tabs a { flex: none; padding-block: var(--space-5); border-bottom: 2px solid transparent; font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-low); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ts-ph__tabs a[aria-current="page"] { border-bottom-color: var(--orange-500); color: var(--text-strong); }
@media (hover: hover) { .ts-ph__tabs a:hover { color: var(--text-strong); } }
@media (min-width: 768px) { .ts-ph__dark { padding: var(--space-16) var(--space-12) 0; } .ts-ph__tabs { gap: var(--space-8); } }

/* V5 search header */
.ts-ph__help { display: grid; justify-items: center; gap: var(--space-6); padding: var(--space-12) var(--space-5); border-radius: var(--radius-xl); background: radial-gradient(60% 80% at 50% 0%, var(--peach-100), transparent 70%), var(--stone-50); text-align: center; }
.ts-ph__search { position: relative; width: min(100%, 560px); }
.ts-ph__search .input { height: 56px; padding-right: 64px; border-radius: var(--radius-pill); background: var(--base-high); box-shadow: var(--shadow-md); }
.ts-ph__search .search > .ts-svg { position: absolute; left: var(--space-4); top: 50%; translate: 0 -50%; color: var(--text-low); pointer-events: none; }
.ts-ph__search kbd { display: none; position: absolute; right: var(--space-4); top: 50%; translate: 0 -50%; padding: 2px 8px; border: 1px solid var(--border-thin); border-radius: 6px; font-family: inherit; font-size: 12px; color: var(--text-low); }
.ts-ph__popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); font-size: var(--body-sm-size); color: var(--text-low); }
@media (min-width: 480px) { .ts-ph__search kbd { display: block; } }
@media (min-width: 768px) { .ts-ph__help { padding: var(--space-20) var(--space-12); } }