/**
 * devora/person-bio (30-about-people-contact.md 4.1c and 4.1d, Figma Bio 1314:27092, mobile 796:17760;
 * tags PB1 to PB7). Loaded only where the block renders (block.json style). Theme values through its
 * custom properties (palette, font and shadow presets, custom.width.prose and gutter, custom.color.overlay and backdrop,
 * custom.media.playShadow, custom.line-height.card-title, custom.motion.medium), each with the Figma value
 * as its fallback. The close glyph is the theme's icons/functional-close.svg path, inlined, so the plugin
 * never reaches into the theme folder. The spec's AB3 in one place, with the dialog it styles.
 */

/* PB1. Read bio: the link button (796:17672) on a button element. Label ExtraBold 16/24 in accent-text
 *      (5.22:1 on surface-subtle; Figma's teal/base is 2.64:1), padding 8 / 0, 1px border-accent rule. */
.devora-bio-open {
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: var(--wp--preset--spacing--10, 0.5rem) 0 calc(var(--wp--preset--spacing--10, 0.5rem) - 1px);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border-accent, #cfeeeb);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--accent-text, #4c6e66);
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 800;
	line-height: 1.5;
	text-align: start;
	cursor: pointer;
}
.devora-bio-open:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-text-strong, #2c4c44);
	border-bottom-color: var(--wp--preset--color--accent-strong, #0e837b);
}

/* PB2. The sheet: fixed to the bottom at full width, hugging its content up to 40 short of the viewport
 *      and scrolling inside; white, the modal shadow cast upwards; backdrop sea-glass/deep at 10%. The
 *      dark focus ring whatever band the card sits on (A1's custom property). */
.devora-bio {
	--devora-ring: var(--wp--preset--color--primary, #1a2638);
	position: fixed;
	inset: auto 0 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	max-height: calc(100dvh - 40px);
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--primary, #1a2638);
	box-shadow: var(--wp--preset--shadow--modal, 0 -24px 36px rgba(76, 110, 102, 0.5));
	overflow: hidden;
}
.devora-bio[open] {
	display: flex;
	flex-direction: column;
}
.devora-bio::backdrop {
	background-color: var(--wp--custom--color--backdrop, rgba(14, 33, 28, 0.1));
}
.devora-bio__sheet {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: clamp(2.5rem, 1.9rem + 2.5vw, 3.75rem);
}

/* PB3. The 852 column (custom.width.prose) centred: photo 204, gap 48, content 600 with 24 above it;
 *      stacked below 782 at the gutter, photo 82, gap 24. No photo: the content alone. */
.devora-bio__inner {
	box-sizing: border-box;
	width: min(100% - 2 * var(--wp--custom--width--gutter, 1.25rem), var(--wp--custom--width--prose, 852px));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40, 1.5rem);
}
.devora-bio__photo {
	margin: 0;
	width: 82px;
}
.devora-bio__photo img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--wp--custom--color--overlay, rgba(14, 33, 28, 0.2));
	border-radius: 50%;
}
@media (width >= 782px) {
	.devora-bio__inner.has-photo {
		grid-template-columns: 204px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70, 3rem);
	}
	.devora-bio__photo { width: 204px; }
	.devora-bio__content { padding-top: var(--wp--preset--spacing--40, 1.5rem); }
}

/* PB4. The content: name (Geist SemiBold 28/36), 16, bio (16/24, paragraphs 16 apart), 32, video, 32,
 *      View full profile (the Read bio look). */
