/*
 * ccw-fb-page-2-repairs — pattern styles
 *
 * Scope: B2 chip icons (Call/Message/Special), B7 card visual frame,
 * B13 drawer chevrons, gallery layout, mobile rules.
 *
 * Everything else uses WordPress native rendering via the pattern's
 * inline block styles (font-size, color, spacing, etc).
 *
 * Variant: REPAIRS · accent red #0F766E
 */

:root {
	--ccwfb2-primary: #0f766e;
	--ccwfb2-primary-hover: #0d5f58;
	--ccwfb2-accent: #f59e0b;
	--ccwfb2-text-secondary: #65676b;
	--ccwfb2-bg-alt: #fafaf9;
	--ccwfb2-border-soft: #e5e5e5;
	--ccwfb2-radius-card: 8px;
	--ccwfb2-radius-pill: 999px;
}

/* ============================================================
   B2 — Chip icons (::before, never in label, so bees can retype)
   ============================================================ */

.ccwfb2-chip-call .wp-block-button__link,
.ccwfb2-chip-msg .wp-block-button__link,
.ccwfb2-chip-special .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--ccwfb2-radius-pill);
	font-size: 14px;
	font-weight: 600;
	background: #0b1320;
	color: #fff;
	border: 1px solid #0b1320;
}

.ccwfb2-chip-call .wp-block-button__link::before,
.ccwfb2-chip-msg .wp-block-button__link::before,
.ccwfb2-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;
}

.ccwfb2-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>");
}

.ccwfb2-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>");
}

/* Special chip is the conversion CTA — accent fill, dark text */
.ccwfb2-chip-special .wp-block-button__link {
	background: var(--ccwfb2-accent);
	border-color: var(--ccwfb2-accent);
	color: #1a1200;
}
.ccwfb2-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='%231a1200'><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>");
}
.ccwfb2-chip-special .wp-block-button__link:hover {
	background: #d98908;
	color: #1a1200;
}

.ccwfb2-chip-call .wp-block-button__link:hover,
.ccwfb2-chip-msg .wp-block-button__link:hover {
	background: #1f2937;
	color: #fff;
}

