/* Alpaca Profiles — public skin (v0.9.2 restyle).
   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;}

/* --- 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-card--identity{animation:none;}
	.ap-tile{transition:none;}
}

/* --- Team index --- */
.ap-team-wrap{
	max-width:960px;margin:20px auto;padding:22px 18px;
	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;
}
.ap-team-head{margin:0 0 16px;}
.ap-team-title{font-size:22px;font-weight:500;color:var(--ac-text,#FAF9F5);margin:0;letter-spacing:-.02em;}
.ap-team-head .ap-rule{margin-top:10px;}
.ap-team-empty{color:var(--ac-text-soft,#9AA8B6);text-align:center;padding:40px;}

.ap-team-filters{display:flex;flex-wrap:wrap;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:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
	justify-content:center;
}
.ap-team-card{
	max-width:260px;width:100%;margin:0 auto;
	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;}

/* ============ 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;
}


/* --- Sidebar header: photo beside left-aligned text --- */
.ap-head--sidebar{align-items:stretch;text-align:left;}
.ap-siderow{display:flex;align-items:center;gap:16px;}
.ap-sideav{
	width:78px;height:78px;border-radius:18px;object-fit:cover;flex-shrink:0;
	display:flex;align-items:center;justify-content:center;
}
.ap-sideav--initials{background:var(--ac-surface-2,#2C3A4A);font-size:24px;font-weight:600;}
.ap-siderow .ap-name{margin-top:0;}
.ap-rule--left{margin-left:0;margin-right:auto;}
.ap-bio--left{max-width:none;text-align:left;}
.ap-header-logo--left{margin:0 0 8px;}




/* --- 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-head--portrait{padding-top:0;overflow:hidden;align-items:center;text-align:center;}
.ap-portraitwrap{
	position:relative;
	width:calc(100% + 40px);margin:0 -20px;
	aspect-ratio:5/6;overflow:hidden;
	background:var(--ac-surface-2,#2C3A4A);
}
.ap-portraitwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ap-portraitbody{padding:14px 0 2px;width:100%;}
/* 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;}
.ap-sideav{display:flex;align-items:center;justify-content:center;}
.ap-sideav img{width:100%;height:100%;object-fit:cover;display:block;}

/* --- 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;
}