/*
 * IncubeSocial — About / Portfolio page styles.
 * Scoped to the .about-portfolio template only — reads tokens from design-tokens.css,
 * never redefines them. Mobile-first. Signature gradient reserved for small accents
 * (accent rule, stat underline, CTA card background) — never a large flat surface fill.
 */

.about-portfolio .wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 1.5rem;
}

/* ---------- Hero ---------- */
.ap-hero {
	padding-block: var(--section-pad-lg) var(--section-pad-sm);
	position: relative;
}

.ap-hero .eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-purple-primary);
	background: rgba(108, 58, 237, 0.08);
	border-radius: 999px;
	padding: 0.4em 1em;
	margin-bottom: 1.25rem;
}

.ap-hero h1 {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	max-width: 18ch;
	margin-bottom: 1.25rem;
}

.ap-hero .lede {
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	max-width: 58ch;
	color: var(--color-navy-dark);
	opacity: 0.82;
}

.ap-hero .accent-rule {
	width: 4.5rem;
	height: 0.3rem;
	border-radius: 999px;
	background: var(--gradient-signature);
	margin-bottom: 1.75rem;
}

/* ---------- Story section ---------- */
.ap-story {
	padding-block: var(--section-pad-sm);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.ap-story .story-copy h2 {
	font-size: clamp(1.625rem, 3.5vw, 2.25rem);
	margin-bottom: 1rem;
}

.ap-story .story-copy p {
	margin: 0 0 1.125rem;
	max-width: 62ch;
}

.ap-story .story-copy p:last-child {
	margin-bottom: 0;
}

.ap-stat-rail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	align-content: start;
}

.ap-stat {
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem 1.25rem;
	box-shadow: 0 1px 2px rgba(13, 19, 43, 0.06), 0 8px 24px -12px rgba(13, 19, 43, 0.12);
}

.ap-stat .num {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.875rem;
	line-height: 1;
	margin-bottom: 0.375rem;
	/* Solid navy, not gradient-clipped text: the signature gradient's pink/orange/
	   blue stops fall as low as 2.3:1 on white, well under WCAG AA. Gradient stays
	   reserved for the underline accent instead — see .num-underline below. */
	color: var(--color-navy-dark);
}

.ap-stat .num-underline {
	display: block;
	width: 1.75rem;
	height: 0.2rem;
	border-radius: 999px;
	background: var(--gradient-signature);
	margin-bottom: 0.5rem;
}

.ap-stat .label {
	font-size: 0.8125rem;
	color: var(--color-navy-dark);
	opacity: 0.7;
}

/* ---------- Team section ---------- */
.ap-team {
	padding-block: var(--section-pad-sm);
	background: #fff;
	border-radius: 1.5rem;
	margin-block: var(--section-pad-sm);
}

.ap-team .inner {
	padding: clamp(2rem, 5vw, 3.5rem);
}

.ap-team .section-head {
	max-width: 52ch;
	margin-bottom: 2.5rem;
}

.ap-team .section-head h2 {
	font-size: clamp(1.625rem, 3.5vw, 2.25rem);
	margin-bottom: 0.75rem;
}

.ap-team .section-head p {
	opacity: 0.78;
}

.ap-team-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

.ap-team-card {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.ap-avatar {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 2rem;
	color: #fff;
}

.ap-team-card h3 {
	font-size: 1.125rem;
	margin-bottom: 0.125rem;
}

.ap-team-card .role {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-purple-primary);
	margin-bottom: 0.5rem;
	display: block;
}

.ap-team-card .bio {
	font-size: 0.9375rem;
	opacity: 0.78;
	margin: 0;
}

/* ---------- Portfolio grid ---------- */
.ap-portfolio {
	padding-block: var(--section-pad-sm);
}

.ap-portfolio .section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.ap-portfolio .section-head h2 {
	font-size: clamp(1.625rem, 3.5vw, 2.25rem);
	margin-bottom: 0.5rem;
	max-width: 20ch;
}

.ap-portfolio .section-head p {
	max-width: 46ch;
	opacity: 0.78;
	margin: 0;
}

.placeholder-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* Navy text (not orange) on this light tint — orange-on-white fails WCAG AA (2.4:1). */
	color: var(--color-navy-dark);
	background: rgba(255, 138, 0, 0.12);
	border: 1px dashed var(--color-orange-accent);
	border-radius: 0.5rem;
	padding: 0.5rem 0.875rem;
	margin-bottom: 1.5rem;
}

