/* ==========================================================================
   components.css — Geometric, Glow, Steps, Testimonials, Buttons,
                    Proof Cards, Service Cards, Pricing
   Part of the Romain Recovery theme stylesheet.
   ========================================================================== */

/* ==========================================================================
   6. Geometric Panel (Skewed Section)
   ========================================================================== */

.geometric-section,
.wp-block-group.is-style-geometric-section {
	position: relative;
}

.geometric-section::before,
.wp-block-group.is-style-geometric-section::before {
	content: "";
	position: absolute;
	top: -40px;
	left: 0;
	right: 0;
	height: 80px;
	background: inherit;
	transform: skewY(-2deg);
	z-index: -1;
}

/* ==========================================================================
   7. Accent Glow Effect
   ========================================================================== */

.glow-accent {
	position: relative;
}

.glow-accent::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: radial-gradient(
		ellipse at center,
		rgba(26, 255, 163, 0.15) 0%,
		rgba(26, 255, 163, 0.05) 40%,
		transparent 70%
	);
	z-index: -1;
	pointer-events: none;
}

/* ==========================================================================
   9. Process / Steps Numbers
   ========================================================================== */

.step-number {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: 3.5rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	opacity: 0.8;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ==========================================================================
   10. Testimonial Card
   ========================================================================== */

.testimonial-card {
	background: var(--glass-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--wp--preset--spacing--50);
	position: relative;
}

.testimonial-card::before {
	content: "\201C";
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 4rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	opacity: 0.3;
	position: absolute;
	top: 16px;
	left: 24px;
}

.testimonial-quote {
	font-style: italic;
	color: var(--wp--preset--color--contrast);
	line-height: 1.7;
	margin-bottom: var(--wp--preset--spacing--40);
	position: relative;
	z-index: 1;
}

.testimonial-author {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.testimonial-sport {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* ==========================================================================
   11. Button Enhancements
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 20px var(--accent-35);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0);
}

/* Outline button hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ==========================================================================
   13. Proof / Feature Cards
   ========================================================================== */

.proof-card {
	text-align: center;
	padding: var(--wp--preset--spacing--50);
}

.proof-card-icon {
	font-size: 2.5rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.proof-card-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast);
}

.proof-card-desc {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* ==========================================================================
   14. Service Cards
   ========================================================================== */

.service-card {
	background: var(--glass-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--wp--preset--spacing--50);
	transition: var(--transition-card);
}

.service-card:hover {
	transform: translateY(-4px);
	border-color: var(--accent-50);
}

.service-card-duration {
	display: inline-block;
	background: var(--accent-15);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ==========================================================================
   15. Pricing Table
   ========================================================================== */

.pricing-card {
	background: var(--glass-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--wp--preset--spacing--60);
	text-align: center;
	transition: var(--transition-card);
}

.pricing-card:hover {
	transform: translateY(-4px);
	border-color: var(--accent-50);
}

.pricing-card.featured {
	border-color: var(--wp--preset--color--accent);
	position: relative;
}

.pricing-card.featured::before {
	content: "Populaire";
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 4px 16px;
	border-radius: var(--radius-pill);
}

.pricing-amount {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--accent);
}