/* Alpaca Profiles — public skin (v1.2.0).
   Design language ported from Alpaca Tracker: flat surfaces, honest 1px
   borders, one soft two-layer shadow. (Frame ring tried and retired in 0.9.3.)
   NO glow, NO glassmorphism (backdrop-filter), NO decorative gradients.
   The only gradients left are legibility scrims over photos/video posters.
   ALL colour comes from Alpaca Core's --ac-* vars (theme + accent picked
   centrally in settings; staff cannot override). */

.ap-profile{
	--ap-radius:10px;
	--ap-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	max-width:430px;
	margin:20px auto;
	padding:16px;
	box-sizing:border-box;
	position:relative;
	background:var(--ac-bg,#1B2936);
	border:1px solid var(--ac-border,#3A4858);
	border-radius:14px;
	font-family:"General Sans","Manrope",system-ui,-apple-system,sans-serif;
}
.ap-profile > *{position:relative;z-index:1;}

/* --- Standalone page: full-bleed. The page IS the card, so the outer
   container dissolves — no border, no inset, just theme bg + slim padding.
   Shortcode embeds (no body.ap-standalone) keep the self-contained box. --- */
body.ap-standalone .ap-profile{
	background:transparent;
	border:none;
	border-radius:0;
	margin:0;
	padding:12px 8px 20px;
	max-width:none;
	width:100%;
}
@media (min-width:720px){
	/* Wide screens: stop tiles becoming comically long, but let the page
	   own the viewport. */
	body.ap-standalone.ap-layout-centred .ap-profile{max-width:760px;margin:0 auto;}
	body.ap-standalone.ap-layout-full .ap-profile{max-width:1000px;margin:0 auto;}
}

/* --- Identity card --- */
.ap-card--identity{
	background:var(--ac-surface,#243140);
	border:1px solid var(--ac-border,#3A4858);
	border-radius:var(--ap-radius);
	padding:24px 20px;
	display:flex;flex-direction:column;align-items:center;text-align:center;
	box-shadow:var(--ap-shadow);
}
.ap-avatar{
	width:80px;height:80px;border-radius:50%;object-fit:cover;
	box-shadow:0 0 0 1px var(--ac-border,#3A4858);
}
.ap-avatar--initials{
	background:var(--ac-primary,#FC8D28);color:var(--ac-bg,#1B2936);
	display:flex;align-items:center;justify-content:center;
	font-size:26px;font-weight:500;
}
.ap-name{font-size:20px;font-weight:500;color:var(--ac-text,#FAF9F5);margin:14px 0 0;letter-spacing:-.02em;line-height:1.2;}
.ap-role{font-size:13.5px;color:var(--ac-text-soft,#9AA8B6);margin:3px 0 0;}
.ap-rule{display:block;height:3px;width:36px;background:var(--ac-primary,#FC8D28);border-radius:3px;margin:14px 0 0;}
.ap-rule--sm{height:2px;width:26px;margin:8px auto 0;}
.ap-bio{font-size:14px;line-height:1.6;color:var(--ac-text-soft,#9AA8B6);margin:12px 0 0;}

/* --- Link tiles --- */
.ap-tile{
	display:flex;align-items:center;gap:12px;
	border-radius:var(--ap-radius);padding:15px 16px;text-decoration:none;
	background:var(--ac-surface,#243140);
	border:1px solid var(--ac-border,#3A4858);
	color:var(--ac-text,#FAF9F5);
	box-shadow:var(--ap-shadow);
	transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.ap-tile i{font-size:19px;flex-shrink:0;color:var(--ac-primary,#FC8D28);}
.ap-tile span{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-tile:hover{
	transform:translateY(-1px);
	border-color:var(--ac-primary,#FC8D28);
	background:var(--ac-surface-2,#2C3A4A);
}
.ap-tile:focus-visible{outline:2px solid var(--ac-primary,#FC8D28);outline-offset:2px;}

/* Featured: the one solid-accent tile. Text uses the theme bg colour so
   contrast holds on both light and dark themes (Tracker's button trick). */
.ap-tile--featured{
	background:var(--ac-primary,#FC8D28);border-color:var(--ac-primary,#FC8D28);
	color:var(--ac-bg,#1B2936);
}
.ap-tile--featured i{color:var(--ac-bg,#1B2936);}
.ap-tile--featured:hover{background:var(--ac-primary-deep,#E07A24);border-color:var(--ac-primary-deep,#E07A24);}

/* Spotlight: quietly raised — the surface-2 step, nothing louder. */
.ap-tile--spotlight{
	background:var(--ac-surface-2,#2C3A4A);
	border-color:var(--ac-border,#3A4858);
}
.ap-tile--spotlight i{color:var(--ac-primary,#FC8D28);}

/* --- Desktop bento: reflow at 720px (layout engine unchanged) --- */
@media (min-width:720px){
	.ap-layout-full .ap-profile{
		max-width:700px;
		grid-template-columns:1.4fr 1fr 1fr;
		grid-auto-rows:minmax(92px,auto);
		gap:12px;
	}
	.ap-layout-full .ap-card--identity{grid-column:1;grid-row:1 / span 3;justify-content:center;}
	.ap-layout-full .ap-size-W{grid-column:span 2;}
	.ap-layout-full .ap-size-L{grid-column:span 2;grid-row:span 2;flex-direction:column;align-items:flex-start;justify-content:flex-end;}
	.ap-layout-full .ap-size-L i{font-size:24px;}

	/* Video sizes by its 16:9 nature, not the chunky-square link logic.
	   W = wide (2 cols), L = full bento width (all 3 cols), both single row. */
	.ap-layout-full .ap-tile--video.ap-size-W{grid-column:2 / -1;grid-row:auto;}
	.ap-layout-full .ap-tile--video.ap-size-L{grid-column:1 / -1;grid-row:auto;}
	.ap-layout-full .ap-tile--gallery.ap-size-L,
	.ap-layout-full .ap-tile--featured-card.ap-size-L{grid-column:1 / -1;}
}

/* Centred mode: always a narrow single column, even on desktop. */
.ap-layout-centred .ap-profile{
	max-width:440px;
	grid-template-columns:1fr;
}
.ap-layout-centred .ap-size-W,
.ap-layout-centred .ap-size-L{grid-column:auto;grid-row:auto;}
.ap-layout-centred .ap-size-L{flex-direction:row;align-items:center;}
.ap-layout-centred .ap-size-L i{font-size:19px;}
.ap-layout-centred .ap-tile--video,
.ap-layout-centred .ap-tile--gallery,
.ap-layout-centred .ap-tile--featured-card{grid-column:1;grid-row:auto;flex-direction:column;align-items:stretch;}

/* ---- Two-up link tiles ---------------------------------------------------
   The content links (Website + each custom link) are grouped in .ap-links so
   the short ones pair two to a row instead of each taking a whole row, so the
   card stops wasting the empty half.

   .ap-links is display:contents by default, so on the desktop bento (>=720
   full layout) and on shortcode embeds it disappears and its tiles behave
   exactly as before. It only becomes a 2-column grid in the centred layout
   (every width) and on mobile. Media and wide tiles inside still span the full
   width, and a lone trailing link (odd count) stretches full width so it never
   sits as a stranded half-tile — the tidy "last one" treatment.

   Save contact, the wallet row (already two-up inside), the exchange tile and
   socials sit outside .ap-links and keep their own full-width rows. */
.ap-links{display:contents;}

/* The pairing only kicks in when the brand toggle is on (.ap-2up on the card).
   With it off, .ap-links stays display:contents and links keep one per row.

   Flexbox (not grid) so a lone tile ALWAYS fills its row: each tile asks for
   half the width but is allowed to grow, so two share a row 50/50 and any tile
   left alone on a row (odd count, or one stranded before a full-width media
   tile) grows to the full width. Media and wide tiles take a whole row. */
.ap-layout-centred .ap-2up .ap-links,
.ap-standalone .ap-2up .ap-links{display:flex;flex-wrap:wrap;gap:10px;}
.ap-layout-centred .ap-2up .ap-links > .ap-tile,
.ap-standalone .ap-2up .ap-links > .ap-tile{flex:1 1 calc(50% - 6px);min-width:0;box-sizing:border-box;}
.ap-layout-centred .ap-2up .ap-links > .ap-size-W,
.ap-layout-centred .ap-2up .ap-links > .ap-size-L,
.ap-layout-centred .ap-2up .ap-links > .ap-tile--video,
.ap-layout-centred .ap-2up .ap-links > .ap-tile--gallery,
.ap-layout-centred .ap-2up .ap-links > .ap-tile--featured-card,
.ap-layout-centred .ap-2up .ap-links > .ap-tile--imagelink,
.ap-standalone .ap-2up .ap-links > .ap-size-W,
.ap-standalone .ap-2up .ap-links > .ap-size-L,
.ap-standalone .ap-2up .ap-links > .ap-tile--video,
.ap-standalone .ap-2up .ap-links > .ap-tile--gallery,
.ap-standalone .ap-2up .ap-links > .ap-tile--featured-card,
.ap-standalone .ap-2up .ap-links > .ap-tile--imagelink{flex-basis:100%;}

/* Above the bento breakpoint the full desktop layout takes over, so the flex
   pairing must not apply there — only centred stays two-up on wide screens. */
@media (min-width:720px){
	.ap-standalone.ap-layout-full .ap-2up .ap-links{display:contents;}
}

/* --- Entrance motion: calmer than before, still alive --- */
@keyframes apRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.ap-profile .ap-tile,
.ap-profile .ap-card--identity{animation:apRise .4s ease-out both;}
.ap-profile .ap-card--identity{animation-delay:.02s;}
.ap-profile .ap-tile:nth-of-type(1){animation-delay:.06s;}
.ap-profile .ap-tile:nth-of-type(2){animation-delay:.11s;}
.ap-profile .ap-tile:nth-of-type(3){animation-delay:.16s;}
.ap-profile .ap-tile:nth-of-type(4){animation-delay:.21s;}
.ap-profile .ap-tile:nth-of-type(5){animation-delay:.26s;}
.ap-profile .ap-tile:nth-of-type(6){animation-delay:.31s;}

@media (prefers-reduced-motion:reduce){
	.ap-profile .ap-tile,
	.ap-profile .ap-actions,
	.ap-profile .ap-card--identity{animation:none;}
	.ap-tile,.ap-action{transition:none;}
}

/* --- Team index --- */
.ap-team-wrap{
	width:100%;max-width:1200px;margin:20px auto;padding:40px 22px 34px;
	background:var(--ac-bg,#1B2936);border-radius:14px;
	border:1px solid var(--ac-border,#3A4858);
	font-family:"General Sans","Manrope",system-ui,-apple-system,sans-serif;
	box-sizing:border-box;
}
.ap-team-head{margin:0 0 24px;text-align:center;}
/* Scoped + !important so a page theme's own h2 styling (colour, and any
   heading background box) can't override the heading on a dark card. */
.ap-team-wrap .ap-team-title{
	font-size:24px;font-weight:600;color:var(--ac-text,#FAF9F5) !important;
	background:transparent !important;margin:0;letter-spacing:-.02em;line-height:1.2;
}
.ap-team-head .ap-rule{margin:10px auto 0;}
.ap-team-empty{color:var(--ac-text-soft,#9AA8B6);text-align:center;padding:40px;}

.ap-team-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 16px;}
.ap-filter-chip{
	font-size:12px;font-weight:500;cursor:pointer;
	padding:6px 13px;border-radius:999px;
	background:var(--ac-surface,#243140);
	border:1px solid var(--ac-border,#3A4858);
	color:var(--ac-text-soft,#9AA8B6);
	transition:border-color .15s, color .15s, background .15s;
	font-family:inherit;
}
.ap-filter-chip:hover{border-color:var(--ac-primary,#FC8D28);color:var(--ac-text,#FAF9F5);}
.ap-filter-chip.is-on{background:var(--ac-primary,#FC8D28);border-color:var(--ac-primary,#FC8D28);color:var(--ac-bg,#1B2936);}

.ap-team{
	display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
}
.ap-team-card{
	flex:0 1 210px;
	background:var(--ac-surface,#243140);
	border:1px solid var(--ac-border,#3A4858);
	border-radius:var(--ap-radius,10px);padding:18px 14px;text-align:center;text-decoration:none;display:block;
	box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
	transition:border-color .15s ease, background .15s ease, transform .15s ease, opacity .2s;
}
.ap-team-card:hover{transform:translateY(-1px);border-color:var(--ac-primary,#FC8D28);background:var(--ac-surface-2,#2C3A4A);}
.ap-team-card.is-filtered{display:none;}
.ap-team-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;margin:0 auto;display:block;box-shadow:0 0 0 1px var(--ac-border,#3A4858);}
.ap-team-avatar.ap-avatar--initials{font-size:20px;}
.ap-team-name{font-size:14px;font-weight:500;color:var(--ac-text,#FAF9F5);margin:10px 0 0;}
.ap-team-role{font-size:12px;color:var(--ac-text-soft,#9AA8B6);margin:1px 0 0;}
.ap-team-card .ap-rule{margin-left:auto;margin-right:auto;}

/* Grouped-by-department mode: [alpaca_team group="department"].
   One titled section per department inside a single wrap. */
.ap-team-grouped .ap-team-head{margin-bottom:18px;}
.ap-team-grouped .ap-team-section{margin:0 0 22px;}
.ap-team-grouped .ap-team-section:last-child{margin-bottom:0;}
/* Scoped + !important so a page theme's own h3 sizing (often 30px+) can't
   blow up the section labels, exactly as we guard the main team title. */
.ap-team-wrap .ap-team-subhead{
	font-size:16px !important;font-weight:600;text-align:center;
	color:var(--ac-text,#FAF9F5) !important;background:transparent !important;
	margin:14px 0 10px !important;padding:0;
	letter-spacing:-.01em;line-height:1.2;
}

/* Defensive height guard. A page-builder section set to a fixed or
   full-viewport HEIGHT (e.g. Breakdance "fill screen" -> height:100vh) caps
   its own box, so a tall team grid overflows the bottom and the next section
   (typically a footer) is drawn over it. Wherever our grid sits inside such a
   section, force the height back to auto so the section grows with the grid.
   :has() scopes each rule to a section that actually contains the grid, so no
   other section on the page is affected. min-height is deliberately left
   alone: it allows growth and never causes the overlap. */
.section-container:has(.ap-team-wrap),
.bde-section:has(.ap-team-wrap),
section:has(.ap-team-wrap){
	height:auto !important;
}

/* ============ Rich block types ============ */

/* Video — click-to-load poster, then iframe */
.ap-tile--video{
	padding:0;overflow:hidden;position:relative;
	display:block;
}
.ap-video-poster{
	display:block;width:100%;border:none;cursor:pointer;
	aspect-ratio:16/9;
	background:var(--ac-surface,#243140) center/cover no-repeat;
	position:relative;padding:0;
}
.ap-video-play{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:46px;height:46px;border-radius:50%;
	background:var(--ac-primary,#FC8D28);
	display:flex;align-items:center;justify-content:center;
}
.ap-video-play i{font-size:21px;color:var(--ac-bg,#1B2936);margin-left:2px;}
/* Legibility scrim over the poster image — functional, not decorative. */
.ap-video-title{
	position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
	font-size:13px;font-weight:500;color:#fff;
	background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
}
.ap-video-frame{width:100%;border:none;display:block;aspect-ratio:16/9;}

/* Share card — reads as an action: accent icon, standard surface. */
.ap-tile--share{
	cursor:pointer;font:inherit;text-align:left;width:100%;
	font-family:inherit;
}
.ap-tile--share i{color:var(--ac-primary,#FC8D28);}

/* Gallery — horizontal scroll-snap */
.ap-tile--gallery{padding:0;overflow:hidden;position:relative;}
.ap-gallery-track{
	display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
	width:100%;height:100%;min-height:92px;
	-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ap-gallery-track::-webkit-scrollbar{display:none;}
.ap-gallery-img{
	flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;min-height:92px;
}
.ap-gallery-nav{
	position:absolute;top:50%;transform:translateY(-50%);
	width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
	background:rgba(0,0,0,.5);color:#fff;
	display:flex;align-items:center;justify-content:center;
	opacity:0;transition:opacity .15s;z-index:2;
}
.ap-gallery-nav i{font-size:17px;}
.ap-gallery-prev{left:10px;}
.ap-gallery-next{right:10px;}
.ap-tile--gallery:hover .ap-gallery-nav,
.ap-gallery-nav:focus-visible{opacity:1;}
.ap-gallery-dots{
	position:absolute;left:0;right:0;bottom:10px;z-index:2;
	display:flex;justify-content:center;gap:6px;pointer-events:none;
}
.ap-gallery-dot{
	width:7px;height:7px;border-radius:50%;cursor:pointer;pointer-events:auto;
	background:rgba(255,255,255,.45);transition:background .15s, transform .15s;
}
.ap-gallery-dot.is-on{background:#fff;transform:scale(1.25);}

/* Featured card — image bg; the overlay is a legibility scrim. */
.ap-tile--featured-card{
	position:relative;overflow:hidden;min-height:120px;
	background:var(--ac-surface,#243140) center/cover no-repeat;
	display:flex;align-items:flex-end;padding:0;
	border:1px solid var(--ac-border,#3A4858);
}
.ap-featured-overlay{
	position:absolute;inset:0;
	background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%);
}
.ap-featured-label{
	position:relative;z-index:1;padding:14px 16px;
	font-size:15px;font-weight:500;color:#fff;
	display:flex;align-items:center;gap:8px;
}
.ap-featured-label i{font-size:17px;transition:transform .15s;}
.ap-tile--featured-card:hover .ap-featured-label i{transform:translateX(3px);}

/* vCard tile — the primary action of a business card. Solid accent. */
.ap-vcard{
	background:var(--ac-primary,#FC8D28);border-color:var(--ac-primary,#FC8D28);
	color:var(--ac-bg,#1B2936);justify-content:center;
}
.ap-vcard i{color:var(--ac-bg,#1B2936);}
.ap-vcard:hover{background:var(--ac-primary-deep,#E07A24);border-color:var(--ac-primary-deep,#E07A24);}

/* --- Show QR: full-screen "scan my screen" overlay.
   Always light (cream) regardless of theme — scannability first. --- */
.ap-showqr{cursor:pointer;font-family:inherit;text-align:left;width:100%;}
.ap-qr-overlay{
	position:fixed;inset:0;z-index:99999;
	background:#FAF9F6;
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:6px;padding:24px;box-sizing:border-box;cursor:pointer;
}
.ap-qr-overlay-img{
	width:min(72vmin,420px);height:min(72vmin,420px);display:block;
}
.ap-qr-overlay-name{font-size:18px;font-weight:500;color:#1A2A38;margin:10px 0 0;font-family:"General Sans","Manrope",system-ui,sans-serif;}
.ap-qr-overlay-hint{font-size:12px;color:#6B7684;margin:2px 0 0;font-family:"General Sans","Manrope",system-ui,sans-serif;}

/* --- Link + Image: picture card — full-width image, caption below --- */
.ap-tile--imagelink{
	flex-direction:column;align-items:stretch;gap:10px;
	padding:10px 10px 12px;
}
.ap-il-img{
	width:100%;height:auto;display:block;border-radius:10px;
	box-shadow:0 0 0 1px var(--ac-border,rgba(0,0,0,.08));
}
.ap-il-label{padding:0 4px;font-weight:500;}

/* --- Cover header: brand image band with the photo overlapping its edge.
   No cover image uploaded? A tonal band from the theme keeps the layout. --- */
.ap-head--cover{padding-top:0;overflow:hidden;}
.ap-cover{
	width:calc(100% + 40px);   /* identity card side padding is 20px */
	margin:0 -20px;
	height:150px;
	background:var(--ac-surface-2,#2C3A4A);
	background-size:cover;
	background-position:center;
}
@media (min-width:720px){ .ap-cover{height:190px;} }
.ap-head--cover .ap-avatar{
	margin-top:-52px;
	position:relative;
	box-shadow:0 0 0 4px var(--ac-surface,#243140);
}
.ap-header-logo{
	display:block;
	max-height:30px;
	max-width:150px;
	width:auto;
	margin:12px auto 2px;
}


/* --- Portrait header: the photo fills the top of the card, edge to edge,
   details below. Frame is 5:6 to match Core's cropper stage exactly, so the
   "Position photo" modal is pixel-true to the card. --- */
.ap-portraitbody{padding:14px 0 2px;width:100%;box-sizing:border-box;}
/* Inside the portrait body (a block context) the rule and logo need their
   own centring — and the logo gets breathing room above the name. */
.ap-portraitbody .ap-rule{display:block;margin-left:auto;margin-right:auto;}
.ap-portraitbody .ap-header-logo{margin:4px auto 16px;}
.ap-portraitbody .ap-name{margin-top:0;}

/* --- Spotlight header: Portrait's centred body, big circular photo. --- */
.ap-head--spotlight{align-items:center;text-align:center;}
.ap-spotlightwrap{
	position:relative;width:min(184px,55%);aspect-ratio:1/1;
	border-radius:50%;overflow:hidden;
	background:var(--ac-surface-2,#2C3A4A);
	box-shadow:0 0 0 1px var(--ac-border,#3A4858);
	margin-top:4px;
}


/* --- Split headers: photo on ONE side, identity beside it, bio in a full-width
   band below. Square uses the 5:6 card framing, round uses the circle. The
   photo side is Left (split / splitround) or Right (splitright /
   splitroundright); the text alignment follows the Header alignment control. --- */
.ap-head--split,.ap-head--splitright,.ap-head--splitround,.ap-head--splitroundright{
	--ap-splitgap:24px;
	overflow:hidden;
	padding:var(--ap-splitgap) 20px 0;
	align-items:stretch;
}
.ap-splitrow{display:flex;width:100%;gap:22px;align-items:center;}
.ap-splitrow--right{flex-direction:row-reverse;}
.ap-splitph{
	flex-shrink:0;position:relative;overflow:hidden;
	width:min(150px,42%);aspect-ratio:5/6;border-radius:16px;
	background:var(--ac-surface-2,#2C3A4A);
	box-shadow:0 0 0 1px var(--ac-border,#3A4858);
}
.ap-splitph--round{aspect-ratio:1/1;border-radius:50%;}
.ap-splitph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ap-splitwho{flex:1;min-width:0;display:flex;flex-direction:column;}
.ap-splitwho .ap-name{margin:0;overflow-wrap:break-word;}
.ap-splitwho .ap-header-logo--split{margin:0 0 10px;max-height:34px;max-width:160px;}
.ap-rule--split{display:block;margin:12px 0 0;}
/* Text alignment follows the Header alignment control. */
.ap-halign-center .ap-splitwho{text-align:center;align-items:center;}
.ap-halign-left   .ap-splitwho{text-align:left;align-items:flex-start;}
.ap-halign-right  .ap-splitwho{text-align:right;align-items:flex-end;}

/* --- Split bio band: a tonal plinth carrying the description, edge to edge,
   which IS the card's bottom. The gap above the photo equals the gap to the
   band, via one variable. --- */
.ap-bioband{
	box-sizing:border-box;
	width:calc(100% + 40px);
	margin:var(--ap-splitgap) -20px 0;
	background:rgba(0,0,0,.05);
	background:color-mix(in srgb, var(--ac-surface,#FFFFFF) 96.5%, var(--ac-text,#1A2A38) 3.5%);
	padding:17px 20px;
	text-align:center;
	font-size:14px;line-height:1.6;color:var(--ac-text-soft,#9AA8B6);
}
/* Splits without a bio still need their bottom edge back. */
.ap-head--split:not(:has(.ap-bioband)),
.ap-head--splitright:not(:has(.ap-bioband)),
.ap-head--splitround:not(:has(.ap-bioband)),
.ap-head--splitroundright:not(:has(.ap-bioband)){padding-bottom:var(--ap-splitgap);}

/* --- Social links: solid tonal chips at the foot of the card,
   sitting on the bare page background. --- */
.ap-socials{display:flex;justify-content:center;flex-wrap:wrap;gap:11px;margin-top:10px;width:100%;padding-bottom:4px;}
.ap-social{
	width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
	color:var(--ac-text,#FAF9F6);text-decoration:none;
	background:color-mix(in srgb, var(--ac-bg,#1B2936) 88%, var(--ac-text,#FAF9F6) 12%);
	transition:background .15s, color .15s, transform .15s;
}
.ap-social svg{width:19px;height:19px;display:block;}
.ap-social:hover{background:var(--ac-accent,#FC8D28);color:var(--ac-accent-ink,#1A2A38);transform:translateY(-2px);}

/* --- Exchange modal: theme-aware, card-styled. --- */
.ap-xch{position:fixed;inset:0;z-index:60;background:rgba(10,16,22,.6);display:flex;align-items:center;justify-content:center;padding:20px;}
.ap-xch[hidden]{display:none;} /* author display beats the hidden attribute unless told otherwise */
.ap-xch__panel{
	width:min(420px,100%);background:var(--ac-surface,#243140);color:var(--ac-text,#FAF9F6);
	border:1px solid var(--ac-border,#3A4858);border-radius:18px;padding:26px 24px;
	box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
}
.ap-xch__panel:focus{outline:none;}
.ap-xch__panel h3{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.02em;}
.ap-xch__sub{margin:0 0 18px;font-size:13.5px;color:var(--ac-text-soft,#9AA8B6);}
.ap-xch__form label{display:block;font-size:12.5px;font-weight:600;margin-bottom:12px;color:var(--ac-text-soft,#9AA8B6);}
.ap-xch__form input,.ap-xch__form textarea{
	display:block;width:100%;margin-top:5px;box-sizing:border-box;
	background:var(--ac-bg,#1B2936);color:var(--ac-text,#FAF9F6);
	border:1px solid var(--ac-border,#3A4858);border-radius:10px;padding:10px 12px;
	font:inherit;font-size:14.5px;
}
.ap-xch__form input:focus,.ap-xch__form textarea:focus{outline:2px solid var(--ac-accent,#FC8D28);outline-offset:0;border-color:transparent;}
.ap-xch__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px;}
.ap-xch__cancel{background:transparent;border:1px solid var(--ac-border,#3A4858);color:var(--ac-text,#FAF9F6);border-radius:10px;padding:10px 16px;font:inherit;font-size:14px;cursor:pointer;}
.ap-xch__send{background:var(--ac-accent,#FC8D28);color:var(--ac-accent-ink,#1A2A38);border:none;border-radius:10px;padding:10px 20px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.ap-xch__send:disabled{opacity:.6;cursor:wait;}
.ap-xch__done{margin:8px 0 0;font-weight:600;color:var(--ac-accent,#FC8D28);}
.ap-xch__err{margin:8px 0 0;font-size:13px;color:#E66;}

/* Demo mode: the class equivalents of :hover, so the interface can
   demonstrate itself for screen recordings (?ap_demo=1). */
.ap-social.is-demo-hover{background:var(--ac-accent,#FC8D28);color:var(--ac-accent-ink,#1A2A38);transform:translateY(-2px);}
.ap-tile.is-demo-hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.35);border-color:var(--ac-accent,#FC8D28);}


/* --- Wallet buttons: a two-up row when both providers show --- */
.ap-wallet-row{display:flex;gap:8px;}
.ap-layout-full .ap-wallet-row{grid-column:1 / -1;}
.ap-wallet-row .ap-wallet{flex:1 1 0;min-width:0;margin:0;}
.ap-wallet-row--two .ap-wallet span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-wallet__mark{flex-shrink:0;display:block;}
/* Official "Add to Apple/Google Wallet" badges: each sits centred inside its
   own tile (matching the card's other tiles), the two side by side and filling
   the row. The badge keeps its own aspect ratio and clear space, as the
   platform guidelines require; only the surrounding tile flexes. */
.ap-wallet-row--badges{gap:8px;}
.ap-wallet-badge-link{
	flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
	border-radius:var(--ap-radius);padding:12px 10px;
	background:var(--ac-surface,#243140);border:1px solid var(--ac-border,#3A4858);
	box-shadow:var(--ap-shadow);
	transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.ap-wallet-badge-link:hover{transform:translateY(-1px);border-color:var(--ac-primary,#FC8D28);background:var(--ac-surface-2,#2C3A4A);}
.ap-wallet-badge-link:focus-visible{outline:2px solid var(--ac-primary,#FC8D28);outline-offset:2px;}
.ap-wallet-badge{height:40px;width:auto;max-width:100%;display:block;}

/* --- Primary contact action bar: equal-width buttons across the top --- */
.ap-actions{display:flex;gap:8px;}
.ap-layout-full .ap-actions{grid-column:1 / -1;}
.ap-action{
	flex:1 1 0;min-width:0;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
	padding:12px 6px;border-radius:var(--ap-radius);
	background:var(--ac-surface,#243140);
	border:1px solid var(--ac-border,#3A4858);
	color:var(--ac-text,#FAF9F5);
	text-decoration:none;
	transition:background .15s,border-color .15s,transform .15s;
}
button.ap-action{font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;}
.ap-action i{font-size:20px;line-height:1;color:var(--ac-primary,#FC8D28);}
.ap-action span{font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.ap-action:hover{background:var(--ac-surface-2,#2C3A4A);border-color:var(--ac-primary,#FC8D28);transform:translateY(-1px);}
.ap-action:focus-visible{outline:2px solid var(--ac-primary,#FC8D28);outline-offset:2px;}
.ap-profile .ap-actions{animation:apRise .4s ease-out both;animation-delay:.04s;}

/* --- Card alignment: shift the content of the full-width link / save bars
   left, centre or right. Applies to the row-style tiles only. The identity
   header, the top action-button row, the rich media tiles (video, gallery,
   featured-card, image link) and the socials keep their own layout. --- */
.ap-profile.ap-align-left .ap-tile:not(.ap-tile--video):not(.ap-tile--gallery):not(.ap-tile--featured-card):not(.ap-tile--imagelink){justify-content:flex-start;}
.ap-profile.ap-align-center .ap-tile:not(.ap-tile--video):not(.ap-tile--gallery):not(.ap-tile--featured-card):not(.ap-tile--imagelink){justify-content:center;}
.ap-profile.ap-align-right .ap-tile:not(.ap-tile--video):not(.ap-tile--gallery):not(.ap-tile--featured-card):not(.ap-tile--imagelink){justify-content:flex-end;}

/* --- Licence-lapse credit badge: a quiet footer line, shown only when the
   licence is inactive (the plugin adds it; it is absent while licensed). --- */
.ap-badge{
	display:flex;align-items:center;justify-content:center;gap:7px;
	width:100%;box-sizing:border-box;
	margin:8px auto 2px;padding:6px 8px;
	text-decoration:none;
	color:var(--ac-text-soft,#9AA8B6);   /* drives the wordmark ink via currentColor */
	opacity:.85;transition:opacity .15s ease,color .15s ease;
}
.ap-badge__by{font-size:11px;font-weight:500;letter-spacing:.01em;}
.ap-badge svg{height:13px;width:auto;display:block;}
.ap-badge:hover{opacity:1;color:var(--ac-text,#FAF9F5);}
.ap-layout-full .ap-badge{grid-column:1 / -1;}

/* ================================================================
   New card headers (Hero, Aurora, Overlap, Panel, Postcard),
   header alignment, logo size, tile chevron.
   ================================================================ */

/* Logo size control (applies to every header's brand logo). Width is always
   capped to a share of the card so a wide logo can never hang off the edge,
   whatever size is chosen. */
.ap-header-logo{max-width:min(200px,72%);}
.ap-logo-s .ap-header-logo{max-height:24px;max-width:min(150px,58%);}
.ap-logo-m .ap-header-logo{max-height:34px;max-width:min(180px,66%);}
.ap-logo-l .ap-header-logo{max-height:48px;max-width:min(220px,72%);}

/* Alignment for the stacked bodies (Aurora, Overlap, Panel, Postcard) */
.ap-halign-left .ap-portraitbody{text-align:left;}
.ap-halign-left .ap-portraitbody .ap-rule,
.ap-halign-left .ap-portraitbody .ap-header-logo{margin-left:0;margin-right:auto;}
.ap-halign-right .ap-portraitbody{text-align:right;}
.ap-halign-right .ap-portraitbody .ap-rule,
.ap-halign-right .ap-portraitbody .ap-header-logo{margin-left:auto;margin-right:0;}

/* --- Hero: photo fills the header, name over a gradient scrim, logo opposite --- */
.ap-head--hero{padding:0;overflow:hidden;}
/* The Hero is a strict 3:2 banner — the SAME shape as the Wide frame in the
   Position Photo tool — so a person's Wide framing reproduces here exactly.
   No max-height: any cap would break the 3:2 ratio and distort the photo. */
/* The banner carries the photo as a cover background too, so even if a theme
   forces height:auto on images (which would collapse the img and reveal a dark
   strip along the bottom), the same photo still fills every pixel underneath.
   The img on top shows the person's exact framing; the background is only ever
   seen in a sliver the img fails to cover, and it is the same photo, so it is
   seamless and a dark gap can never appear whatever the theme does. */
/* overflow:hidden clips the photo to the banner itself. Without it, only the
   CARD clipped (lower down), so a zoomed Wide crop (image taller than the 3:2
   banner) spilled BELOW the banner and painted over the bio band underneath,
   past where the scrim gradient ends. That un-gradiented strip of photo over
   the bio is what read as a gap at the bottom. Clipping here keeps the photo,
   scrim and text inside the banner and lets the bio sit cleanly below it. */
.ap-hero{position:relative;width:100%;aspect-ratio:3 / 2;overflow:hidden;
	background-size:cover;background-position:center;background-repeat:no-repeat;
	background-color:var(--ac-surface-2,#2C3A4A);}
/* No Wide crop: cover-fit, centred. With a Wide crop the person's exact
   framing is applied inline (absolute position + natural-aspect size),
   overriding this, never stretched, because the height stays automatic. The
   !important height guards against themes that set img{height:auto}; the inline
   Wide-crop styles still win over it because inline beats a stylesheet rule of
   the same importance, so exact framing is preserved. */
.ap-hero__img{position:absolute;top:0;left:0;width:100%;height:100%;min-height:100%;object-fit:cover;object-position:center;}
.ap-head--hero .ap-hero > img.ap-hero__img:not([style]){height:100%!important;}
.ap-hero__img--initials{display:flex;align-items:center;justify-content:center;
	background:var(--ac-surface-2,#2C3A4A);color:var(--ac-text,#FAF9F6);font-size:56px;font-weight:600;letter-spacing:.02em;}
/* Scrim darkens BOTH ends: a light top wash to seat the logo, and a softer
   bottom so the name stays readable without heavily darkening the photo. Kept
   deliberately lighter than before; the logo and name each also carry their own
   text shadow (below) so legibility does not depend on a heavy scrim. */
.ap-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,22,.34) 0,rgba(10,16,22,0) 26%,rgba(10,16,22,0) 52%,rgba(10,16,22,.60) 100%);}
.ap-hero__t{position:absolute;left:20px;right:20px;bottom:16px;}
.ap-hero__t .ap-name{color:#fff;margin:0;font-size:22px;text-shadow:0 1px 6px rgba(0,0,0,.5);}
.ap-hero__t .ap-role{color:rgba(255,255,255,.9);text-shadow:0 1px 5px rgba(0,0,0,.45);}
/* Logo sits in the TOP corner on the SAME side as the alignment; the name is
   at the bottom, so they never collide (one top, one bottom) and "Left" puts
   both to the left, exactly as the control promises. */
.ap-hero__logo{position:absolute;top:15px;margin:0;max-width:40%;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));}
.ap-halign-left  .ap-hero__t{text-align:left;}
.ap-halign-left  .ap-hero__logo{left:18px;right:auto;}
.ap-halign-right .ap-hero__t{text-align:right;}
.ap-halign-right .ap-hero__logo{right:18px;left:auto;}
.ap-halign-center .ap-hero__t{text-align:center;}
.ap-halign-center .ap-hero__logo{left:50%;transform:translateX(-50%);}
.ap-hero__bio{padding:14px 20px 15px;margin:0;}

/* --- Orbit: the avatar sits on the curved limb of a planet, seen from space.
   The lower "ground" is your card surface; the "sky" above the horizon is a
   slightly different shade; and the horizon carries a glowing accent rim that
   blooms up into the sky. Entirely driven by your accent, so you control it. --- */
.ap-head--aurora{padding:0;overflow:hidden;align-items:stretch;}
.ap-orbit{position:relative;height:242px;overflow:hidden;
	background:var(--ac-surface-2,#2C3A4A);}
/* the planet: a large circle filled with the card surface, so the ground reads
   continuously into the body below; only its top arc shows as the horizon. */
.ap-orbit__planet{position:absolute;left:50%;top:170px;width:720px;height:720px;
	transform:translateX(-50%);border-radius:50%;z-index:1;
	background:var(--ac-surface,#243140);
	border-top:2px solid color-mix(in srgb,var(--ac-primary,#FC8D28) 88%,#fff);
	box-shadow:
		0 0 10px 1px color-mix(in srgb,var(--ac-primary,#FC8D28) 85%,transparent),
		0 0 26px 4px color-mix(in srgb,var(--ac-primary,#FC8D28) 55%,transparent),
		0 0 60px 10px color-mix(in srgb,var(--ac-primary,#FC8D28) 28%,transparent);}
.ap-orbitav{position:absolute;left:50%;top:44px;transform:translateX(-50%);
	width:162px;height:162px;z-index:2;margin:0;
	box-shadow:0 0 0 4px var(--ac-surface,#243140),0 6px 18px rgba(0,0,0,.32);}
.ap-orbit__body{background:var(--ac-surface,#243140);padding-top:14px;}
.ap-orbit__logo{margin-top:14px;}

/* --- Overlap: a cover strip (brand gradient, or a cover image if set) with
   the avatar overlapping its edge, details below. LinkedIn-familiar, premium. --- */
.ap-head--overlap{padding:0 20px 22px;align-items:center;overflow:hidden;}
.ap-overlap__cover{width:calc(100% + 40px);margin:0 -20px;height:96px;position:relative;
	background:linear-gradient(120deg,var(--ac-primary,#FC8D28),var(--ac-primary-deep,#E0762A));
	background-size:cover;background-position:center;}
.ap-overlap__cover::after{content:"";position:absolute;inset:0;
	background:radial-gradient(140% 120% at 80% 0,rgba(255,255,255,.2),transparent 60%);}
.ap-overlapav{width:86px;height:86px;margin-top:-46px;position:relative;z-index:2;
	box-shadow:0 0 0 4px var(--ac-surface,#243140),0 6px 16px rgba(0,0,0,.4);}
.ap-overlap__logo{margin-top:12px;}

/* --- Postcard: wide rounded photo, caption beneath --- */
.ap-head--postcard{padding:18px 18px 4px;align-items:stretch;}
.ap-postcard__pic{position:relative;aspect-ratio:3 / 2;border-radius:12px;overflow:hidden;}
.ap-postcard__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ap-postcard__cap{margin-top:13px;text-align:center;}
.ap-postcard__cap .ap-name{margin:0;font-size:19px;}
.ap-halign-left  .ap-postcard__cap{text-align:left;}
.ap-halign-right .ap-postcard__cap{text-align:right;}
.ap-postcard__body{padding:12px 0 2px;}

/* --- Panel: photo fills the top, a crisp accent line, then a solid panel with
   the details and the logo on a floating chip. The photo is 3:2 — the SAME
   shape as the Hero — so it reuses the person's Wide framing exactly. --- */
.ap-head--panel{padding:0;overflow:hidden;align-items:stretch;}
.ap-panel-pic{position:relative;width:100%;aspect-ratio:3 / 2;overflow:hidden;}
.ap-panel-pic img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.ap-panel-line{height:4px;background:linear-gradient(90deg,var(--ac-primary,#FC8D28),var(--ac-primary-deep,#E0762A));}
.ap-panel-body{position:relative;padding:22px 20px 20px;}
/* Logo chip: a centred sticker sitting just above the accent line, with the
   logo filling it (equal padding all round) and centred. The chip is capped to
   the card width so a wide wordmark never spills off the edge; the logo scales
   to fill the chip, up to the Logo size control's height. */
.ap-panel-chip{position:absolute;left:50%;top:0;transform:translate(-50%,-100%);margin-top:-10px;
	background:var(--ac-surface,#243140);padding:11px 16px;border-radius:12px;
	box-shadow:0 6px 18px rgba(0,0,0,.45);display:inline-flex;align-items:center;justify-content:center;
	max-width:calc(100% - 32px);box-sizing:border-box;}
.ap-panel-chip .ap-header-logo{margin:0;display:block;max-width:100%;}

/* --- Chevron on left-aligned tiles (hint that the tile is tappable) --- */
.ap-align-left .ap-tile{position:relative;}
.ap-align-left .ap-tile::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;
	border-right:2px solid currentColor;border-top:2px solid currentColor;
	transform:translateY(-50%) rotate(45deg);opacity:.38;}