/* Feedbird-style filter tabs — one active state at a time, JS toggles
   .is-active + aria-selected and shows/hides .ap-grid .grid-item by its
   data-type/data-industry attributes. Plain buttons (not real WP taxonomy
   query filtering) since these are placeholder tiles, not real posts —
   swap to a real taxonomy-driven filter once actual portfolio content
   exists to filter. */
.ap-filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 2rem;
}

.ap-filter-tab {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-navy-dark);
	background: #fff;
	border: 1.5px solid rgba(13, 19, 43, 0.12);
	border-radius: 999px;
	padding: 0.5rem 1.125rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ap-filter-tab:hover {
	border-color: var(--color-purple-primary);
}

.ap-filter-tab.is-active {
	color: #fff;
	background: var(--color-navy-dark);
	border-color: var(--color-navy-dark);
}

.ap-grid-empty {
	text-align: center;
	color: var(--color-navy-dark);
	opacity: 0.65;
	padding: 3rem 1rem;
	margin: 0;
}

.ap-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.grid-item {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	isolation: isolate;
}

.grid-item .swatch {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grid-item .swatch::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 19, 43, 0) 40%, rgba(13, 19, 43, 0.78) 100%);
}

/* Icon+gradient badge — legacy placeholder treatment, still used as a
   fallback style definition (no tiles currently render it live; all 8
   grid tiles now use real media — see .swatch--image and .swatch--video
   below), kept in case a future tile reverts to a placeholder state. */
.grid-item .swatch > .service-thumbnail-badge {
	position: relative;
	z-index: 1;
	box-shadow: 0 8px 24px rgba(13, 19, 43, 0.28);
}

.service-thumbnail-badge--lg {
	width: 88px;
	height: 88px;
	border-radius: 22px;
}

.service-thumbnail-badge--lg svg {
	width: 42px;
	height: 42px;
}

/* Video tile (real stock footage, not a CSS gradient swatch) — same
   absolute-fill/scrim treatment as the gradient swatches so it slots into
   the grid without a visual seam. */
.swatch--video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Image tile (AI-generated EXAMPLE imagery via Canva, brand-matched —
   see the template's own doc comment) — same absolute-fill/scrim
   treatment as the video tile so it slots into the grid seamlessly. */
.swatch--image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swatch__play {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	color: #fff;
	background: rgba(13, 19, 43, 0.55);
	border-radius: 50%;
	backdrop-filter: blur(2px);
}

/* Filter-hidden tiles — JS toggles this class rather than removing nodes,
   so filtering never touches the DOM structure filter-tab focus depends on. */
.grid-item.is-filtered-out {
	display: none;
}

.grid-item .tile-body {
	padding: 1.25rem;
	color: #fff;
}

.grid-item .tile-tag {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0.375rem;
	padding: 0.25em 0.6em;
	margin-bottom: 0.625rem;
	backdrop-filter: blur(2px);
}

.grid-item h3 {
	color: #fff;
	font-size: 1.0625rem;
	margin-bottom: 0.25rem;
}

.grid-item .tile-meta {
	font-size: 0.8125rem;
	opacity: 0.85;
	margin: 0;
}

.grid-item.span-2 {
	grid-column: span 1;
}

/* ---------- CTA ---------- */
.ap-cta {
	padding-block: var(--section-pad-lg);
	text-align: center;
}

.ap-cta-card {
	/* Navy scrim (55%) over the signature gradient — raw gradient fails WCAG AA for
	   white text on its pink/orange/blue stops (as low as 2.3:1). The scrim brings
	   every stop above 7.3:1 while keeping the gradient identity visible. */
	background:
		linear-gradient(rgba(13, 19, 43, 0.55), rgba(13, 19, 43, 0.55)),
		var(--gradient-signature);
	border-radius: 1.5rem;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
	color: #fff;
}

.ap-cta-card h2 {
	color: #fff;
	font-size: clamp(1.625rem, 4vw, 2.5rem);
	max-width: 22ch;
	margin: 0 auto 0.875rem;
}

.ap-cta-card p {
	max-width: 48ch;
	margin: 0 auto 1.75rem;
	opacity: 0.95;
}

.ap-cta-card .button,
.ap-cta-card a.button {
	background: #fff;
	color: var(--color-navy-dark);
	font-weight: 700;
}

.ap-cta-card .button:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
	.ap-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ap-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.ap-story {
		grid-template-columns: 3fr 2fr;
		gap: 3.5rem;
		align-items: center;
	}

	.ap-team-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ap-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.grid-item.span-2 {
		grid-column: span 2;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.grid-item {
		transition: transform 0.35s ease;
	}

	.grid-item:hover {
		transform: translateY(-4px);
	}
}