/* B2 avatar mobile cap — same pattern as v0.1.3 */
@media (max-width: 600px) {
	.ccwfb2-avatar-col .wp-block-image,
	.ccwfb2-avatar-col .wp-block-image img {
		max-width: 120px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================================
   B4 — CSS-driven separators (no orphan | spans for bees to break)
   ============================================================ */

.ccwfb2-quals__inner .ccwfb2-quals__item + .ccwfb2-quals__item {
	position: relative;
	padding-left: 18px;
}
.ccwfb2-quals__inner .ccwfb2-quals__item + .ccwfb2-quals__item::before {
	content: "|";
	position: absolute;
	left: 0;
	color: var(--ccwfb2-border-soft);
	font-weight: 400;
	pointer-events: none;
}

@media (max-width: 600px) {
	.ccwfb2-quals__inner { font-size: 13px !important; }
	.ccwfb2-quals__inner .ccwfb2-quals__item + .ccwfb2-quals__item { padding-left: 14px; }
}

/* ============================================================
   B5 — Info band leading icon via ::before (bee-edit safe)
   ============================================================ */

.ccwfb2-info::before {
	content: "📍 ";
	margin-right: 4px;
}

/* ============================================================
   B6, B8, B11, B14 — Slot placeholders
   ============================================================ */

.ccwfb2-slot__box {
	border: 2px dashed var(--ccwfb2-border-soft);
	background: var(--ccwfb2-bg-alt);
	color: var(--ccwfb2-text-secondary);
	border-radius: var(--ccwfb2-radius-card);
	padding: 24px;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* B6 video slot — 16:9 */
.ccwfb2-slot--video .ccwfb2-slot__box {
	aspect-ratio: 16 / 9;
	min-height: 0;
}

/* B8 coupon slot — accent left border (conversion zone signal) */
.ccwfb2-slot--coupon .ccwfb2-slot__box {
	border-left: 4px solid var(--ccwfb2-accent);
}

.ccwfb2-slot--reviu .ccwfb2-slot__box,
.ccwfb2-slot--audiplay .ccwfb2-slot__box {
	min-height: 140px;
}

/* ============================================================
   B7 — Services grid cards
   wp:column children rendered as cards
   ============================================================ */

.ccwfb2-card {
	background: #fff;
	border: 1px solid var(--ccwfb2-border-soft);
	border-radius: var(--ccwfb2-radius-card);
	padding: 20px;
	transition: border-color .15s ease;
}
.ccwfb2-card:hover {
	border-color: var(--ccwfb2-primary);
}

/* Force the row to be 3-up on desktop, 2-up tablet, 1-up mobile */
.ccwfb2-services__row {
	gap: 16px;
}
@media (max-width: 900px) {
	.ccwfb2-services__row {
		flex-wrap: wrap;
	}
	.ccwfb2-services__row .wp-block-column {
		flex-basis: calc(50% - 8px) !important;
	}
}
@media (max-width: 600px) {
	.ccwfb2-services__row .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ============================================================
   B9 — Trust row mobile stack
   ============================================================ */

@media (max-width: 600px) {
	.ccwfb2-trust .wp-block-column {
		margin-bottom: 32px;
	}
	.ccwfb2-trust .wp-block-column:last-child {
		margin-bottom: 0;
	}
	.ccwfb2-trust__num {
		font-size: 44px !important;
	}
}

/* ============================================================
   B13 — Band stack drawers
   <details>/<summary> with rotating chevron
   ============================================================ */

.ccwfb2-stack {
	display: grid;
	gap: 12px;
}

.ccwfb2-drawer {
	border: 1px solid var(--ccwfb2-border-soft);
	border-radius: var(--ccwfb2-radius-card);
	background: #fff;
	overflow: hidden;
}

.ccwfb2-drawer > summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ccwfb2-drawer > summary::-webkit-details-marker { display: none; }
.ccwfb2-drawer > summary::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ccwfb2-text-secondary);
	border-bottom: 2px solid var(--ccwfb2-text-secondary);
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-right: 4px;
}
.ccwfb2-drawer[open] > summary::after {
	transform: rotate(-135deg);
}
.ccwfb2-drawer__body {
	padding: 20px;
	font-size: 16px;
	background: var(--ccwfb2-bg-alt);
	border-top: 1px solid var(--ccwfb2-border-soft);
	line-height: 1.55;
}

.ccwfb2-hours {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.ccwfb2-hours td {
	padding: 6px 0;
	border-bottom: 1px solid var(--ccwfb2-border-soft);
}
.ccwfb2-hours td:last-child {
	text-align: right;
	color: var(--ccwfb2-text-secondary);
}
.ccwfb2-hours tr:last-child td { border-bottom: none; }

.ccwfb2-note {
	margin-top: 12px;
	font-size: 14px;
	color: var(--ccwfb2-text-secondary);
}

.ccwfb2-qr {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.ccwfb2-qr__img {
	width: 200px;
	height: 200px;
	border: 1px solid var(--ccwfb2-border-soft);
	border-radius: 6px;
}

.ccwfb2-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.ccwfb2-gallery__item {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--ccwfb2-border-soft);
	border-radius: 6px;
}
.ccwfb2-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccwfb2-map {
	height: 220px;
	border: 2px dashed var(--ccwfb2-border-soft);
	background: var(--ccwfb2-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--ccwfb2-text-secondary);
	border-radius: 6px;
}

@media (max-width: 600px) {
	.ccwfb2-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   B12 — Conclusion link colour (matches brand)
   ============================================================ */

.ccwfb2-conclusion a {
	color: var(--ccwfb2-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ccwfb2-conclusion a:hover {
	color: var(--ccwfb2-primary-hover);
}