/*
 * ccw-fb-page-1 — pattern styles
 *
 * Scope: the three chip buttons in B2 (icon-before-label), and
 * a mobile size-cap on the B2 avatar so it doesn't fill the
 * full column width when wp:columns stacks on phones.
 *
 * Hero cover, Hero buttons, name, stats, bio and role tag all
 * use WordPress native defaults — no styling here.
 */

/* ---- B2 chip icons ---- */

.ccwfb-chip-call .wp-block-button__link,
.ccwfb-chip-msg .wp-block-button__link,
.ccwfb-chip-special .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ccwfb-chip-call .wp-block-button__link::before,
.ccwfb-chip-msg .wp-block-button__link::before,
.ccwfb-chip-special .wp-block-button__link::before {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.ccwfb-chip-call .wp-block-button__link::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1l-2.2 2.2z'/></svg>");
}

.ccwfb-chip-msg .wp-block-button__link::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 2C6.5 2 2 6.2 2 11.3c0 2.7 1.3 5.1 3.4 6.8V22l3.1-1.7c1.1.3 2.3.5 3.5.5 5.5 0 10-4.2 10-9.5S17.5 2 12 2zm1 12.8-2.5-2.7-4.9 2.7 5.4-5.7 2.6 2.7 4.8-2.7-5.4 5.7z'/></svg>");
}

.ccwfb-chip-special .wp-block-button__link::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 16.8l-6.2 4.5 2.4-7.4L2 9.4h7.6z'/></svg>");
}

/* ---- B2 avatar mobile size cap ---- */
/* Desktop: column is 160px wide, image fills it naturally.
   Mobile (<=600px, when wp:columns stacks): image would fill
   the full column. Clamp it so the logo/avatar stays reasonable. */
@media (max-width: 600px) {
	.ccwfb-avatar-col .wp-block-image,
	.ccwfb-avatar-col .wp-block-image img {
		max-width: 120px;
		height: auto;
	}
}