/* Author page (com_content/author/author.php) + blog post byline / author box (article/blog.php).
   Design: mockups/author-page.html. Tokens: --ds-* in custom.css. */

/* full-width sections: the component column loses its container */
#t4-component:has(> .t4-section-inner .pxau) { padding: 0; }
#t4-component:has(> .t4-section-inner .pxau) > .t4-section-inner { max-width: none; padding: 0; }
#t4-component:has(> .t4-section-inner .pxau) > .t4-section-inner > .t4-row { margin: 0; }
#t4-component:has(> .t4-section-inner .pxau) > .t4-section-inner > .t4-row > .t4-col { padding: 0; }

.pxau { --pxau-pad: 88px; color: var(--ds-text, #161616); }
#t4-component .pxau .container { max-width: 1228px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.pxau h1, .pxau h2, .pxau h3 { color: var(--ds-navy, #050038); margin: 0; letter-spacing: -.02em; }
.pxau h2 { font-size: var(--ds-h2, clamp(1.9rem, 3vw, 2.4rem)); line-height: 1.18; }
.pxau-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ds-green-ink, #15803d); margin-bottom: 10px; }

/* hero */
.pxau-hero { background: linear-gradient(180deg, #fff 0%, var(--ds-soft, #f5f8fa) 100%); padding: 40px 0 64px; border-bottom: 1px solid var(--ds-line, #e7ebf0); }
.pxau-crumbs { font-size: 14px; color: var(--ds-label, #636b78); margin-bottom: 32px; }
.pxau-crumbs a { color: var(--ds-muted, #5b6474); text-decoration: none; }
.pxau-crumbs a:hover { color: var(--ds-navy, #050038); }
.pxau-hero-grid { display: grid; grid-template-columns: 120px minmax(0, 760px); gap: 32px; align-items: start; }
.pxau-avatar { width: 120px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ds-navy, #050038); display: grid; place-items: center; box-shadow: 0 0 0 5px #fff, 0 10px 30px -12px rgba(5, 0, 56, .35); }
.pxau-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pxau-avatar span { color: var(--ds-green-on-navy, #7ee39a); font-size: 40px; font-weight: 800; }
.pxau-hero h1 { font-size: var(--ds-h1-content, clamp(2.2rem, 3.6vw, 3rem)); font-weight: 800; line-height: 1.15; }
.pxau-role { font-size: 18px; color: var(--ds-muted, #5b6474); margin: 8px 0 18px; }
.pxau-lead { font-size: 18px; line-height: 1.65; max-width: 680px; margin: 0 0 18px; }
.pxau-facts { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.pxau-facts li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ds-muted, #5b6474); }
.pxau-facts i { width: 18px; flex: none; text-align: center; color: var(--ds-green-ink, #15803d); }
.pxau-facts b { color: var(--ds-navy, #050038); font-weight: 700; }
.pxau-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pxau-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ds-navy, #050038); background: #fff; border: 1px solid var(--ds-line-strong, #d9dee5); border-radius: var(--ds-r-pill, 999px); padding: 7px 14px; transition: border-color .2s; }
.pxau-links a:hover { border-color: var(--ds-navy, #050038); }
.pxau .pxau-links a.is-primary { background: var(--ds-navy, #050038); border-color: var(--ds-navy, #050038); color: #fff; padding: 10px 18px; font-weight: 600; }
.pxau .pxau-links a.is-primary:hover { background: #1a1550; }


/* blocks */
.pxau-blk { padding: var(--pxau-pad) 0; }
.pxau-blk.is-soft { background: var(--ds-soft, #f5f8fa); }
.pxau-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.pxau-head > a { font-weight: 600; font-size: 15px; color: var(--ds-green-ink, #15803d); text-decoration: none; }
.pxau-head > a:hover { text-decoration: underline; }

.pxau-bio { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; }
.pxau-bio.is-single { grid-template-columns: minmax(0, 760px); }
.pxau-bio h2 { margin-bottom: 20px; }
.pxau-about p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; }
.pxau-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ds-line, #e7ebf0); }
.pxau-timeline li { position: relative; padding: 0 0 22px 22px; }
.pxau-timeline li::before { content: ""; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ds-green, #34c759); }
.pxau-timeline b { display: block; color: var(--ds-navy, #050038); font-size: 15px; }
.pxau-timeline span { font-size: 15px; color: var(--ds-muted, #5b6474); }

.pxau-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pxau-area { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ds-line, #e7ebf0); border-radius: var(--ds-r-md, 16px); padding: 24px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.pxau-area:hover { box-shadow: var(--ds-sh-hover, 0 18px 40px -24px rgba(5, 0, 56, .28)); transform: translateY(-2px); }
.pxau-area i { font-size: 22px; color: var(--ds-green-ink, #15803d); margin-bottom: 14px; }
.pxau-area h3 { font-size: 1.125rem; margin-bottom: 6px; }
.pxau-area p { flex: 1; font-size: 15px; line-height: 1.55; color: var(--ds-muted, #5b6474); margin: 0 0 14px; }
.pxau-area small { font-size: 13px; font-weight: 600; color: var(--ds-navy, #050038); }

.pxau-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pxau-case { display: block; overflow: hidden; background: #fff; border: 1px solid var(--ds-line, #e7ebf0); border-radius: var(--ds-r-md, 16px); text-decoration: none; transition: box-shadow .2s; }
.pxau-case:hover { box-shadow: var(--ds-sh-hover, 0 18px 40px -24px rgba(5, 0, 56, .28)); }
.pxau-case img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--ds-soft, #f5f8fa); }
.pxau-case div { padding: 16px 18px; }
.pxau-case h3 { font-size: 1rem; line-height: 1.35; }
.pxau-case small { display: block; margin-top: 4px; font-size: 13px; color: var(--ds-muted, #5b6474); }

.pxau-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pxau-post { display: block; text-decoration: none; color: inherit; }
.pxau-post img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ds-r-md, 16px); margin-bottom: 14px; }
.pxau-post.is-more { display: none; }
.is-all .pxau-post.is-more { display: block; }
.pxau-more { margin-top: 36px; text-align: center; }
.pxau-more .pxau-btn.is-ghost { border: 1.5px solid var(--ds-line-strong, #d9dee5); cursor: pointer; }
.pxau-post small { font-size: 13px; font-weight: 600; color: var(--ds-green-ink, #15803d); }
.pxau-post h3 { font-size: 1.0625rem; line-height: 1.4; margin: 6px 0; }
.pxau-post:hover h3 { text-decoration: underline; }
.pxau-post time { font-size: 13px; color: var(--ds-label, #636b78); }

.pxau-cta-wrap { padding-top: 72px; }
.pxau-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--ds-navy, #050038); color: #fff; border-radius: var(--ds-r-lg, 24px); padding: 48px; }
.pxau .pxau-cta h2 { color: #fff; font-size: 1.75rem; }
.pxau-cta p { margin: 8px 0 0; color: rgba(255, 255, 255, .75); }
.pxau-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.pxau-btn { display: inline-flex; align-items: center; background: var(--ds-green, #34c759); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: var(--ds-r-pill, 999px); text-decoration: none; }
.pxau-btn:hover { background: var(--ds-green-hover, #2bb84f); color: #fff; }
.pxau-btn.is-ghost { background: #fff; color: var(--ds-navy, #050038); }
.pxau-btn.is-ghost:hover { background: var(--ds-soft, #f5f8fa); color: var(--ds-navy, #050038); }

/* round photos: the article column gives every img a 24px vertical margin and auto height, which pushed them off centre */
.pxau-av > img, .pxau-avatar > img { display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0 !important; object-fit: cover; object-position: center; border-radius: 0; }

/* blog post: byline under the title */
.pxau-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 18px 0 6px; font-size: 15px; color: var(--ds-muted, #5b6474); }
.pxau-byline .pxau-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--ds-navy, #050038); color: var(--ds-green-on-navy, #7ee39a); font-weight: 800; font-size: 15px; }
.pxau-byline .pxau-av img { width: 100%; height: 100%; object-fit: cover; }
.pxau-byline a { color: var(--ds-navy, #050038); font-weight: 600; text-decoration: none; }
.pxau-byline a:hover { text-decoration: underline; }
.pxau-byline .pxau-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ds-line-strong, #d9dee5); }
/* on the dark post hero */
.intro-article .pxau-byline { color: rgba(255, 255, 255, .72); }
.intro-article .pxau-byline a { color: #fff; }
.intro-article .pxau-byline .pxau-av { background: rgba(255, 255, 255, .12); }
.intro-article .pxau-byline .pxau-dot { background: rgba(255, 255, 255, .35); }

/* blog post: author box after the article */
.pxau-box { margin: 48px 0 8px; padding: 28px; border-radius: var(--ds-r-lg, 24px); background: var(--ds-soft, #f5f8fa); }
.pxau-box-top { display: flex; align-items: center; gap: 16px; }
.pxau-box .pxau-av { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ds-navy, #050038); color: var(--ds-green-on-navy, #7ee39a); font-weight: 800; font-size: 22px; text-decoration: none; }
.pxau-box .pxau-av img { width: 100%; height: 100%; object-fit: cover; }
.pxau-box small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-label, #636b78); }
.pxau-box .pxau-box-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--ds-navy, #050038); margin: 0; line-height: 1.25; }
.pxau-box .pxau-box-name a { color: inherit; text-decoration: none; }
.pxau-box .pxau-box-name a:hover { text-decoration: underline; }
.pxau-box-job { margin-top: 2px; font-size: 14px; color: var(--ds-muted, #5b6474); }
.pxau-box .pxau-box-lead { font-size: 16px; line-height: 1.65; margin: 16px 0 0; color: var(--ds-text, #161616); }
.pxau-box-posts { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ds-line, #e7ebf0); }
.pxau-box-posts-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pxau-box-posts-head a { flex: none; font-size: 14px; font-weight: 600; color: var(--ds-green-ink, #15803d); text-decoration: none; }
.pxau-box-posts-head a:hover { text-decoration: underline; }
.pxau-box-posts ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pxau-box-posts li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; }
.pxau-box-posts li a { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ds-navy, #050038); text-decoration: none; }
.pxau-box-posts li a:hover { color: var(--ds-green-ink, #15803d); }
.pxau-box-posts li span { flex: none; font-size: 13px; color: var(--ds-label, #636b78); }
.pxau-box-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; font-size: 14px; font-weight: 600; }
.pxau-box-more a { color: var(--ds-green-ink, #15803d); text-decoration: none; }
.pxau-box-more a:hover { text-decoration: underline; }

/* blog list: title first, then one meta line "author · category · date", intro; author links above the card's link mask */
.tp-blog-main .item-content .article-aside { order: 0; margin: 8px 0 0; }
.tp-blog-main .article-aside.has-author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tp-blog-main .article-aside.has-author .article-info { display: contents; }
.tp-blog-main .article-aside.has-author .article-info dd.category-name::before { content: "·"; display: inline; margin-right: 10px; font-size: .82rem; color: #9aa3b2; }
.pxau-card-by { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ds-navy, #050038); text-decoration: none; }
.pxau-card-by .pxau-av { flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ds-navy, #050038); color: var(--ds-green-on-navy, #7ee39a); font-size: 9px; font-weight: 800; }
.pxau-card-by:hover span:last-child { text-decoration: underline; }

/* authors list (/authors) */
.pxau-list-hero .pxau-lead { max-width: 720px; }
.pxau-facts.is-inline { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.pxau-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pxau-member { display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--ds-line, #e7ebf0); border-radius: var(--ds-r-lg, 24px); transition: box-shadow .2s; }
.pxau-member:hover { box-shadow: var(--ds-sh-hover, 0 18px 40px -24px rgba(5, 0, 56, .28)); }
.pxau-member-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pxau-member .pxau-av { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ds-navy, #050038); color: var(--ds-green-on-navy, #7ee39a); font-weight: 800; font-size: 24px; text-decoration: none; }
.pxau-member .pxau-av img { width: 100%; height: 100%; object-fit: cover; }
.pxau .pxau-member h2 { font-size: 1.25rem; line-height: 1.3; }
.pxau-member h2 a { color: inherit; text-decoration: none; }
.pxau-member h2 a:hover { text-decoration: underline; }
.pxau-member-job { margin: 2px 0 0; font-size: 14px; color: var(--ds-muted, #5b6474); }
.pxau-member-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.pxau-member .pxau-facts { margin-bottom: 14px; gap: 6px; }
.pxau-member .pxau-facts li { font-size: 14px; }
.pxau-member-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pxau-member-tags a { font-size: 13px; font-weight: 500; color: var(--ds-navy, #050038); text-decoration: none; background: var(--ds-soft, #f5f8fa); border-radius: var(--ds-r-pill, 999px); padding: 4px 12px; }
.pxau-member-tags a:hover { background: var(--ds-green-soft, rgba(52, 199, 89, .14)); }
.pxau-member-latest { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ds-line, #e7ebf0); display: grid; gap: 2px; }
.pxau-member-latest small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-label, #636b78); }
.pxau-member-latest a { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ds-navy, #050038); text-decoration: none; }
.pxau-member-latest a:hover { color: var(--ds-green-ink, #15803d); }
.pxau-member-latest time { font-size: 13px; color: var(--ds-label, #636b78); }
.pxau-member-more { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--ds-green-ink, #15803d); text-decoration: none; }
.pxau-member-more:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
	.pxau-team { grid-template-columns: 1fr 1fr; }
	.pxau { --pxau-pad: 64px; }
	.pxau-hero-grid { grid-template-columns: 1fr; gap: 20px; }
	.pxau-avatar { width: 96px; }
	.pxau-avatar span { font-size: 32px; }
	.pxau-bio { grid-template-columns: 1fr; gap: 32px; }
	.pxau-areas, .pxau-posts, .pxau-cases { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
	.pxau-team { grid-template-columns: 1fr; }
	.pxau-member { padding: 20px; }
	.pxau { --pxau-pad: 56px; }
	#t4-component .pxau .container { padding-left: 16px; padding-right: 16px; }
	.pxau-hero { padding: 28px 0 56px; }
	.pxau-areas, .pxau-posts, .pxau-cases { grid-template-columns: 1fr; }
	.pxau-cta { padding: 32px 24px; }
	.pxau-box { padding: 22px 18px; }
	.pxau-box .pxau-av { width: 56px; height: 56px; font-size: 19px; }
	.pxau-box-posts li { flex-direction: column; gap: 2px; }
}

/* blog sidebar: "Our authors" card (category/blog.php) → /authors */
.pxau-blog-team { display: grid; gap: 2px; margin-top: 24px; padding: 20px; border: 1px solid #e3e8ee; border-radius: 14px; background: #fff; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s; }
.pxau-blog-team:hover { border-color: rgba(5, 0, 56, .28); box-shadow: var(--ds-sh-hover, 0 18px 40px -24px rgba(5, 0, 56, .28)); }
.pxau-stack { display: flex; margin-bottom: 10px; }
.pxau-stack .pxau-av { width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ds-navy, #050038); color: var(--ds-green-on-navy, #7ee39a); font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.pxau-stack .pxau-av:first-child { margin-left: 0; }
.pxau-blog-team b { font-size: 15px; color: var(--ds-navy, #050038); }
.pxau-blog-team > span:not(.pxau-stack) { font-size: 14px; color: var(--ds-muted, #5b6474); }
.pxau-blog-team em { margin-top: 8px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--ds-green-ink, #15803d); }
.pxau-blog-team:hover em { text-decoration: underline; }
@media (max-width: 991.98px) { .pxau-blog-team { display: none; } } /* phones/tablets: the sidebar sits above the posts */