.devora-bio__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50, 2rem);
	min-width: 0;
}
.devora-bio__name {
	margin: 0 0 calc(var(--wp--preset--spacing--30, 1rem) - var(--wp--preset--spacing--50, 2rem));
	/* Leaves room for the close button on a narrow sheet with no photo. */
	padding-inline-end: 3rem;
	color: var(--wp--preset--color--primary, #1a2638);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--card-title, 1.75rem);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--card-title, 2.25rem);
	letter-spacing: normal;
}
@media (width >= 782px) {
	.devora-bio__inner.has-photo .devora-bio__name { padding-inline-end: 0; }
}
.devora-bio__text {
	font-size: var(--wp--preset--font-size--body, 1rem);
	line-height: 1.5;
}
.devora-bio__text > * { margin-block: 0 var(--wp--preset--spacing--30, 1rem); }
.devora-bio__text > :last-child { margin-block-end: 0; }
.devora-bio__profile { margin: 0; }
.devora-bio__link {
	display: inline-block;
	padding: var(--wp--preset--spacing--10, 0.5rem) 0 calc(var(--wp--preset--spacing--10, 0.5rem) - 1px);
	border-bottom: 1px solid var(--wp--preset--color--border-accent, #cfeeeb);
	color: var(--wp--preset--color--accent-text, #4c6e66);
	font-weight: 800;
	text-decoration: none;
}
.devora-bio__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-text-strong, #2c4c44);
	border-bottom-color: var(--wp--preset--color--accent-strong, #0e837b);
}

/* PB5. The video (when video_url is set): 16:9 at the content width, radius 8, the 1px overlay border,
 *      its one-line description under it (small, text-muted). */
.devora-bio__video { margin: 0; }
.devora-bio__player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--preset--border-radius--panel, 8px);
	background-color: var(--wp--preset--color--surface-inverse, #1a2638);
}
.devora-bio__player::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--wp--custom--color--overlay, rgba(14, 33, 28, 0.2));
	border-radius: inherit;
	pointer-events: none;
}
.devora-bio__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}
.devora-bio__caption {
	margin-block: var(--wp--preset--spacing--20, 0.75rem) 0;
	color: var(--wp--preset--color--text-muted, #5e6d8b);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* PB6. Close (732:44092): a 48 circle in accent-subtle with the play shadow, the close glyph 24 in
 *      accent-text-strong (8.3:1), top 20 right 20. Below 782 the circle is drawn 28 (glyph 12) as the
 *      mobile frame has it, inside a 44 target (2.5.8). Hover and focus: accent-strong, white glyph. */
.devora-bio__close-form { margin: 0; }
.devora-bio__close {
	appearance: none;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--accent-text-strong, #2c4c44);
	cursor: pointer;
}
.devora-bio__close::before,
.devora-bio__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	pointer-events: none;
}
.devora-bio__close::before {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-subtle, #e2f4f1);
	box-shadow: var(--wp--custom--media--play-shadow, 0 4px 8px rgba(14, 33, 28, 0.2));
	transition: var(--wp--custom--motion--fast, all 0.15s ease-out);
}
.devora-bio__close::after {
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M8.8081 25.2929L25.7787 8.3223C26.1692 7.9318 26.8024 7.9318 27.1929 8.3223C27.5834 8.7129 27.5834 9.346 27.1929 9.7365L10.2223 26.7071C9.8318 27.0976 9.1986 27.0976 8.8081 26.7071C8.4176 26.3166 8.4176 25.6834 8.8081 25.2929Z'/%3E%3Cpath d='M10.2221 8.7071L27.1927 25.6777C27.5832 26.0682 27.5832 26.7014 27.1927 27.0919C26.8021 27.4824 26.169 27.4824 25.7785 27.0919L8.8079 10.1213C8.4174 9.7308 8.4174 9.0976 8.8079 8.7071C9.1984 8.3166 9.8316 8.3166 10.2221 8.7071Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M8.8081 25.2929L25.7787 8.3223C26.1692 7.9318 26.8024 7.9318 27.1929 8.3223C27.5834 8.7129 27.5834 9.346 27.1929 9.7365L10.2223 26.7071C9.8318 27.0976 9.1986 27.0976 8.8081 26.7071C8.4176 26.3166 8.4176 25.6834 8.8081 25.2929Z'/%3E%3Cpath d='M10.2221 8.7071L27.1927 25.6777C27.5832 26.0682 27.5832 26.7014 27.1927 27.0919C26.8021 27.4824 26.169 27.4824 25.7785 27.0919L8.8079 10.1213C8.4174 9.7308 8.4174 9.0976 8.8079 8.7071C9.1984 8.3166 9.8316 8.3166 10.2221 8.7071Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.devora-bio__close:is(:hover, :focus-visible) { color: var(--wp--preset--color--white, #fff); }
.devora-bio__close:is(:hover, :focus-visible)::before { background-color: var(--wp--preset--color--accent-strong, #0e837b); }
@media (width >= 782px) {
	.devora-bio__close {
		top: 20px;
		right: 20px;
		width: 48px;
		height: 48px;
	}
	.devora-bio__close::before { width: 48px; height: 48px; }
	.devora-bio__close::after { width: 24px; height: 24px; }
}

/* PB7. Motion: the sheet slides up and the backdrop fades in (custom.motion.medium, 0.3s), none under
 *      reduced motion. No page scroll behind an open sheet; the scrollbar's gutter is kept, so the page
 *      does not shift sideways when it goes. */
@media (prefers-reduced-motion: no-preference) {
	.devora-bio[open] { animation: devora-bio-up 0.3s ease-out; }
	.devora-bio[open]::backdrop { animation: devora-bio-fade 0.3s ease-out; }
}
@keyframes devora-bio-up {
	from { translate: 0 100%; }
}
@keyframes devora-bio-fade {
	from { opacity: 0; }
}
html:has(dialog.devora-bio[open]) {
	overflow: hidden;
	scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
	.devora-bio__close::before { transition: none; }
}