/* ==========================================================================
   Softro Child — Strategy Call CTA  (.strategy-call-cta)
   --------------------------------------------------------------------------
   Standalone component. It shares NOTHING with the parent theme's
   `.primary-btn2` styles — the old anchor is removed server-side and this
   markup is emitted in its place (see functions.php → render_content filter).

   Default state  -> ../../refferences/cta-button.png       (portrait + title + "Available now")
   Hover / focus  -> ../../refferences/cta-button-hover.png  (centered "View calendar")

   Author: Chili-House
   ========================================================================== */

.strategy-call-cta {
	/* Tunables */
	--scc-radius: 999px;
	--scc-bg: #ffffff;
	--scc-border: #ececec;
	--scc-title: #0b0b0f;
	--scc-muted: #7c7c85;
	--scc-dot: #16c46a;
	--scc-portrait: 48px;
	--scc-pad-y: 8px;
	--scc-pad-x: 22px;
	--scc-gap: 12px;
	--scc-shadow: 0 6px 16px rgba(17, 17, 26, 0.08), 0 1px 3px rgba(17, 17, 26, 0.06);
	--scc-shadow-hover: 0 14px 30px rgba(17, 17, 26, 0.14), 0 3px 8px rgba(17, 17, 26, 0.08);
	--scc-ring: rgba(11, 11, 15, 0.55);

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--scc-gap);
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	min-height: 44px;                 /* accessible touch target */
	padding: var(--scc-pad-y) var(--scc-pad-x) var(--scc-pad-y) var(--scc-pad-y);
	background: var(--scc-bg);
	border: 1px solid var(--scc-border);
	border-radius: var(--scc-radius);
	box-shadow: var(--scc-shadow);
	text-decoration: none;
	overflow: hidden;                 /* keep faces clipped to the pill */
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

/* ---- Portrait ----------------------------------------------------------- */
.strategy-call-cta__portrait-wrap {
	flex: 0 0 auto;
	display: block;
	width: var(--scc-portrait);
	height: var(--scc-portrait);
	border-radius: 50%;
	overflow: hidden;
	background: #ececf1;              /* placeholder tint before the image paints */
}

.strategy-call-cta__portrait {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;             /* stable box before load -> no layout shift */
	object-fit: cover;
	object-position: center top;
}

/* ---- Default face: title + availability -------------------------------- */
.strategy-call-cta__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	text-align: left;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.strategy-call-cta__text {
	color: var(--scc-title);
	font-family: var(--font-inter, inherit);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.strategy-call-cta__availability {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--scc-muted);
	font-family: var(--font-inter, inherit);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
}

.strategy-call-cta__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--scc-dot);
	box-shadow: 0 0 0 3px rgba(22, 196, 106, 0.16);
}

/* ---- Hover face: centered "View calendar" ------------------------------ */
.strategy-call-cta__hover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	color: var(--scc-title);
	font-family: var(--font-inter, inherit);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ---- Hover & keyboard focus -------------------------------------------- */
.strategy-call-cta:hover,
.strategy-call-cta:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--scc-shadow-hover);
	border-color: #e2e2e8;
}

.strategy-call-cta:hover .strategy-call-cta__portrait-wrap,
.strategy-call-cta:hover .strategy-call-cta__content,
.strategy-call-cta:focus-visible .strategy-call-cta__portrait-wrap,
.strategy-call-cta:focus-visible .strategy-call-cta__content {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
}

.strategy-call-cta:hover .strategy-call-cta__hover,
.strategy-call-cta:focus-visible .strategy-call-cta__hover {
	opacity: 1;
	transform: translateY(0);
}

.strategy-call-cta:focus-visible {
	outline: none;
	box-shadow: var(--scc-shadow-hover), 0 0 0 3px var(--scc-ring);
}

/* The portrait wrap animates opacity; keep the transition on it too. */
.strategy-call-cta__portrait-wrap {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.strategy-call-cta,
	.strategy-call-cta__content,
	.strategy-call-cta__portrait-wrap,
	.strategy-call-cta__hover {
		transition: none;
	}
	.strategy-call-cta:hover,
	.strategy-call-cta:focus-visible {
		transform: none;
	}
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 991px) {
	.strategy-call-cta {
		--scc-portrait: 46px;
	}
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 576px) {
	.strategy-call-cta {
		--scc-portrait: 42px;
		--scc-pad-x: 18px;
		--scc-gap: 10px;
	}
	.strategy-call-cta__text {
		font-size: 14px;
	}
	.strategy-call-cta__availability {
		font-size: 12px;
	}
	.strategy-call-cta__hover {
		font-size: 15px;
	}
}

/* ---- Dark theme (parent ships body.dark) ------------------------------- */
body.dark .strategy-call-cta {
	--scc-bg: #14141a;
	--scc-border: #2a2a33;
	--scc-title: #f5f5f7;
	--scc-muted: #a6a6b0;
	--scc-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
	--scc-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.6);
	--scc-ring: rgba(245, 245, 247, 0.65);
}