/* DRG ImageRow flip cards (moved from the About page's about-leadership decoration): the bio shows over the card on
   hover at 78rem and wider, and behind a Read bio / Close bio link on narrower or touch screens. At 78rem and wider,
   Read bio stays hidden until it has keyboard focus. */

.pane--imagerow .imgwrap.flip-card { position: relative; overflow: hidden; cursor: pointer; }
.pane--imagerow .flip-card-inner { position: relative; height: 100%; }
.pane--imagerow .flip-card-back { position: absolute; z-index: 1; top: -100%; left: 0; right: 0; height: 100%; padding: 0.5rem; box-sizing: border-box; background-color: var(--color-accent); opacity: 0; pointer-events: none; }
.pane--imagerow .flip-card-back .bio { line-height: 1.5 !important; }
.pane--imagerow .flip-card :is(.u, .uu) { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
@media (width >= 78rem) and (hover: hover)
{
	.pane--imagerow .imgwrap.flip-card:hover { overflow: visible; }
	.pane--imagerow .imgwrap.flip-card.show-bio { overflow: visible !important; } /* beats the About page's custom CSS, which still copies the card's overflow: hidden at a higher specificity */
	.pane--imagerow .imgwrap.flip-card:hover .flip-card-back, .pane--imagerow .imgwrap.flip-card.show-bio .flip-card-back { top: 0; height: auto; min-height: 100%; opacity: 1; transition: opacity 0.75s ease; pointer-events: initial; }
	.pane--imagerow .flip-card-back .bio { color: white; }
	.pane--imagerow .imgwrap.flip-card .u { display: block !important; position: absolute; z-index: 1; top: 0.5rem; left: 0.5rem; margin: 0 !important; padding: 0.25rem 0.5rem; background-color: white; }
	.pane--imagerow .imgwrap.flip-card .u:not(:focus-visible) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.pane--imagerow .imgwrap.flip-card.show-bio .u { display: none !important; }
	.pane--imagerow .imgwrap.flip-card.show-bio .uu { display: block !important; color: white; }
	.pane--imagerow .imgwrap.flip-card.show-bio .uu:focus-visible { outline-color: white; }
}
@media (width < 78rem), (hover: none)
{
	.pane--imagerow .imgwrap.flip-card .u { display: block !important; }
	.pane--imagerow .imgwrap.flip-card .flip-card-back { display: none; position: relative; top: 0; height: auto; margin-top: 1rem; padding: 0; background-color: transparent; }
	.pane--imagerow .imgwrap.flip-card.show-bio { overflow: visible; }
	.pane--imagerow .imgwrap.flip-card.show-bio .flip-card-back { display: block; opacity: 1; pointer-events: initial; }
	.pane--imagerow .imgwrap.flip-card.show-bio .u { display: none !important; }
	.pane--imagerow .imgwrap.flip-card.show-bio .uu { display: block !important; }
}