/* Colaboratori page styles — scoped to .fi-collab root */

.fi-collab {
	/* Page-level defaults inherited from theme */
}

/* Header section */
.fi-collab .fi-collab-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep);
	font-family: var(--wp--preset--font-family--body);
	display: inline-block;
	margin: 0;
	/* Design box is ~17px tall (line-height normal); inherited global 1.7
	   line-height renders it 20.4px. */
	line-height: normal;
}

.fi-collab .fi-collab-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: clamp(38px, 4.2vw, 56px);
	line-height: 1.1;
	max-width: 22ch;
	text-wrap: pretty;
	margin: 0;
	color: var(--wp--preset--color--ink);
}

/* Hero wrapper: default flex row-gap (24px) PLUS the label/title margin-bottom
   (now zeroed above) double-spaced the eyebrow→H1→intro pitch to ~46px. Design
   pitch is 22px and the group padding-top is 88px (spacing-110 renders 92). */
.fi-collab > div:has(> .fi-collab-label) {
	gap: 22px;
	padding-top: 88px !important;
}

.fi-collab .fi-collab-intro {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	max-width: 58ch;
	text-wrap: pretty;
	margin: 0;
}

/* The header block (label/title/intro) carries an authored padding-bottom
   of 28px on its own wrapper; the grid below already supplies the design's
   56px gap via its own padding-top, so this extra 28px double-spaces the
   intro→grid gap (84px built vs 56px design). Zero it so the grid sits
   flush against the intro paragraph. */
.fi-collab > div:has(> .fi-collab-intro) {
	padding-bottom: 0 !important;
}

/* Grid container for profiles */
.fi-collab .fi-collab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	gap: 18px;
}

/* Individual profile card */
.fi-collab .fi-collab-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Number circle */
.fi-collab .fi-collab-number {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 22px;
	color: var(--wp--preset--color--deep);
	font-weight: 400;
	margin: 0;
	flex-shrink: 0;
}

/* Card role heading (H3) */
.fi-collab .fi-collab-role {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	margin: 0;
	max-width: 100%;
}

/* Card description */
.fi-collab .fi-collab-description {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	margin: 0;
	flex: 1;
	text-wrap: pretty;
	font-family: var(--wp--preset--font-family--body);
}

/* Tag badge */
.fi-collab .fi-collab-tag {
	align-self: flex-start;
	background: var(--wp--preset--color--tint);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep);
	font-family: var(--wp--preset--font-family--body);
	border: none;
	margin: 0;
	display: inline-block;
}

/* CTA section. Design leaves ~110px between the box and the footer; the
   built page collapses to the default 24px block gap, so add the ~86px
   difference as margin-bottom. */
.fi-collab .fi-collab-cta-box {
	border: 1px dashed var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border-radius: 22px;
	padding: clamp(30px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 86px;
}

/* CTA text content */
.fi-collab .fi-collab-cta-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 60ch;
	flex: 1;
}

/* CTA heading (H2) */
.fi-collab .fi-collab-cta-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.2;
	margin: 0;
	color: var(--wp--preset--color--ink);
}

/* CTA paragraph */
.fi-collab .fi-collab-cta-paragraph {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	margin: 0;
	text-wrap: pretty;
	font-family: var(--wp--preset--font-family--body);
}

/* Responsive: CTA section stacks on mobile */
@media (max-width: 767px) {
	.fi-collab .fi-collab-cta-box {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}

	.fi-collab .fi-collab-cta-text {
		width: 100%;
	}

	.fi-collab .fi-collab-cta-box .wp-block-button,
	.fi-collab .fi-collab-cta-box .wp-block-button__link {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* Legal notice styling */
.fi-collab .fi-collab-legal-notice {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin-top: 24px;
	padding: 16px;
	background: var(--wp--preset--color--wash-a);
	border-radius: 8px;
	font-style: italic;
}