/* Author box (author-box.php): the sidebar's author card and support card, drawn like the product cards (2 px outline,
 * 16 px corners, pink on hover). The portrait runs edge to edge on top; the intro, the bio button and the social icons
 * sit centered under it. Colors come from the tokens, so dark mode follows. */
.oyb-ab { display: grid; gap: 24px; margin: 0; font-family: var(--oyb-font-body); color: var(--oyb-color-ink); }
.oyb-ab * { box-sizing: border-box; }
.oyb-ab.oyb-ab :is(p, ul, li) { margin: 0; }
.oyb-ab__card {
	position: relative; overflow: hidden; background: var(--oyb-color-surface); border: 2px solid var(--oyb-color-blue-tint);
	border-radius: 16px; text-align: center; transition: border-color .3s ease, box-shadow .3s ease;
}
@media (hover: hover) { .oyb-ab__card:hover { border-color: var(--oyb-color-pink); box-shadow: 0 10px 20px -6px rgba(237, 54, 126, .22); } }

.oyb-ab__photo { display: block; aspect-ratio: 1; overflow: hidden; background: var(--oyb-color-media); }
.oyb-ab.oyb-ab img.oyb-ab__img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; transition: transform 450ms var(--oyb-ease-out, ease); }
@media (hover: hover) { .oyb-ab__card:hover img.oyb-ab__img { transform: translateZ(0) scale(1.04); } }

.oyb-ab__body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 20px 18px; }
.oyb-ab .oyb-ab__intro { font-size: 15px; line-height: 1.55; color: var(--oyb-color-text); text-wrap: pretty; }
.oyb-ab .oyb-ab__intro strong { color: var(--oyb-color-ink); font-weight: 800; }

/* "Read my full bio": the brand gradient pill the old box had; the arrow nudges on hover. */
.oyb-ab a.oyb-ab__bio, .oyb-ab a.oyb-ab__bio:hover, .oyb-ab a.oyb-ab__bio:focus, .oyb-ab a.oyb-ab__bio:visited {
	display: inline-flex; align-items: center; gap: .35em; padding: 10px 22px; border-radius: var(--oyb-radius-pill, 999px);
	background: linear-gradient(135deg, #c026d3, var(--oyb-color-pink)); color: #fff; font: 800 14px/1.2 var(--oyb-font-body);
	text-decoration: none; box-shadow: 0 14px 30px -16px rgba(237, 54, 126, .6); transition: transform .16s ease, box-shadow .16s ease;
}
.oyb-ab a.oyb-ab__bio span { display: inline-block; transition: transform .2s ease; }
@media (hover: hover) {
	.oyb-ab a.oyb-ab__bio:hover { transform: translateY(-1px); box-shadow: 0 18px 32px -14px rgba(237, 54, 126, .7); }
	.oyb-ab a.oyb-ab__bio:hover span { transform: translateX(3px); }
}

/* Social icons: WordPress's own social links, logos only, in the site's pink. */
.oyb-ab .wp-block-social-links.oyb-ab__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 26px; }
.oyb-ab .wp-block-social-links.oyb-ab__social .wp-social-link { margin: 0; color: var(--oyb-color-pink); background: none; transition: transform .2s ease, color .2s ease; }
.oyb-ab .wp-block-social-links.oyb-ab__social .wp-social-link a { padding: 0; color: inherit; }
.oyb-ab .wp-block-social-links.oyb-ab__social .wp-social-link svg { width: 1em; height: 1em; fill: currentColor; }
@media (hover: hover) { .oyb-ab .wp-block-social-links.oyb-ab__social .wp-social-link:hover { transform: translateY(-2px); color: var(--oyb-color-pink-deep); } }

/* Support card: pink-tinted, a coffee-cup badge, the bio button's gradient pill (Derek's pick of three, 2026-10-17). */
.oyb-ab__support { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 22px; background: linear-gradient(180deg, var(--oyb-color-tint), var(--oyb-color-surface)); border-color: color-mix(in srgb, var(--oyb-color-pink) 28%, var(--oyb-color-blue-tint)); }
.oyb-ab__cup { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--oyb-color-surface); color: var(--oyb-color-pink); box-shadow: 0 6px 16px -8px rgba(237, 54, 126, .45); }
.oyb-ab .oyb-ab__title { font: 700 20px/1.2 var(--oyb-font-display); color: var(--oyb-color-ink); letter-spacing: -.01em; }
.oyb-ab .oyb-ab__text { font-size: 14.5px; line-height: 1.5; color: var(--oyb-color-muted); text-wrap: balance; }
.oyb-ab a.oyb-ab__btn, .oyb-ab a.oyb-ab__btn:hover, .oyb-ab a.oyb-ab__btn:focus, .oyb-ab a.oyb-ab__btn:visited {
	display: inline-flex; align-items: center; gap: .4em; margin-top: 6px; padding: 11px 26px; border-radius: var(--oyb-radius-pill, 999px);
	background: linear-gradient(135deg, #c026d3, var(--oyb-color-pink)); color: #fff; font: 800 15px/1.2 var(--oyb-font-body); text-decoration: none;
	box-shadow: 0 14px 30px -16px rgba(237, 54, 126, .6); transition: transform .16s ease, box-shadow .16s ease;
}
@media (hover: hover) { .oyb-ab a.oyb-ab__btn:hover { transform: translateY(-1px); box-shadow: 0 18px 32px -14px rgba(237, 54, 126, .7); } }
.oyb-ab a:focus-visible { outline: 3px solid var(--oyb-button-hover); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .oyb-ab *, .oyb-ab__card { transition: none !important; } .oyb-ab__card:hover img.oyb-ab__img { transform: none; } }

/* Sidebar spacing: it starts where the article's text starts, and every gap in it (bio, support, contents) is 24 px. */
@media (min-width: 1025px) { .widget-area .sidebar-inner-wrap:has(.oyb-ab) { padding-top: 32px; } }
.widget-area .widget:has(> .oyb-ab) { margin-bottom: 24px; }
.widget-area .widget > p:empty { display: none; } /* a line break around a shortcode, wrapped in a paragraph by WordPress */