/*
 * Hero solar system.
 *
 * Colours are theme tokens so the graphic follows light/dark automatically.
 * Fallbacks keep it legible if a theme does not define them.
 */

.hero-media{grid-area:media;position:relative;display:flex;aspect-ratio:1/1;width:100%;max-width:300px;margin:0 auto}
.hero-media svg{display:block;width:100%;height:100%;overflow:visible}

.solar-body{cursor:pointer}
.solar-body circle{transition:opacity 200ms}

/* Positioned at the top edge of the body by solar.js, so the transform only
   needs to lift it clear by a fixed gap — no size assumptions here. */
.solar-tip{position:absolute;left:0;top:0;z-index:5;transform:translate(-50%,calc(-100% - 10px));padding:6px 11px;border-radius:8px;background:var(--fg,#222);color:var(--bg,#fff);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.03em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 140ms}
.solar-tip.show{opacity:1}
.solar-tip::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--fg,#222)}

/* The keyboard path. Hidden visually, fully present for assistive tech —
   which is what allows the SVG itself to stay decorative. */
.solar-index{margin:0;padding:0;list-style:none}
.solar-index.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.solar-index button:focus-visible{position:fixed;left:50%;top:16px;z-index:100;width:auto;height:auto;clip:auto;transform:translateX(-50%);padding:10px 16px;background:var(--bg,#fff);color:var(--fg,#222);border:1px solid var(--line,#666);border-radius:999px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px}

/* Dialog content for a body. On mobile the whole card scrolls as a sheet; from
   the desktop breakpoint the theme makes .modal-card a flex column, so the
   about-body becomes the scroll child there — matching the work dialog. */
.about-body{padding:32px 28px 28px}
@media (min-width:768px){
	.about-body{flex:1 1 auto;min-height:0;overflow-y:auto}
}
.about-top{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.about-avatar{flex:0 0 auto;width:96px;height:96px;overflow:hidden;border-radius:18px;background-color:var(--surface,#f4f4f4);background-image:repeating-linear-gradient(45deg,var(--line,#ddd) 0 1px,transparent 1px 9px);display:flex;align-items:center;justify-content:center}
.about-avatar img{width:100%;height:100%;object-fit:cover}
.about-avatar span{padding:0 6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:var(--muted,#666);text-align:center}

/* Image placement, chosen per body in wp-admin. Left is the base rule above;
   these two are the alternatives. */
.about-body.layout-right .about-top{flex-direction:row-reverse}
.about-body.layout-top .about-top{flex-direction:column;align-items:stretch;gap:16px}
/* Full-bleed banner: the negative margins cancel .about-body's 32px top / 28px
   side padding so the image meets the dialog edges, and border-radius:0 lets the
   modal card's rounded overflow clip the top corners. The margins must match the
   .about-body padding — update both together. */
.about-body.layout-top .about-avatar{width:auto;height:auto;aspect-ratio:16/9;margin:-32px -28px 0;border-radius:0}
/* Sits tight under the banner image (pulls up against the column gap), then the
   heading keeps its full spacing below. */
.about-body.layout-top .about-caption{margin:-8px 0 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.03em;line-height:1.5;color:var(--muted,#666)}
.about-head h2{margin:0 0 4px;font-weight:700;font-size:26px;letter-spacing:-0.01em}
.about-head .arole{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:0.03em;color:var(--accent,#36c)}
.about-body p{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--muted,#666)}
.about-body p:last-of-type{margin-bottom:24px}

@media (min-width:1024px){
	.hero-media{max-width:none}
}

@media (prefers-reduced-motion:reduce){
	.solar-body circle{transition:none}
	.solar-tip{transition:none}
}